Cara membuat Widget Label Cloud warna warni

adscblog

Cara membuat widget label cloud warna warni - Tidak henti henti nya para blogger menciptakan ke kreatipan nya di dalam membuat blog yang super keren,mulain dari gaya tulisan sampai dengan template yang di pasang nya,dan kali ini saya juga akan berbagi cara membuat label cloud dengan warna warna,seperti pada pembahasan sebelum nya saya pernah share tentang cara membuat Label cloud yang keren

Ternyata tidak hanya tampilan populer posts saja yang bisa di bikin warna warni tampilan backgroun nya,kali ini Label cloud yang berada di widget juga bisa anda gunakan atau bisa anda rubah background nya menjadi warna warni sehingga template anda akan terlihat menarik

Seperti pada pembahasan sebelum nya yang dimana label cloud ini di sertai dengan angka atau counter,begitu juga dengan label cloud kali ini di sertai dengan counter di sebelah kanan nya namun di berikan warna sehingga tidak kalah menarik ketimbang label cloud sebelum nya yang pernah sya share di blog ini

Selain itu juga jika anda tidak tertarik dengan warna yang sudah sya buat disini anda juga bisa merubah warna sesuai dengan kesukaan anda melalui kode di bawah sehingga tampilan nya sesuai dengan tampilan template anda

Cara membuat Label Kategori Warna Warni di widget

Bisa anda perhatikan gambar di atas,kategori pada gambar yaitu yang kali ini saya share tampilan nya seperti pada gambar namun jika anda tidak menyukai warna baik itu salah satu nya atau semua nya,biasa anda ganti dengan meng edit kode di bawah ini,dan cara peletakan nya pun sangat lah mudah,silahkan anda simpan kode berikut di template anda sebelum kode </b:skin> dan untuk pencarian kode tersebut agar lebih cepat dan mudah silahkan anda tekan tombol Ctrl+F secara bersamaan dan ini kode Css nya

.cloud-label-widget-content {text-align: left;}
.label-size {background: #5498C9;display: block;float: left;margin: 0 3px 3px 0;color: #fff;font-family:  Arial, Sans-Serif;font-size: 11px;text-transform: uppercase;}
.label-size:nth-child(1) {background: #F53477;}
.label-size:nth-child(2) {background: #89C237;}
.label-size:nth-child(3) {background: #44CCF2;}
.label-size:nth-child(4) {background: #01ACE2;}
.label-size:nth-child(5) {background: #94368E;}
.label-size:nth-child(6) {background: #A51A5D;}
.label-size:nth-child(7) {background: #555;}
.label-size:nth-child(8) {background: #f2a261;}
.label-size:nth-child(9) {background: #00ff80;}
.label-size:nth-child(10) {background: #b8870b;}
.label-size:nth-child(11) {background: #99cc33;}
.label-size:nth-child(12) {background: #ffff00;}
.label-size:nth-child(13) {background: #40dece;}
.label-size:nth-child(14) {background: #ff6347;}
.label-size:nth-child(15) {background: #f0e68d;}
.label-size:nth-child(16) {background: #7fffd2;}
.label-size:nth-child(17) {background: #7a68ed;}
.label-size:nth-child(18) {background: #ff1491;}
.label-size:nth-child(19) {background: #698c23;}
.label-size:nth-child(20) {background: #00ff00;}
.label-size a, .label-size span {
display: inline-block;
color: #fff important;
padding: 4px 10px;
font-weight: normal;
}
.label-size:hover {
background: #222;
}
.label-count {
white-space: nowrap;
padding-right: 3px;
margin-left: -3px;
background: #333;
color: #fff ;
}
.label-size:hover .label-count, .label-size:focus+.label-count {
background-color: #ff6bb5;
}

Setelah itu save template,kemudian untuk langkah selanjut nya silahkan anda mengikuti langkah langkah berikut

1. Masuk ke bagian tataletak atau Layout
2. Kemudian klik Add a Gadget
3. Setelah itu silahkan anda cari Label dan klik 
   
4. Setelah anda mengklik pada bagian label maka akan muncul tampilan seperti pada gambar berikut
   
5. Lihat pada bagian kolom yang berwarna merah,silahkan anda centang kolom Cloud kemudian di bawah nya silahkan anda centang kembali Show number of posts per label
6. Kemudian klik tombol Save yang berada di bagian bawah
7. Setelah itu silahkan anda lihat hasil nya di bagian blog anda

Nah itulah cara membuat Widget label kategori dengan menggunakan warna warni selamat mencoba dan pasti berhasil.

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 16 November and have 0 komentar