Cara Merubah Tampilan Label Di Blog Versi 2

Bagi yang sudah melihat Cara merubah tampilan label blog versi 1, maka selanjutnya jika pada versi pertama anda kurang suka dengan tampilannya maka jangan khawatir soal itu, Karena Balong Condro memberi pilihan kedua untuk Cara merubah tampilan label blog versi 2.

Berikut Kode untuk Bagi yang sudah melihat Cara merubah tampilan label blog versi 1, maka selanjutnya jika pada versi pertama anda kurang suka dengan tampilannya maka jangan khawatir soal itu, Karena Waroenkblog memberi pilihan kedua untuk Cara merubah tampilan label blog versi 2.

Berikut Kode untuk merubah tampilan label blog versi 2

GAMBAR DEMO

.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;}

Langkah Pertama

1. Masuk Blogger Dasboard > Template > Edit HTML > Lanjutkan
2. Backup template anda,untuk berjaga-jaga seandainya terjadi kesalahan
3. Tekan Control + F > cari kode ]]></b:skin>
4. Copy salah satu kode CSS diatas.
5. Pastekan / letakkan kodenya tepat DIATAS tag ]]></b:skin>
6. Save Template

Langkah Kedua
1. Masuk Blogger Dasboard > Tata Letak > Klik Tambah Gadget > pilih Label
2. Setting widget Blogger Label > pilih Tampilkan Cloud
3. Untuk pilihan "Sortir" dan "tampilkan semua" atau label yang dipilih terserah Anda
Lihat gambar dibawah untuk lebih jelasnya

 

Semoga Artikel kali ini bermanfaat. Salam Blogger.