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/AVvXsEg371Tn18NT2a47iZbjN8DeY1C1mU3zvJIKCGWEQtgbPQiqRil9dVQJMjNW87BfKIKyo-J_ZjDSbimHjraLzc6tGNKu4JGmYwOCu5y90NoNwD2W80GjaBDc1qkKB_nRUDGnaft37iNGGxM/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 ----------------
Tidak ada komentar:
Posting Komentar