Mengubah Tampilan Sidebar Blog

Mengubah Tampilan Sidebar Blog - Sidebar blog itu tempatnya berada di samping posting (kiri atau kanan blog). Jika sobat menginginkan sidebar blog bawaan blogger terlihat menarik. Silahkan lihat cara dibawah ini.

Mengubah Tampilan Sidebar Blog:

1. Login ke blogger --> Template --> Edit HTML

2. Cari kode .sidebar h2 {.  Jika tidak ada, cari kode h2 { 

3. Jika blog sobat terdapat kode h2 {. Maka tampilannya seperti dibawah ini:

/* Headings
h2 {
     font: $ (widget. title. font) ;
     text-transform: $ (widget. title. text. transform) ;
     color: $ (widget. title. color) ;
     margin: .5em 0;  

4. Ganti kode berwarna merah dengan di bawah ini:

.sidebar h2 {

font-size:110%;

font-weight:bold;

text-transform:uppercase;

text-align:right;

border: 1px solid #000;

background:#ffffff;

padding;10px;

}

Note:

  • 110%: Nilai huruf judul sidebar. Bisa sobat ganti menjadi nilai satuan Persen, atau Pixel, yang persen bisa menjadi 100%, 150%, 200% dan angka lainnya. Jika yang pixel menjadi 10 px, 15 px, 20 px dan angka lainnya.
  • Bold: Berarti tulisan di judul sidebar tebal. Jika ingin tulisannya biasa saja, ubah menjadi normal. Jika ingin tulisannya miring, ubah menjadi italic.
  • Uppercase: Berarti huruf judul sidebar besar semua, jika ingin huruf depannya saja (Inisial) ubah menjadi capitalize. Jika ingin huruf kecil semua, ubah menjadi lowercase.
  • Right: Berarti posisi tulisannya di kanan. Jika ingin tulisannya di kiri, ubah menjadi left. Jika ingin tulisannya di tengah, ubah menjadi center.
  • 1px solid #000: Berarti ada garis mengelilingi judul sidebar. Judul sidebar disini berukuran 1 px dengan warna hitam. Bisa sobat ubah sesuai keinginan sobat.
  • ffffff: Berarti warna background putih. Jika ingin warna lain, bisa sobat ubah sesuai keinginan sobat dengan melihat di: Kode Warna Html.
  • 10px: Berarti ukuran padding sebesar 10 px. Perlu anda tambahkan apabila sobat menggunakan warna background (Jika sobat tidak memakai background, akan terlihat kurang menarik). Fungsi dari padding agar tidak terlihat bertabrakan dengan bagian luar.

Note: Ukuran padding blog saya menjadi: 10px 13px 8px 30px

Peringatan: Cara ini berguna untuk template bawaan blogger

Berikut cara Mengubah Tampilan Sidebar Blog yang bisa saya berikan untuk sobat
Sobat baru saja membaca artikel tentang Mengubah Tampilan Sidebar Blog. Sobat boleh menyebar luaskan atau mengcopy - paste artikel Mengubah Tampilan Sidebar Blog jika memang sangat bermanfaat untuk sobat, tapi dengan syarat sobat harus meletakkan link di bawah ini sebagai sumbernya. Jika tidak, maka akan diproses secara DMCA Takedown yang tentu saja tidak baik bagi blog sobat maupun sobat sendiri. Terima kasih atas perhatiannya.




Artikel Terkait:

12 komentar:

  1. Cakep Gan makasih banyak tutorialnya I like It.. (maklum pemula) :D

    BalasHapus
  2. kalau untuk membuat kolom yang di bawah postingan agan itu gimana ya?
    trus untuk related articlesnya juga, kalau di saya related articlenya kadang mengannggu isi postingan karena dia di tambahkan langsung di bawah postingan..
    terima kasih sebelumnya..

    BalasHapus
    Balasan
    1. Saya mendapatkan cara tersebut dari teman blogger juga, tapi yang dia beri (kalau ga salah) untuk blog yang bawaan. Jika blog buatan saya kurang tahu bisa apa ga caranya

      Hapus
    2. blog saya juga masih dari blog bawaan blogspot.
      jadi mungkin bisa, punya linknya gak gan?

      Hapus
    3. Agan yakin blog agan bawaan dari blogspot? Setelah saya cek, kolom di bawah footer blog agan terdapat blog yang membuat templatenya (kalau ga salah: Urangkurai). Jika yang agan maksud kolom di bawah postingan (di template saya terdapat Arsip blog, Link Teman dan Komentar Terkini) caranya mudah: masuk ke tata letak dan silahkan agan ubah sendiri apa yang ingin agan ubah

      Hapus
  3. the keren juga ya ganti judul sidebar bervariasi ane coba ah nanti thanks gan

    BalasHapus
  4. makasih infox gan,,sangat membantu...

    ingin jualan pulsa murah untuk dipakai sendiri atau dijual??
    silahkan kunjungi http://azzampulsa2017.blogspot.co.id/

    BalasHapus
  5. Makasih min Infonya, ditunggu yaa kunjungan ke blog saya.
    Ada Movie Lengkap Min

    https://nanda-suhendra.blogspot.com/?m=1

    BalasHapus

--> Berkomentarlah, tapi menggunakan kata yang sopan
--> Mohon jangan ada link aktif
--> Mohon jangan spam atau malware
--> Usahakan berkomentar sesuai dengan topik artikel

Terimakasih Atas Kunjungannya.


Sponsor: Dmca ǀ Tynt ǀ Copyscape ǀ Pengunjung
Gambar template oleh A330Pilot. Diberdayakan oleh Blogger.