HOMECara Menghias Label Blog
Posted on - 7:38:00 PM with 1 comment
Nah kali ini saya akan share tentang bagaimana menghias atau custom label bawaan blogger agar menjadi lebih menarik dan tentunya bisa anda rubah seperti yang anda inginkan. Tutorial ini menghias label seperti yang di blog ini namun anda bisa merubah kode CSS seperti yang anda inginkan.
1. Log in Blogger klik tata letak dan tambahkan widget.
2. Tambahkan popular post (Ingat untuk membuat pengaturan cloud di popular post bukan baris).
3. Setelah semua beres masuk ke pengaturan template dan edit HTML.
4. Cari kode berikut ]]></b:skin> dan letakan kode CSS berikut ini diatas kode tersebut:
5. Klik pratinjau jika tidak terjadi eror klik simpan maka hasilnya akan seperti dibawah ini:
Atau anda bisa mengganti kode CSS dia atas dengan kode seperti dibawah ini:
Maka hasilnya akan seperti dibawah ini:
1. Log in Blogger klik tata letak dan tambahkan widget.
2. Tambahkan popular post (Ingat untuk membuat pengaturan cloud di popular post bukan baris).
3. Setelah semua beres masuk ke pengaturan template dan edit HTML.
4. Cari kode berikut ]]></b:skin> dan letakan kode CSS berikut ini diatas kode tersebut:
.Label a {
padding: 5px;
background: #359bed;
color: #fff!important;
text-decoration: none;
border: none !important;
float: left;
margin-left: 5px;
margin-top: 5px;
font-size: 14px;
}
.Label a:hover {
color: #fff !important;
background: #000000;
padding: 5px;
background: #359bed;
color: #fff!important;
text-decoration: none;
border: none !important;
float: left;
margin-left: 5px;
margin-top: 5px;
font-size: 14px;
}
.Label a:hover {
color: #fff !important;
background: #000000;
5. Klik pratinjau jika tidak terjadi eror klik simpan maka hasilnya akan seperti dibawah ini:
.Label a {
padding-left: 20px;
background: #000;
padding: 0 20px;
color: #fff!important;
border-radius: 100px;
-moz-border-radius: 100px;
height: 32px;
line-height: 32px;
text-transform: uppercase;
text-decoration: none;
border: none !important;
-webkit-transition: all .3s ease-in-out !important;
t: 30pxt: 30px;
float: left;
margin-left: 5px;
margin-top: 5px;
font-size: 14px;
}
.Label a:hover {
color: #000 !important;
background: #ff0;
}
padding-left: 20px;
background: #000;
padding: 0 20px;
color: #fff!important;
border-radius: 100px;
-moz-border-radius: 100px;
height: 32px;
line-height: 32px;
text-transform: uppercase;
text-decoration: none;
border: none !important;
-webkit-transition: all .3s ease-in-out !important;
t: 30pxt: 30px;
float: left;
margin-left: 5px;
margin-top: 5px;
font-size: 14px;
}
.Label a:hover {
color: #000 !important;
background: #ff0;
}
Maka hasilnya akan seperti dibawah ini:
Jika Anda menyukai Artikel di blog ini, Silahkan
klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips & Cara
 |
Artikel Terkait Dengan "Cara Menghias Label Blog "
1 comment:
Ketentuan Berkomentar:
1. Menautkan link aktif (anchor text) pada komentar secara otomatis akan kami hapus
2. Gunakan fasilitas Name/URL untuk menempatkan link anda
3. Dilarang berkomentar diluar topik artikel (SARA, pornography, provokasi,promosi produk)
4. Dilarang komentar spam
5. Berkomentarlah dengan baik dan sopan
6. Komentar yang tidak sesuai dengan poin diatas tidak akan dipublikasikan
Admin Tips & Cara
Your welcome gan,...
ReplyDelete