Cara Mengganti Warna Judul Sidebar

Baca Juga:

Cara Mengganti Warna Judul Sidebar, widget yang berada di kiri-kanan posting dan juga bagian bawah blog. Seperti widget arsip, pengikut, mengenai saya, total tayangan laman, label, populer post dan lain-lain. Sesuai dengan widget yang dipakai di blog. Berikut Tips dan Trik cara mengganti warna judul sidebar yang digunakan di blogspot. Ikuti langkah-langkah dibawah ini.

 

Cara Mengganti Warna Judul Sidebar

1. Login ke blog. Dari halaman dasbor, pilih pengaturan template.
2. Selanjutnya klik edit HTML dan cari kode ]]></b:skin> dan pasang kode berikut di atas kode ]]></b:skin> 
h2 {
padding: 4px 2px 2px;
background:#0a58a3;
border-bottom:4px solid #1780dd;
}
3. Save Template. Selesai.

Keterangan kode diatas:

• padding: 4px 2px 2px; rata huruf judul kiri kanan. Jika kurang rata ganti ketiga kode itu.
• background:#0a58a3; Warna Background
• border-bottom: garis bawah,  4px(ketebalan garis bawah) solid(bentuk garis bawah) dan #1780dd; warna garis bawah. Hilangkan kode ini jika sidebar tidak ingin diberi garis bawah.
• border-bottom bisa diganti dengan:
border-top: Garis Atas
border-right: Garis Kanan
border-left: Garis Kiri
border: Seluruh garis
• solid(bentuk garis bawah) bisa diganti dengan:
dashed
dotted
Double
Groove
inset
outset
ridge

Ganti sesuai dengan yang kalian inginkan, kode h2 { diatas, akan mengganti semua warna judul sidebar widget dikiri-kanan dan juga bagian bawah footer blog. Jika ingin membuat warna judul yang berbeda antara sidebar dan footer bagian bawah, Ikut langkah-langkah dibawah ini.

Warna Judul Sidebar Widget Kiri-Kanan Blog

1. Login ke blog. Dari halaman dasbor, pilih pengaturan template.
2. Selanjutnya klik edit HTML dan cari kode ]]></b:skin> dan pasang kode berikut di atas kode ]]></b:skin>
.sidebar .widget h2 {
padding: 4px 2px 2px;
background:#0a58a3;
}
3. Save Template. Selesai.

Warna Judul Footer Bagian Bawah Blog

1. Login ke blog. Dari halaman dasbor, pilih pengaturan template.
2. Selanjutnya klik edit HTML dan cari kode ]]></b:skin> dan pasang kode berikut di atas kode ]]></b:skin>
.footer-inner .widget h2 {
padding: 4px 2px 2px;
background:#CCCCCC;
}
3. Save Template. Selesai.

Menambahkan Icon disamping judul sidebar

1. Login ke blog. Dari halaman dasbor, pilih pengaturan template.
2. Selanjutnya klik edit HTML dan cari kode ]]></b:skin> dan pasang kode berikut di atas kode ]]></b:skin>
.sidebar .widget h2 {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhntKIJkV4BMkX09uYUzh_M3f74ziviOMWC3u35hvfbTF6Z_3JBdrXQln-2qL9hZNNdOv_lDFaSE82NzOmfglbU-1q-W66Dj3rHw0SLA8JzTSEIRogrvEMBoHwzixbDpVC0vOpLpXv0zEkf/s1600/32x32.jpg")no-repeat;padding:10px 0px 0px 40px;}
3. Save Template. Selesai.

Contoh icon disamping sidebar

Untuk icon, tidak hanya di sidebar saja, tapi juga di tempatkan dibagian footer. Dari yang pernah saya coba, cara diatas bisa bekerja di template asli dari blogger. Saya belum tau bisa atau tidak di template hasil download. Karena disetiap template mungkin mempunyai sedikit perbedaan kode. Jika tidak berjalan ditemplate kamu. Coba di edit kode awalnya, misalnya kode .sidebar .widget h2 { ganti menjadi .sidebar { saja dan juga bagian footer, kira-kira seperti itu. 

Jika cara diatas bisa berjalan ditemplate yang kamu gunakan, Alhamdulillah, artinya artikel di desain blog tutorial ini tidak sia-sia dan berguna. Silakan dibaca juga Artikel lainnya tentang cara membuat related post dengan gambar dibawah posting blog dan membuat kotak komentar facebook bersebelahan dengan kotak komentar blogger. Semoga Bermanfaat.

Tweet