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.

FOLLOW US:

Iklan Semua Halaman

Link Menu Atas

Cara Membuat Menu keren di Blog

Artikel Terkait