Cara Membuat Widget Label dengan Tampilan Cloud yang Unik dan Keren

Cara Membuat Widget Label dengan Tampilan Cloud yang Unik dan Keren 

Assalamualaikum wr.wb. Semoga anda dan keluarga senantiasa di karuniai kesehatan oleh Tuhan yang Maha Esa,dan urusan anda semuanya di lancarkan semua .Amin 

Pads kesempatan kali ini saya akan berbagi tips Cara Membuat Widget Label dengan Tampilan Cloud yang Unik dan Keren .

Beberapa kali ini saya mencoba mengotak atik beberapa blog saya untuk merubah tampilan label pada blog saya agar lebih kece hehe. Setelah browsing kesana kemari akhirnya nemu juga di salah satu blog yang saya kunjungi ,ternyata caranya gak sulit kok sob. Label bisa juga kita namakan kategori dalam setiap blog yang kita kelola. Tentunya dengan kita menambahkan label pada setiap blog akan memudahakan visitor untuk melihat /mengunjungi setiap artikel yang kita buat. Tampilan label blog bawaan asli blogspot mungkin bisa kita bilang standar. Nah kali ini saya akan sharing pada sobat semua cara nya ,walaupun sudah banyak blogger lain yang menuliskannya ,namun izinkan saya mengulas kembali yang mungkin dengan lebih terperinci dan insyaalooh mudah di pahami. 

Dalam artikel saya kali ini ada 2 macam label yang akan saya sharing kepada sobat semua. 

1. Label pertama ini saya ambil screenshoot dari salah satu blog saya : 

Cara memodifikasi label nya cukup mudah sobat ,

       1.Masuk akun blogger sobata masing – masing

2. Silahkan sobat pilih dashboard > Template > Edit HTML
3. Kemudian sobat cari kode ]]></b:skin biar lebih mudah sobat letakkan kursornya kemudian tekan Ctrl+F , kemudian ketakkan kode ]></b:skin  di sini : 
   
   Setelah itu tekan enter ya sobat.kemudian letakkan script di bawah ini di atas kode ]]></b:skin

 /*-----Labels Cloud Styled widget by proBlogiz.blogspot.com----*/ .label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C6C6C6; border-radius: 3px; float:left; text-decoration:none; font-size:10px; color:#666; } .label-size:hover { border:1px solid #B20000; text-decoration: none; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; } .label-size a { text-transform: uppercase; float:left; text-decoration: none; } .label-size a:hover { text-decoration: none; }

 Jika sudah sobat letkkan kode scripnya simpan template kemudian lanjutkan langkah selanjutnya . 

Masuk akun blogger sobata masing – masing

Masuk Dashboard blog sobat > Tata Letak > Label ( NB: Jika sobat belum menambahkan label dalam widget blog sobat ,sobat harus menambahkannya terlebih dahulu ,karena syarat memodifikasi label ini sobat harus menambhahkan label standard bawaan dari blogger).

 Tampilan di atas adalah label bawaan blogger, nah pada pilihan daftar sobat harus mengubahnya dalam cloud. 

 Seperti di atas setelah itu simpan dan lihat hasilnya .

Lanjut lagi ya sob ,yang ini adalah cara kedua .  

     1.Masuk akun blogger sobata masing – masing

2. Silahkan sobat pilih dashboard > Template > Edit HTML
3. Kemudian sobat cari kode ]]></b:skin biar lebih mudah sobat letakkan kursornya kemudian tekan Ctrl+F , kemudian ketakkan kode ]></b:skin  di sini :
   
   Setelah itu tekan enter ya sobat.kemudian letakkan script di bawah ini di atas kode ]]></b:skin
   Kemudian letakkan kode script CSS di bawah ini di atas kode  ]]></b:skin ini
   

   *-----Labels Cloud Styled widget by proBlogiz.blogspot.com----*/ .label-size{ margin:0; padding:0; position:relative; } .label-size a , .label-size span{ float:left; height:24px; line-height:24px; position:relative;font-size:12px; margin-bottom: 9px; margin-left:20px; padding:0 10px 0 12px; background:#0089e0; color:#fff; text-decoration:none; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px; border-top-right-radius:4px; } .label-size a:before , .label-size span::before{ content:""; float:left; position:absolute; top:0; left:-12px; width:0; height:0; border-color:transparent #0089e0 transparent transparent;border-style:solid; border-width:12px 12px 12px 0; } .label-size a:after , .label-size span::after{ content:""; position:absolute; top:10px; left:0; float:left; width:4px;height:4px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background:#fff; -moz-box-shadow:-1px -1px 2px #004977; -webkit-box-shadow:-1px -1px 2px #004977; box-shadow:-1px -1px 2px #004977; } .label-size a:hover , .label-size span::hover { background:#555;} .label-size a:hover:before , .label-size span::hover::before{border-color:transparent #555 transparent transparent;}

   Cara nya sama seperti yang pertama sobat jadi gak perlu saya ulang lagi sobat .Jika berhasil tampilannya kurang lebih seperti di bawah ini ( hasil setiap blog agak  berbeda - beda tergantung template yang sobat gunakan ) .
   
   
   Demikian semoga bermanfaat, selamat mencoba,happy blogging.