15 May 2015

Cara Modifikasi Judul Sidebar di Blogspot

Kali ini aku mau sharing cara mempercantik tulisan judul di sidebar, kayak punyaku di samping kanan ini lho. Tujuannya untuk mempermudah pengunjung dalam navigasi di blog kita, misalnya mau mencari popular post atau label tulisan, kalau judulnya dibuat berbeda pasti lebih cepat mencarinya.


image www.freepik.com
edited by indahprimadona

Pada template yang standar mungkin tampilan sidebar akan seperti ini.



Tulisan rata di sebelah kiri, dan background berwarna putih polos. Nah sekarang aku mau share cara membuat tulisannya berada di tengah dan ditambah dengan background yang berwarna.

Pertama, pada dashboard blogspot, klik Template. Jangan lupa backup dulu sebelum mengutak-atik ya. Lalu klik Customize.



Klik Advance lalu pilih Add CSS.



Lalu copy paste kode ini. Kalau di kolom ini sudah banyak code yang lainnya, letakkan saja di paling akhir. Jangan lupa klik Enter dulu untuk memisahkan dari code sebelumnya.

.sidebar h2 {
background:#FFF8C6;
color:#000000; 
font-size: 16px;  
text-align: center;  
text-transform: uppercase; 

Untuk warna background bisa disesuaikan dengan tema warna blogmu, pilihan warna dan codenya bisa dilihat DISINI. Color untuk warna tulisan. Font size untuk menentukan besarnya huruf yang dipakai sebagai judul, bisa diatur sesuai keinginan. Text allign untuk menentukan posisi peletakan tulisan, mau ditengah atau dipinggir. Text transform untuk menentukan tipe tulisan, karena aku menggunakan huruf kapital maka aku tulis uppercase, untuk huruf kecil bisa ditulis lowercase.

Sekarang tampilan judul di sidebarmu sudah lebih rapi dan lebih menarik.

Happy blogging ^_^

post signature 

34 comments :

Silahkan tinggalkan komentar dengan bahasa yang sopan, tidak mengandung SARA, dan tanpa link hidup
Jangan lupa follow IG @indahprimadona
Saran dan masukan ke hello.primadona@gmail.com
Terima kasih ^_^

  1. Thanks for sharing, Mbaaak.. :D

    Tapi blog ku aneh deh. Dulu sempet copy paste kode di menu css, tapi tetep aja ngga mau blognya. Ngga ngaruh en ngga ada bedanya. Huhuhu.. Blog ku sentimen! T_T

    ReplyDelete
  2. Cantik mbak...ntar mau nyoba ah :)

    ReplyDelete
  3. sipp..makasih tutorialnya mbk^^

    ReplyDelete
  4. Makasih ilmunya. Kapan-kapan pengen di coba ah, siapa tahu berhasil.

    ReplyDelete
  5. makasih infonya mbak indah...kapan2 perlu dicoba...mudah2an bisa di masuk di templateku hihi...

    ReplyDelete
  6. wah...bisa dicoba ini tipsnya...makasih ya mbak.salam kenal

    ReplyDelete
  7. bagus tutorialnya mbak..salam kenal ya :)

    ReplyDelete
  8. Maakkk makasih yaa tipsnya. udah aku praktekan di blogku. horeee :)

    ReplyDelete
  9. Kalo udah moding template rasanya pingin ini itu. Jadi bikin loading berat kak.

    ReplyDelete
    Replies
    1. Pengennys sih template feminin. Tapi gak pantes buat cowok :D

      Delete
    2. cari yang feminin tapi warna maskulin hehehe :D

      Delete
  10. Ini template bawaan blogger. Kalau yang udah udah sulit kak... Pake script html :3

    ReplyDelete
  11. Sip mba tipsnya. Terimakasih banyak

    ReplyDelete
  12. kalo mau ganti fontnya, di Advance cari yang Gadget, nanti bisa pilih jenis font
    kalo unkuran fontnya tinggal ganti font size :)

    ReplyDelete
  13. setahuku kalau tulisan judul sidebar jadi satu sama font tanggal di atas judul, gantinya yang di Advance kan?

    ReplyDelete
  14. Terima kasih mbak buat ilmunya :) sangat bermanfaat

    ReplyDelete
  15. mba dona aku udah coba css-nya, aku mau nanya ko di sidebar aku gk bisa rapi kaya punya mb dona ya, templatenya yg beda atau gimna ya mba.
    terimakasih

    ReplyDelete
    Replies
    1. Kalau aku lihat sih kayaknya sama mbak, bedanya gimana?

      Delete
    2. Oiya mba dona, kmin aku yg slah, nah aku pake layoutny ternyata twoside, aku bingung sendiri pas aku cek lagi ada ternyata yg pake oneside, langsung aku ganti deh.. hhe
      Dia mba aku masih bingung cara atur warna sm bentuk judul sidebarny, punya mb dona bisa jadi warna merah, itu settingny dimana ya mba?

      Delete
    3. Tinggal diganti code untuk backgroundnya, code warnanya bisa dilihat di link yang aku tulis ^^

      Delete
  16. waaaaa ibu, ini membantu sekaliii terimakasih <3

    ReplyDelete