Tutorial yang berjudul cara "membuat label mode cloud di blog" ini sebenarnya gak jauh beda dengan tutorial-tutorial blog lainnya (yang berkaitan dengan mempercantik tampilan blog). Memang seperti itu bukan?
Nah pada tutorial kali ini, langkah yang harus kita lakukan adalah langkah yang sangat mudah dan gampang. Siapkan kopi + cemilan biar gak bosan hehe
- Langkah Pertama Sign In ke Facebook eh ke Blog sobat hehe
- Pilih Template, pada bagian ini pilih Edit HTML
- Pada bagian HTML cari kode ]]></b:skin> atau tekan CTRL+F untuk memudahkan pencarian
- Jika sobat sudah mendapatkan kode ]]></b:skin>, silahkan Copas (Copy dan Pastekan) kode dibawah ini tepat sebelum /diatas kode ]]></b:skin>ini
.label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C0C0C0; border-radius: 3px; float:left; text-decoration:none; font-size:9px; color:#666; }
.label-size:hover { border:1px solid #B20000; 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; }
.label-size:hover { border:1px solid #B20000; 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; }
- Jika langkah-langkahnya sudah diikuti dengan baik dan benar, Silahkan sobat simpan dulu dan lihat hasilnya
- Untuk memudahkan agar tampilan label ini berjalan dengan apa yang sudah kita bahas kali ini. Pastikan sobat sudah menambahkan Widget Label ke tata letak blog sobat. Kemudian pada widget label tersebut, setting dalam mode cloud.
Saran & Komentar dari teman-teman silahkan disematkan dikolom komentar.
Terima kasih
Berikanlah komentar yang membangun