Show Hide Counter Box Widget Label Valid Html5

Show Hide Counter Box Widget Label Valid Html5

Salam blogging buat sobat semua. Pada artikel perdana ini saya akan berbagi tentang cara memodifikasi antar tampilan nama label dalam blog serta counter boxnya yang akan terlihat jika label tertentu terkena kursor, dan akan sembunyi lagi jika kursor menjauh dan pergi. Widget label dalam tutorial ini tidak menggunakan JavaScript atau jQuery. Widget label ini dimodifikasi dengan CSS3 dan merubah sedikit struktur widgetnya.

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:&amp;quot;&amp;quot;;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:&amp;#39;&amp;#39;;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 setelah kode di atas, kode <ul> ganti dengan kode di bawah ini

<ul class=’label-show’>

Selanjutnya, ganti kode di bawah ini (tapi 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.