Tutorial Buat Background Title Sidebar
STEP 1
DASHBOARD>DESIGN>EDIT HTML>tick “EXPAND WIDGET TEMPLATES”
STEP 2
Apa-apa pun sebelum mula nak edit code. Untuk keselamatan korang kena backup dulu coding yang lama dengan klik ” DOWNLOAD FULL TEMPLATE“
STEP 3
Tekan papan kekunci keyboard “CTRL” dan “F” serentak. Pastu akan keluar pop-up box diatas sebelah kanan screen. Korang copy+paste word ” sidebar” dalam box tue.
STEP 4
Akan keluar semua keyword “sidebar” (highlight word) yang ada dalam html. So korang kerana check satu persatu sehingga jumpa “.sidebar h2” atau “.sidebar.widget.h2”. (diingatkan maybe semua orang berlainan coding. Kalau tak jumpa korang kena try and error tau. Cari coding yang seakan-akan camni)
STEP 5
Ni contoh yang coding blog cik tom;
1) Code yang warna merah tue korang tukar dengan warna yang korang suka untuk tukar warna backgroud. Nak tengok senarai jenis warna dan code html warna, boleh klik kat SINI.
2) Selain code warna, korang boleh jugak tukarkan code merah tue kepada “transparent” kalau nak kan background title tue transparent.
STEP 6
Klik “PREVIEW” untuk melihat hasilnya. Kalau tiada error dan berpuas hati boleh klik “SAVE TEMPLATE“.
p/s: Harap tutorial ni membantu adik nuyul dan blogger lain. Kalau ada tersilap maklumat cik tom sampaikan ni sila jangan segan-segan bagitahu ye.
Sharing is caring
perghhh!!! mantap r info ko ni Tom, aku da agak, memang meletop budak Tom ni miahahahaa
bagus2, nice sharing.. 10/10
@padin: hoho..sekadar share ilmu la..ko dah terlebih tahu kan..huhu
aku rasa ko happy pasal dapat jadi orang 1st komen for d 1st time kan??hehe…
50 KOLEKSI BLOG TERKINI
good tutorial…
TEKNIK MUDAH LAJUKAN WINDOWS ANDA
KOLEKSI KORD GITAR LAGU MELAYU
haha akhirnya dapat gak jadik 1st ekekeee
rajin buat tuto cik tom ni..huhu
bagus tutorial ni..dh detail tu..harap2 adik huyul dapat buat yea… 🙂
tom tom bak
🙂
akak kalu bab2 coding/ctrl/paste ni yg lemah cik tom..aduyaii..
tulun2..nak letak ads large rectangle pom akak xreti..heheh..
cik tom..add ym nak?..ni emel akak
msteja03@yahoo.com
senang nk tanye2..
wah…baiknya tom buat tutorial kan..ok ni Tom..teruskan…ellen pon dpat juga belajar..hehhe
Ni marathon tutorial plak ke cik Tom?
Haha..
Rajin ek..
Aku x fhm pun tutorial ape ko buat ni..
Haha..
Btw, nice..
wah..
rajin cik tom sekarang ni buat tutorial ye..
Fuh.. Memang kari berapi kawanku sorang ni.. Makin lama makin mantap.. nice sharing tutorial.. tp sya rsa sya xdpt pakai.. hehe..
rajin la wat tutorial..
rajin la wat tutorial..
mekasih cik tom sbb sudi b'kongsi ilmu..hihi..
*cik tom, nk tnye 1 soklan memandangkn cik tom nie pro dah dlm bab2 blog nie..hihi..sy pnye entry nape x bley nk tukar kaler kpd kaler yg sy nak ye??..bile publish je, kaler tulisan jdk xde la..problem kat mane tu ek??..mekasih cik tom..=))
@pch: tenkiu 😉
@padin: tahniah!! ;P
@eda: rajin buat bila ade bertanyakan..tapi tak dapat la buat tiap2 hari sebab takut orang borink pulak..huhu..
@syamila: tue la harap adik nuyul dapat buat..tapi tuan empunya diri yang request tutor tak datang lagi..hihi
@robot sakti: yup nape yunk??hihi..
@sarah: saya dah bagi link yang tutorial buat LR kat komen entry akak..cuba buat dulu ya..
ok nati cik tom add kat ym..skang tnet slow..so tak dapat nak login..huhu..
@ellen: sekadar berkongsi ilmu mana yang tahu ellen..ni pun ada lagi 2 request tutorial..ngee…tapi kena berselang dengan entry lain la..tak boleh selalu..sebab ni blog peribadi bukan tutorial..huhu
@tieah: dah tak marathon ni..kalau marathon semua entry tutorial..hehe..
ko memang best..paling jujur..i loike..kalau ko tak faham n nak belajar bgth je..boleh terangkan mana yang tak tahu..huhu
@diana: dah selang selikan dengan entry lain ni akak..kalau selalukan muak pulak blogger lain tengok..huhu..
@aretikz: pakai wordpress kan??takpe ur blog dah cantik..
memang kari berapi sebab tadi makan megi slurpp kari berapi..miahahaha~
@rongak: macam rongak jugak..rajin buat bila ade yang bertanyakan 😉
@ladyana: ur wlcm..
ni mesti yana pakai google chrome kan???cik tom pun pakai google chrome tak dapat setup warna..so setiap kali nak edit entry cik tom akan guna internet explorer(edit kaler)..nak bw br guna google chrome(sbb laju)…
skang still seeking 4 de solution..kl tahu ciktom akn inform yana 😉
cik tom saya ada masalah besar, mcm mana kalau saya malas tapi nak blog jd cantik sendiri. ade penyelesaian tak? haha
@poyaty: penyelesaian??tunggu bulan jatuh ke riba…ngee~
alaaaa.. coding lain.. waaaa.. dop retiiiiiii… nk wat blog jadik lawa gakkk… wuwuwuwuwu
@Nufa Yusof: owh coding lain cam mana??kalau xde coding "backgroud"..boleh tambah tau..
salam ciktom..ganer nk buat mcm menu hide/show ciktom tu..yg menu banner contest/ga dan jom curik banner ciktom tu…nk buat camtu jugak sbb loading belog sya tu lambat sgtla…lagipun buat cam ciktom tu kemas sikit..kasi tutorial kat saya leh?tq…
@LyNn'Azlina: rasanya cik tom dah drop komen bg link yg ajar tutorial tue di entry latest lin sebelum ni…maybe lin terlepas pandang kot..2 link tutorial yg lin boleh belajar ialah..
1)http://www.padinno.com/2010/10/ingin-kelihatan-kemas-dengan-autoslide.html
2)http://redboys.info/?p=54
sila lin cuba sana dulu ye…kalau ada apa2 masalah sila bgth..
cik tom syg ~ wuuuuu 🙁
tak dpt buat pon
japg sy buat satu entry khas utk awk tlg sy …
welcome back to my blog utk tgk agak2 ape eh slh sy mase sy buat sidebar nih..
yeayyy!!!
b'jaye..
tq aww..
heheeh 🙂
kat ne nk tick kat expand widget template ?
yang ni try tak berjaya sbb coding dia tak sama dgn cik tom nye contoh.. try satu2 tapi tak jadi.. last2 naik error.. seramm lak jz.. trus stop. hehe.. nnt try lagi 🙂
kalau nk tuka guna image lak camne code dia?
@Addina Mukhlisa : cuba tengok betul2…ada dekat edit html tue belah kanan..
@ekmal: boleh belajar kat link ni;
https://www.ciktom.com/2011/01/tutorial-tukar-title-sidebar-kepada.html
cik tom..
saya pnya teda side bar laa..
dah tgk suma..
mcm na nak wat nie?
saya punya takde lah code sidebar tu… so macam mana?
@MiSzy DiaN: cadangan cik tom cuba tambah coding…yang cik tom bg dlm entry tue atau tambah coding ni;
.sidebar .widget h2 {
text-align: center;
background:#F52887;
margin:0;
padding:0 0.2em;
line-height:1.5em;
}
**tambah coding diatas selepas code
.post {
dan follow step seterusnya…cuba menjadi x??
@Fairuz fazilah: tak dapat tgk blog sebab xdpt buka profile la…sama dgn diatas..
cadangan cik tom cuba tambah coding…yang cik tom bg dlm entry tue atau tambah coding ni;
.sidebar .widget h2 {
text-align: center;
background:#F52887;
margin:0;
padding:0 0.2em;
line-height:1.5em;
}
**tambah coding diatas selepas code
.post {
dan follow step seterusnya…cuba menjadi x??
ciktom, camne nak kecikkan tulisan dia?sy punye jadi besar gabak lak…
@aanie: untuk ubah size font…cik tom refer pada coding blog akak…pada code bawah ni sila tukar size font yang "13px" tue kepada mana2 size yang akak suka ye…
<Variable name="widget.title.font" description="Title Font" type="font"
default="bold normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
cik tom~~linda dah buat,sampai lebam mata..hehe!alhamdulilah,ok!
cik tom, x jadi la….x jumpa .sidebar h2" atau
.sidebar.widget.h2
yg ni pun x jumpa…huhu…
.post {
ari tu jd besar gabak..x igt godek2 cmne…
@aanie:aahl..cik tom dah cek mmg xde la code tue dlm aanie punye blog..so cik tom rekemenkan aanie tukar title sidebar guna tutorial ni;
1) https://www.ciktom.com/2011/01/tutorial-tukar-title-sidebar-kepada.html
atau
2) https://www.ciktom.com/2011/01/tutorial-tukar-title-sidebar-background.html
saya punye code bukan num mcm cik tom .tp dye tulis "textcolor" 🙁
tolong!
sye tak jumpa code debar 2!
TOLONG!
cik tom: sy pon xley lar..kuar error jew..poning dah nie..tlg…
sy punyer coding mcm nie
sidebar .widget h2 {
no-repeat 2px .25em;
text-shadow: 0 0 $(title.shadow.spread) #000000;
letak coding cik tom xley lar..nape ekkk???
@mlle tqa; cik tom dah cek code blog tqa pnye code ni;
.sidebar h2 {
margin: 1.6em 0 .5em;
padding: 4px 5px;
background-color: $sidebarTitleBgColor;
font-size: 100%;
color: #333333;
pada code "color: #333333;" ni..tqa ubah code "#333333;" kepada warna yang tqa nak…just follow step utk tukar code warna cam kat atas..dpt x?
kalau xdpt..sila tambah code;
background:#F52887;
di dalam code tqa dgn gantikan pada code color sebelum ni..cnth;
.sidebar h2 {
margin: 1.6em 0 .5em;
padding: 4px 5px;
background-color: $sidebarTitleBgColor;
font-size: 100%;
background:#F52887;
@mas nurul najihah;pada edit html..search word "sidebar content"…cuba tambah code ni pada code bawah "sidebar content" mas…
.sidebar h2 {
text-align: center;
background:#F52887;
margin:0;
padding:0 0.2em;
line-height:1.5em;
}
cuba buat..good luck!
@aseta; salah letak coding tue yunk…camni;
sidebar .widget h2 {
no-repeat 2px .25em;
text-shadow: 0 0 $(title.shadow.spread);
background:#F52887;
{
cuba try..menjadi x..
thanks cik tom ! :))
dah lama saya cari tutorial ni.
thanks again !
sama2…eh tak tinggal pulak url blog nasya..
salam cik tom. saya dah try buat banyak kali dah ..tak jadi jadi pun ..huk huk sedihnye … apa kata cik tom buatkan untuk saya .. then saya bayar ..serius nie … nanti cik tom hubungi saya balik ya …
Jom baca entri terkini eyna azmi …BEN ASHAARI KENANG MASA SEKOLAH
cik tom busy..xdpt janji nak buat..nanti cik tom cuba tgk coding awakk ye..tp cik tom xnaklah amik bayaran..ikhlas je..erm apa2 cuba kontek email cik tom ye; tomatogurl86@gmail.com
cik tom maaf saya da tukar template.tapi still tak jumpa la sidebar tu.kenapa ek ?? 🙁
Jom baca entri terkini nurul atiqah …Hari yang tak kena
jadi pon , senang je rupenye , kena fahami coding2 tu dulu baru try edit .
Jom baca entri terkini tengku nizam …Sejarah Polis
yeh yeh….. jadi…. Thanks So Much ♥
cik tom…kalau wordpress cm ne plak cik tom..
Jom baca entri terkini kamarul …Tawaran Biasiswa OCBC Bank tahun 2011
xbole nak buat la ….. dah la x jumpe coda sidebar tue :'(
Jom baca entri terkini ainaa …k-pop
Tak jumpaa code sidebar lhaa :3
Dah puas cari :/
Jom baca entri terkini Athirah …ESOK
kalau xjumpa code sidebar..boleh try alternatif tutorial yang ni;
1. https://www.ciktom.com/tutorial-tukar-title-sidebar-background-kepada-iconimage-cara-2/
2. https://www.ciktom.com/cara-letak-icon-comel-tiltle-sidebar-tukar-title-sidebar-cara-3/
saya xjumpa la cik tom .
apa yang tak jumpa yunk?code sidebar tue ke?boleh cuba 3 lagi tutorial untuk title sidebar;
1. https://www.ciktom.com/tutorial-tukar-title-sidebar-kepada-iconimage-yang-disukai-cara-1/
2. https://www.ciktom.com/tutorial-tukar-title-sidebar-background-kepada-iconimage-cara-2/
3. https://www.ciktom.com/cara-letak-icon-comel-tiltle-sidebar-tukar-title-sidebar-cara-3/