Cara Membuat Widget Label Cloud Flat Design Di Blog

14:24:00
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,

Cara Membuat Widget Label Cloud Flat Design Di Blog

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: &quot;&quot;; 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

Cara Membuat Widget Label Cloud Flat Design Di Blog






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

I'm CEO & Founder in http://caritema.com & http://renaldyways.blogspot.com/


Artikel Menarik Lainnya

Artikel Selanjutnya
Next Post
Artikel Sebelumnya
Previous Post
Cara style text di komentar Disqus dan Blogger:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
  • Untuk menggunakan emoji di bawah ini cukup copy kode tersebut dan beri jarak 1 spasi untuk menampilkan emoji pada kolom komentar Blogger.
Parser Kode
FAQ
Emotikon

Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

2 Comments

Muhammad Zulfan 22 December 2016 at 21:04

izin coba mas hehehe

Renaldy Ramadani 26 December 2016 at 07:48

Silakan mas 👍