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='http://1.bp.blogspot.com/_EM2y7j1cjD8/SmAPK22n5JI/AAAAAAAACGs/Z7q3cw4rFP0/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='http://1.bp.blogspot.com/_EM2y7j1cjD8/SmAPK22n5JI/AAAAAAAACGs/Z7q3cw4rFP0/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 .
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='http://1.bp.blogspot.com/_EM2y7j1cjD8/SmAPK22n5JI/AAAAAAAACGs/Z7q3cw4rFP0/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='http://1.bp.blogspot.com/_EM2y7j1cjD8/SmAPK22n5JI/AAAAAAAACGs/Z7q3cw4rFP0/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 .
