Cara Menghias Label Blog
Nah kali ini aku akan share perihal bagaimana menghias atau custom label bawaan blogger semoga menjadi lebih menarik dan tentunya dapat anda rubah menyerupai yang anda inginkan. Tutorial ini menghias label menyerupai yang di blog ini namun anda dapat merubah arahan CSS menyerupai yang anda inginkan.
1. Log in Blogger klik tata letak dan tambahkan widget.
2. Tambahkan popular post (Ingat untuk menciptakan pengaturan cloud di popular post bukan baris).
3. Setelah semua beres masuk ke pengaturan template dan edit HTML.
4. Cari arahan berikut ]]></b:skin> dan letakan arahan CSS berikut ini diatas arahan tersebut:
5. Klik pratinjau jikalau tidak terjadi eror klik simpan maka alhasil akan menyerupai dibawah ini:
Atau anda dapat mengganti arahan CSS ia atas dengan arahan menyerupai dibawah ini:
Maka alhasil akan menyerupai dibawah ini:
1. Log in Blogger klik tata letak dan tambahkan widget.
2. Tambahkan popular post (Ingat untuk menciptakan pengaturan cloud di popular post bukan baris).
3. Setelah semua beres masuk ke pengaturan template dan edit HTML.
4. Cari arahan berikut ]]></b:skin> dan letakan arahan CSS berikut ini diatas arahan 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 jikalau tidak terjadi eror klik simpan maka alhasil akan menyerupai dibawah ini:
Atau anda dapat mengganti arahan CSS ia atas dengan arahan menyerupai 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 alhasil akan menyerupai dibawah ini:
0 Response to "Cara Menghias Label Blog"
Post a Comment