Label Cloud 3 macam style Menggunakan CSS

MODIFIKASI LABEL CLOUD

Selamat malam,salam sejahtera selalu.

Seperti yang sudah kita ketahui,label pada Blog merupakan kata kunci yang mengelompokkan isi Atau tulisan Berdasarkan Kereteria Tertentu,dengan memberikan Label pada Blog,sama halnya kita mempermudah Pengunjung untuk mengadakan penelusuran,postingan yang terkait.

DEMO

Label Blogspot pada dasarnya Memiliki dua Macam pilihan,yaitu List dan Cloud.Dan untuk Pembahasan kali ini saya akan membahas tentang cara modfikasi LabeL Cloud tersebut Agar tampil Lebih menarik. Dibawah ini saya sudah menyediakan 3 macam Style Label Cloud Dan untuk cara pemasangannya, Langsung aja Ke TKP >>>>

• Masuk Ke Blogger sobat
• Pilih menu tempalate kemudian
• Edit HTML dan jangan lupa centang Expand widget template
• Cari kode ]]></b:skin> dengan menggunakanan CTRL F
• Paste salah satu kode style label Cloud di bawah ini tepat di atas ]]></b:skin>

STYLE LABEL CLOUD 01

.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 #6BB5FF; 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; } /*-----Custom Labels Cloud widget by http://d-crow.blogspot.com----*/

STYLE LABEL CLOUD 02

.label-size a { display: inline-block; text-decoration: none; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); padding: 4px 7px; font-family: 'Helvetica Neue', helvetica, sans-serif; font-size: 12px; line-height: 14px; height: 14px; vertical-align: middle; margin-bottom: 6px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4); -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4); } .label-size a { color: #996633; border: 1px solid #DDA13C; background: rgb(238,177,75); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzkxMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(238,177,75,1) 0%, rgba(204,145,45,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,177,75,1)), color-stop(100%,rgba(204,145,45,1))); background: -webkit-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%); background: -o-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%); background: -ms-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%); background: linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeb14b', endColorstr='#cc912d',GradientType=0 ); } .label-size a:before { content: '\2022'; color: #FFFFFF; margin-right: 4px; font-size: 15px; line-height: 13px; height: 13px; vertical-align: text-top; text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2); } .label-size a:hover { text-decoration: none; background: rgb(240,183,86); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(240,183,86,1) 0%, rgba(214,160,68,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,183,86,1)), color-stop(100%,rgba(214,160,68,1))); background: -webkit-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%); background: -o-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%); background: -ms-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%); background: linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b756', endColorstr='#d6a044',GradientType=0 ); } /*----- Custom Labels Cloud widget by http://d-crow.blogspot.com ----*/

STYLE LABEL CLOUD 03

#Label1 a{outline: 1px rgba(255,255,255,0.4) dashed; border: 1px rgba(0,0,0,0.3) dashed; padding: 4px 10px 4px 20px; text-decoration: none; color:#000000; white-space: nowrap; font-family: Arial; font-size: 12px; font-weight: bold; position: relative !important; background: #8dc63f; float: left; padding: 5px 3px; margin: 0 5px 5px 0; border-radius:4px 4px; -moz-border-radius:4px 4px 4px 4px; -khtml-border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px; border-radius:4px 4px 4px 4px; } #Label1 a:hover{color: rgba(0,0,0,0.5);} .label-size{line-height:1.5;align:left;} /*----- Custom Labels Cloud widget by http://d-crow.blogspot.com ----*/

• Setelah sobat sudah selesai memilih salah satu kode di atas,jangan Lupa tempatkan Kode Tersebut Tepat di atas kode ]]></b:skin> dan selanjutnya SIMPAN TEMPLATE SOBAT.

Untuk Langkah selanjutnya adalah.....??

1. Masuk ke menu tata letak. kemudian
2. tambahkan Gadget kemudian Pilih LabeL
3. Dan yang terkahir,setting Label anda seperti Pada gambar di bawah ini :

Sekian dan terima kasih... dan untuk melihat Hasilnya sobat bisa Klik Disini.