Cara Mengganti Tampilan Sidebar pada Blog

Setiap blogger tentunya berkeinginan untuk mempercantik, memodifikasi, memperindah tampilan blognya. Memang bagi pemula seperti saya susahnya minta ampun. Sedikit-sedikit saya belajar dan berusaha memahami. kali ini, saya mau menceritakan bagaimana saya memodifikasi sidebar pada blog ini. So maaf apabila banyak sekali kekurangannya.

Tahapan-tahapannya :

A. Untuk memodifikasi Judul Sidebar

1. Seperti biasa masuk ke dasbor sobat kemudian pilih rancangan dan kemudian pilih edit HTML

2. Cari kode .sidebar h2 { agar lebih mudah gunakan Ctrl + F dan lihat bagian bawah kode tersebut terdapat kode seperti dibawah ini

    

----------------------------------------------------------------------------------------------------

.sidebar h2 {

    background-image: url(Url anda);

    background-repeat: no-repeat;

    color: #fff;

    font-size: 11px;

    font: bold;

    height: 15px;

    padding: 3px 13px 8px 30px;

    text-align: Left;

    width: 300px;

----------------------------------------------------------------------------------------------------     

*Catatan.

Untuk mengganti background judul sidebar silahkan ganti url yang berwarna ungu dengan url sobat. Kalo mau ganti z sama url ni (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEk9l-KpSQMQYsa-2sXLnlyGlbEuLvnG9wJufGfBbPe4fReDWO5ZcF80c52XMXwE0pSAdbwWxHtbUX-539FUhWWqaSSEMN0Pzch5v9YpX0yryDbs5iOHKetoD47MrdVPSahpzA0BHp74A/s1600/sbheader.png). 

Contoh Background pada judul sidebar

Untuk huruf dan warna silahkan sobat sesuaikan ganti dengan keinginan sobat.

B. Untuk memodifikasi bagian dari sidebar (isi sidebar)

1. Cari kode .sidebar li { (lihat kode dibagian bawahnya.) 

-----------------------------------------------------------------------------------------------------

.sidebar li {

    background-image: url(Url gambar anda usahakan untuk yang ini berupa symbol);

    background-position: 2px;

    background-repeat: no-repeat;

    color: #333333;

    font: 10px Arial,Helvetica,sans-serif;

    letter-spacing: 0;

    list-style-type: none;

    padding-bottom: 2px;

    padding-left: 16px;

    padding-top: 2px;

    line-height: 1.4em;

    text-align: left;

-----------------------------------------------------------------------------------------------------

*Catatan

Background image merupakan simbol yang tampil pada setiap siderbar milik sobat, so silahkan urlnya ganti dengan url sobat (gambar/iconnya harus kecil agar sesuai). 

untuk menambahkan lines atau garis silahkan tambahkan kode dibawah ini diantara kode diatas

-----------------------------------------------------------------------------------------------------

border-bottom: 1px dotted #cccccc;

-----------------------------------------------------------------------------------------------------

contoh :

-----------------------------------------------------------------------------------------------------

.sidebar li {

    background-image: url(Url gambar anda usahakan untuk yang ini berupa symbol);

    background-position: 2px;

    background-repeat: no-repeat;

    border-bottom: 1px dotted #cccccc;

    color: #333333;

    font: 10px Arial,Helvetica,sans-serif;

    letter-spacing: 0;

    list-style-type: none;

    padding-bottom: 2px;

    padding-left: 16px;

    padding-top: 2px;

    line-height: 1.4em;

    text-align: left;

-----------------------------------------------------------------------------------------------------

Untuk Color, padding, jenis huruf, ukuran dll. terserah sobat mau diganti apa nggak tinggal disesuaikan. Intinya kode diatas/yang mirip diatas tentunya masih bagian dari sidebar. 

Hasil dari kode diatas

Maaf kalo bahasanya agak ngawur soalnya lagi kagak konsen nie... lagi banyak pikiran.. heu..heu..

---------------- Selamat Mencoba ----------------