Cara Membuat Widget Label Cloud Flat Design Di Blog

Selamat datang agan atau aganwati kali ini saya akan berbagi tentang tips blogging, pada kesempatan kali ini saya akan memberikan tutorial untuk cara membuat widget label cloud flat design di blog. Label pada blog berfungsi menandai kategori pada artikel yang anda publikasikan, jadi untuk memudahkan pengunjung untuk menemukan artikel yang mereka cari.



Umumnya label yang sudah disediakan oleh blogger merupakan tampilan default yang umumnya kurang menarik. Kali ini kita kan sedikit mengubah dari tampilan label yang ada pada blog anda. Dengan mengubah tampilan label tersebut diharapkan lebih memberi kesan menarik bagi pengunjung.



Berikut tutorial untuk membuat widget label cloud flat design di blog :

Langkah

1. Login pada blog anda masing-masing,

2. Pada menu dashboard pilih menu tata letak,

3. Setelah itu pilih menu tambahkan widget, lalu pilih menu widget label,

4. Setelah itu atur konfigurasi label seperti gambar di bawah ini,

Isi judul, pilih semua label pada menu tampilan, pilih alfabetik pada menu menyortir, pilih cloud pada menu tampilkan, dan terakhir tidak perlu memberi checklist pada menu tampilkan jumlah entri per label. Kemudian simpan!

5. Setelah itu kembali ke menu dashboard blog, pilih menu template,

6. Pilih menu edit html,

7. Cari kode </style> atau ]]></b:skin> dengan cara

Ctrl

+

F

,

8. Copy script di bawah ini, lalu paste tepat di atas kode </style> atau  ]]></b:skin> tadi,

 /*CSS Label*/ .Label a{ padding-left: 5px; padding-right: 31.5px; color: #fff!important; height: 32px; background: #5A5A5A; margin-right: 2px; line-height: 32px; text-decoration: none; border: none !important; -webkit-transition: all .3s ease-in-out !important; float: left; margin-top: 2px; font-size: 13px; text-align: left; } .Label a:hover{ color:#fff !important; background:#07ACEC; } .Label a:after{ content: ""; position: absolute; width: 0px; height: 0px; border-width: 16.5px; border-style: solid; border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.3) rgba(0,0,0,0.1) transparent; } 

Anda dapat mengubah warna sesuai keinginan anda dengan mengubah kode #fff yang merupakan kode warna teks, #5A5A5A merupakan kode warna background ketika kursor tidak aktif menyentuh label dan #07ACEC merupakan kode warna background ketika kursor aktif menyentuh label.

9. Simpan.

Demo

Nah itu saja dari saya semoga bermanfaat, jangan lupa bagikan serta tinggalkan komentar anda. Maaf apabila dalam menyampaikan artikel terdapat kesalahan. Terima kasih.

Share this