10 Cara Modifikasi Judul Widget di Sidebar Blogger agar Menarik

Tutorial: Langkah-Langkah Cara Mempercantik dan Modifikasi Judul Widget/Gadget di Sidebar Blogger agar Lebih Menarik.

Sudah mendapatkan (mengunduh) template blogger yang kami bagikan secara gratis? Akan tetapi Sidebar-Wrapper yang ditampilkan kurang sesuai dengan selera?


Dinamakan "Stylish Sidebar Blogger", yakni suatu bentuk/tampilan dari widget-widget yang ada di samping blog. Dan kini, kamu biasa memodifikasi judul Widget/Gadget yang ada di samping Blogger Themes...!!!

Biasanya kami menulis Content dan mempublikasikan tentang masalah-masalah dunia Blogger seperti HTML, CSS, dan JavaScript (Js). Akan tetapi, untuk kali ini, sedikit berbeda tapi masih dikategorikan "Masalah". Masalah apa? Hanya tentang selera :)

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/AVvXsEj7YfW_x9khTQfBK1bLrcUmLz4xqnMKTGxOz6lEBeowGNE7-G9a4dEBHX1KjDVXhhSG3J4yfbQmX9dhvFf9WxW1KZOxwBtL0Mtbl4Yatu-Pr_h3k8Cy-LmvhMgqDxZ_eQJ34wfixwiGI7k/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 :)

Source: https://www.bloggerspice.com/2015/01/best-design-to-make-Blogger-sidebar-header-more-stylish.html

Share :