.:::. MSue RoomZ .:::.: Tukar Navigation Bar Dari Text Ke Gambar / Icon

24 February 2010

Tukar Navigation Bar Dari Text Ke Gambar / Icon

hak milik Sue

Assalamualaikum..Pada pagi ini Msue ingin berkongsi lagi ngan koran gsume bagaimana cara nak tukar Navigation Bar dari text ke bentuk gambar atau icon .

1. Login ke Blogspot .

2. Klik Layout - Edit HTML(Tandakan pada Expand Widget)

3. Cari kod yang berkaitan ngan navigation bar seperti contoh di bawah(Gunakan CTRL+F untuk memudahkan korang mencarinya .

<div id='navigation'>
<ul>
<li><a href='http://msueroomz.blogspot.com/'>HoMe</a></li>
<li><a href='http://msueroomz.blogspot.com/2009/11/about-us.html'>Ab0uT MSue</a></li>
<li><a href='http://msueroomz.blogspot.com/2009/11/ceera-muncet-blog-gila-gila-alam.html'>LINK EXCHANGE</a></li>
<li><a href='http://nrl-sue89.blogspot.com/'>LifeIsHard</a></li>
<li><a href='http://msuefrenz.blogspot.com/'>MyFrenz</a></li>
<li><a href='http://imzcupcakes.blogspot.com/'>CuPcaKeS</a></li>
<li><a href='http://msueroomz.blogspot.com/search/label/Tutorial/'>Tut0riAl</a></li>
<li><a href='http://www.facebook.com/people/Nurul-Suhadah/100000486939730'>Facebook</a></li>
<li><a href='http://twitter.com/msueroomz'>Twitter</a></li>
</ul>
</div>

4. Tukarkan kod display image / icon di bawah ini pada highlight di atas .

<img height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1HzPTB0J2oWldqo5gmYYpBTellv-NEISPWoRY4626R328x3Z2TV28vCX3BBrLTx74paQe71aHhZS14ZQTGT-oPeJ2fXsQa_VZaCH7isfwxxMuyf3oa5c2tpoL2tCmvXCTp2k5CrkEK1mE/s400/home.png' width='30'/>

Note: Highlight merah gantikan ngan url image atau icon mengikut citarasa korang . Highlight biru pula saiz tinggi dan lebar image / icon , korang tukarkan mengikut kesesuaian .

5. Contoh penuh

<div id='navigation'>
<ul>
<li><a href='http://msueroomz.blogspot.com/'><img height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1HzPTB0J2oWldqo5gmYYpBTellv-NEISPWoRY4626R328x3Z2TV28vCX3BBrLTx74paQe71aHhZS14ZQTGT-oPeJ2fXsQa_VZaCH7isfwxxMuyf3oa5c2tpoL2tCmvXCTp2k5CrkEK1mE/s400/home.png' width='30'/></a></li>
<li><a href='http://msueroomz.blogspot.com/2009/11/about-us.html'><img height='30' src='http://photos-h.ak.fbcdn.net/hphotos-ak-snc3/hs075.snc3/14239_101178419908389_100000486939730_32211_7137546_n.jpg' width='30'/></a></li>
<li><a href='http://msueroomz.blogspot.com/2009/11/ceera-muncet-blog-gila-gila-alam.html'><img height='30' src='http://farm3.static.flickr.com/2070/2137729430_11b29f9164.jpg' width='30'/></a></li>
<li><a href='http://nrl-sue89.blogspot.com/'><img height='30' src='http://farm2.static.flickr.com/1099/1035881126_3139220810.jpg' width='30'/></a></li>
<li><a href='http://msuefrenz.blogspot.com/'><img height='30' src='http://rds.yahoo.com/_ylt=A0S020xQhoRLkS0AfVOjzbkF/SIG=12ut1jbsu/EXP=1267062736/**http%3a//picpocketbooks.com/wp-content/uploads/2009/07/MFI_button_LARGE1.png' width='30'/></a></li>
<li><a href='http://imzcupcakes.blogspot.com/'><img height='30' src='http://vinolucistyle.com/wp-content/uploads/bacon-chocolate-cupcakes.jpg' width='30'/></a></li>
<li><a href='http://msueroomz.blogspot.com/search/label/Tutorial/'><img height='30' src='http://icons3.iconfinder.netdna-cdn.com/data/icons/softicons/PNG/Tutorial.png' width='30'/></a></li>
<li><a href='http://www.facebook.com/people/Nurul-Suhadah/100000486939730'><img height='30' src='http://img.maxisciences.com/facebook/logo-facebook_7239_w560.jpg' width='30'/></a></li>
<li><a href='http://twitter.com/msueroomz'><img height='30' src='http://rds.yahoo.com/_ylt=A0S020vYgIRLTjQANbijzbkF/SIG=12onql577/EXP=1267061336/**http%3a//newsudar.ru/uploads/posts/2009-07/1246878997_twitter_logo.jpg' width='30'/></a></li>
</ul>
</div>

6. Preview dan Save Template jika tiada error .