TUTORIAL MEMBUAT LABEL BAGUS
Hai semuanya !!!
Kalau kemarin Haltar Ilmu berbagi tentang TUTORIAL MEMBUAT LABEL . Kali ini saya akan berbicara tentang cara Memperbagus Tampilan Label
Oke to the point aje ya !!!
Karena kebanyakan orang itu biasanya kan suka yang bagus-bagus, nah saya malah kepikiran bagaimana ya caranya membuat label yang begitu simple nya seperti gambar 01
Bisa berubah menjadi gambar 02
Langkah-langkahnya adalah:
tata letak >> tambahkan gadget >> label
gambar 03
Kalian boleh mengubah apapun, kecuali jenis tampilannya nanti yaitu : daftar/cloud.
yakni harus tetap cloud.
Oke, selanjutya masuk edit HTML, lebih tepatnya klik Template>> Edit Html.
Nah di sini kita akan memperbagus tampilan label nya dengan kode berikut ini :
Kalau kemarin Haltar Ilmu berbagi tentang TUTORIAL MEMBUAT LABEL . Kali ini saya akan berbicara tentang cara Memperbagus Tampilan Label
Oke to the point aje ya !!!
Karena kebanyakan orang itu biasanya kan suka yang bagus-bagus, nah saya malah kepikiran bagaimana ya caranya membuat label yang begitu simple nya seperti gambar 01
Bisa berubah menjadi gambar 02
Langkah-langkahnya adalah:
Langkah 1
Tambahkan widget Label, widget nya ada di :tata letak >> tambahkan gadget >> label
gambar 03
Kalian boleh mengubah apapun, kecuali jenis tampilannya nanti yaitu : daftar/cloud.
yakni harus tetap cloud.
Langkah 2
Langkah 1 beres???Oke, selanjutya masuk edit HTML, lebih tepatnya klik Template>> Edit Html.
Nah di sini kita akan memperbagus tampilan label nya dengan kode berikut ini :
.label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #6BB5FF; background:transparent; border-radius: 3px; float:left; text-decoration:none; font-size:12px; color:#00cc33;}
.label-size:hover { border:1px solid #6BB5FF; background:transparent; 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; }
Letakkan kode di atas, tepat di atas kode " ]]></b:skin> " di html nya.
warna merah : gunanya untuk warna dari background label kalian.
warna hijau : gunanya untuk warna dari tulisan label kalian.
Nah, kalian bisa ubah sesuka kalian!
Oke, setelah langkah kedua udah selesai, klik save template.
Tunggu sampai loadnya selesai, lalu lihat blog nya!!!
Horee!!!
Harapan label bagus bisa diterapkan!
Hmm!!
Akhirnya bisa berbagi juga cara dari Memperbagus Tampilan Label nya.
See you later!!!
Semoga Bermanfaat!!!
Semoga Bermanfaat!!!
0 comments:
Post a Comment