Cara Merubah Tampilan Blog Archive ( Data Blog ) Menjadi Lebih Keren






Haii... selamat datang di kupihitam blog, sekarang kita akan membahas membuat tampilan data blog biar terlihat bagus/keren, yuk simak di bawah ini:


  1. Masuk Dasboard Blogger
  2. Pilih Tata Letak
  3. Tambahkan Gadget
  4. Pilih Arsip Blog
  5. Sesuaikan Model
  6. Pilih Terapkan
Jika sudah selesai, silahkan Kembali ke Dasboard, kemudian pilih Tema, dan Paste kode dibawah ini di antara <b:skin> dan </b:skin>

CODE CSS BLOG ARCHIVE
#ArchiveList ul > li > a.post-count-link {
    font-size:18px;
    width:100%;
    margin:0;
    padding:0 15px;
    line-height:38px;
    background-color:#f6f6f6;
    box-sizing:border-box;
    letter-spacing:1px
}
#ArchiveList ul ul li a.post-count-link {
    width:auto;
    margin:0 5px;
    padding:8px 25px;
    background:transparent;
    text-transform:uppercase;
    font:12px merriweather sans;
    font-weight:700
}
#ArchiveList .zippy {
    visibility:hidden
}
#ArchiveList ul li a.toggle {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    display:block;
    height:38px;
    z-index:5
}
#ArchiveList ul ul li a.toggle {
    position:absolute;
    top:0;
    left:0;
    width:30px;
    height:24px;
    display:block;
    z-index:0
}
#ArchiveList .toggle {
    position:relative
}
#ArchiveList ul ul .zippy {
    color:#fff;
    visibility:visible;
    text-shadow:none
}
#ArchiveList ul ul .zippy:before {
    content:'\f105';
    font-family:FontAwesome;
    position:absolute;
    top:3px;
    left:12px;
    padding:4px;
    line-height:1;
    font-size:12px;
    color:#8C8C8C
}
#ArchiveList ul ul .toggle-open:before {
    content:'\f107';
    font-family:FontAwesome;
    position:absolute;
    top:3px;
    left:10px
}
#ArchiveList ul li {
    padding:0!important;
    text-indent:0!important;
    margin:0!important;
    position:relative;
    background:none
}
#ArchiveList ul .post-count-link {
    padding:10px 0;
    display:inline-block;
    margin:0 5px
}
#ArchiveList ul ul .posts li {
    padding:0 5px 5px!important;
    margin:0 5px 5px 20px !important;
    text-transform:none;
    border-bottom:1px solid #f0f0f0;
    font-size:12px
}
#ArchiveList ul ul .posts li:before {
    content:'\f0da';
    font-family:FontAwesome;
    padding-right:5px;
}
#ArchiveList ul {
    margin:0 0 2px!important
}
span.post-count {
    position:absolute;
    right:7px;
    top:7px;
    color:#666;
    background:#fff;
    padding:5px 5px 0;
    width:24px;
    height:24px;
    border-radius:3px;
    border:1px solid #ffc1c1;
    font:10px arial;
    vertical-align:middle;
    text-align:center
}

Kemudian klik Pertinjauan, jika tidak ada masalah pada saat ditinjau, silahkan Simpan Tema.

0 komentar