Cara Membuat Menu Horisontal di Blog

Cara Membuat Menu Horisontal di Blog - Banyak sekali blog tutorial yang mungkin sering membahas cara memasang menu horisontal di blog. Mulai dari yang biasa - biasa ( di sediakan pihak blogger ) hingga yang nggak biasa alias lebih canggih.( bisa sobat liat di menu horisontal blog ini .. hehehe)

Seperti yang kita ketahui bersama bahwa menu yang di sediakan pihak blogger memiliki tampilan yang tetap. ( sepengetahuan saya ) sehingga bagi sobat blogger yang hobby utak atik blog, mungkin sedikit kurang mengasikkan. Kali ini, setelah memposting artikel cara mengetahui blog dofollow atau nofollow, saya akan mencoba sharing pada sobat blogger tentang cara membuat menu horisontal di blog yang di lengkapi dengan fasilitas dropdown atau lebih tepatnya cara membuat menu horisontal dropdown di blog.  Untuk demonya sobat nggak perlu jauh jauh, cuma perlu liat aja menu di bawah header blog ini.

Bagi sobat yang tertarik untuk membuat menu horisontal di blog,silahkan ikuti tutorial berikut.


1. Log in dulu ke akun blog sobat.
2. Klik Rancangan --> edit html
3. Cari kode ]]></b:skin> ( Gunakan Ctrl + F untuk memudahkan percarian)
4. Letakkan kode berikut di atasnya.

#tejahtc{
height:33px;
width:1000px;
margin:0 auto;
background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/S6mTqAdkycI/AAAAAAAAA2E/zxCSk-6MwLI/catmenu.jpg) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}

#tejas{
margin: 0px;
padding: 0px;
width:1000px;
background:#252525 url(http://4.bp.blogspot.com/_4HKUHirY_2U/S6mTqAdkycI/AAAAAAAAA2E/zxCSk-6MwLI/catmenu.jpg) repeat-x;
height:33px;
}

#tejas ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#tejas li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#tejas li a, #tejas li a:link, #tejas li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}

#tejas li a:hover, #tejas li a:active {
background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/S6mTqmy1HdI/AAAAAAAAA2M/6D7APyygWZA/catmenuhov.jpg) repeat-x;
color: #fff;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}

#tejas li li a, #tejas li li a:link, #tejas li li a:visited {
background:#ED4A05;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;
}

#tejas li li a:hover, #tejas li li a:active {
background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/S6mTqmy1HdI/AAAAAAAAA2M/6D7APyygWZA/catmenuhov.jpg) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}

#tejas li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}

#tejas li li {
}

#tejas li ul a {
width: 140px;
}

#tejas li ul a:hover, #tejas li ul a:active {
}

#tejas li ul ul {
margin: -34px 0 0 170px;
}

#tejas li:hover ul ul, #tejas li:hover ul ul ul,
#tejas li.sfhover ul ul, #tejas li.sfhover ul ul ul {
left: -999em;
}

#tejas li:hover ul, #tejas li li:hover ul,
#tejas li li li:hover ul, #tejas li.sfhover ul,
#tejas li li.sfhover ul, #tejas li li li.sfhover ul {
left: auto;
}

#tejas li:hover, #tejas li.sfhover {
position: static;
}

tambahan :
  • Modifikasi kode di atas terutama ukuran lebar dan tinggi yang harus di sesuaikan dengan ukuran template blog sobat.
  • Hampir semua bagian dari kode di atas bisa di edit,  tapi kalo menurut saya sih tampilannya sudah pas tinggal tinggi dan lebarnya saja... terserah sobat..

5. Letakkan kode berikut di bawah kode <div id='content-wrapper'> ( cari dengan Ctrl+F )

<div id='tejahtc'>
<div id='tejas'>

<ul>
<li><a href='http://christiantatelu.blogspot.com/'>Home</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-1</a>
<ul class='children'>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-1-1</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-1-2</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-1-3</a></li>
</ul>
</li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2</a>
<ul class='children'>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2-1</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2-3</a></li>
</ul>
</li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-3</a>
<ul class='children'>
<li><a href=Link sobat di sini!' title='Link-Title'>Link-Name-3-1</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-3-2</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-3-3</a></li>
</ul>
</li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-4</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5</a>
<ul class='children'>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5-1</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5-2</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5-3</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5-4</a></li>
</ul>
</li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-6</a>
<ul class='children'>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-6-1</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-6-2</a></li>
</ul>
</li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-7</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-8</a></li>
</ul>

</div>
</div>


<div class='clear'/>

  • Ganti tulisan yang berwarna biru dengan link dari kategori atau bisa juga dengan link posting.
contoh link kategori atau label, modelnya seperti ini.
http://christiantatelu.blogspot.com/search/label/BLOG

sedangkan link posting seperti ini .
http://christiantatelu.blogspot.com/2012/01/membuat-link-terbuka-di-tab-baru.html
  • Ganti tulisan berwarna ungu dengan url blog sobat.
  • Ganti link name dengan judul kategori atau judul posting atau apapun yang penting menarik untuk di klik. untuk link title samakan saja dengan link name.

6. Save template..

Semoga cara membuat menu horisontal di atas bisa membantu sobat blogger. 
    Previous
    Next Post »

    86 comments

    Write comments
    Juli suhendri
    AUTHOR
    06:36:00 delete

    wah, tipsnya oke banget gan ..
    :)
    makasih udah sharing yaa .
    salam kenal yaa .
    :)

    Reply
    avatar
    Anonymous
    AUTHOR
    01:24:00 delete

    maaf gan kayaknya blog ane udah ane set dofollow, jika blom tolong cek aja gan lagi

    Reply
    avatar
    Anonymous
    AUTHOR
    02:10:00 delete

    maaf gan setelah ane cek ternyata bener blog ane jadi nofollow, terus ane kembaliin lagi jadi dofollow, tapi setelah itu dicek kembali jadi nofollow lg. n udah tanya ke mbah google kok banyak juga yang kasusnya sama, tolong gan klo ada info tipnya ato ilmunya biar keinginan saya bikin blog ane tetap dofollow?

    Reply
    avatar
    Tian
    AUTHOR
    02:42:00 delete

    @albialbanjaricba tes cara ku ini gan...

    edit html > Centang expand template widget > cari semua kode nofollow dan ganti dengan dofollow ( gunakan CTRL+F untuk memudahkan pencarian..)

    biasanya kode nofollow tu ada 3 biji mas....

    semoga membantu

    Reply
    avatar
    Taman Langit
    AUTHOR
    17:30:00 delete

    k knapa sring muncul yang ktak gni waktu save templatenya
    (Kami tidak dapat menyimpan template Anda.

    Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
    Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: Open quote is expected for attribute "{1}" associated with an element type "href".)
    trus kode gak ada k.... jd gmana??????

    Reply
    avatar
    Unknown
    AUTHOR
    10:05:00 delete

    kunjungan malam nih kk,

    scriptnya panjang amat ya... pusing heheh

    tapi saya mau coba ah

    ijin follow y kk.

    makasih

    Reply
    avatar
    Bro.Bayu
    AUTHOR
    17:50:00 delete

    Saya sdh coba dan menu sudah muncul. Tetapi sub-menunya tidak mau muncul ke bawah. Bagaimana cara memunculkannya? (saya masih pake script asli di atas - link name-1-1 tidak muncul ke bawah). Thanks

    Reply
    avatar
    sariawan
    AUTHOR
    05:11:00 delete

    makasih banyak ya gan buat infonya

    Reply
    avatar
    penuaan dini
    AUTHOR
    05:12:00 delete

    salam kenal ya gan thanks banget buat infonya

    Reply
    avatar
    M Yanhar
    AUTHOR
    11:02:00 delete

    kode div id='content-wrapper tidak saya temukan di template blog saya, gimana dong gan??

    Reply
    avatar
    Anonymous
    AUTHOR
    10:46:00 delete

    thanks infonya gan...

    Reply
    avatar
    Putra-Kobaa.
    AUTHOR
    23:29:00 delete

    Tapi Punya Saya Cuma dua mas

    Reply
    avatar
    Putra-Kobaa.
    AUTHOR
    23:31:00 delete

    @Christiankok punya saya cuma 2 y

    Reply
    avatar
    Unknown
    AUTHOR
    05:18:00 delete

    gan kode yang kedua ngga ketemu. gimana terus?

    Reply
    avatar
    Shilack
    AUTHOR
    02:42:00 delete

    Mantap gan, Thank's ya......

    Reply
    avatar
    gusmanto
    AUTHOR
    22:39:00 delete

    gax bisa ne,,,,gax lengkap

    Reply
    avatar
    05:23:00 delete

    Sangat bermanfaat nih ilmunya salam kenal gan...

    Reply
    avatar
    Unknown
    AUTHOR
    22:08:00 delete

    ok sekali postnya....
    jangan lupa kunjungi juga http://hendrajorge.blogspot.com/

    Reply
    avatar
    07:02:00 delete

    Thank Frend buat informasinya

    Reply
    avatar
    Anonymous
    AUTHOR
    21:50:00 delete

    jenis font ditulisan di blog ini di ganti ke yg stnadar aja bro,agak kurang enak dilihat kalo dibaca.

    Reply
    avatar
    03:45:00 delete

    aku masih awam ,, bingung banget :/

    Reply
    avatar
    Unknown
    AUTHOR
    23:53:00 delete

    bro
    cara membuat menu bar, sy tdak menemukan kode yg ad div nya id='content-wrapper'> melalui ctrl+f
    bgaimana ini bro???

    Reply
    avatar
    Unknown
    AUTHOR
    19:39:00 delete

    gan , ane blajar Cara Membuat Menu Horisontal di Blog ,ko pas cari < div nya id='content-wrapper'> melalui ctrl+,f ..
    ga ada gan,, gmna nih?
    mkasih ya..

    Reply
    avatar
    21:08:00 delete

    Trimakasih gan infony..

    sangat bermanfaat bagi perkembangan blog saya.. :)

    Blog Fuadditiya | The FIM Site

    Reply
    avatar
    Unknown
    AUTHOR
    06:03:00 delete

    Makasih Banget Gan.
    Terutama penjelasan mengenai tulisan biru.
    Selama ini yang saya baca cuma ditulis link saudara atau sejenisnya tapi gak dikasih contohnya.
    Bagi newbie tetap aja gak ngerti.

    Reply
    avatar
    Anonymous
    AUTHOR
    21:09:00 delete

    Gan, saya masih binung membuat menu di blog saya, maksud dari link biru itu bagaimana cara membuat nya, soalnya saya baru membuat blog . . .

    tolong kasih tau caranya . . .
    Salam kenal By : fikrim . . .

    Reply
    avatar
    01:18:00 delete

    saya sering berkunjung di blog-blog, postingan ini sangat menarik serta enak dibaca tentang cara membuat menu horisontal di blog.... saya berharap bisa berkunjung lagi

    Reply
    avatar
    Unknown
    AUTHOR
    22:42:00 delete

    gan ko gak bisa ??? ada tulisan Kesalahan saat mengurai XML, baris 890, kolom 13: Open quote is expected for attribute "{1}" associated with an element type "href".

    Reply
    avatar
    Unknown
    AUTHOR
    02:19:00 delete

    mas ko langkah ke 5 ga ktmu gak ketemu ..itu gmna mas

    Reply
    avatar
    ary widodo
    AUTHOR
    00:04:00 delete

    mantab mas bro..!!

    Reply
    avatar
    Desman
    AUTHOR
    02:24:00 delete

    janan lupa jalan" k sini ya........

    http://desman411.blogspot.com

    Reply
    avatar
    adhie hidayat
    AUTHOR
    05:15:00 delete

    nice posting gan...thanks infonya.....

    Reply
    avatar
    Unknown
    AUTHOR
    00:13:00 delete

    thanks gan..
    http://bayusetyaajie.blogspot.com

    Reply
    avatar
    alat dewasa
    AUTHOR
    15:58:00 delete

    makasih gan infonya, kalo menu yang ada tumbel gambarnya ad gak y? tenks.

    Reply
    avatar
    Anonymous
    AUTHOR
    14:38:00 delete

    Info yang sangat menarik.
    Terikamasih atas infomasinya semoga dapat menambah pengetahun.
    Saya mengikuti blog ini dan saya suka dengan artikel-artikel dalam blog sobat ini.
    Kiranya berkenan berkunjung dan mengikuti blog saya sob..
    www.komputermedia.com

    Reply
    avatar
    20:21:00 delete

    Waaah tak praktekin yaaa..
    kunjungi blogKu dan beri saran..

    Tuker link boleh???

    Reply
    avatar
    21:59:00 delete

    maaf gan, numpang tanya nih, saya udah coba tapi waktu saya cari kode yang kedua yang ada tulisan div ..nya koq gk ketemu yaa.. mohon solusinya gan.. thanx

    Reply
    avatar
    Unknown
    AUTHOR
    23:37:00 delete

    kok aku belum bisa ya, pa lg <div id='content-wrapper'di cari gk da... tulung bantuanya doung

    Reply
    avatar
    00:03:00 delete

    makasih tutornya yang bermanfaat ini

    Reply
    avatar
    JFC ROUF
    AUTHOR
    13:41:00 delete

    Masih bingun kalo bisa tolong kasih saran untuk blog ane ini alamatnya outjfc.blogspot.com

    Reply
    avatar
    19:02:00 delete

    postingan ini sangat menarik serta enak di baca tentang cara membuat menu horizontal di blog.... saya berharap bisa berkunjung lagi

    Reply
    avatar
    bang admin
    AUTHOR
    04:35:00 delete

    artikel yang bagus sob

    Reply
    avatar
    Unknown
    AUTHOR
    06:16:00 delete

    TERIMA KASIH

    Reply
    avatar
    TRYS
    AUTHOR
    06:23:00 delete

    nice artikel
    kunjungi balik blog saya di
    http://lukas-trys.blogspot.com

    Reply
    avatar
    17:36:00 delete

    nice share...
    thx gan...

    Reply
    avatar
    Unknown
    AUTHOR
    02:02:00 delete

    THANKS GAN

    Reply
    avatar
    bagas
    AUTHOR
    20:59:00 delete

    http://tutorials1927.blogspot.com/2012/12/how-to-reduce-siteblog-loading-speed.htm
    http://tutorials1927.blogspot.com/2012/12/social-media-email-subscription-box-for.html
    http://tutorials1927.blogspot.com/2012/12/blog-post_14.html
    http://tutorials1927.blogspot.com/2012/12/how-to-make-install-back-to-top-button_14.html

    Reply
    avatar
    Hafah Binkaa
    AUTHOR
    23:12:00 delete

    kok ga bisa ya????

    kunjungi juga Hanipunya-cerita.blogspot.com

    Reply
    avatar
    Unknown
    AUTHOR
    14:59:00 delete

    keren gan
    sip info nih

    Reply
    avatar
    Unknown
    AUTHOR
    02:36:00 delete

    kawan kode <div id='content- gak ada kawan

    Reply
    avatar
    11:03:00 delete

    makasih gan sudah mau berbagi tipsnya. semoga tambah sukses

    Reply
    avatar
    Unknown
    AUTHOR
    10:03:00 delete

    berhasil terima kasih gan

    Reply
    avatar
    Unknown
    AUTHOR
    19:14:00 delete

    maaf gan...saya masihh baru mengenal blog...

    kenapa teks yang

    "div id='content-wrapper'"

    kok tidak ada di tempelate saya,,,

    mohon pencerahannya,,,trimmss

    Reply
    avatar
    Unknown
    AUTHOR
    04:11:00 delete

    thnx gan, tpi yg kedua gk nemu gan, gmna cara nya y? mohon bimbingannya

    Reply
    avatar
    Unknown
    AUTHOR
    04:04:00 delete

    Selamat malam gan, maksih dah share tentang cara atau tutorial di atas, langsung bisa ane praktekin di blog ane gan, www.rangga-atmajaya.com dan ternyata berhasil. makasih banyak, dan ane udah follow blog ente gan, jangan lupa di follow back, kita sebagai blogger indonesia yang peduli terhadap sesama, makasih sekali lagi. Salam Blogger Indonesia. Jika sobat berkenan bisa juga tukar link gan, gimana??

    Reply
    avatar
    16:50:00 delete

    mantap gan!!.......sip ane udah praktekan......thankz info tutorial'y ..

    Reply
    avatar
    drop ship
    AUTHOR
    09:19:00 delete

    sangat membantu infonya tapi masih bingung gan,,,,

    Reply
    avatar
    Firman Aji
    AUTHOR
    23:15:00 delete

    kurang tanda ( ' ) gan :)

    Reply
    avatar
    Unknown
    AUTHOR
    04:36:00 delete

    Gimana ya gan..
    Kode div id='content-wrapper'> gak ketemu..

    Reply
    avatar
    Unknown
    AUTHOR
    16:29:00 delete

    Saya gaek yg belm bisa bikin blog yang menarik. bikin menu jg belum. Saya sdh membaca caranya, tp blm dipraktikkan. Terima kasih, sy mau copas hal tsb. Smg Admin sehat selalu dan bisa mengajari saya. hehe.

    Reply
    avatar
    Unknown
    AUTHOR
    16:33:00 delete

    Admin yth.
    Bisakan meninjau blog sederhana saya di bisnissahman.com dan akucintabahasa.blogspot.com n kasih komen, ya. Tqu.

    Reply
    avatar
    23:15:00 delete

    Thx gan untuk tutorialnya, tapi di template saya kok gak ada kode id='content-wrapper'> ??
    Kasih pencerahan dong...

    Reply
    avatar
    Unknown
    AUTHOR
    18:46:00 delete

    cara ngisi menu blognya gimana ? mohon bantuannya

    Reply
    avatar
    04:52:00 delete

    bang di htmlku kok gak ada div id='content-wrapper' ini ya?
    pdhal udah tak search udh tak cari satu persatu juga gak ada bang...
    gmna ya solusinya?

    Reply
    avatar
    Argoham
    AUTHOR
    01:34:00 delete

    Bang klo jarak antar tab menu nya yg mana ?

    Reply
    avatar
    Unknown
    AUTHOR
    01:58:00 delete

    Gan kok di template saya g' ada kode yang dilangkah ke 5 sih?

    Gmn tuh gan, mohon petunjuknya..

    Reply
    avatar
    18:10:00 delete

    terima kasih sudah berbagi, tapi saya coba di blog saya koq gak bisa ya????

    Reply
    avatar
    Beby
    AUTHOR
    23:41:00 delete

    thanks info'x gan, sangat bermanfaat sekali bagi saya ..

    Reply
    avatar
    ProHP
    AUTHOR
    04:27:00 delete

    makasiy mas tutornya cara membuat menu diatas seperti itu. kereenn

    Reply
    avatar
    Unknown
    AUTHOR
    00:56:00 delete

    Gan,, koq "--div id='content-wrapper'> ga ada di tmplt saya,,
    gimana nih??

    Reply
    avatar
    Unknown
    AUTHOR
    12:47:00 delete

    Gan "--div id='content-wrapper'> ini gk ada di template ku, gimana solusinya gan?

    Reply
    avatar
    Unknown
    AUTHOR
    02:16:00 delete

    Om, sama seperti kasus pertanyaan yang belum dijawab diatas,, kalo gak ada kode :
    "div id='content-wrapper'"
    Gimana Om?
    Mohon di konfirmasi jawabanya,, kami semua menunggu..

    Reply
    avatar
    Mahendra
    AUTHOR
    21:43:00 delete

    Mantap...

    Reply
    avatar
    rudi
    AUTHOR
    22:36:00 delete

    terima kasih atas informasinya..

    Reply
    avatar
    Unknown
    AUTHOR
    20:18:00 delete

    makasi gan ijin copy..

    Reply
    avatar
    03:36:00 delete

    makasih informasinya sob...

    Reply
    avatar
    percetakan
    AUTHOR
    03:37:00 delete

    kalau blog wordpress bisa dipakai ngga sob tehnik ini?

    Reply
    avatar
    Unknown
    AUTHOR
    08:21:00 delete


    gan, sama seperti kasus pertanyaan yang belum dijawab diatas,, kalo gak ada kode :
    "div id='content-wrapper'"

    gimana tuh, dah ane coba telusuri gak nemu~

    Reply
    avatar
    Unknown
    AUTHOR
    20:45:00 delete

    makasih gan atas infonya.

    http://gunamovie.blogspot.com

    Reply
    avatar
    Unknown
    AUTHOR
    15:04:00 delete

    mantap gan, ane juga sempat bingung cara nambah menu di BLOG ane ..
    izin terapin tutor ini ya gan..
    di tunggu kunbalnya gan http://didiefasolasidoo.blogspot.com/

    Reply
    avatar
    yanuri
    AUTHOR
    17:39:00 delete

    Trimakasih gan... langsung saya praktekkan.

    Reply
    avatar
    ardi
    AUTHOR
    02:14:00 delete

    susah ya gan.. gak kaya di wp self host. salam kenal aja..

    Reply
    avatar
    SEO Killer
    AUTHOR
    21:14:00 delete

    Artikel yang sangat bermanfaat, ..mantap, Eitss jngn lupa daftar di sini ya AutoTraffic Exchange dan SEO Killer

    Reply
    avatar
    13:38:00 delete

    duh, pusing juga ya buat menu bar kalau kita ga tau bahasa html

    Reply
    avatar