Label Keren dengan CSS3

Kembali lagi bersama saya aka Admin Tampan hehe .. Tutorial kali ini mari kita membahas Gimana sih caranya "Membuat Label Keren dengan Sentuhan CSS3" .. Sebenernya mudah saja, hanya memberikan sedikit sentuhan pada ]]></b:skin> saja .. langsung saja kita simak tutorial berikut

1 . Log In Blogger Agan
2 . Pilih Blog Yang Akan Di Edit
3 . Pergi Ke Template
4 . Klik Edit HTML
5 . Centang Expand Template Widget
6 . Cari Tulisan ]]></b:skin> ( Tekan Ctrl + F Atau F3 Di Keyboard Untuk Mencari )
7 . Pasang Kode Di Bawah Ini Tepat Di Atas Kode ]]></b:skin>

.label-size{margin:0 2px 6px 0; padding:4px; text-transform:uppercase; text-shadow:0px 2px 0px #8EA71A; border:1px solid #9FBD0A; background:#15bab8; float:left; text-decoration:none; font-size:14px; font-family:Changa One}
.label-size a{color:#fff; text-transform:uppercase; float:left; text-decoration:none; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; -o-transition:all 0.4s ease; -ms-transition:all 0.4s ease; transition:all 0.4s ease}
.label-size:hover, .label-size a:hover{color:#333; text-decoration:none; -webkit-transition:all 0.4s ease; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; -o-transition:all 0.4s ease; -ms-transition:all 0.4s ease; transition:all 0.4s ease; filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455,M12=-0.08715574274765817,M21=0.08715574274765817,M22=0.9961946980917455,sizingMethod='auto expand'); zoom:1}

8. Simpan
9. Sekarang,Pergi Ke Layout
10. Cari Label , Terus Klik Edit
11. Sama-Kan Label Anda Dengan Gambar Di Sebelah Ini
12. Simpan

Nb :

• Yang di cetak biru adalah background kotak label
• Yang di cetak hijau adalah warna dari font

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email