Cara Membuat Menu keren di Blog




Cara Membuat Menu  keren di Blog
Cara Membuat Menu Keren di Blog

Apabila ingin menerapkan ke dalam blog, berikut langkah-langkah 
1. Login terlebih dahulu ke akun blogger klik disini
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 kemudian 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://mizipedia.com'><b>Home</b></a></li>
        <li><a class='top-a' href='http://mizipedia.com'><b>Menu 1</b></a>
        <div class='col3'>
            <ul class='colLeft'>
                <li><a href='http://mizipedia.com'>Sub Menu 1</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 2</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 3</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 4</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 5</a></li>
            </ul>
            <ul class='col'>
               <li><a href='http://mizipedia.com'>Sub Menu 6</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 7</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 8</a></li>
                <<li><a href='http://mizipedia.com'>Sub Menu 9</a></li>
            </ul>
            <ul class='colRight'>
               <li><a href='http://mizipedia.com'>Sub Menu 10</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 11</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 12</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 13</a></li>
            </ul>
        </div>
        </li>
        <li><a class='top-a' href='http://mizipedia.com'><b>Menu 2</b></a>
        <div class='col2'>
            <ul class='colLeft'>
               <li><a href='http://mizipedia.com'>Sub Menu 1</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 2</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 3</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 4</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 5</a></li>
            </ul>
            <ul class='colRight'>
                <<li><a href='http://mizipedia.com'>Sub Menu 6</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 7</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 8</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 9</a></li>
            </ul>
        </div>
        </li>
        <li><a class='top-a' href='http://mizipedia.com'><b>Menu 3</b></a>
        <div class='col1'>
            <ul class='colSingle'>
               <li><a href='http://mizipedia.com'>Sub Menu 1</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 2</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 3</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 4</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 5</a></li>
            </ul>
        </div>
        </li>
        <li><a class='top-a' href='http://mizipedia.com'><b>Menu 4</b></a>
        <div class='col2 left'>
            <ul class='colLeft'>
               <li><a href='http://mizipedia.com'>Sub Menu 1</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 2</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 3</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 4</a></li>
            </ul>
            <ul class='colRight'>
               <li><a href='http://mizipedia.com'>Sub Menu 5</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 6</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 7</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 8</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 9</a></li>
            </ul>
        </div>
        </li>
        <li><a class='top-a' href='http://mizipedia.com'><b>Menu 5</b></a></li>
    </ul>
</div>
</div>
Keterangan: Ganti http://mizipedia.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. Nah jika cara ini anda masih pusing lihat cara di bawah ini yang mudah.

Tips Memasang Sub Menu Di Tata Letak/Side Bar Blog
Setelah tutorial di atas memasang menu dan sub menu pada halaman artikel, tetapi kali ini masih tetap memasang menu dan subnya, tapi di sisi luar halaman postingan (side bar), caranya:
1. Masuk ke 
dasbor blogger anda
2. Pilih 
Tata Letak atau Lay Out
3. Klik 
Add Gadget/ Tambah Gadget
4. Pilih 
HTML/JAVASCRIPT.
(Biarkan kolom judul nama gadget kosong, lalu copy paste kode di bawah ini ke  kolom HTML yang tersedia) 
Berikut kode

#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); }
<div id='menufixed'>
<div class='menu3Dflip'>
    <ul class='nav'>
        <li><a class='top-a' href='http://mizipedia.com'><b>Home</b></a></li>
        <li><a class='top-a' href='http://mizipedia.com'><b>Menu 1</b></a>
        <div class='col3'>
            <ul class='colLeft'>
                <li><a href='http://mizipedia.com'>Sub Menu 1</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 2</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 3</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 4</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 5</a></li>
            </ul>
            <ul class='col'>
               <li><a href='http://mizipedia.com'>Sub Menu 6</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 7</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 8</a></li>
                <<li><a href='http://mizipedia.com'>Sub Menu 9</a></li>
            </ul>
            <ul class='colRight'>
               <li><a href='http://mizipedia.com'>Sub Menu 10</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 11</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 12</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 13</a></li>
            </ul>
        </div>
        </li>
        <li><a class='top-a' href='http://mizipedia.com'><b>Menu 2</b></a>
        <div class='col2'>
            <ul class='colLeft'>
               <li><a href='http://mizipedia.com'>Sub Menu 1</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 2</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 3</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 4</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 5</a></li>
            </ul>
            <ul class='colRight'>
                <<li><a href='http://mizipedia.com'>Sub Menu 6</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 7</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 8</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 9</a></li>
            </ul>
        </div>
        </li>
        <li><a class='top-a' href='http://mizipedia.com'><b>Menu 3</b></a>
        <div class='col1'>
            <ul class='colSingle'>
               <li><a href='http://mizipedia.com'>Sub Menu 1</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 2</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 3</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 4</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 5</a></li>
            </ul>
        </div>
        </li>
        <li><a class='top-a' href='http://mizipedia.com'><b>Menu 4</b></a>
        <div class='col2 left'>
            <ul class='colLeft'>
               <li><a href='http://mizipedia.com'>Sub Menu 1</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 2</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 3</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 4</a></li>
            </ul>
            <ul class='colRight'>
               <li><a href='http://mizipedia.com'>Sub Menu 5</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 6</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 7</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 8</a></li>
               <li><a href='http://mizipedia.com'>Sub Menu 9</a></li>
            </ul>
        </div>
        </li>
        <li><a class='top-a' href='http://mizipedia.com'><b>Menu 5</b></a></li>
    </ul>
</div>
</div>
5. Dan kemudian anda klik save/simpan..

semoga bermanfaat untuk anda.,jika anda yang kurang jelas mohon di tanyakan.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

2 comments

Sangat bermanfaat buat pemula seperti saya,gan. Terima kasih banyak..

Balas

Ok mas, selamat mencoba.

Balas

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect