Cara merubah tampilan sidebar dan judul pada blog .sidebar blog merupakan bagian dari Draft sebuah blog. jika di sederhanakan menurut saya sidebar bisa disebut draft atau tempat dari widget .Biasanya atau pada umumnya sidebar blog diletakkan antara sebelah kiri atau sebelah kanan postingan atau draft post  .

Bisa juga sidebar diletakan di keduanya secara bersamaan di kiri dan kanan diantara postingan blog  sobat  .Biasanya tampilan sidebar dari sebuah template bawaan kurang enak dilihat oleh kita.karena memang pada dasarnya template tersebut  memang bukan buatan kita sedangkan selera orang – orang beda-beda bukan .


Bagaimana solusinya ??? 

Ya tidak ada jalan lain selain mengotak-atik template tersebut.bagi yang masih bingung tentang apa itu sidebar dibawah ini merupakan contoh gambar an dari sebuah sidebar pada blog :

cara merubah tampilan sidebar dan judul pada blog
cara merubah tampilan sidebar dan judul pada blog 

Dalam sidebar terdapat dua bagian yaitu judul sidebar dan content sidebar . disini sobat semua kan mengedit keduanya . Dibawah ini gambaran dari judul sidebar dan conten sidebar

cara merubah tampilan sidebar dan judul pada blog
cara merubah tampilan sidebar dan judul pada blog 

Baik langsung saja ke panduannya . silahkan simak dibawah ini .

CARA MERUBAH TAMPILAN JUDUL SIDEBAR PADA BLOG

  • Silahkan login terlebih dahulu
  • Kemudian masuk ke dashboard – setelah itu klik bagian menu template

cara merubah tampilan sidebar dan judul pada blog
cara merubah tampilan sidebar dan judul pada blog 
  • Kemudian klik edit html ( cat: untuk mengantisipasi kegagalan -silahkan download dulu template sobat dengan mengklik cadangkan/pulihkan – kemudian klik unggah )

cara merubah tampilan sidebar dan judul pada blog
cara merubah tampilan sidebar dan judul pada blog 

  • Setelah itu sobat cari kode salah satu dibawah ini : ( untuk mencari kodenya gunakan kombinasi ctrl + F )
  1. .sidebar h2
  2. .sidebar1 h2  dan  .sidebar2 h2
    .sidebarA h2 dan .sidebarB h2
  3. .widget h2
  4. #sidebar .widget h2
  • kemudian setelah ketemu silahkan pilih tampilan yang diingin kan dengan menambah kode dibawah ini sesudah tanda ( { ) dan sebelum tandan ( } ) :

    border-bottom: 2px solid #0000CD;
    box-shadow: 0px 5px 5px #666;
    background: url(“http://blogcips.web.id/wp-content/uploads/2018/01/versi-kuroko-2.jpg “); atau bisa diganti dengan background : #000;



contoh :

.sidebar h2 {
    color: #000;
    font: 600 15px “Patua One”,Arial;
    text-transform: uppercase;
    margin: 15px 0px 0px;
    padding: 2px 8px 5px;
    border-bottom: 2px solid #0000CD;
    box-shadow: 0px 5px 5px #666;
    background: url(“http://blogcips.web.id/wp-content/uploads/2018/01/versi-kuroko-2.jpg“); 
}

cat :

warna orange : ganti dengan warna yang dinginkan untuk mengetahui kode warna silahkan klik disini
warna merah : ganti dengan gambar yang diinginkan dengan url yang telah upload sebelumnya .

Dibawah ini ada gambar yang dapat sobat coba – kemudian ganti url yang berwarna merah pada kode diatas .

http://blogcips.web.id/wp-content/uploads/2018/01/versi-ang-2.jpg

http://blogcips.web.id/wp-content/uploads/2018/01/versi-icon-amnesia-2.jpg

http://blogcips.web.id/wp-content/uploads/2018/01/versi-kuroko-2.jpg

http://blogcips.web.id/wp-content/uploads/2018/01/versi-luffy-2.jpg

http://blogcips.web.id/wp-content/uploads/2018/01/versi-naruto-1.jpg

http://blogcips.web.id/wp-content/uploads/2018/01/versi-windows-1.jpg

  • Langkah terakhir simpan .


CARA MERUBAH TAMPILAN CONTENT  SIDEBAR PADA BLOG

  • Silahkan login terlebih dahulu
  • Kemudian masuk ke dashboard – setelah itu klik bagian menu template

cara merubah tampilan sidebar dan judul pada blog
cara merubah tampilan sidebar dan judul pada blog 
  • Kemudian
    klik edit html ( cat: untuk mengantisipasi kegagalan -silahkan download
    dulu template sobat dengan mengklik cadangkan/pulihkan – kemudian klik
    unggah )

cara merubah tampilan sidebar dan judul pada blog
cara merubah tampilan sidebar dan judul pada blog 

  • Setelah itu sobat cari kode .sidebar .widget-content  ( untuk mencari kodenya gunakan kombinasi ctrl + F )
  • Kemudian tambahkan kode dibawah ini seperti menambah kode pada judul sidebar diatas :

     background-image: url(“http://blogcips.web.id/wp-content/uploads/2018/01/versi-icon-amnesia-2.jpg“);
    background-repeat: no-repeat;
    background-position: bottom;
    background-color: #FFB200;

cat :

warna orange : ganti dengan warna yang dinginkan untuk mengetahui kode warna silahkan klik disini
warna merah : ganti dengan gambar yang diinginkan dengan url yang telah upload sebelumnya .

  • Langkah terakhir jangan lupa klik simpan 

Sekian postingan kali ini .semoga bermanfaat bagi sobat semua . jika bingung silahkan berkomentar dengan baik dan benar pada kolom komentar dibawah.