Mmbuat tampilan label blog terlihat keren - Admin membuat postingan tentang blog semata mata karena ingin mengingat modifikasi apa saja yang telah admin terapkan pada blog asis10.com, dengan cara ini pula admin nanti tidak kesulitan saat ingin memodifikasi ulang atau mengembalikan themplate blog ketampilan semua, dan pada kali ini admin akan bagikan kepada kamu yang doyan ngeblog dengan tampilan yang keren keren. Melanjuttkan artikel sebelumnya kali ini kita belajar membuat label blog terlihat keren, label blog merupakan menu yang mampu mengelompokan postingan yang ada diblog, misal label Blogspot membahas tentang ngeblog, label VBA membahas tentang Visual Basic dan label Formula membahas tentang Rumus exel

Baca : Cara membuat bagian postingan tampil disidebar

Cara Mudah Menambahkan Tombol Pin It di Gambar

Kali ini kode CSS untuk modifikasi label blog terlihat keren saya ambil dari blog yang keren pula, blog bung Frangki, tamplan thempaltenya keren silahkan cek artikel aslinya disini, atau lihat langkah langkahnya dibawah ini :

Tambahkan widget label pada blog sobat, pilih pengaturnya >Semua label > ALfabetik > Daftar kemudian simpan, lalu pergi kemu Themplate > edit HTML

Karena menggunakan kode CSS jadi kamu perlu menambahkan kode CSS sebelum kode penutup ini ]]></b:skin>  atau sebelum kode penutup ini </style>, silahkan ambil kode CSS Membuat tampilan label blog terlihat keren dibawah ini

/* membuat tampilan label blog terlihat keren*/
ul .label-show {margin:0 auto;padding:0}
.label-show{list-style:none}
.label-show:before,.label-show:after{content:"";display:table}
.label-show:after{clear:both}
.label-show li{position:relative;float:left;margin:0 12px 8px 0}
.label-show li:active{margin-top:1px;margin-bottom:7px}
.label-show li:after{content:'';z-index:3;position:absolute;top:10px;right:-2px;width:5px;height:6px;opacity:.95;background:#66be92;border-radius:3px 0 0 3px}
.label-show a,.label-show span{display:block;box-sizing:border-box}
.label-show a{height:26px;font-size:13px;color:#000;border-radius:5px 0 0 5px;background:#efece9;border:1px solid #fafafa;box-shadow:0 0 3px rgba(0,0,0,.4);padding:3px 8px}
.label-show a:hover span{max-width:40px;padding:0 7px 0 6px}
.label-show span{position:absolute;top:0;left:100%;z-index:2;overflow:hidden;max-width:0;height:26px;line-height:23px;opacity:.95;color:#fff;text-shadow:0 -1px rgba(0,0,0,0.3);border:1px solid #66be92;border-radius:0 3px 3px 0;background-color:#66be92;transition:all .3s ease-out;padding:0 0 0 2px}

Temukan kode widget label yang baru ditambahkan tadi, kodenya kira kira seperti ini <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'> atau seperti ini <div expr:class='"widget-content " + data:display + "-label-widget-content"'> , jika ketemu maka dibawahya akan ada kode <ul> ganti kode <ul> ini menjadi

Membuat tampilan label blog terlihat keren

<ul class='label-show'>

Cari kembli masih kode Label, temukan kode ini <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> lalu ganti dengan kode ini
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/><span class='label-count' dir='ltr'>(<data:label.count/>)</span></a>

Untuk demo kamu bisa lihat gambar diatas, save themplate kamu dan silahkan dilihat sendiri hasilnya

Demikianlah cara Membuat tampilan label blog terlihat keren, semoga bermanfaat
No comments