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
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)
#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 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.