Tutorial Widget Cloud Label With Efek Css3

Tutorial Widget Cloud Label With Efek Css3  | Ghiyats Blogs - Label Adalah salah satu widget yang ada di blogger, Tampilan Widget label yang ada di blogger sangat sederhana, dengan begitu kita harus menambahkan Kode Seperti Css, Untuk memperindah tampilannya.

Widget Label yang Saya bagikan ini berbentuk cloud dengan Sentuhan Css3 di dalamnya, dan warna widget ini berwarna biru, Kalau begitu langsung saja kita coba saja membuat widget ini tutorialnya seperti ini :

Pemasangan di Blogger

• Login Ke Bloggger >> ''Tata Letak'' >> Tambah Gadget >> Label
• Setelah itu, Setting Pengaturan Widgetnya Seperti ini
• Centang Cloud di dalam pengaturan tampilan
• Setelah Klik Simpan

Pemasangan di HTML

• Login Ke Blogger
• Pergi ke menu ''Template'' >> Klik Edit HTML
• Cari kode ']]><b:skin'' >> Setelah ketemu, Taruhlah kode dibawah ini, di atas kode tadi

.Label a{  background: rgb(0,100,180); 
background: -moz-linear-gradient(top,  rgba(0,100,180,1) 0%, rgba(20,60,100,1) 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,100,180,1)), color-stop(100%,rgba(20,60,100,1))); 
background: -webkit-linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
background: -o-linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); 
background: -ms-linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); 
background: linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0064b4', endColorstr='#123d60',GradientType=0 ); 
display:inline-block;border: 1px solid #005ca6;padding:0 8px; color:#fff!important; height:28px; line-height:28px; text-transform:capitalize; text-decoration:none;float:left;margin-top:5px; font-size:14px;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2); 
}
.Label a:hover{color:#000 !important; background:#123d60;}

• Setelah itu Klik Simpan

Demikianlah artikel pada hari ini, Semoga bermanfaat dan mudah untuk di pratekkan oleh sobat semua, Silahkan Beri pendapat tentang artikel ini di kolom komentar dibawah ini,Terrima Kasih...