23.04.00
[How To Customize Blogger Label With CSS3 Effects]
Cara Customize Label atau Kategori Blogger Dengan Efek CSS3. Tag Clouds digunakan untuk menampilkan semua kategori atau label yang ada didalam sebuah blog. Dalam posting ini ditampilkan desain Widget Labelblog. CSS3 Gradien dan sifat Box-Bayangan juga digunakan untuk memberikan tampilan yang lebih stylish. Anda dapat menyesuaikan widget Label Anda dengan menambahkan beberapa kode CSS3. Hal ini animasi melayang efek dan tidak akan mendapatkan lebih banyak ruang dari sidebar Anda. Kita tidak bisa memberikan demo untuk tutorial ini. Menambahkannya ke blogger
1. Kembali ke Blogger Dashboard >> Anda blog >> Tata Letak >> Tambah Gadget >> Label.2. Buat pengaturan yang diperlihatkan pada gambar di bawah.
Menambahkan Style Sheet for Making it Attractive
1. Masuk ke template editor>> EDIT HTML: (Make a template backup before editing)2. Cari Kode HTML.
]]></b:skin>3. Paste kode CSS dibawah ini diatas kode ]]></b:skin>:
.Label a{ background: rgb(0,100,180);4. Lihat , yakinkan kalau pengaturan anda sudah benar.
background: -moz-linear-gradient(top, rgba(0,100,180,1) 0%, rgba(20,60,100,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,100,180,1)), color-stop(100%,rgba(20,60,100,1)));
background: -webkit-linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
background: -o-linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
background: -ms-linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
background: linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0064b4', endColorstr='#123d60',GradientType=0 );
display:inline-block;border: 1px solid #005ca6;padding:0 8px; color:#fff!important; height:28px; line-height:28px; text-transform:capitalize; text-decoration:none;float:left;margin-top:5px; font-size:14px;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
}
.Label a:hover{color:#000 !important; background:#123d60;}
5. Simpan.
Menambahkan simple style sheet for making labels attractive
1. Masuk ke template editor>> EDIT HTML:
2. Find the following code in your HTML.
]]></b:skin>3. Paste kode CSS dibawah ini diatas kode ]]></b:skin>:
.Label a{float:left;padding:5px 8px;margin:2px 2px 0px 0;background-color:#1295C9;color:white;font-size:14px;text-decoration:none;text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;} .Label a:hover{background-color:#303030;}4. Lihat , yakinkan kalau pengaturan anda sudah benar.
5. Simpan
[source]
Tidak ada komentar
Posting Komentar