Membuat Menu Vertikal Dengan Icon

Written By Enda Fivers on 08 April 2011 | Friday, April 08, 2011


بسم الله الرحمن الرحيم Sudah beberapa postingan dilewatkan sejak mengganti template dan domain blog ini, inilah pertama kalinya dengan domain www.berbagidisini.com untuk sharing blogging tips yaitu "Membuat Menu Vertikal Dengan Icon". Mungkin saya berbagi trik yang satu ini agak terlambat, karena saya dilihat sudah banyak teman-teman yang lain untuk mengambilnya dengan membongkar page source blog ini, tapi itu tidak masalah bagi saya. maaf ya telat...hehehe...

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. Membuat menu vertikal dengan icon ini merupakan inspirasi dari Yahoo.com, inilah menu vertikal dengan icon versi berbagidisini. Bagaimana cara membuatnya? yuk kita ikuti langkah-langkah sebagai berikut :

1. Login akun blogger anda terlebih dahulu
2. Pilih Design>>Page Elements>> Pilih Add a Gadget kemudian pilih HTML/Javascript
3. Copas kode berikut pada gadget HTML/Javascript tadi :

<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://www.berbagidisini.com/2009/09/tips-dan-motivasi-mario-teguh.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://www.berbagidisini.com/2009/10/pasang-bannerlink-sobat-disini.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/enda.fivers">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/endafivers">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://www.berbagidisini.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://www.berbagidisini.com/2009/09/dengerin-lagu-five-minutes.html">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://www.fivers-pekanbaru.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/endafivers">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://www.berbagidisini.com/2009/03/chat-room.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://www.berbagidisini.com/2009/09/new.html">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/endafivers">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://www.berbagidisini.com/2011/01/radio-online-enda-fivers.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://www.berbagidisini.com/2010/06/tv-one.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://www.berbagidisini.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://www.berbagidisini.com/2009/03/chat-room.html">User Online</a></li></td>
</tr>
</table>
</ul>

4. Simpan dan lihat blog.

Sangat mudah bukan?? tapi tidak hanya sampai disini saja, silahkan untuk merubah nama menu dan link tujuan sesuai yang anda inginkan. Perhatikan catatan berikut ini :

* Untuk mengganti Icon silahkan ganti URL imege yang berwarna biru pada kode diatas.
* Untuk mengganti nama menu silahkan ganti text yang berwarna merah.
* Untuk mengganti link silahkan ganti tulisan yang berwarna hijau.


Semoga ini dapat bermanfaat bagi kita semua, silahkan dikembangkan lagi untuk yang lebih baik.

salam


www.berbagidisini.com

Masukkan email anda untuk berlangganan blogging tips terbaru *Gratis.

36 comments:

Obat Sakit 2011 said...

aku coba gan
trims tipsnya

javaica said...

nice post

Twins-IX said...

Sobat !! dari Dlu kek Share yg gini !! hahahahah .. thanks ..
Gw sedot ah ~ thanks yee ....

Gan gw dah FOllow Lu ..
FOllow balik yee ?? eheheh :)

Arif (Arema Banjarmasin) said...

mantap infonya gan...

ane udah follow blognya,ditunggu followbacknya ya

aryawan said...

,info bagus sob... aq coba deh... ijin kopas sob... hehehehe... di tunggu kunjungan baliknya...

gussalim said...

Selamat denagan domain baru ,terima kasih telah berkunjung dan infonya.

Daris Firzan said...

keren gan, kayak di yahoo.com menunya , thanks :)

Daris Firzan said...

wah keren menunya, kayak di yahoo.com

thanks

dimas said...

wow..bermanfaat,nanti mau coba

amirul said...

nah... ini dia yg saya tunggu2.... hehehhehehe

Teja HTC said...

Mantabs sob....I Like It

asuransioke said...

tutorial mantap sob-tks ya? nanti mau saya coba

Sepak Bola News = Soccer 足球新闻 said...

nice post kren sob

Inspiration OnLine said...

nah... ini dia yg saya tunggu, mantap sob

BVJ said...

ijin menggunakan sobat

adibey said...

mantaf nih sob... thx ya

General news said...

thx infonya..salam sukses selalu

Dhana/戴安娜 said...

salam sahabat
wah bagus jadi lebih prakyis dan keren mas
terima kasih yach maaf telat

ViKrY'X MadZ said...

mantap sob.... Blogging Is My Life

asuransioke said...

salam sahabat
wah bagus jadi lebih prakyis dan keren mas
terima kasih yach maaf telat artikel ini bermanfaat Gan

Skydrugz said...

keren ya...

Bunglon Blog Indonesia said...

mampir sob apa kaba
mff baru sempet Ol he
wee kren boleh ne dicoba
Sukses Slalu!

alkatro said...

Keren nih, makasih tipsnya :)

oxhide said...

Blognya Keren banget ,,..
ngasih Jempool 2x untuk yang punya blog

mr. OJ said...

Mantabs ni tutorialnya...

cosarosta said...

dapet satu ilmu lagi nie gue.........!

coretan said...

hallo sobat,aku tunggu kreasi lainya aku sangat menyukai blog anda....

ViKrY'X MadZ said...

SELAMAT SOBAT MENDAPAT AWARD DARI Vikrymadz.blogspot.com
silahkan diambil

Enda Fivers said...

@All : Makasih yaa.. Happy blogging :)

Skydrugz said...

nice info...

tp syg ndak bisa kucoba di template blogku :D

P. Irfansyah said...

gan, thx udah mau mampir.saling dukung sapa dan up up hehe. my maintenance komputer

Fanny said...

keren banget blognya.. sumpah! klu ada versi wp boleh dishare dunk :-)

my story and other said...

mantap gan nice info ... lanjutkan

Bocah Nakal said...

http://mivo.tv/home.phpakai sob, terimakasih Tutorialnya. mantabbb....

El Husein said...

mantaapp infonya

GUSTI PUTU said...

keren ,,,,semoga sukses terus ya!!amien