Tutorial Tukar Title Sidebar Background Kepada Icon/Image Cara 2
Ini versi or cara ke 2 yang korang boleh apply untuk ubah title sidebar kepada icon atau image. Cara pertama korang boleh rujuk pada “Tutorial Cara Tukar Title Sidebar Kepada Icon/Image Cara 1”. Perbezaan di antara cara 1 dan ke 2 ialah cara 1, korang kena buat tiap2 satu design image+tajuk sidebar bagi setiap sidebar manakala yang ke 2 korang just letak satu image/background bergambar pada bahagian title sidebar. Manakala untuk tajuk boleh korang masukkan secara manual melalui gadget sidebar. Untuk hanya mengubah warna background pada title sidebar boleh rujuk “Tutorial Tukar Warna Background Title Sidebar“.
Untuk perbezaan cara 1 dan 2 lebih jelas, sila lihat gambar dibawah.
| Cara 1 | Cara 2 |
|---|---|
 |
 |
STEP 1
Sila backup template sebelum mula untuk mengedit sebarang code.
DASHBOARD>DESIGN>EDIT HTML>tick kotak EXPAND WIDGET TEMPLATES>klik DOWNLOAD FULL TEMPLATE
STEP 2
Tengok width (kelebaran) sidebar korang dengan tekan “ctrl+f” atau “f3”, untuk cari keyword “#sidebar-wrapper
Contoh coding;
#sidebar-wrapper {
padding-left: 10px;
padding-right: 10px;
width: 300px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
***bagi contoh code di atas width (kelebaran) ialah 300px. Height boleh dibuat dalam anggaran 40-50px.
***coding maybe berlainan bagi setiap blog
STEP 3
Design background image bagi title sidebar mengikut ketinggian (atau boleh upload gambar dari mana2 website yang bersesuaian) dan uploadkan gambar tue kepada photobucket.com, imageshack.us atau mana2 website storage image. Selepas upload sila copy “url image” yang diberi. Contoh url image;
http://i1207.photobucket.com/albums/bb468/tomatogurl86/sidebar.png
STEP 4
Kembali pada “edit html”. Tekan “ctrl+f” dan cari code “sidebar h2″
.sidebar h2 {
text-align: center;
background:#8A4117;
margin:0;
padding:0 0.2em;
line-height:1.5em;
}
Pada code background tue sila tukar kepada;
background:url(“URL IMAGE/BACKGROUND”) no-repeat 2px .25em;
STEP 5
Preview dan save jika tiada sebarang error pada coding.
******************************
Ini cara yang gayah pernah buat pada template blog cik tom sebelum ini. Cara yang cik tom guna sekarang?? Tunggu untuk cara ke 3 dalam next tutorial. Segala pertanyaan mengenai tutorial sebelum2 ni, insyaAllah cik tom akan balas secepat mungkin ye. So, untuk apa-apa pertanyaan lanjut mengenai tutorial sila “tick subscribe” pada ruangan komen.
p/s: insyaAllah minggu ini akan berusaha marathon tutorial yang dalam list request dan blog review dalam waiting list.
Sharing is caring
Wahh~ Thanks kongsi Cik Tom sayam! ;D
thanks cik tom..amat berguna tuk saye
terima kasih cik tom..
nanti akak cuba..
kenapa gayah tak mau buat blog tutorial ye..
dia kan pandai benda2 gini..kan??
ciktom yang baik…
akak singgah deh…
@shag: ur wlcm dear…yg shag punye tue insyaAllah cik tom buat secept mungkin..
@atiqah: ur wlcm…slmt mencuba
@diana: sama2 sis..aah…gayah mmg pandai buat/design blog org lain..tp xpernah buat tutorial plk…kalau buat konpem ramai nak belajar…akak try la suggest kat gayah..
as salam…cikTom kembali bertutorial…bagus2.nak try buat laa yg mcm kat entry nie…thanks cikTom
salam cik tom,
lama tak mai jengah kak ati
bz betui na..
byk kisah sedih yg kak ati
alami dlm seminggu ni tau
nanti kak ati nk ask something
tp biar cik tom tak bz dulu..ok
ada tuto br thanks cik tom
wah!! ada tutoo!! nk buatt!! ^^ tankx cik tom.. =)
Yeay…Cik Tom is back…windu Cik Tom…he he …akak mmg ada cita cita nk wat semua ni, tapi kan mcm da serik…takut ilang lagi…
Tom,
Datang ziarah. Mekar belum lagi nak tukar apa2 kat sidebar ku. maklumla masih baru. Nanti boring nk tukar boley godek2 tutorial sini !
alamak..ri tue da tag u..cba check balek my entry yg dpt award tue ea
salam
cik tom….besh3 ni….
dh lama nk cari tutorial utk sidebar ni.. akhirnya cik tom dh bg.. tp, coding tak sama la cik tom.. nk wt cam mana? huhuhu..
Hai hai Tom..ellen suka ngan tutorial ni..nak try nanti ler ya…hehe..miss u dear!!
cikgu tom !!! dah lame cikgu tom x wat tutorial..anak murid sume rindu ni haaaa…thanx cik tom 4 diz tutorial ^__^
wah..
bagus tutorial ni.
thanks cik tom 😀
pandai cik tom buat tutorial ni..teruskan usaha cik tom..hehe
hai cik tom.saye baru follow blog cik tom.best r cik tom buat tutorial2 nih.keep up da gud effort cik tom!=D
Ke mana CT..menghilang rindu akak CT tak ziarah blog akak.Busy study ke?
yang sebelum ni sy dh try wat tp tak menjadi..
sy search coding tu tak jumpa..
tak terfikir nak buat..hihi
tapi mungkin ok bagi yang berminat.mana tau nak lawakan blog.
cik tom ni byk tutorial yer..
senang nak faham dan cute..hehe
cik tom… ada tutorial x cmne nk sign up alexa.. huhu konpius la.. ;P
boleh dipraktikkan nie cik tom..:)
thanks berkongsi ilmu…
bez laa tips2 yg cik tom bg…keep it up
tertarik jugak nk buat cara ni, tp skg ni mlas ag nk mendesign..huhu
thank tapi tak leh guna untuk blog sy…tak tahu napa code blog sy tak leh nak pakai suma tutorial yang ada kat sni..
ermmm
alaa..
cik tom..
kod tu tak jumpe larh..huhuhu
@►AdamXis◄: ur wlcm…selamat mencuba 🙂
@Ati Masrif: nak tanya pe tue ye??
lm xjenguk akak…sori ye akak..cik tom busy so jrg on9…
@zaty luvlianncezzz: ok da tgk tag award dr ML kan..thanks..
@shatooman: cik tom xberapa pasti..kena tgk coding blog achie dulu…
@ツ Fatin: tq dear!
@zmah: ahh busy study..tiap2 hr ade presentation…huk3
@ADfeez: takde buat lg tutor tue tp cik tom masukkan dlm list tutor…huhu
@comot-comel: kena guna tutorial yg cara 1…[https://www.ciktom.com/2011/01/tutorial-tukar-title-sidebar-kepada.html]
tp step 4 dlm tutor tue. cuba cari nama tajuk kat sidebar…contoh "ctrl+f" tajuk ".:: Carrot Layu ::."
pastu yang lain follow up je tutorial dari cara 1 tue ye…
cik tom , dh try wt dh yg frst uw , ta jdik , hurm , sdey lahhh , cam compius jek ,
@NuRuLhUdA aBu hAsSaN: yg first??apa yg first..step 1 ker??step 1 untuk download template sebagai backup incase silap code…
cuba bgth part mana yg confius??cik tom akan cuba tlg..
sy dh cari code tu xde pun dalam edit html saya 🙁
alhamdulillah jadi :)..tengs..
http://klinikhatidrmira.blogspot.com
@cik ngah; cuba try tutorial dalam link ni..boleh x?
https://www.ciktom.com/2011/03/cara-letak-icon-comel-tiltle-sidebar.html
@Mira Hana: ur wlcm 😉
code yang di cari saya tak jumpa lah.
mcm nerp erk?
Jom baca entri terkini nadiah izahra …OMG! jumpe BLACK MENTOR
aah code blog nadiah takde yang dalam step 2..maybe ignore je dan followe up step seterusnya sebab code dalam step ke 4 ada dalam blog awak…step 2 tue hanya nak pastikan kelebaran sidebar awak..awak boleh cuba try dan error untuk width dan height..atau cuba amik ukuran cik tom cik tom..selamat mencuba..
kesilapan nama. nadiah izahar.
Jom baca entri terkini nadiah izahar …OMG! jumpe BLACK MENTOR
adouuuu.. x boleh arr sbb cari kod yg “#sidebar-wrapper “tuhh xder.. yg ada hanya “h2{” jerr.. err… mcm mana eek?
Jom baca entri terkini wancikgumuzik …iisshhhkkk!! Ukiran pada buah labu yang pelik2 18 foto 18 SG
erm kalau xde code tue kt blog cikgu…cikgu boleh terus proceed step 3 dan 4 untuk “h2{“…yg sidebar-wrapper tue hanya nak tau width je dan agak berapa height…width tue cikgu cuba guna 280px dan height 35px/40px kerr?tgk kalau buat menjadi x?
salam, cik tom nak tanya kenapa nurul tak menjadi wat tutorial ni yer??
ini nurul bagi coddingnya dan boleh tak tunjukkan kat mana yang nak di letakkan..asyik tak menjadi je bila buat…
.sidebar h2 {
margin: 1.6em 0 .5em;
padding: 4px 5px;
background-color: #FF99CC;
font-size: 90%;
color: #ffffff;text-align:center;border: 0px solid #000000;
}
harap cik tom boleh tolong yer..