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