2 Merubah tampilan lebel cloud menjadi keren di blog

Merubah tampilan lebel cloud menjadi keren di blog - Master Copast ingin berbagi tutorial  tentang cara membuat menu dinamis dengan daftar halaman dan menu otomatis dengan daftar label, dan hari ini kita akan berbagi tutorial yang sederhana yang akan mengubah Cloud label menjadi blok-blok kecil yang terorganisir yang memutar pada saat terkena kursor. Mau tau bentuknya bagimana silahkan lihat screenshoot di bawah sob :

Ok berminat langsung saja ikuti langkah-langkahnya di bawah ini sob. :

• Pertama login ke blog sobat.
• Selanjutnya masuk kemenu rancangan
• Pada menu pilih Rancangan ➨ Tataletak
• lalu klik tambah gadget
• Pilih lebel lalu pilih tipe yang cloud seperti screenshoot di bawah :

• Jika sudah klik simpan
• Selanjutnya download dulu templatenya, hal ini dilakukan untuk mengantisipasi bila terjadi kesalahan
• Pada menu pilih Rancangan ➨ Edit HTML.
• Pada Edit Template jangan lupa untuk mencentang  Expand Template Widget,
• Cari  code ]]></b:skin>
• Apa bila sudah ketemu sobat copast kode di bawah ini tepat di atas kode ]]></b:skin> 

/*-----Custom Labels Cloud widget by Copast-master.blogspot.com----*/ .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; } 

• Terakhir simpan template sobat dan lihatlah hasilnya sob.

Demikin sob cara simpel dan mudah untuk mempercantik tampilan lebel cloud sobat. Sekian dulu hasil Master Copast kali ini artikel Tutorial Blog,   yang berjudul Merubah tampilan lebel cloud menjadi keren di blog. Semoga bermanfaat Master Copast