Iklan

Cara Mengganti Warna BACKGROUND JUDUL WIDGET SIDEBAR

Mengganti Warna Background Judul  Widget Sidebar

Cara Mengganti Warna Background Judul  Widget Sidebar, yang dimaksud dengan sidebar adalah apa apa yang ada pada sidebar termasuk widget yang ada di bagian kiri atau kanan dan juga bagian bawah (footer) blog. Seperti Arsip Blog, Populer Posts, Label, Facebook Fan page, kategori, Artikel terbaru, Pengikut, dan lain sebagainya, sesuai dengan widget yang ada di blog Anda. Tips ini akan akan menjelaskan cara mengganti warna background judulnya.
jadi biru atau warna lainnya. Silakan lihat gambar di atas itu adalah blog saya yang sudah saya coba ganti warna JUDUL backgroudnya " MENARIK UNTUK DIBACA ".

Cara Mengganti Warna Background Judul Sidebar Blog

Langkah-langkahnya seperti  dibawah ini.

1.Login ke Akun Blogger Anda.
2.Pada Dasboard pilih Tempalte >>>  klik edit HTML
3.Klik cadangkan/pulihkan dan unduh template blog, untuk jaga-jaga. klo terjadi eror kamu bisa mengembalikannya lagi kesemula.
4. Selanjutnya Klik Edit Html dan Cari kode h2 { . Lengkapnya seperti dibawah ini.

KODE
/* Headings
----------------------------------------------- */
h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}

5.Tambahkan kode background:#2288BB; padding:4px 15px 3px;text-transform:none;
6.Nanti  kodenya tampak seperti ini.

KODE
/* Headings
----------------------------------------------- */
h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);background:#2288BB;
  padding:4px 15px 3px;text-transform:none;
}


7.Ganti kode #2288BB; dengan kode warna yang kamu inginkan atau lihat disini
8.Kemudian coba di Preview / pratinjau template kamu. Jika sudah berubah warna background judul sidebar kamu. Lalu di Save.

Jika Belum, Coba dilihat lagi kode warnanya, background:#2288BB; Pastikan Kode ini " ; " ada dibelakang kode warna (tanpa tanda ""), jika kode itu hilang maka warna tidak akan berubah. Untuk tips diatas sampai disini dulu.

Jika sidebar  ingin dimodif dengan diberi lengkungan di setiap sudutnya. Anda  bisa tambahkan kode border-radius: 11px 0px 11px 0px; keterangan kode: border-radius: atas kiri-atas kanan-bawah kiri-bawah kanan. Untuk lebih jelasnya kalian bisa edit di sini http://www.cssportal.com/css3-rounded-corner/.

Cara diatas akan merubah warna judul sidebar widget di bagian kiri-kanan blog, dan juga footer widget dibagian bawah. 


Jika  Anda ingin membuat warna background judul yang berbeda antara sidebar dan footer. Silahkan ikuti petunjuk  dibawah ini.


Hanya pada bagian sidebar widget kiri-kanan blog

1. Cari kode .sidebar .widget h2 { dan tambahkan kode background:#2288BB; padding:4px 2px 2px; dibawahnya. Save Template selesai.
2. Atau gunakan cara dibawah ini. Cari kode ]]></b:skin> dan tambahkan kode berikut di atas kode ]]></b:skin>


.sidebar .widget h2 {
background:#2288BB; padding:4px 2px 2px;
} 


Hanya pada bagian Footer widget bawah blog.

1.Cari kode .footer-inner .widget h2 { dan tambahkan kode background:#2288BB; padding:4px 2px 2px; dibawahnya. Save Template selesai. 
2.Atau gunakan cara dibawah ini. Cari kode ]]></b:skin> dan tambahkan kode berikut di atas kode ]]></b:skin>

KODE
.footer-inner .widget h2 {
background:#2288BB; padding: 4px 2px 2px;
}



Setiap template mempunyai code html  yang perbedaan. Jika tidak menemukan kode-kode diatas. Cobalah untuk mencari kode yang semirip mungkin dengan kode HTML diatas. Dan jangan ragu untuk bertanya atau berkomentar mungkin Admin bisa membantu masalah Anda. 

Semoga Bermanfaat.

Next
Prev Post
Previous
Next Post

8 comments:

  1. Mempercantik Blog memang penting ya mas, tapi yang lebih penting Memperbanyak konten bermanfaat, kaya blog ini

    ReplyDelete
    Replies
    1. oooo... ini yang lagi saya cari... thanks GAN infonya

      Delete
  2. Mas. pada bagian tanggal blog juga juga berubah warna sama seperti pada sidebar mas. mohon cara agar warnya dapat di ganti pada bagian tanggalnya. terimakasih

    ReplyDelete
  3. Terimakasih Infonnya, bermanfaat banget. Jangan lupa berkunjung ke www.newshadis.xyz ya.. Template nya dari Mastemplate. Bisa bikin sendiri..

    ReplyDelete