Happy Blogging!!! hehehe . . . .
Membuat menu di blog memang sangat penting sekali sama hanya dengan memasang Daftar Isi, karna dengan kita memasang menu di blog maka kita juga akan sangat memudahkan pengunjung untuk menelusuri blog kita!
Kalo bilang menu untuk blog, macam-macam menu sangatlah banyak sob, blog ini juga akan membahasnya, tapi satu-satu dulu ya, hehehe . . .
Sebelumnya blog ini pernah membahas juga tentang cara membuat menu di blog, di antaranya:


dan sekarang blog ini akan membahas tentang Cara Membuat Menu Horizontal Melayang!
Untuk contohnya sobat bisa lihat gambar berikut:
Contoh Menu Horizontal Melayang
Gambar di atas adalah contoh Menu Horizontal Melayang, walaupun sobat menuju ke bagian paling bawah halaman blog, Menu Horizontal Melayang itu akan selalu setia mengikuti sobat dan selalu berada di bagian atas, ckckck... Setia tambah romantis aja . . .
Oke dah sekarang kita akan membahas cara memasnganya di blog sobat, cara pemasangannya sangatlah mudah sob, ya . . . mudah bangetz gitu lho . . .
Udah kita lansung aja ya . . .

Cara Membuat Menu Horizontal Melayang:

1. Login ke akun blogger sobat.

2. Pada menu klick Rancangan ➨  Tambah Gadget(saya sarankan di bagian paling bawah dan jangan di beri judul)  ➨ Lalu pilih HTML/Java Script.

3. Selanjutnya copy kode berikut dan paste atau letakkan di dalam gadget HTML/Java Script tadi.

<style type="text/css">
#msuteja ul li a {position: relative;float: bottom;display: block;width: AUTO;height: 15px;padding: 5px 0 0 0;margin-right: 5px;text-align: center;font-size: 15px;text-decoration: none;color:transparant;font-weight: bold;outline: none;}#msuteja li .current{color: transparant;}#msuteja li a:hover, #msuteja li a:active {background:url(http://4.bp.blogspot.com/_O84nraTVNhw/TTVkjpb4VvI/AAAAAAAAALs/yE_Q-eIWMW4/s1600/background-judul-posting.gif);background: -webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000)); background: -moz-linear-gradient(top,#4B0082, #FF0000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); display: inline-block;zoom: 1; *display: inline;border: dotted 1px #555555;padding: 3px 5px;-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 0 1px 0px rgba(1,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);}color: #ffffff;margin: 0;font-size:18px;padding: 9px 15px 8px;text-decoration: none;}#msuteja {width: auto;float: left;margin: 0;padding: 0;}#msuteja {margin: 0;padding: 0;}#msuteja ul {float: left;list-style: none;margin: 0;padding: 0;}#msuteja li {list-style: none;margin: 0;padding: 0;}#msuteja li a, #msuteja li a:link, #msuteja li a:visited {color: #ffffff;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: Bold 15px Georgia, Arial;}#msuteja li a:hover, #msuteja li a:active {background:transparant;color: #ffffff;margin: 0;font-size:20px;padding: 9px 15px 8px;text-decoration: none;}#msuteja li li a, #msuteja li li a:link, #msuteja li li a:visited {background: url(http://4.bp.blogspot.com/_O84nraTVNhw/TTVkjpb4VvI/AAAAAAAAALs/yE_Q-eIWMW4/s1600/background-judul-posting.gif);background: -webkit-gradient(linear, left top, left bottom, from(#00FFFF), to(#000000)); background: -moz-linear-gradient(top,#00FFFF, #000000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); width: 250px;color: #E6E6FA;-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; border-style: outset;-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);float: none;margin: 0;padding: 7px 10px;border-bottom: transparant;border-left: transparant;border-right: transparant;font: bold 14px kristen itc, Arial;}#msuteja li li a:hover, #msuteja li li a:active {background: #FF0000;background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#00FF00)); background: -moz-linear-gradient(top,#FF0000, #00FF00); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); color: #ffffff;font-size:20px;font-family:kristen itc;text-align: center;padding: 7px 10px;}#msuteja li {float: left;padding: 0;}#msuteja li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width: 170px;margin: 0;padding: 0;}#msuteja li ul a {width: 140px;}#msuteja li ul ul {margin: -32px 0 0 171px;}#msuteja li:hover ul ul, #msuteja li:hover ul ul ul, #msuteja li.sfhover ul ul, #msuteja li.sfhover ul ul ul {left: -999em;}#msuteja li:hover ul, #msuteja li li:hover ul, #msuteja li li li:hover ul, #msuteja li.sfhover ul, #msuteja li li.sfhover ul, #msuteja li li li.sfhover ul {left: auto;}#msuteja li:hover, #msuteja li.sfhover {position: static;}#footer-column-divide {clear:both;}#msuteja{font-family:Comic Sans Ms;background:#000 url(http://4.bp.blogspot.com/_4HKUHirY_2U/Swul0XJNShI/AAAAAAAAAT8/0MPzqd2ineY/catmenu.jpg)repeat-x;(0,0,0, 0.80);border:1px solid #C0C0C0;padding:2px 0;z-index:999;top:0px;left:1px;right:1px;position:fixed;-moz-border-radius:10px;-webkit-border-radius:10px;}
</style>
<div id='msuteja'>
<ul id='msuteja'>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a>
<ul class='children'>
<li><a href='#' target='_blank'>Menu 2.1</a></li>
<li><a href= '#'target='_blank'>Menu 2.2</a></li>
</ul>
</li>
<li><a href='#' target='_blank'>Menu 3</a>
<ul class='children'>
<li><a href='#' target='_blank'>Menu 3.1</a></li>
<li><a href='#' target='_blank'>Menu 3.2</a></li>
</ul>
</li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'' target='_blank'><blink>Menu 5</blink></a></li>
<li><a href='#' target='_blank'><blink>Menu 6</blink></a></li>
<li><a href='#' target='_blank'><blink>Menu 7</blink></a></li>
</ul>
</div>

4. Simpan.

Sekarang sobat bisa lihat sendiri hasilnya.

Keterangan:
  • Sobat ganti tanda # dengan url tujuan.
  • Ganti Menu dengan nama tujuan url.
Sekian dulu untuk Cara Membuat Menu Horizontal Melayang semoga articles ini bisa bermanfaat untuk sobat semua.

Bagaimana apakah sobat berhasil menerapkannya ke blog sobat? silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles di atas!

Posting Komentar Blogger Disqus

  1. mantapp thanks gann tas infonya ijin sedot... mampir ya gann kulonprogo.net

    BalasHapus
  2. Terima kasih atas artikelnya.
    o iya selama saya jelajah mencari ilmu dengan blogwalking, menurut saya anda memiliki kelebihan tersendiri dari situs-situs lain dan jujur potensi anda juga sangat bagus, banyak juga ilmu yang saya pelajari disini jika ada waktu saya akan berkunjung lagi.

    ditunggu kunjungan baliknya :D

    u follow me, i follow u

    #Semoga sehat selalu :D

    BalasHapus
  3. Dear Admin,

    Terima kasih infonya ya Gan,,, \o/ :D :-d
    sangat bermanfaat dan semoga http://otowebsite.blogspot.com makin jaya \m/

    BalasHapus
  4. ko segitu doangk... ga ada keterangan lagi ya... naruh di pastenya pas di mana ,patokannya di kode apa , di atas apa di bawah.. lah klw cuman paste doank kan kita bingung,,, yg Jelas aja !!

    BalasHapus
  5. @NIRWANAEh abang, tolong kalo baca yang bener jangan cuma marah2 melulu . . .
    Di atas sudah saya jelaskan dengan sangat detail . . .
    Teman2 lainnya saja bisa kenapa Anda nggak???
    Kalo bingung tinggal nanya aja, gak sah marah2.

    BalasHapus
  6. Terima kasih , tapi gimana ya supaya panjangnya sesuai dengan blog

    BalasHapus
  7. om kalo pengen narohnya dibawah kayak wibiya itu yang diganti apanya ya bos??mohon balasannya :)

    BalasHapus
  8. Bro bisa buat menu navigasi kayak di Indowebster gk??
    Itu yang floating dan hovernya bekerja saat di scroll ke bawah..
    Kayak gambar yg ada di link ini bro..

    1.Gambar Sebelum Di Scroll Ke Bawah
    2.

    Gambar Sesudah Di Scroll Ke Bawah


    kloq bisa share donk, email saya cnambiexz@yahoo.com atau twitter saya

    @Cah_Gembloengz thanks...

    BalasHapus
  9. @fchordsCoba Anda cek di menu berikut http://otowebsite.blogspot.com/2012/08/fixed-fade-out-navigation-menu.html

    BalasHapus
  10. mantab infonya boss.... :-d
    ini yg ane cari... \o/ :Q

    BalasHapus
  11. Nice info,Sob...
    Sukses terpasang di blog saya
    Jangan lupa mampir ke blogku ya?
    Ditunggu kunbalnya... :)

    BalasHapus
  12. @MnNmSori saya tidak lihat kalo ada koment dari Anda, ganti bottom menjadi top.

    BalasHapus
  13. mantap nih, patut di coba gan...
    salam kenal... :D :)

    BalasHapus
  14. berat buat loading blog gak yahh?
    Kunjungan balik yah Disini

    BalasHapus
  15. Terimakasih infonya Gan (y)
    Ini yang sedang saya cari-cari
    http://grosirobatjellygmat.com/obat-herbal-demam-berdarah/

    BalasHapus
  16. mantap deh artikelnya sangat bermanfaat :)
    ijin share http://kedaijellygamatgoldg.com/
    http://kedaijellygamatgoldg.com/jelly-gamat-gold-g/

    BalasHapus
  17. Ini yang di cari-cari, terimakasih gan infonya :)
    ijin share http://jellygamatgoldg31.com/

    BalasHapus
  18. Terimakasih ka atas informasinya sangat membantu :)
    http://grosirprodukgreenworld.com/

    BalasHapus
  19. makasih banyak buat infonya ,, nice post

    http://goo.gl/NQSzZm

    BalasHapus
  20. Thx atar infonya mau nanya buat menu di footer/seperti di bawah ini gimana ya yang versi mobile
    Thx....

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top