Membuat Widgate Label Keren Dengan css

Pada toturial kali ini mengenai Membuat Widgate Label Keren Dengan css mungkin sudah bosan dengan tampilan label blog sobat yang biasa-biasa aja dan ingi merubanya..

Nah, pada ini saya akan memberikan caranya ke teman-taman semua Membuat Widgate Label Keren Dengan css. dengan sedikit menambah script css pada HTML blog sobat..!!!

Jika sobat igin menerapkan di blog sobat silahkan ikuti langkah-langkah di bawah ini:

1. Login ke Account Blogger sobat
2. Pilih Tata letak lalu Tambah Gadget

3. Kemudian Pilih "Label"
4. Lalu edit Labelnya menjadi seperti gambar dibawah ini

5. Kemudian Save

6. Setelah itu sobat masuk ke Template
7. Klik Edit HTML

8. Cari kode ]]></b:skin>
9. Lalu copy kode dibawah ini tepat diatas kode ]]></b:skin>

/* Code By www.semukan.blogspot.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);
}

10. simpan dan lihat hasilnya.

Itu saja mengenai cara Membuat Widgate Label Keren Dengan css semoga bermamfaat.!!!

Ditulis Oleh : Unknown

Terimakasi atas kunjungan teman-teman...
Bila artikel ini sangat bermanfaat, sobat dapat bagikan ke teman-teman yang lain melalui jejaring sosila yang ada di bawah ini!!
Jangan lupa tinggalkan komentarnya...

Berbagi di :

BACA JUGA :

Tutorial Blog

4 comments:

Iman Yusuf17 August 2013 at 22:33
gan kasih hilang donk tulisannya :)
Unknown8 January 2015 at 18:15
Dicobain dulu...thx infonya gan
blog kawan20 January 2015 at 18:16
kok sama saja gan,saya kira mrip gambar yang agan contohin,pas saya coba kok ngak berubah,sama saja kayak ngak di edit gan.