Cara Memasang Widget Label atau Kategori Postingan

Widget label atau kategori adalah kumpulan link yang disatukan berdasarkan kesamaan tema atau topik. Dengan widget label atau kategori ini, memberikan pilihan kepada pengunjung untuk dapat menentukan tema atau topik mana yang ingin dibacanya, dan biasanya antara satu judul dengan judul yang lain dalam satu label atau kategoti saling berkaitan.

Sebenarnya kita telah membuat widget label atau kategori ini pada postingan Cara Membuat Menubar dengan Kotak Pencarian kemarin. Tetapi kali ini kita akan memasang widget label atau kategori ini pada sidebar bukan menubar. Bagi yang ingin memasangnya, ikuti langkah-langkah berikut ini.

Cara Memasang Widget Label atau Kategori Postingan 

• Pertama login ke blogger
• Pilih menu Tata Letak
• Klik Tambahkan Gadget
• Pada halaman baru yang terbuka pilih Label
• Setelah itu akan muncul halaman konfigurasikan label, atur sesuai dengan selera masing-masing
• Terakhir klik simpan dan lihat hasilnya.

Sampai di sini widget label atau kategori ini telah selesai dibuat, tetapi tampilannya sangat sederhana. Jika ingin merubah tampilan widget label atau kategori lebih keren dan unik, berikut adalah salah satu contoh tampilan custom widget label atau kategori yang mungkin bisa menjadi salah satu pilihan.

Caranya adalah sebagai berikut

• Pilih menu Template
• Klik Edit HTML
• Kemudian cari kode ]]></b:skin>
• Copy kode di bawah ini dan letakkan tepat di atas kode ]]></b:skin>

.label-size {

position: relative;

float:left

}

.label-size::before {

content: ' ';width: 0;

height: 0;top: 2px;

position: absolute;

right: -4px;

border: 14px solid transparent;

border-left-color: #DDD

}

.label-size a{

float: left;

font-size: 14px;

padding: 5px 10px;

background: white;

margin: 3px 24px 15px 1px;

position: relative;

width:108px;

outline: 1px solid #DDD;

color: #222

}

.label-size a::before {

content: ' ';

width: 0;

height: 0;

top: 0;

position: absolute;

right: -26px;

border: 13px solid transparent;

border-left-color: white

}

.label-size a::after {

content: ' ';

position: absolute;

background: #F6F6F6;

border-radius: 10px;

height: 10px;

right: -1px;top: 7px;

width: 10px;

border: 1px solid #DDD

}

.label-size a:hover {

color:#5D73B5; !important

}

• Terakhir simpan.

Demikianlah cara memasang widget label atau kategori postingan ini, mudah-mudahan ada manfaatnya dan selamat mencoba.