Cara Memperindah Tampilan Widget Label Di Blog Dengan Box Style

Bagikan ke Google+Tambahkan ke DeliciousTweet dong..Share ke FacebookSubmit ke StumbleUponKirim ke Digg

Tidak sedikit blog di Indonesia dan blog di negara-negara lain yang memasang widget label di blog mereka. Mereka memasang widget label di blog untuk mempermudah pengunjung di dalam mencari artikel atau posting yang masih memiliki topik atau bahasan yang sama.

Seperti yang sobat blogger ketahui, ada dua bentuk widget label yaitu widget label dengan tampilan List dan widget label dengan tampilan Cloud. Kedua tampilan label tersebut, memiliki bentuk yang indah. Walaupun widget label memiliki tampilan yang indah dan menarik, sekarang saya akan berbagi tutorial blogspot kepada sobat blogger tentang bagaimana cara memperindah tampilan label yang sudah indah menjadi lebih indah (Waduh... Jadi bingung ini, masak kita mau memperindah barang yang sudah indah menjadi lebih indah. Ngawur ini!!!).

Silahkan perhatikan gambar di bawah ini. Dari gambar ini, sobat blogger akan melihat beda tampilan widget label sebelum dan setelah di modifikasi.

Bagaimana tampilan widget label tesebut setelah dibuatkan background menggunakan gambar? Keren kan? Nah... Untuk membuat widget label dengan tampilan kotak-kotak seperti itu, sobat blogger tidak perlu edit template atau mengobrak-abrik kode HTML template sobat.

---

Cara Memasang Brick Atau Box Style Pada Label Blog

---

Langkah Pertama
Pertama, sobat blogger mesti memasang widget label terlebih dahulu. Caranya?

1. Sign In di blogger.com
2. Pada Menu drop down, pilih layout dan klik Add a gadget
3. Tarik Scrolling menu, sampai sobat blogger menemukan widget Labels.

4. Kalau sobat blogger sudah menemukan widget label, langsung saja pasang widget tersebut.
5. Setting Widget Label sobat sehingga tampak seperti gambar di bawah ini!

Langakah Kedua

• Klik Template dan klik tombol costumize untuk mengunjungi laman Blogger Template Designer
• Klik Advanced dan pilih Add CSS

• Copy Paste kode berikut pada kolom yang tersedia

#Label1 a{
color:#333;
padding:2px 8px;
line-height:24px;
margin:0 2px;
background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFB6mnso6uGaczCS71TVLLpnqvr0sL28sOA9enSHxjLrh1bqYVDx8jR-_hRRPMNyka5YaVlyZ8Ncqt6MI0BFr30S4jy9u4t_I2Hv6jv8PMg2lndKNmAKHSMbEqN4uT-LlRDZ_iD1QbPHM/s1600/bricks.png) center center repeat-x;
border:1px solid #ddd;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
font-size:10px !important;
text-decoration:none;}
#Label1 a:hover{
color:#666;
background:none #fff;
text-decoration:none;}

• Klik Apply to blog.

Buka blog sobat untuk melihat hasilnya. Mudah-mudahan tips trik blogspot ini bermamfaat buat sobat blogger