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:
- Membuat Menu Tab View Di Blog
- Cara Membuat Menu Drop Down di Bawah Header
- Cara Membuat Menu Top Di Atas Header
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNe6P54tg53WyZ2QwoE4_j7laUobaMKONAwQ-kfstd6kzCZsU4Ilfjyeo0-CcfcEZO1SVEZgQFIWS3JPCksbuDLsQeJiiD6W5jUf0-B3jb22RbyBQOLa_z_jQJp6sipr0Rk1tXJIW6umiL/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNe6P54tg53WyZ2QwoE4_j7laUobaMKONAwQ-kfstd6kzCZsU4Ilfjyeo0-CcfcEZO1SVEZgQFIWS3JPCksbuDLsQeJiiD6W5jUf0-B3jb22RbyBQOLa_z_jQJp6sipr0Rk1tXJIW6umiL/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi24Elf651aZbofQhygVbEJLtbOQHd5BOu2YMD4lkEpf7fPVEWpwMp0MwuX0oepQ2r7cd0TYFwhzBp9ka6cTDQLhesmbE9m57qfR5Gi4vBsVlEsXMkV8ujlp3ykl1BC1Jn6W3o0yFSg58-C/)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>
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNe6P54tg53WyZ2QwoE4_j7laUobaMKONAwQ-kfstd6kzCZsU4Ilfjyeo0-CcfcEZO1SVEZgQFIWS3JPCksbuDLsQeJiiD6W5jUf0-B3jb22RbyBQOLa_z_jQJp6sipr0Rk1tXJIW6umiL/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNe6P54tg53WyZ2QwoE4_j7laUobaMKONAwQ-kfstd6kzCZsU4Ilfjyeo0-CcfcEZO1SVEZgQFIWS3JPCksbuDLsQeJiiD6W5jUf0-B3jb22RbyBQOLa_z_jQJp6sipr0Rk1tXJIW6umiL/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi24Elf651aZbofQhygVbEJLtbOQHd5BOu2YMD4lkEpf7fPVEWpwMp0MwuX0oepQ2r7cd0TYFwhzBp9ka6cTDQLhesmbE9m57qfR5Gi4vBsVlEsXMkV8ujlp3ykl1BC1Jn6W3o0yFSg58-C/)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.
Bagaimana apakah sobat berhasil menerapkannya ke blog sobat? silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles di atas!
mantapp thanks gann tas infonya ijin sedot... mampir ya gann kulonprogo.net
BalasHapusDear Admin,
BalasHapusTerima kasih infonya ya Gan,,, \o/ :D :-d
sangat bermanfaat dan semoga http://otowebsite.blogspot.com makin jaya \m/
Tengkiyou All :Q
BalasHapusko 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@NIRWANAEh abang, tolong kalo baca yang bener jangan cuma marah2 melulu . . .
BalasHapusDi atas sudah saya jelaskan dengan sangat detail . . .
Teman2 lainnya saja bisa kenapa Anda nggak???
Kalo bingung tinggal nanya aja, gak sah marah2.
Terima kasih , tapi gimana ya supaya panjangnya sesuai dengan blog
BalasHapusmohon petunjuk
BalasHapusom kalo pengen narohnya dibawah kayak wibiya itu yang diganti apanya ya bos??mohon balasannya :)
BalasHapusBro bisa buat menu navigasi kayak di Indowebster gk??
BalasHapusItu 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...
@fchordsCoba Anda cek di menu berikut http://otowebsite.blogspot.com/2012/08/fixed-fade-out-navigation-menu.html
BalasHapuskeren bro... :Q
BalasHapusmantab infonya boss.... :-d
BalasHapusini yg ane cari... \o/ :Q
Nice info,Sob...
BalasHapusSukses terpasang di blog saya
Jangan lupa mampir ke blogku ya?
Ditunggu kunbalnya... :)
@MnNmSori saya tidak lihat kalo ada koment dari Anda, ganti bottom menjadi top.
BalasHapusmantap nih, patut di coba gan...
BalasHapussalam kenal... :D :)
berat buat loading blog gak yahh?
BalasHapusKunjungan balik yah Disini
Terimakasih infonya Gan (y)
BalasHapusIni yang sedang saya cari-cari
http://grosirobatjellygmat.com/obat-herbal-demam-berdarah/
mantap deh artikelnya sangat bermanfaat :)
BalasHapusijin share http://kedaijellygamatgoldg.com/
http://kedaijellygamatgoldg.com/jelly-gamat-gold-g/
Ini yang di cari-cari, terimakasih gan infonya :)
BalasHapusijin share http://jellygamatgoldg31.com/
Terimakasih ka atas informasinya sangat membantu :)
BalasHapushttp://grosirprodukgreenworld.com/
makasih banyak buat infonya ,, nice post
BalasHapushttp://goo.gl/NQSzZm
Thx atar infonya mau nanya buat menu di footer/seperti di bawah ini gimana ya yang versi mobile
BalasHapusThx....