2.16.2009

Membuat Menu Horizontal

percantik donkz blog anda dengan membuat Menu seperti ini:

mari kita mulai .....

-login terlebih dahulu Layout --> Edit HTML, trus beri tanda centang pada Expand
Widget Templates
-cari script seperti ini ]]></b:skin>, nah kalo udah ketemu copy code berikut dan letak diatasnya...

/*credits : http://trik-tips.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /* Garis Bawah*/
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /*Posisi Menu*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background: url("http://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url("http://kendhin.890m.com/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}

-text yang berwarna merah itu adalah warna menu nya... anda bisa mengganti nya..dengan warna yang lain, kalau anda ingin ganti dengan warna merah script nya jadi seprti ini :

background: url("http://kendhin.890m.com/menu/redleft.gif") no-repeat left top;

background: url("http://kendhin.890m.com/menu/redright.gif") no-repeat right top;

-nah kalau sudah, anda cari script seperti ini

<div id="content-wrapper">

-kalau sudah ketemu copy script ini dan letakkan di atasnya

<div id="tabshori">
<ul>
<li><a href="http://dhedie-tips-triks.blogspot.com"><span>Home</span></a></li>
<li><a href="http://dhedie-tips-triks.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://dhedie-tips-triks.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://dhedie-tips-triks.blogspot.com"><span>Kamus</span></a></li>
<li><a href="http://dhedie-tips-triks.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >

-ganti http://dhedie-tips-triks.blogspot.com dengan link akan anda tuju
link tersebut bisa berupa alamat blog anda
-simpan dan lihat hasilnya...

53 comments:

  1. tengs mas, minta ijin ngebajak trik nya nih..haha :))..bravo kendhin :D

    ReplyDelete
  2. thanks for all.......

    you can see my blog at fanofmp3.blogspot.com

    please visit my page!!!!!!

    ReplyDelete
  3. CARANYA MEMBUAT MENU BLOG YANG DISAMPING GMNA???
    YUDAS.ARIYANTO@GMAIL.COM

    ReplyDelete
  4. http://kendhin.890m.com/emothttp://kendhin.890m.com/emoticon/wow.gificon/mumet.gif

    ReplyDelete
  5. :D Boss...untuk menu horisontal yang punya submenu gimana ya?

    ReplyDelete
  6. THANKS.....BERKAT BLOG INI, SAYA BISA BUAT MENU HORIZONTAL

    ReplyDelete
  7. wah bagus nih tampilan blog/templatenya.saya minta donk html teplatenya? email sugiarto.mailing@yahoo.com

    ReplyDelete
  8. background menunya ko'' g kluar..........?
    ada yang versi photobucket ato flick g.............?

    ReplyDelete
  9. klo dropdown gmn cr'y
    blz
    cliquerscirebon@gmail.com

    ReplyDelete
  10. wah... subhanallah,, emang keren banget banyak banget tutorialnya. numpang sahre artikelnya ya..

    ReplyDelete
  11. ditunggu kunjungannya....,www.ismuromdhoni.co.cc

    ReplyDelete
  12. sangat berguna \o/ tp pas kupasang di blog ternyata kurang cocok hikzzz... :(

    tp trims yha....

    salam kenal newbie

    http://shreddysteff.blogspot.com/

    ReplyDelete
  13. tq yaw maz bwad trik2nya.....truz posting triknya yawww..

    ReplyDelete
  14. Dear, Gan
    Gan... minta izin bajak ilmunya ya...
    Thanks a lot...

    ReplyDelete
  15. kalo masukin artikelnya dalam menu bar gmana gan

    ReplyDelete
  16. THANKS GAN INFONYA...

    Nitip cendol gan

    dhanankxmania.blogspot.com

    ReplyDelete
  17. This comment has been removed by the author.

    ReplyDelete
  18. kalau buat tampilan vertikal gimana??????

    ReplyDelete
  19. masded, mau nanya nih ma abang. gimana caranya ngepos di menu yg udah kita buat... makasih sebelumnya yah bang.

    ReplyDelete
  20. duuh, mata saya capek nyari div id=content-wrapper gak nemuuu.. hiks!

    ReplyDelete
  21. kok saya gak nemu div id-nya? yg ada div class? bingung uey..

    ReplyDelete
  22. woi ajarin dong aku baru belajar nie nie di pake di blogspot.com bisa gak ya...

    ReplyDelete
  23. aku sampai terpana,loh! Keren abis...bis..? sorry ijin pake triknya,brur! thanks. O.ya,Biar blog q ada musiiknya ky blog sobat,gmn,ya?

    ReplyDelete
  24. mas kok gak bisa di letakne nek mahku

    ReplyDelete
  25. WOii . . keren bgt ,, slm knal smua ya , ,

    kaptenfilsuf.blogspot.com

    ReplyDelete
  26. Gan... BISA MINTA SKRIP Yang Sudah Jadi Ga???
    Pleaseee..... send ke Mail ya Gan...?
    "zul.creans@gmail.com"

    ReplyDelete
  27. keren banget boss. bnyak nih aku curi ilmunya. salam dari saya anak tkj pontianak....

    ReplyDelete
  28. makasih gan tutornya...sangat-sangat membantu buanget deh..!!!
    izin nampang tutornya yah di blog saya, soalnya saya masih gaptek nich..hehe

    ReplyDelete
  29. Bro,,
    Aku Cari Script div id="content-wrapper"
    kok gk ada ?

    ReplyDelete
  30. BUSUK LU : div id="content-wrapper"
    ITU GA ADA TOLOL
    TAI BABI LU,BIKIN GW PUSING AJA
    GW SUMPAHIN LU SIAL SEUMUR HIDUP
    DASAR ANJING LU,,,

    ReplyDelete
  31. BUSUK LU : div id="content-wrapper"
    ITU GA ADA TOLOL
    TAI BABI LU,BIKIN GW PUSING AJA
    GW SUMPAHIN LU SIAL SEUMUR HIDUP
    DASAR ANJING LU,,,

    ReplyDelete
  32. BUSUK LU : div id="content-wrapper"
    ITU GA ADA TOLOL
    TAI BABI LU,BIKIN GW PUSING AJA
    GW SUMPAHIN LU SIAL SEUMUR HIDUP
    DASAR ANJING LU,,,

    ReplyDelete
  33. BUSUK LU : div id="content-wrapper"
    ITU GA ADA TOLOL
    TAI BABI LU,BIKIN GW PUSING AJA
    GW SUMPAHIN LU SIAL SEUMUR HIDUP
    DASAR ANJING LU,,,

    ReplyDelete
  34. BUSUK LU : div id="content-wrapper"
    ITU GA ADA TOLOL
    TAI BABI LU,BIKIN GW PUSING AJA
    GW SUMPAHIN LU SIAL SEUMUR HIDUP
    DASAR ANJING LU,,,

    ReplyDelete
  35. BUSUK LU : div id="content-wrapper"
    ITU GA ADA TOLOL
    TAI BABI LU,BIKIN GW PUSING AJA
    GW SUMPAHIN LU SIAL SEUMUR HIDUP
    DASAR ANJING LU,,,

    ReplyDelete
  36. This comment has been removed by the author.

    ReplyDelete
  37. kaka kok ga ketemu si h yang div id content wriper

    ReplyDelete
  38. HEHE,,INI BLOG..TEMPLET LATANSA..MENU NAVIGASINYA DIATS DAH BAWAAN..

    ReplyDelete
  39. kok "div id='content-wrapper " nya tak cari gak ada ya?
    padahal uda pakek ctr+F juga loh.

    ReplyDelete
  40. Ko sayamah g bisa2 ya mas bro pke trik2 kaya gini susah'a minta ampun.....
    mampirya mas bro http://kreatifitasputralangit07.blogspot.com/

    ReplyDelete