Cara Membuat Tampilan Widget Label Pada Blog Lebih Menarik

Berikut ini adalah cara membuat tampilan label pada blog agar terlihat lebih menarik, elegant, dan keren di bandingkan dengan tampilan bawaan dari blogger itu sendiri. Sebelum nya saya pernah membahas tentang Cara membuat Recent post simple, keren, elegant dengan thumbnails  dan pada kesempatan ini saya akan  berbagi tutorial membuat widget label agar lebih menarik dan lebih profesional.

Fungsi dari membuat widget label pada blog itu sendiri adalah agar pengunjung bisa melihat atau menemukan topik yang sesuai dengan yang mereka cari atau tuju, dengan cara meng'klik label pada halaman blog atau web yang mereka kunjungi, karena apabila pengunjung meng'klik label pada blog/web kita, misal kan tutorial blog..maka yang keluar pada halaman tersebut adalah semua tentang tutorial blog/web.

Singkat dari saya, dan langsung saja saya tunjukan bagaimana cara memasang nya bisa sobat ikuti step by step ( dengan seksama ), untuk menghindari terjadinya error atau malah tidak work pada blog sobat semua.

Berikut tutorial nya:

Menambahkan Widget Label.

• Untuk menambahkan widget buka Blogger dashboard → Tata Letak → Tambah gadget → Label Widget. 

Note : Tambahkan label daftar gaya saja jangan menambahkan label cloud.

Lanjut, Menyesuaikan Widget

• Buka Blogger dashboard → Editor Template → Html Editor

Sekarang tambahkan kode css di bawah ini dan letakan sebelum kode ]]></b:skin> , gunakan ctrl + Funtuk mempercepat pencarian.

.Label {display: block;width: 100%;background: #FDFDFD;margin: 0 auto;padding: 10px;}
.Label h2 {display: table;margin: 0 auto 5%;line-height: 1.5em;font-style: normal;font-size: 22px;letter-spacing: 0.5px;padding-bottom: 0%;border-bottom:1px solid #C4C4C4;text-align: center;font-weight: normal;color: #5A5A5A;}
.Label .widget-content {
padding: 5px 5px;
margin: 0;
font-family: 'Arial', arial, serif;
}
.Label ul {list-style-type: none;margin: 0 0px;padding: 0;
}
.Label ul li {float: left;width: 42.5%;margin: 0 0 5px 5px;color: #616060;text-decoration: none;padding: 6px;display: block;text-align: left;font-family: 'Arial', arial, serif;text-indent: 0px;font-size: 13px;background: #FFF;border: 1px solid #EFEFEF;text-transform: capitalize;border-radius: 1px;-moz-border-radius: 1px;-webkit-border-radius: 1px;}

Kemudian lihat tampilan blog anda, pastinya tampilan widget blog sudah berubah.

Sekian dari saya, semoga bisa membatu dan bermanfaat ya,.
SALAM Blogger.