Monday, February 3, 2014

Cara Membuat Label Cloud keren dan cantik

Pada hari ini taukahbahwa.blogspot.com akan menyajikan artikel tentang Cara Membuat Label Cloud keren dan cantik. Semoga dengan artikel Cara Membuat Label Cloud keren dan cantik akan menambah wawasan bagi anda pembaca setia taukahbahwa.blogspot.com


Untuk membuat dan memodifikasi tampilan Label Cloud Blogger seperti gambar diatas, sobat hanya perlu menambah kode CSS pada template. Dibawah ini saya bagikan juga kode CSS berikut tutorial cara pemasanganya pada template blogger. 

Langsung saja untuk tutorialnya ikuti Cara Membuat Label Cloud keren dan cantik berwarnadibawah ini:
1. Masuk Blogger Dasboard > Template > Edit HTML > Lanjutkan
2. Backup template
3. Tekan Control + F > cari kode ]]></b:skin>
4. Letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

/*-----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;}
5. Jangan lupa Save Template dan pastikan label pada template sobat sudah dibuat label cloud. OK
Sekian dulu Cara Membuat Label Cloud keren dan cantik berwarna, semoga bermanfaat. Good Luck

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com
Homepage|http://taukahbahwa.blogspot.com

No comments:

Post a Comment

jangan lupa tinggalkan komentar .... trimakasih atas kunjungannya