Membuat Label Dengan Effect CSS pada Blog
1 min read
Nah kali ini saya akan memberikan cara bagaimana Membuat Label Dengan Effect CSS pada Blog. Sekilas kita hanya menggunakan Label bawaan dari blogger saja nah kali ini saya akan menambahkan dengan beberapa effect CSS. Langsung saja ke step
Cara 1 :
Jika anda belum memasang label pada blog maka pasang dulu
1. Login Blogger
2. Pilih "Tata Letak"
3. Klik "Tambah Gadget" [Pada Sidebar]
4. Cari dan Pilih "Label"
5. Kemudian Coba Sobat Configurasikan seperti pada gambar
6. Kemudian Klik Simpan
Cara 2
Dengan Tambahan Kode Css
7. Pilih Tabs "Rancangan / Template"
8. Pilih "Edit HTML" -> Cek "Expand Template Widget"
9. Cari kode ]]></b:skin> dan Letakkan kode di bawah ini di atas kode ]]></b:skin>
/* Code By www.blogsbaddy.com */
.list-label-widget-content ul
{
list-style-type:none;
padding-left:0px !important;
display:inline-block !important;
}
.list-label-widget-content li {
display:inline-block;
}
.list-label-widget-content li a {
color: #777;
font: 9px verdana;
text-transform: uppercase;
transition: border-color .218s;
background:
#f4f4f4;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(
#F5F5F5), to(
#F1F1F1));
display: inline-block;
text-shadow: 0 1px 0
#fff;
-webkit-transition: border-color .218s;
-moz-transition: border .218s;
-o-transition: border-color .218s;
transition: border-color .218s;
background:
#f3f3f3;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(
#F5F5F5), to(
#F1F1F1));
background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(
#F5F5F5), to(
#F1F1F1));
border: solid 1px
#ccc;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
margin: 0 4px 4px 0;
padding: 3px 5px;
text-decoration: none;
}
.list-label-widget-content li a:hover {
color: #333;
border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px
rgba(0,0,0,0.15);
}
Hasilnya seperti ini
Nah setelah itu save template dan lihat ke homepage blog anda.
Taraa hasilnya berbeda kan. Semoga bermanfaat :)
Post a Comment