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. 

    Ditulis Oleh : christian angkouw ~ Cara Bikin Blog

    Christian angkouw Sobat sedang membaca artikel tentang Cara Membuat Menu Horisontal di Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya

    :: Get this widget ! ::

    86 comments

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

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

    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?

    02:42:00

    @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

    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??????

    kunjungan malam nih kk,

    scriptnya panjang amat ya... pusing heheh

    tapi saya mau coba ah

    ijin follow y kk.

    makasih

    17:50:00

    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

    05:11:00

    makasih banyak ya gan buat infonya

    salam kenal ya gan thanks banget buat infonya

    11:02:00

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

    thanks infonya gan...

    Tapi Punya Saya Cuma dua mas

    @Christiankok punya saya cuma 2 y

    gan kode yang kedua ngga ketemu. gimana terus?

    02:42:00

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

    22:39:00

    gax bisa ne,,,,gax lengkap

    Sangat bermanfaat nih ilmunya salam kenal gan...

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

    Thank Frend buat informasinya

    Anonymous
    21:50:00

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

    aku masih awam ,, bingung banget :/

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

    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..

    trims bos...

    Trimakasih gan infony..

    sangat bermanfaat bagi perkembangan blog saya.. :)

    Blog Fuadditiya | The FIM Site

    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.

    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 . . .

    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

    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".

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

    mantab mas bro..!!

    02:24:00

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

    http://desman411.blogspot.com

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

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

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

    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

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

    Tuker link boleh???

    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

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

    makasih tutornya yang bermanfaat ini

    13:41:00

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

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

    04:35:00

    artikel yang bagus sob

    TERIMA KASIH

    06:23:00

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

    nice share...
    thx gan...

    THANKS GAN

    20:59:00

    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

    kok ga bisa ya????

    kunjungi juga Hanipunya-cerita.blogspot.com

    keren gan
    sip info nih

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

    makasih gan sudah mau berbagi tipsnya. semoga tambah sukses

    10:03:00

    berhasil terima kasih gan

    19:14:00

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

    kenapa teks yang

    "div id='content-wrapper'"

    kok tidak ada di tempelate saya,,,

    mohon pencerahannya,,,trimmss

    04:11:00

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

    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??

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

    09:19:00

    sangat membantu infonya tapi masih bingung gan,,,,

    kurang tanda ( ' ) gan :)

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

    16:29:00

    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.

    16:33:00

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

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

    cara ngisi menu blognya gimana ? mohon bantuannya

    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?

    Bang klo jarak antar tab menu nya yg mana ?

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

    Gmn tuh gan, mohon petunjuknya..

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

    23:41:00

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

    04:27:00

    makasiy mas tutornya cara membuat menu diatas seperti itu. kereenn

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

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

    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..

    Mahendra
    21:43:00

    Mantap...

    22:36:00

    terima kasih atas informasinya..

    20:18:00

    makasi gan ijin copy..

    makasih informasinya sob...

    kalau blog wordpress bisa dipakai ngga sob tehnik ini?


    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~

    makasih gan atas infonya.

    http://gunamovie.blogspot.com

    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/

    17:39:00

    Trimakasih gan... langsung saya praktekkan.

    02:14:00

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

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

    23:31:00

    mntp gan

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

    Poskan Komentar

    Silahkan tinggalkan komentar sobat dan dapatkan backlink satu arah langsung ke blog sobat dengan widget top komentator yang saya pasang di sidebar blog ini. Caranya dengan menjadi pemberi komentar terbanyak di blog ini, tapi mohon jangan Nyepam ya..! Komentar dengan menyertakan LINK / ANCHOR TEXT atau promosi produk tertentu akan saya hapus karena blog ini bukan tempat untuk mempromosikan produk yang dijual di blog anda.