Rabu, 02 Juli 2014
Tag :// Tips Blogger
Pada post kali ini saya akan memberikan tips untuk memperbagus tampilan Widget Label kalian. Apabila biasa nya pada saat kalian membuat sebuah Widget Label dengan tampilan biasa sekarang kalian bisa membuatnya dengan animasi bergerak, bagaimana cara nya? Langsung saja ikuti cara berikut.
.png "BLOG INDRA | 2014")
Pertama
Login ke Blogger kalian masing-masing
Kedua
Pada saat di Dasboard kalian masuk ke blog yang kalian ingin edit
Ketiga
Buka bagian Tata Letak/Layout
Keempat
Cari Widget Label kemudian tambahkan
.png "BLOG INDRA | 2014")
KelimaApabila sudah kalian tambahkan ke blog kalian sekarang dari code List ubah menjadi Could dan Save
.png "BLOG INDRA | 2014")
Keenam
Apabila sudah kalian lakukan save kemudian kita masuk kebagian Template untuk meletakan kode yang akan dimasukan
.png "BLOG INDRA | 2014")
Kemudian kita cari kode HTML "]]></b:skin>" tanpa tanda petik untuk mempermudah pencarian terhadap kode gunakan "CTRL+F" tanpa tanda petik. Letakan kode berikut tepat di atas kode "]]></b:skin>"
.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; }
.png)
.png)
