Cara Membuat Widget Label Conter Box Valid CSS 3 – Tutorial kali ini saya dapatkan dari blog bungfrengki tentang cara membuat Widget Label Conter Box. Saya tertarik dengan tutorial yang ia buat mengenai membuat label di blog mengunakan CSS 3 enteng di gunakan di blog atau pun website. Widget Label Conter Box adlah sebuah widget yang menampilkan kategori label yang ada di sebuah blog atau website dengan menampilkan jumlah artikel yang di berikan sebuah label tersebut. Saya sudah mencobanya waktu lalu menggunakan label ini, hasilnya sangat bagus dan responsive di blog dan juga tidak memberatkan loading blog.
Bagi sobat yang tertarik untuk memasangnya tau tertarik untuk mempelajari nya silahkan simak cara membuatnya berikut ini.
1. buka Blog Sobat > masuk menu “ Tata Letak” > Tambah Widget baru > “”Label” >
2. setelah menambahkan Widget label bawaan blog di atas, sekarang tinggal menambahkan kode CSSnya untuk mendisain tampilan dari label tersebut dengan cara > Salin kode di bawah ini dan letakkan di atas kode </style>
/* modifikasi label */
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}
3. temukan kode di bawah ini.
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
Setelah ketemu ganti kode tersebut dengan kode di bawah 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>
4. Simpan Template dan Lihat hasilnya.
NB : bagi sobat yang mendapatkan masalah label kode tidak mau tampil dengan sempurna itu berarti ada Label keterangan yang harus sobat pasang.Cari kode <div expr:class='"widget-content " + data:display + "-label-widget-content"'> Lalu perhatikan 2 baris setelah kode di atas sobat akan menemukan kode yang bertuliskan <ul>. Ganti kode tersebut dengan kode ini. <ul Class=’ label-show’>.
Demikianlah tutorial mengenai Cara Membuat Widget Label Conter Box Valid CSS 3, yang harus di ketahui. jika sobat ada masalah atau sudah berhasil jangan lupa untuk mengisi Kotak komentar di bawah ini. Semoga artikel ini dapat menjadi ilmu yang bermanfaat.
http://www.bungfrangki.com/2015/03/modifikasi-widet-label-dengan-counter-box-show-hide.html
http://www.bungfrangki.com/2015/03/modifikasi-widet-label-dengan-counter-box-show-hide.html
0 Komentar