Counter Box Widget Label Blog Minimalis

Counter Box Widget Label Blog Minimalis

Salam blogging buat sobat semua. Pada artikel kali ini saya akan berbagi tentang cara memodifikasi widget dengan tampilan nama label dalam blog serta counter boxnya yang sedikit di beri sentuhan effects slide show, Yang nantinya akan terlihat jika label tertentu terbelay cantik oleh kursor, dan akan sembunyi lagi dengan manis apabila kursor menjauh dan pergi. Widget label dalam tutorial kali ini tidak menggunakan JavaScript atau jQuery. Widget label ini dimodifikasi hanya di bubuhi dengan ramuan CSS3 serta racikan Html agar tidak terlalu memakan load blog, dan meminimalis mungkin pada penempatanya, kurang lebih seperti gambar di bawah ini model contoh tampilan widget labelnya.

DEMO

Sebelumnya sudah saya share : Modifikasi Widget Label Blogger

Pada dasar nya widget label blogger sama, namun dengan trik ini sedikit saya modifikasi agar tampilanya tidak bosan untuk di pandang. Seperti contoh gambar postingan kurang lebih tampilanya. Baik bagi anda yang mau mencoba silahkan simak tutorial cara pemasanganya pada blog anda. Pertama seperti biasa masuk blog anda kemudian pilih template, lalu pilih edite template. Cari kode : </style> dan masukan kode CSS di bawah ini tepat diatas kode </style>

/* counter box 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}

Selanjutnya cari kode dibawah ini :

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

Atau yang ini :

<div expr:class='"widget-content " + data:display + "-label-widget-content"'>

Coba Perhatikan 2 baris kode yang diatas, geser kebawah cari kode <ul> posisi dibawahnya kode yang diatas, ganti dengan kode yang di bawah ini :

<ul class='label-show'>

Selanjutnya, ganti kode di bawah ini (menggantinya pada urutan kode yang pertama saja)

<a expr:dir='data:blog.languageDirection' 
expr:href='data:label.url'><data:label.name/></a>

Ganti kode diatas dengan kodedi 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>

Jika semuanya sudah terpasang sesuai tutorial diatas, selanjutnya save template anda. Dan cobalah buka blog anda, jika belum berhasil ulangi dengan teliti cara pemasangan Kode CSS dan Kode Html pada artikel ini. Sekian semoga yang saya publikasikan ini bisa bermanfaat. Selamat mencoba.