Tutorial Tukar Title Sidebar Kepada Icon/Image Yang Disukai Cara 1

January 3, 2011April 15, 2011 ciktom 51 Comments

Seperti yang dijanjikan , cik tom akan ajar tutorial cara untuk menukar title sidebar yang biasa kepada icon atau image yang korang suka. Tutorial ini request dari qila dan ekmal. Pada yang hanya nak ubah warna je boleh belajar di Tutorial Tukar Warna Background Title Sidebar.

Sebenarnya banyak cara untuk tukar title sidebar image ni. Yang cik tom tahu ada 3 cara untuk tukar title sidebar kepada icon atau image. Rasanya kalau ajar sekaligus, panjang pulak+kemungkinan besar korang akan pening kepala. So, tutorial ini akan dibahagi kepada 3 part.

STEP 1

First step ialah backup dahulu template korang sebagai langkah berjaga-jaga tapi kalau rasa yakin tak payahlah;

DASHBOARD>DESIGN>EDIT HTML>tick kotak EXPAND WIDGET TEMPLATES>DOWNLOAD FULL TEMPLATE

STEP 2

Korang kena tahu berapa size width (kelebaran) bagi sidebar blog. Cara untuk cek size width ialah dengan tekan keyboard “CTRL+F” atau “F3” (mana2 satu step) dan copy+paste code di bawah ke dalam kotak find;

#sidebar-wrapper

Contoh code blog cik tom ialah width: 300px. Ini bermakna kelebaran sidebar ialah 300px. Manakala untuk height pula korang boleh buat dalam anggaran 35-50px;

#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 */
}

STEP 3

1) Apabila dah tahu width dan height. Next step ialah korang mendesign sidebar icon tue di photoscape/adobe photoshop/paint or apa2 application yang bersesuaian.

2) Pastikan korang set semua size icon tue mengikut width dan height seperti dalam step 2.

3) Selepas siap uploadkan gambar tue pada imageshack.us, photobucket.com dan sebagainya.

4) Sila copy url image tue, contoh url image ialah;

http://i1207.photobucket.com/albums/bb468/tomatogurl86/sidebar.png

***tutorial jenis ini korang kena design tiap2 image pada sidebar.

STEP 4

Balik kembali pada “edit html” dengan;

1)DASHBOARD>DESIGN>EDIT HTML>tick kotak EXPAND WIDGET TEMPLATES> klik “ctrl+f” atau “f3” untuk cari tajuk sidebar yang korang guna. Contoh “Geng Tomato”.

2) Bawah pada tajuk “geng tomato” cari code ini;

<h2 class=’title’><data:title/></h2>

3) Pada code <data:title/>, gantikan dengan code
<center><img src=’URL IMAGE/ICON’/></center>

Contoh;

<h2 class=’title’><center><img src=’http://i1207.photobucket.com/albums/bb468/tomatogurl86/sidebar.png’/></center></h2>

***teruskan buat perkara sama pada semua sidebar title yang korang ada.

STEP 5

Klik preview dan save template jika tiada sebarang masalah.

p/s: sori cik tom tak berapa sihat. So segala pertanyaan sebelum ni yang belum terjawab tunggu ye. cik tom akan cuba jawab bila free nanti ye.

Tips Panduan dekorasi rumah versi bajet!

Sharing is caring

ciktom

Cik tom seorang part time blogger yang sangat sukakan dunia blogging dan buah tomato. Mula menulis blog 15 Julai 2010. Menaip segala ilham dari akal fikiran dan hati ke dunia alam cyber. Sebarang persoalan atau pengiklanan/advertorial/review sila hubungi ciktom; tomatogurl86[at]gmail.com...gantikan [at] dengan @

51 thoughts on “Tutorial Tukar Title Sidebar Kepada Icon/Image Yang Disukai Cara 1”

Fariq
January 3, 2011 at 12:53 pm
Permalink

wah menarik ni,,

oh XOXO!! Blog Gosip Terpanas
Reply
syuwai
January 3, 2011 at 12:09 pm
Permalink

wah..

thanks sudi share >.<
Reply
She's retarded
January 3, 2011 at 12:15 pm
Permalink

tutorial yang bagus.
get well soon k
Reply
Miza Yusof
January 3, 2011 at 12:33 pm
Permalink

menarik! thanks cik tom sebb berkongsi 🙂
Reply
emieysandra
January 3, 2011 at 12:59 pm
Permalink

bgusnye tutorial ni..ehehe 🙂
Reply
Puteri Iqa Izyan
January 3, 2011 at 2:36 pm
Permalink

wah. comlicated je nih 😛

get well soon cik tom 😉

p/s: thanks singgah and drop komen. skang mase nk balas balik komen since line tenet ok la jugak ;))
Reply
diana
January 3, 2011 at 2:56 pm
Permalink

step no3 (1) tu
akak dah tak reti la..
rumitnye..
Reply
Matika
January 3, 2011 at 3:17 pm
Permalink

boleh than rumit juga..huhuhu
Reply
CIK TOM
January 3, 2011 at 11:19 pm
Permalink

kak diana: akak yg step 3(no 1) tue akak kena design sendiri title sidebar tue..ramai yang ckp pening…sori xreti dah nak ajar camane..nati cik tom cuba ajar slow skit utk cara 2 n 3…
Reply
CIK TOM
January 3, 2011 at 11:24 pm
Permalink

ramai ker yang tak faham ni??nampaknya cik tom kena update balik entry ni..sorry ye entry di buat masa cik tom tak berapa sihat semalam…heheh..
Reply
noor
January 3, 2011 at 11:46 pm
Permalink

tqvm cik tom…
i likeeee
Reply
fathiahRAIHANA
January 4, 2011 at 12:32 am
Permalink

wahh . thanks ajar!! hihi .
nt bole try 🙂
Reply
||aLeaSaRa||
January 4, 2011 at 1:01 am
Permalink

gd mng Cik Tom,teringin nk buat tp takde PS kena gi umah abah le nmpk gayanya he3.tq 4 the tutorial ye
Reply
Ellen
January 4, 2011 at 2:18 am
Permalink

Ellen pun nak gak buat sendiri tapi tak der PS gak…thks for sharing ya Tom..hehe
Reply
HAZWAN17
January 4, 2011 at 2:32 am
Permalink

thanks ciktom..nak try buat..tapi kena design pulak..bab-bab design fail sket
Reply
noor
January 4, 2011 at 3:12 am
Permalink

cik tom
side bar wrapper xder pon huhuhu
Reply
AngahSayang2314
January 4, 2011 at 3:14 am
Permalink

wah infooo bernas looo tapi angah still tak paham la cik tommm
Reply
MamaEma
January 4, 2011 at 3:19 am
Permalink

SAYA DAH TRY BUAT CIT TOM
DAH SAVE…DAN BOLEH…
TP BILA PERGI BLOG..TAK ADALAH PULAK..
PELIK BIN AJAIB DAH NI
Reply
MamaEma
January 4, 2011 at 4:08 am
Permalink

SALAM..CK TOM..AKHIRNYA DAH JADI SAYA PUNYA…
Reply
shah noor
January 4, 2011 at 5:07 am
Permalink

Cik tom ni la soqlan yg sya tnya cik tom.tp cik tom xpham….heheheheeheh.sya plak xtaw nk terangkn….tq cik tom yg bek ati…
Reply
MamaEma
January 4, 2011 at 6:38 am
Permalink

PUNYALAH XCITED NAK BUAT NI..TERAMBIL PULAK CIT TOM PUNYA TOMATO TU….HEHEHE..NASIB BAIK CEPAT2 TUKAR TAKUT KENA MARAH…
Reply
Keylaa :)
January 4, 2011 at 6:59 am
Permalink

HEE 😀
Trime kasehhh Cik Tom 🙂
ahaaa , Cik Tom d tag jgk tawww .
Pasal cinte tuuuu 😉

*winkwink . HIHIHI
Reply
diana
January 4, 2011 at 8:51 am
Permalink

akak nak buat bentuk kepala mickey mouse je..jeles nye ema dah boleh buat..
ni yanat..

cik tom..
mkan ubat ye..
semoga cepat sembuh..
Reply
Cik Kamoo
January 4, 2011 at 11:27 am
Permalink

Salam Cik Tom…

Boleh tak buat tutorial mcm mana nak tukar font lawa2 kat entri. Terima kasih ya
Reply
Atika Natasha
January 4, 2011 at 1:48 pm
Permalink

fuiyyo0..nice sharing nih..guess what,ika tgh try tut0rial cik t0m nih..hehe
Reply
farhah adeli
January 4, 2011 at 4:33 pm
Permalink

cik tom nak tanya. saya dah lama cari cara nak tukar warna background sidebar title tu. tapi dekat design> template designer tu mcm xde je (ke saya yg xtau).

camne nak tukar warna background sidebar title ek? just nak tukar warna je tak nak yang kena buat from scratch mcm tutorial cik tom ni.

cmne ek? thanks cik tom.
Reply
farhah adeli
January 5, 2011 at 6:17 am
Permalink

eh cik tom: pasal soklan saya tadi tu. xpe la. dah fiqure out dah. tak sabar punya pasal google sana sini sampai dapat. fuhh.. penat. hehe.
Reply
S..U..D..@..I..S
January 5, 2011 at 10:30 am
Permalink

hadooiiii..byknya step ciktom oiii….
biarlah blog ku x berimage…x berani nak try den…..
Reply
sakinah88
January 6, 2011 at 8:29 am
Permalink

cik tom…dh try wat tapi xkuar pun sidebar tu..hahaha
Reply
CIK TOM
January 7, 2011 at 5:20 am
Permalink

@S..U..D..@..I..S: depend pada masing2
Reply
CIK TOM
January 7, 2011 at 5:22 am
Permalink

@farhah adeli: cik tom ade buat tutorial untuk ubah kaler je..boleh tgk dlm list tuorial cik tom..sori lmbt bls sbb xsmpt catch up semua…
Reply
CIK TOM
January 7, 2011 at 5:23 am
Permalink

@Cik Kamoo: tak tahulah berkesempatan ajar ke x..insyaallah kalau berpeluang dan ada masa ye..nak cepat boleh google dl..
Reply
CIK TOM
January 7, 2011 at 5:25 am
Permalink

@Sakinah88:cik tom tgk pada title sidebar ada yang ubah dan ada x??kalau guna teknik cik tom ajar dlm tutorial ni;

caranya;

1)klik ctrl+f cari tajuk pd sidebar.contoh "hit counter".bawah tue cari code ni;

<h2 class='title'>hit counter</h2>

2)pada code ni ubah camni;

<h2 class='title'><center><img src='URL IMAGE/ICON'/></center></h2>

**tiap2 tajuk sidebar kena ubah..

yg lain boleh follow up step kt tutorial ni..
Reply
Anonymous
January 14, 2011 at 3:03 pm
Permalink

Valuable info. Lucky me I found your site by accident, I bookmarked it.
Reply
noraim
January 17, 2011 at 10:48 am
Permalink

kalo amik image dekat glitter graphics xblh ke?
Reply
CIK TOM
January 19, 2011 at 2:15 pm
Permalink

@noraim: boleh je yunk..tapi kena cari gambar yang ada tajuk sekali sebab ni code guna untuk image title sepenuhnya…ada lg 2 kaedah tp belum sempat cik tom share…insyaAllah akan datang 🙂
Reply
sicomot-comel
February 3, 2011 at 4:13 am
Permalink

alamak.. follower punye tetap xleh la..

cube cik tom tgk sini..

http://i806.photobucket.com/albums/yy348/amaya_reika/kod.png

dah wat da mcm cik tom ajar sebijik2..tapi xjadik gak..
Reply
CIK TOM
February 5, 2011 at 2:56 pm
Permalink

@sicomot-comel:patutnya jadi je..sebab yang lain dah jadi…peliknya…

cik tom dah tgk pic tue..mmg betul dah code dah tukar..problem pe ye..erm kalau scc xkisah la..bg id n pswd pd cik tom utk cik tom tgk code…kl xnak xpelah..huhu

tomatogurl86@gmail.com
Reply
- zai`
  July 16, 2011 at 10:04 pm
  Permalink
  
  follower tak boleh kalau ambik “default blogspot” punya gadget.. kene ambik kat google friend connect baru boleh buat 🙂
  Jom baca entri terkini zai` …Kami wira-wirawati negara. Tiba masa kita berjasa!
  Reply
  - ciktomPost author
    July 19, 2011 at 3:41 pm
    Permalink
    
    oh baru tau..thank untuk info tue yunk 😉
    Reply
    - Syatoza
      September 16, 2011 at 12:57 am
      Permalink
      
      sesame 😀
    - ciktomPost author
      September 17, 2011 at 1:32 pm
      Permalink
      
      heee 😉
sicomot-comel
February 8, 2011 at 10:25 am
Permalink

owh..

ok cik tom..
nnt SCC email kat cik tom eh..
Reply
Puan Besar Shag Yahaya
February 20, 2011 at 6:06 am
Permalink

Cik Tom sayam. Shag ada problem lah pasal coding neh. Setiap kali Shag paste kan kod dan save, kod image tu hilang. Dia ganti balik dgn data:title secara automatik. Uwaa~
Reply
eyla elarine
July 25, 2011 at 11:04 pm
Permalink

salam . cik tom nak tanya mcm mna nak buat shoutbox yg ada disidebar dan ada gmbar kt ats kt ats tue ? mcm mna ?
Reply
- ciktomPost author
  August 15, 2011 at 8:11 pm
  Permalink
  
  salam..sorry yunk..cik tom stop buat tutorial sementara waktu ni…cuba rujuk blog tutorial yang lain untuk shoutbox autohide camtu ye yunk…
  Reply
anyss afanyss
October 26, 2011 at 1:31 am
Permalink

nak tahu cara nak buat icons untuk sidebar . photoscape ada , photoshop pon ada , cuma tak tahu cara nak buat . kalau sudi tolong ajarkan n linkkan dekat shoutbox saya .. thanks 🙂
Reply
- ciktomPost author
  December 5, 2011 at 12:54 pm
  Permalink
  
  dalam entry ni ada link blogger bt header gn photoscape dan juga photoshop…secara praktikalnya sama je kaedah kalau nak buat icons untuk sidebar…cuba rujuk senarai entry di; https://www.ciktom.com/tutorial-transparent-header-guna-photoscape-link/
  Reply
harith irfan
January 28, 2012 at 5:17 pm
Permalink

salam cik tom macam mana nk letak ikon kt sebelah url tu…
Reply
- ciktomPost author
  January 28, 2012 at 5:41 pm
  Permalink
  
  try this tutorial, https://www.ciktom.com/tutorial-cara-tukar-favicon-blogspot/
  Reply

Ciktom

Tutorial Tukar Title Sidebar Kepada Icon/Image Yang Disukai Cara 1

ciktom

51 thoughts on “Tutorial Tukar Title Sidebar Kepada Icon/Image Yang Disukai Cara 1”

Leave a Reply Cancel reply