Haii... selamat datang di kupihitam blog, sekarang kita akan membahas membuat tampilan data blog biar terlihat bagus/keren, yuk simak di bawah ini:
- Masuk Dasboard Blogger
- Pilih Tata Letak
- Tambahkan Gadget
- Pilih Arsip Blog
- Sesuaikan Model
- 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 Response to "Cara Merubah Tampilan Blog Archive ( Data Blog ) Menjadi Lebih Keren"
Post a Comment