10 Cara Modifikasi Judul Widget di Sidebar Blogger agar Menarik
Bagi yang ingin memodifikasi judul widget yang ada di Sidebar Blogger, setidaknya kamu harus paham sedikit tentang CSS.- Blogger > Theme > Edit HTML
- Hapus CSS yang mengatur Widget/Gadget untuk Sidebar-Wrapper
- Pilih salah satu CSS Widget/Gadget yang sudah dipercantik (Note: Cek di bawah, ada daftarnya)
- Kemudian Simpan, dan Cek hasilnya
Langkah-langkah di atas, maksudnya menghapus CSS yang sudah ada; lalu kita menggantinya dengan CSS yang ada di bawah ini. Cukup CSS kok :)
#1. Stylish Design for Customize Blogger Sidebar Heading
Kode yang digunakan:
.sidebar h2 {
padding:5px;
background:#000000;
color:#FFFFFF;
font: 500 140%;
}
#2. Stylish Design for Customize Blogger Sidebar Heading
Kode yang digunakan:
.sidebar h2 {
padding:5px;
border-bottom:5px solid #000000;
color:#000000;
font: 500 140%;
}
#3. Stylish Design for Customize Blogger Sidebar Heading
Kode yang digunakan:
.sidebar h2 {
padding:5px;
border-bottom:3px dashed #000000;
color:#000000;
font: 500 140%;
}
#4. Stylish Design for Customize Blogger Sidebar Heading
Kode yang digunakan:
.sidebar h2 {
padding:5px;
border:2px solid #000000;
color:#000000;
font: 500 140%;
}
#5. Stylish Design for Customize Blogger Sidebar Heading
Kode yang digunakan:
.sidebar h2 {
padding:5px;
border:2px dashed #000000;
color:#000000;
font: 500 140%;
}
#6. Stylish Design for Customize Blogger Sidebar Heading
Kode yang digunakan:
.sidebar h2 {
padding:5px;
border:2px dashed #000000;
border-bottom:5px solid #000000;
color:#000000;
font: 500 140%;
}
#7. Stylish Design for Customize Blogger Sidebar Heading
Kode yang digunakan:
.sidebar h2{
background:#333;
margin:5px 4px 5px 0;
padding:9px 0 9px 10px;
border:0;
color:white;
font-size:16px;
line-height:1.2em;
font: 500 140%;
text-decoration:none;
text-transform:uppercase;
box-shadow:4px 4px 0px rgba(33,33,33,0.45);
}
#8. Stylish Design for Customize Blogger Sidebar Heading
Kode yang digunakan:
.sidebar h2 {
padding:5px;
border-top:1px solid #000000;
border-bottom:5px solid #000000;
color:#000000;
font: 500 140%;
}
#9. Stylish Design for Customize Blogger Sidebar Heading
Kode yang digunakan:
.sidebar h2 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3qcibIHLa9pz1UE0m-4rDm20H0ypoxQe4dWfCb5UF41ZtfjNNsbziJi3TbarWbCXsCPiwMsuH-KbYha8ocl-ge-5Y6owVb2jw_Q0sXEKeFQCSLOCUHqSQ-GuoBDU_mIMe60LzwNY3WdwB/s1600/BloggerSpice+SidebarH2.png) no-repeat scroll 0 0 transparent;
color: rgb(213,213,213);
height: 66px;
font-size: 140%;
font-weight: bold;
margin: 0 0 -28px;
position: relative;
left: -30px;
top: 0;
width: 362px;
text-align: center;
padding: 15px 0 0;
font: 500 140%;
padding-bottom: 15px;
}
#10. Stylish Design for Customize Blogger Sidebar Heading
Kode yang digunakan:
.sidebar h2 {
padding:10px;
text-align:center;
border-top-right-radius:30px;
border-bottom-left-radius:30px;
background:#000000;
color:#FFFFFF;
font: 500 140%;
}
Bagaimana? Puas dengan Stylish Widget/Gadget yang ada di sini? Kurang? Keluhkan di kolom komentar :)
Social Plugin