Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Cara Membuat Floating (Fixed) Menu di Blog

Floating (Fixed) Menu CSS3 Cara Membuat Floating (Fixed) Menu di Blog – jika sebelumnya sudah pernah membaca artikel cara membuat navigasi floating menu di blog saya yakin pasti sudah tahu maksud dari judul di atas mengenai apa itu floating menu atau fixed menu. Secara singkatnya floating atau fixed menu merupakan sebuah navigasi menu yang terdapat pada sebuah blog dan letaknya biasanya di taruh pada bagian atas header bilamana fungsi scroll pada mouse di geser menu tersebut akan tetap nampak pada posisi seperti semula karena menu tersebut tidak bergeser mengikuti arah scroll mouse. Tidak sedikit blogger yang menggunakan floating atau fixed menu untuk mempercantik desain blog mereka dan memudahkan visitor dalam menemukan artikel yang mereka cari didalam menu navigasi yang sudah tersusun. Yang lebih menarik lagi pada floating menu ini memiliki style hover 3D yang cukup pada saat akan menampilkan drop down menu. Cara pemasangan floating menu atau fixed menu ini juga cukup mudah, sama seperti cara memasang navigasi menu biasanya. Apabila ingin menerapkan ke dalam blog, berikut langkah-langkah Cara Membuat Floating (Fixed) Menu di Blog pada blog.

1. Login terlebih dahulu ke akun blogger.
2. Kemudian pada template pilih Edit HTML.
3. Lalu copy kode CSS berikut ini lalu taruh di atas kode ]]></b:skin>
#menufixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
.menu3Dflip {margin:0 auto; text-align:center; position:relative; height:40px; z-index:999; background:#0091d6; -moz-perspective: 100px; -webkit-perspective: 100px; -o-perspective: 100px; perspective: 100px; }
.menu3Dflip ul.nav li {display:inline-block; display:inline;}
.menu3Dflip ul.nav {padding:0; margin:0; list-style:none; display:inline-block; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; }
.menu3Dflip ul.nav li {float:left; display:block; padding:0 4px;}
.menu3Dflip ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menu3Dflip ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menu3Dflip ul.nav li a.top-a b {display:block; padding:0 20px; font:bold 14px/30px arial, sans-serif; color:#fff;}
.menu3Dflip ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); }
.menu3Dflip ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0; border-radius:0 0 15px 15px; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; -moz-transform-origin: 0px 0px; -moz-transform: rotateX(-90deg); -webkit-transform-origin: 0px 0px; -webkit-transform: rotateX(-90deg); -o-transform-origin: 0px 0px; -o-transform: rotateX(-90deg); transform-origin: 0px 0px; transform: rotateX(-90deg); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; }
.menu3Dflip ul.nav div.left {left:auto; right:4px;} .menu3Dflip ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); }
.menu3Dflip ul.nav div ul.colLeft {margin-left:10px;}
.menu3Dflip ul.nav div ul.colRight {margin-right:10px;}
.menu3Dflip ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.menu3Dflip ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menu3Dflip ul.nav div ul li:last-child {border:0;}
.menu3Dflip ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(https://lh3.googleusercontent.com/-obvJZHCanbY/UkxkGd717_I/AAAAAAAAGQA/bjih8_q74Ws/h120/arrow.gif) no-repeat left center;}
.menu3Dflip ul.nav div ul li a:hover {color:#09c; background:transparent url(https://lh3.googleusercontent.com/-obvJZHCanbY/UkxkGd717_I/AAAAAAAAGQA/bjih8_q74Ws/h120/arrow.gif) no-repeat 1px center;}
.menu3Dflip ul.nav div.col1 {width:160px;}
.menu3Dflip ul.nav div.col2 {width:310px;}
.menu3Dflip ul.nav div.col3 {width:460px;}
.menu3Dflip ul.nav li:hover div { -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); }
4. Selanjutnya copy kode HTML berikut ini lalu taruh di bawah kode <body> atau bisa juga ke dalam widget HTML/Javascript.
<div id='menufixed'>
<div class='menu3Dflip'>
    <ul class='nav'>
        <li><a class='top-a' href='http://mas-andes.blogspot.com'><b>Home</b></a></li>
        <li><a class='top-a' href='http://mas-andes.blogspot.com'><b>Menu 1</b></a>
        <div class='col3'>
            <ul class='colLeft'>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li>
            </ul>
            <ul class='col'>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 6</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 7</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 8</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 9</a></li>
            </ul>
            <ul class='colRight'>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 10</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 11</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 12</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 13</a></li>
            </ul>
        </div>
        </li>
        <li><a class='top-a' href='http://mas-andes.blogspot.com'><b>Menu 2</b></a>
        <div class='col2'>
            <ul class='colLeft'>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li>
            </ul>
            <ul class='colRight'>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 6</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 7</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 8</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 9</a></li>
            </ul>
        </div>
        </li>
        <li><a class='top-a' href='http://mas-andes.blogspot.com'><b>Menu 3</b></a>
        <div class='col1'>
            <ul class='colSingle'>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li>
            </ul>
        </div>
        </li>
        <li><a class='top-a' href='http://mas-andes.blogspot.com'><b>Menu 4</b></a>
        <div class='col2 left'>
            <ul class='colLeft'>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li>
            </ul>
            <ul class='colRight'>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 6</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 7</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 8</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 9</a></li>
            </ul>
        </div>
        </li>
        <li><a class='top-a' href='http://mas-andes.blogspot.com'><b>Menu 5</b></a></li>
    </ul>
</div>
</div>
Keterangan:
Ganti http://mas-andes.blogspot.com dengan URL link blog anda.

5. Langkah terakhir Simpan template dan selesai sudah bisa di lihat hasilnya.

Bagi yang ingin memasang floating menu atau fixed menu ini namun tidak perlu masuk Edit HTML template, maka bisa juga langsung menaruh seluruh kode diatas ke dalam widget HTML/Javascript. Caranya gabungkan antara CSS dan HTML namun sebelumnya jangan lupa untuk menambahkan kode <style type="text/css"> pada awal CSS dan tambahkan juga kode </style> pada akhir CSS. Selanjutnya kode HTML yang terdapat pada point 4 taruh dibawahnya kode </style> langkah terakhir klik Simpan.

Berlangganan artikel via email

54 Response to "Cara Membuat Floating (Fixed) Menu di Blog"

avatar
Anonymous

wah sub menunya bisa dibuat menyamping yah mas, jadi nggak panjang ke bawah, keren juga apalagi ada style hover 3D nya, sip mas :)

Balas

waw menu,
kayaknya keren ni gan kalau dicoba,
terima kasih artikelnya mas.

Balas

Wah kalu yang ini tampilannya keren abis mas,,sya baru pertama liat yg kya gini hehehe

Balas

mas anthoni ga suka yang panjang2 pasti ya..

Balas

pandangan pertama dong mas :)

Balas

ga di coba juga keren kayaknya :)

Balas

Mantap Nih Gan Tutorialnyaa Hmmm ... Saya Izin Comot yah Gan Buat Nanti dipasangin Di Blog Baru Saya ^_^

Balas

Floating menunya keren mas, tapi kebetulan tempat saya udah saya pasang malas gonta ganti lagi. :) Ijin CTR + D aja mas. Barangkali kalau saya lagi bosan bisa saya ganti di kemduian hari.

Balas

Menarik juga ya kalau menu bisa dibuat floating seperti itu. Jadi kelihatan kece ya mas blog nya hehe :)

Balas

Kalau sekedar coba-coba kayaknya kurang keren mas. Lebih baik langsung praktek :D

Balas

keren ni mas sub menu nya, dengan tambahan menu ke samping bisa semakin ringkas tampilannya

Balas
avatar
Anonymous

Kunjungan Malam Mas Andes, Wah ilmu yang lain
Belum selesai di terpasang dengan baik, ini sudah
Ada lagi yang baru, simak lagi belajar lagi ngulik lagi
Terima kasih tips - Triks nya Mas Andes memang yahuut.

Balas

Sangat bermanfaat Mas Andes, artikelnya jangan bosen
sya Mampir lagi di blog Mas Andes yang Kasep Lebih-lebih
Se Kasep Mas Admin nya ..tt3tt3tt3tt3...

Balas

iya mas silahkan.. semoga bermanfaat

Balas

iya mas silahkan boleh buat siapa aja..

Balas

iya mungkin mbak saya juga kurang tau kece apa enggak :)

Balas

iya mas lebih ringkas tampilannya :)

Balas

hehe iya kang Karrysta adminnya kebanyakan molor jadi kasep terus :)

Balas

saya barusan lihat demo-nya, bagus banget....pengen tapi saya tahan dulu. mungkin belum waktunya. sambil nunggu gebrakan yang lain lagi :D

Balas

yang kece yang pake kacamata mas Andes hehe...

Balas

wah kang Ucup senengnya ditahan-tahan yah hehe...

Balas

bagus gan...tapi kalo mau pasang ini warnanya harus disesuaikan dengan template blog kita..

Balas

Top markotop mas .. akrab banget ya nih menu ko ngikut terus hehe

Balas

panjang juga yah kodenya....komen balik yah di http://www.infonakke.com/2013/10/oppo-n1-smartphone-china-dengan.html

Balas

itu terserah yang mau masang mas..

Balas

mumpung masih demen koleksi menu kang hehe..

Balas

iya mas lumayan panjang..

Balas

Keren Mas Menunya...
Sub menunya Banyak banget mas

Balas

biar ga banyak di hapus kan bisa mas..

Balas

Hanya bisa menyimak. Dengan tab menu seperti ini tampilan menu akan tampak lebih simple.

Balas

iya mas,
lagian menunya sudah terpasang di blog saya,
wkwkwkw

Balas

Wkwkwkwk Terimakasih banyak mas anthonie, jadi nggak enak sendiri nich hehe :D

Balas

Kalau berangkat kerja jangan kasep ya mas andes, nanti bisa dimarahin sama pak bos lho hehe :)

Balas

Kang ucup mau nggebrak apa ya? jadi penasaran dech hehe :)

Balas

Pandangan pertama awal aku berjumpa whahahahaha malah nyanyi ya mas

Balas

asal jangan dipasang di toko, ntar dikira sales widget

Balas

insya allah kalo kerja tetep konsisten mbak, laki2 harus punya tanggung jawab :) ciee..

Balas

Yang Kece, Mbak Rin, Yang Selalu sehat Mas Anthonie
Yang selalu Rapi Mas Andes, Yang Kasep Mas Budi
Kalau saya, wah jangan di tanya lah,..? di jamin seram tt3tt3tt3.

Balas

keren ni mas sub menu nya, dengan tambahan menu ke samping bisa semakin ringkas tampilannya dan tolong dong kunjungannya mas di blog saya firdausquotes.blogspot.com

Balas

Kaya Lagu, Panturaan yah Mas, Mbak
Jaluk Tanggung Jawabe,..? tt3tt3tt3 Mohon
Doa Restu dari jauh Mbak Mas semua tgl 15-10-2013
Saya akan menyelenggarakan syukuran Khitanan putra pituin saya,
Walau pun seucap doa, saya mengharap barrakah nya trimaa kasih

Balas

tergantung yang digantung mas hehe...

Balas

yang ini menunya beda mas nggak ada duanya hehe..

Balas

iya pak lebih simple hehe..

Balas

Kalau mas Saud mah kece, sehat, rapi dan kasep diborong semua tt3 tt3

Balas

iya mas terimakasih kunjungannya, segera silaturahmi kesitu..

Balas

walopun seucap doa tapi semoga berkah ya kang saud.. iya kang semoga acara syukuran Khitanan putranya kang saud lancar dan semoga cepet sembuh yah kang :) besok gedenya biar hoby blogging juga sama kayak ayahnya hehehe..

Balas

karena satu-satunya :)

Balas

mas Anthonie kayaknya pake kaca mata juga :)

Balas

semakin banyak menu horizontal nya yah mas,,keren

Balas

mantap menu navigasinya euy..

Balas

thanks sob atas infox, sdh diterapkan diblok ane
http://anchyumm123.blogspot.com

Balas

udah ane pasang di blog ane mas,,, thanks tutor nya... BTW kalau untuk merubah warna background nya gmna ya mas.?

Balas

terima kasih atas artikelnya,
idcheat.com
giribig.com

Balas

KANG, kalo mau nambah MENU 6 gimana ya ? apa yang harus ditambahkan.

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Cara Membuat Floating (Fixed) Menu di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode