Kali ini saya akan membuat tutorial
tentang cara mengganti background sidebar
widget. kalo ada yang belum tahu background sidebar
widget itu apa ini, adalah contoh
background sidebar
widget pada blog saya:
cara mengganti background sidebar widget
ini dan menggantinya dengan background lain yang lebih menarik. Untuk
menggantinya kita harus sedikit mengotak-atik
kode CSS template. Apabila kita akan mengotak-atik CSS template,
backup lah template anda terlebih
dahulu...biar aman. Cari aman aja lah....hehehe
Untuk menggantinya kita tidak menggunakan
script tetapi dengan gambar biasa dengan
format .gif, jadi tidak akan memberatkan
blog. Oleh karena itu kita harus menyediakan
gambar terlebih dahulu. Dari pada teman-teman bingung cari
gambar yang tepat, Saya telah
menyediakan
gambar yang siap teman-teman gunakan
:
Ini adalah link image hosting dari
gambar diatas:
gambar 1 :http://i560.photobucket.com/albums/ss44/erge32/RGsdbar.gif
gambar 2 :http://i560.photobucket.com/albums/ss44/erge32/EkaSidebar.gif
Okey...kalau teman teman sudah dapat
gambarnya, saya akan memulai
tutorialnya.
Login dulu ke bloger > Tata Letak > Edit HTML > Kemudian cari Kode seperti di
bawah ini (pake ctrl + f supaya
cepet nyari kemudian isikan .sidebar h2)
.sidebar h2, .middlecol h2, .bottom h2{
color: $sidebarcolor;
text-transform: capitalize;
font-size: 14px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
margin: 0px 0px 5px 0px;
padding: 0px 0px 2px 0px;
border-bottom:1px solid $bordercolor;
}
Nah kalo udah ketemu sobat tinggal tambahin aja
Background nya seperti dibawah ini:
background:#f7f7f7
url(http://i560.photobucket.com/albums/ss44/erge32/RGsdbar.gif?imgmax=800)repeat;
atau
background:#f7f7f7 url(http://i560.photobucket.com/albums/ss44/erge32/EkaSidebar.gif?imgmax=800)repeat;
terserah yang mana dipakai
image nya ... jadi kodenya seperti di bawah ini :
.sidebar h2, .middlecol h2, .bottom h2{
color: $sidebarcolor;
text-transform: capitalize;
font-size: 14px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
margin: 0px 0px 5px 0px;
padding: 0px 0px 2px 0px;
border-bottom:1px solid $bordercolor;
background:#f7f7f7 url(http://i560.photobucket.com/albums/ss44/erge32/RGsdbar.gif?imgmax=800)repeat;
}
Simpan. Kalau sudah selesai, insyaAllah sidebar anda telah berganti dengan
sidebar yang disertai lampu berjalan yang indah. Apabila teman-teman semua suka
dengan
tutorial ini, pasang banner
blog ini
di blog anda. Atau klik iklan di blog ini atuh...pssttt...pssttt, kalau
ketahuan bisa kena dibanned nih. hehehe...
Admin
Endro Prasiswo
tel.:081334169022
fax:03423326622
Email:admin@kesamben.co.cc
URL:http://www.obralilmu.co.cc
Facebook:http://www.facebook.com/endro.prasiswo
tel.:081334169022
fax:03423326622
Email:admin@kesamben.co.cc
URL:http://www.obralilmu.co.cc
Facebook:http://www.facebook.com/endro.prasiswo
Comments :
Posting Komentar
jangan lupa beri komentarnya sebagai tanda persahabatan
pilih url/name.jika tidak memiiki url boleh dikosongkan saja