Pages

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
    
----------------------------------------------------------------------------------------------------
Mengubah tampilan sidebar
.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/AVvXsEi0qcjVfdjnHUE3yx9b4hbvt8ScmKeQt901HVbB9he1QE_LMycWG9LI83O1MiaKUrdbcCdcZ3YlRwsDL98VFaZwe1v_uPjsRFAuqKe5qaw6eXNS3wpSkEBy82RsB9A6EI-rRUGTBrbV6xA/s1600/sbheader.png). 

Mengubah tampilan sidebar 2
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

Mengganti Bagian dalam sidebar




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

---------------- Selamat Mencobat ----------------