Modifikasi Label Blogger. Part 1

Style  Label Blogger

Bismillah...

Dua bulan lebih Blog Rohis Facebook tidak memposting tentang Tutorial Blogger, sekarang tiba saatnya untuk 'Balas Dendam', sekali memposting langsung 4 (empat) artikel hehehe....

Untuk Pembahasan tutorial blogger kali ini mungkin sudah tidak asing lagi bagi sebagian sahabat blogger yang biasa browsing nyari-nyari tutoriaL keren. Yang bosan akan penampilan Labels bawaannya blogger bisa coba tutorial yang satu ini, Modifikasi Label Blogger. Part 1.

Tambahkan Widget label dan Setting terlebih dahulu seperti pada gambar dibawah ini.

 Label Blogger rohis Facebook

Cara membuatnya.

1. Login ke Akun blogger

2. Klik Template

3. KlikEdit HTML

4. Klik Proceed

5. Cari taq ]]></b:skin> (gunakan kontrol F untuk memudahkan pencarian)

6. Setelah dapat lalu masukkan kode dibawah ini diatas taq ]]></b:skin>

/*------------- Start label by http://apabae.info -------------*/ .label-size { float:left; margin:0 0 7px 20px; position:relative; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:0.75em; font-weight:bold; text-decoration:none; color:#996633; text-shadow:0px 1px 0px rgba(255,255,255,.4); padding:0.417em 0.417em 0.417em 0.917em; border-top:1px solid #d99d38; border-right:1px solid #d99d38; border-bottom:1px solid #d99d38; -webkit-border-radius:0 0.25em 0.25em 0; -moz-border-radius:0 0.25em 0.25em 0; border-radius:0 0.25em 0.25em 0; background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47'); -webkit-box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1); -moz-box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1); box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1); z-index:100; } .label-size:before { content:''; width:1.30em; height:1.39em; background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47'); position:absolute; left:-0.69em; top:.2em; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); border-left:1px solid #d99d38; border-bottom:1px solid #d99d38; -webkit-border-radius:0 0 0 0.25em; -moz-border-radius:0 0 0 0.25em; border-radius:0 0 0 0.25em; z-index:1; } .label-size:after { content:''; width:0.5em; height:0.5em; background:#fff; -webkit-border-radius:4.167em; -moz-border-radius:4.167em; border-radius:4.167em; border:1px solid #d99d38; -webkit-box-shadow:0 1px 0 #faeaba; -moz-box-shadow:0 1px 0 #faeaba; box-shadow:0 1px 0 #faeaba; position:absolute; top:0.667em; left:-0.083em; z-index:9999; } .label-size:hover { background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c'); border-color:#e1b160; } .label-size:hover:before { background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c'); border-color:#e1b160; } #Label1 {height:210px !important;} /*------------- End of label by http://apabae.info/ -------------*/

7. Kik Pratinjau, kalau tidak terjadi kesalahan lalu klik save template

Hasil tutorial diatas akan merubah tampilan Label blogger seperti gambar dibawah ini atau bisa juga lihat Demonya disini (Dukun Tobat)

modifikasi labels blogger rohis Facebook

Sumbernya akan disebut pada part akhir.