Widget kategori ini sangat penting untuk dimiliki oleh setiap blog, dikarenakan dengan widget ini akan menampilkan label atau kategori yang telah kita buat. Widget kategori juga berguna untuk pengunjung agar pengunjung mudah untuk menavigasi kategori yang mereka ingin lihat.
Widget ini dibuat dengan tampilan sederhana dan kalian tidak perlu khawatir akan kecepatan loading blog kalian, karena widget sangatlah ringan. Widget ini juga sudah saya terapkan di blog saya, maka untuk live demonya silahkan kalian lihat widget di sidebar blog saya.
Nah jika kalian mau memasang widget kategori atau label seperti yang ada di sidebar blog saya, kalian tinggal ikuti langkah-langkah dibawah ini:
Memasang Widget Label Keren di Sidebar Blog
1. Login ke blogger > Buka bagian Tata Letak > Lalu tambah widget di sidebar blog dengan cara klik tulisan "Tambah Gadget" dan pilih widget label.
2. Aturlah konfigurasi widget tabel seperti dibawah ini.
 |
| Klik untuk memperbesar |
3. (optional) Jika di template yang kalian pakai sudah ada css widget label maka hapus lah, dan ganti kode tersebut dengan kode yang ada di tahap selanjutnya
4. Salin kode css dibawah ini sebelum kode ]]></b:skin> atau </style>
4. Salin kode css dibawah ini sebelum kode ]]></b:skin> atau </style>
/* Label Made by Athharkautsar.com with love */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1}
.label-size a{display: block;vertical-align: middle;-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);box-shadow: 0 0 1px transparent;position: relative;-webkit-transition-property: color;transition-property: color;-webkit-transition-duration: 0.5s;transition-duration: 0.5s;font-size:14px;padding:10px}
.label-size a:before {content: "";position: absolute;z-index: -1;top: 0;left: 0;right: 0;bottom: 0;background: #f34c3b;-webkit-transform: scaleX(0);transform: scaleX(0);-webkit-transform-origin: 0 50%;transform-origin: 0 50%;-webkit-transition-property: transform;transition-property: transform;-webkit-transition-duration: 0.5s;transition-duration: 0.5s;-webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;}
.label-size a:hover, .label-size a:focus, .label-size a:active {color: white;}
.label-size a:hover:before, .label-size a:focus:before, .label-size a:active:before {-webkit-transform: scaleX(1);transform: scaleX(1);-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);}Demikian tutorial tentang Memasang widget kategori atau label dengan efek hover keren, sampai berjumpa lagi di artikel selanjutnya.
