Cara Menciptakan Label Cloud Keren Dan Elok Berwarna

Cara Membuat Label Cloud keren dan cantik - Kali ini Kang Zain share cara menciptakan Label Cloud keren dan cantik, modifikasi kali ini cukup simple dan tentunya sangat mudah. banyak cara untuk mempercantik label blog, diantaranya dengan memakai css supaya kelihatan menarik.

Untuk menciptakan dan memodifikasi tampilan Label Cloud Blogger menyerupai gambar diatas, teman hanya perlu menambah instruksi CSS pada template. Dibawah ini aku bagikan juga instruksi CSS berikut tutorial cara pemasanganya pada template blogger. 

Langsung saja untuk tutorialnya ikuti Cara Membuat Label Cloud keren dan manis berwarna dibawah ini:

1. Masuk Blogger Dasboard > Template > Edit HTML > Lanjutkan
2. Backup template
3. Tekan Control + F > cari instruksi ]]></b:skin>
4. Letakkan instruksi dibawah ini sempurna 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 teman sudah dibentuk label cloud. OK

Sekian dulu Cara Membuat Label Cloud keren dan manis berwarna, semoga bermanfaat. Good Luck

Share this post