Cara Membuat Floating (Fixed) Menu di Blog

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.

Demo

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjRtIBToxnTPIMPtM_EKEWwo9-eIipAWlOGDcUT9K66fDcVHXTMdevM8JbmK_O9fPiEDtIPzmA4o8HQVnHbxnwUSZS5Dm7NogME13C-e1Zf3D_TinqONxcFnbATvqPK_BFnZfjANSkDEI/h120/arrow.gif) no-repeat left center;}
.menu3Dflip ul.nav div ul li a:hover {color:#09c; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjRtIBToxnTPIMPtM_EKEWwo9-eIipAWlOGDcUT9K66fDcVHXTMdevM8JbmK_O9fPiEDtIPzmA4o8HQVnHbxnwUSZS5Dm7NogME13C-e1Zf3D_TinqONxcFnbATvqPK_BFnZfjANSkDEI/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.