9 April 2011

Membuat Menu Vertical Dilengkapi Dengan Icon

Sebelum melakukan aktifitas sehari-hari yaitu kuliah dan kuliah, saya menyempatkan sebentar untuk memberikan tips dan trik kepada sobat blogger dengan sebuah tulisan yang membuat blog anda lebih menarik. Pada tips kali ini kita akan membuat barisan menu dengan tipe vertikal yang dilengkapi dengan ikon yang dapat kita edit sendiri. Sebelumnya tips ini saya dapat dari sobat blogger yang tidak sengaja saya jalan-jalan ke blognya beliau.
Menu vertikal merupakan salah satu cara pintas yang bisa diterapkan pada blog untuk link favorit agar mudah mengaksesnya, membuat menu vertikal dengan icon ini cocok digunakan pada template blog yang memiliki sidebar blog yang tidak terlalu lebar.
Mungkin sobat blogger tertari dengan menu navigasi ini untuk ditampilkan di dalam blog anda. Oke langsung saja kamu ikuti langkah berikut.


1. Login dengan akun anda sendiri
2. Pilih Rancangan
3. Pilih Elemen Laman
4. Pilih Tambah Gadget kemudian pilih HTML/JavaScript
5. CoPas kode berikut ini pada kotak Scriptnya
<ul><table width="100%" border="0">
<tr>
<td width="3%"><div align="center"><img src="http://1.bp.blogspot.com/-blhPS6EkPTA/TXnHCD-Rj3I/AAAAAAAABUg/l5cSTY_mWOs/s1600/report_magnify.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="http://http://kartajaya25.blogspot.com/2010/08/daftar-isi-lengkap-karta-jaya-web.html">Daftar Isi</a></li></td>
</tr>

<tr>
<td width="3%"><div align="center"><img src="https://lh6.googleusercontent.com/_yF0--u7KSSI/TXmn3rqu6OI/AAAAAAAABT8/kyXgbv8sbmM/blogger.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="http://kartajaya25.blogspot.com/2010/04/banner-tutorialnet.html">Link Exchange</a></li></td>
</tr>

<tr>
<td><div align="center"><img src="https://lh3.googleusercontent.com/_yF0--u7KSSI/TXmn4T1QynI/AAAAAAAABUM/PvCS8GxeJpE/rss.png" width="18" height="18" /></div></td>
<td><li><a href="http://feeds.feedburner.com/endafivers?format=xml">Live Bookmark</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://lh5.googleusercontent.com/_yF0--u7KSSI/TXmn3iKpe3I/AAAAAAAABUE/J1Rg9kY17PA/email.png" width="18" height="18" /></div></td>
<td><li><a href="http://www.gmail.com">Mail</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://lh6.googleusercontent.com/_yF0--u7KSSI/TXmn3gOy2oI/AAAAAAAABUA/cfUmuLowAq8/facebook.png" width="18" height="18" /></div></td>
<td><li><a href="http://www.facebook.com/jaya karta">Facebook</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://lh6.googleusercontent.com/_yF0--u7KSSI/TXmn4Snr7BI/AAAAAAAABUQ/LQ-EYuN02hg/twitter.png" width="18" height="18" /></div></td>
<td><li><a href="http://www.twitter.com/jaya_karta">Twitter</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://lh4.googleusercontent.com/_yF0--u7KSSI/TXmn4KgKSTI/AAAAAAAABUI/HovNiKUlKn0/google.png" width="18" height="18" /></div></td>
<td><li><a href="http://kartajaya25.blogspot.com/2010/03/followers.html">Followers</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://lh3.googleusercontent.com/_yF0--u7KSSI/TXmn4lUjGtI/AAAAAAAABUU/prH9aYoaXPU/yahoo.png" width="18" height="18" /></div></td>
<td><li><a href="http://www.yahoo.com">Yahoo</a></li></td>
</tr>
<tr>
<td><div align="center"><img alt="Five Minutes" src="http://3.bp.blogspot.com/-9BxQknaXTO8/TXoVs0dfQSI/AAAAAAAABWA/dCjVsyMkCaE/s1600/Fivers.png" width="18" height="18" /></div></td>
<td><li><a href="http://www.fivers-pekanbaru.com">Fivers</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://1.bp.blogspot.com/-6o9VTWUNbTQ/TXoVtDKIYFI/AAAAAAAABWI/mvSQknF_icA/s1600/music.png" width="18" height="18" /></div></td>
<td><li><a href="http://mp3-laris.blogspot.com">Music</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://2.bp.blogspot.com/-OAXkM22_ELA/TXoVt1viD5I/AAAAAAAABWg/z0M319lpntk/s1600/video.png" width="18" height="18" /></div></td>
<td><li><a href="http://kelolablog.blogspot.com">Video</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://2.bp.blogspot.com/-w5urf_m-J5A/TXoVtRLo8AI/AAAAAAAABWY/JIR1Esypfdc/s1600/feed_burner.png" width="18" height="18" /></div></td>
<td><li><a href="http://feeds.feedburner.com/kartajaya25">Feedburner</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://1.bp.blogspot.com/-kxkZU3ns51U/TXoVtYlTsyI/AAAAAAAABWQ/M1cso09SCEQ/s1600/chat_2.png" width="18" height="18" /></div></td>
<td><li><a href="http://kartajaya25.blogspot.com/2011/04/chating-sepuasnya.html">Chat Room</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://3.bp.blogspot.com/-TDnSQxENPIQ/TXogEJIa5jI/AAAAAAAABXI/VunWYTIgtkI/s1600/download_folder.png" width="18" height="18" /></div></td>
<td><li><a href="http://kartajaya25.blogspot.com/search/label/Software%20Gratis">Download</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://4.bp.blogspot.com/-bR0bshQhnck/TXogD9W4gKI/AAAAAAAABXA/z0kc3aA74RE/s1600/google_youtube.png" width="18" height="18" /></div></td>
<td><li><a href="http://www.youtube.com/user/kartajaya25">Youtube</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://1.bp.blogspot.com/--HB6IETxdWI/TXoeX8oZP5I/AAAAAAAABWo/33X-1JBiRok/s1600/radio.png" width="18" height="18" /></div></td>
<td><li><a href="http://kartajaya25.blogspot.com/2010/12/radio-online.html">Radio</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://2.bp.blogspot.com/-KRX9jVbT1nI/TXoke5aGJjI/AAAAAAAABXQ/_fddU5bf1Uo/s1600/tv.png" width="18" height="18" /></div></td>
<td><li><a href="http://kartajaya25.blogspot.com/2010/08/tv-online.html">Tv </a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://3.bp.blogspot.com/-G9gUSRNuC1s/TXokfF4675I/AAAAAAAABXY/PnBrhywjOJM/s1600/widget_badge.png" width="18" height="18" /></div></td>
<td><li><a href="http://kartajaya25.blogspot.com/search/label/Widget">Widget</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://2.bp.blogspot.com/-OwUcJhDqEKI/TXw1dfWCM_I/AAAAAAAAAKA/8v4XGb7mf5I/s1600/people_online.png" width="18" height="18" /></div></td>
<td><li><a href="http://kartajaya25.blogspot.com/2011/04/chating-sepuasnya.html">User Online</a></li></td>
</tr>
</table>
</ul>
  • Tulisan Berwarna Merah adalah Alamat URL ikon yang akan anda pasang. Silahkan anda ganti sesuai dengan selera anda.
  • Tulisan yang berwarna Ungu adalah alamat URL yang akan dituju. Ganti dengan alamt yang akan anda tuju.
  • Tulisan yang berwarna Hijau adalah judul dari menu navigasi blog anda.
6. Setelah selesai melakukan pengeditan, silahkan diSave.
Selesai, semoga bermanfaat.

[http://kartajaya25.blogspot.com/]

1 komentar:

topSpot mengatakan...

Bagus tutorial nya sob..saya coba terapkan di blog saya ya! THANKS :)

Masukkan email kamu untuk berlangganan tulisan dengan saya :

Delivered by FeedBurner