Style Mega Menu Drop Down Blogger




Style Mega Menu Drop Down Blogger
Style Mega Menu Drop Down Blogger 
  

Pada Mega Menu Drop Down memang akan terdapat banyak link didalamnya dan bisa dengan leluasa untuk menambahkan link-link pada menu ini. untuk langkah penerapannya ke blog, berikut adalah Style Mega Menu Drop Down Blogger yang dapat di pilih untuk di pasang ke blog dan cara memasangnya.

1. Anda Login ke akun blogger.
2. Kemudian klik Template pilih Edit HTML.
3. Copy kode CSS berikut ini, lalu pasang diatas kode 
]]></b:skin> (saya yakin pasti sudah tahu letak menaruh kodenya).
  1. .mega-menu ul, .mega-menu ul li {list-style: none;} .mega-menu ul {position: relative; padding: 0; margin: 0;} .mega-menu ul li ul {display: none;} .mega-menu .sub {display: none;} .mega-menu .sub ul {display: block;}  #mega-menu-1 { font: normal 13px Arial, sans-serif; list-style: none; position: relative; padding: 0; margin: 0; } #mega-menu-1 .sub ul { display: block; } #mega-menu-1 { background: #222; width: 100%; height: 40px; position: relative; } #mega-menu-1 li { float: left; margin: 0; padding: 0; font-weight: bold; } #mega-menu-1 li a { float: left; display: block; color: #fff; padding: 12px 25px; background: #222; text-decoration: none; } #mega-menu-1 li.mega-hover a, #mega-menu-1 li a:hover { background: #CCC; color: #000; } #mega-menu-1 li .sub-container { position: absolute; } #mega-menu-1 li .sub { background: #efefef; padding: 15px; border: 1px solid #ccc; } #mega-menu-1 li .sub .row { width: 100%; overflow: hidden; clear: both; } #mega-menu-1 li .sub li { list-style: none; float: none; width: 170px; font-size: 1em; font-weight: normal; } #mega-menu-1 li .sub li.mega-hdr { margin: 0 10px 10px 0; float: left; } #mega-menu-1 li .sub li.mega-hdr.last { margin-right: 0; } #mega-menu-1 li .sub a { background: none; color: #111; padding: 7px 10px; display: block; float: none; font-size: 0.9em; } #mega-menu-1 li .sub li.mega-hdr a.mega-hdr-a { padding: 5px 15px; margin-bottom: 5px; background: #6B6B6B; text-transform: uppercase; font-weight: bold; color: #fff; } #mega-menu-1 li .sub li.mega-hdr a.mega-hdr-a:hover { color: #000; } #mega-menu-1 .sub li.mega-hdr li a { padding: 4px 5px; font-weight: normal; } #mega-menu-1 .sub li.mega-hdr li a:hover { color: #a32403; background: #efefef; } #mega-menu-1 .sub ul li { padding-right: 0; } #mega-menu-1 li .sub-container.non-mega .sub { padding: 10px; } #mega-menu-1 li .sub-container.non-mega li { padding: 0; width: 190px; margin: 0; } #mega-menu-1 li .sub-container.non-mega li a { padding: 7px 5px 7px 22px; } #mega-menu-1 li .sub-container.non-mega li a:hover { color: #a32403; background: #efefef; }
4. Selanjutnya pasang script jQuery berikut ini diatas kode </head>
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/hovermegamenu.js'></script>
    <script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/dcmegamenu.js'></script>
    <script type="text/javascript">
    $(document).ready(function($){
        $('#mega-menu-1').dcMegaMenu({
            rowItems: '3',
            speed: 'fast',
            effect: 'fade'
        });
    });
    </script>
5. Langkah terakhir pasang markup HTML berikut ini didalam tag <body> atau bisa juga langsung kedalam widget seperti biasa, klik Tata Letak >> Tambah Widget >> HTML/Javascript paste kode disitu lalu 
  1. <ul id="mega-menu-1" class="mega-menu">
        <li><a href="http://www.mizipedia.com">Home</a></li>
        <li><a href="http://www.mizipedia.com ">Menu 1</a>
            <ul>
                <li><a href="http://www.mizipedia.com/ ">Judul 1</a>
                    <ul>
                        <li><a href="http://www.mizipedia.com">Link 1</a></li>
                        <li><a href="http://www.mizipedia.com">Link 2</a></li>
                        <li><a href="http://www.mizipedia.com">Link 3</a></li>
                    </ul>
                </li>
                <li><a href="http://www.mizipedia.com">Judul 2</a>
                    <ul>
                        <li><a href="http://www.mizipedia.com">Link 4</a></li>
                        <li><a href="http://www.mizipedia.com">Link 5</a></li>
                        <li><a href="http://www.mizipedia.com">Link 6</a></li>
                        <li><a href="http://www.mizipedia.com">Link 7</a></li>
                        <li><a href="http://www.mizipedia.com">Link 8</a></li>
                        <li><a href="http://www.mizipedia.com">Link 9</a></li>
                    </ul>
                </li>
                <li><a href="http://www.mizipedia.com">Judul 3</a>
                    <ul>
                        <li><a href="http://www.mizipedia.com">Link 10</a></li>
                        <li><a href="http://www.mizipedia.com">Link 11</a></li>
                        <li><a href="http://www.mizipedia.com">Link 12</a></li>
                        <li><a href="http://www.mizipedia.com">Link 13</a></li>
                    </ul>
                </li>
                <li><a href="http://www.mizipedia.com">Judul 4</a>
                    <ul>
                        <li><a href="http://www.mizipedia.com">Link 14</a></li>
                        <li><a href="http://www.mizipedia.com">Link 15</a></li>
                    </ul>
                </li>
                <li><a href="http://www.mizipedia.com">Judul 5</a>
                  <ul>
                    <li><a href="http://www.mizipedia.com">Link 16</a></li>
                        <li><a href="http://www.mizipedia.com">Link 17</a></li>
                        <li><a href="http://www.mizipedia.com">Link 18</a></li>
                        <li><a href="http://www.mizipedia.com">Link 19</a></li>
                  </ul>
                </li>
            </ul>
        </li>
        <li><a href="http://www.mizipedia.com">Menu 2</a>
            <ul>
                <li><a href="http://www.mizipedia.com">Judul 1</a>
        <ul>
            <li><a href="http://www.mizipedia.com">Link 1</a></li>
            <li><a href="http://www.mizipedia.com">Link 2</a></li>
            <li><a href="http://www.mizipedia.com">Link 3</a></li>
        </ul>
        </li>
        <li><a href="http://www.mizipedia.com">Judul 2</a>
        <ul>
            <li><a href="http://www.mizipedia.com">Link 4</a></li>
            <li><a href="http://www.mizipedia.com">Link 5</a></li>
            <li><a href="http://www.mizipedia.com">Link 6</a></li>
            <li><a href="http://www.mizipedia.com">Link 7</a></li>
        </ul>
    </li>
        <li><a href="http://www.mizipedia.com">Judul 3</a>
        <ul>
            <li><a href="http://www.mizipedia.com">Link 9</a></li>
        </ul>
    </li>
        <li class="menu-item-129"><a href="http://mizipedia.com">Judul 4</a>
        <ul>
            <li><a href="http://www.mizipedia.com">Link 10</a></li>
            <li><a href="http://www.mizipedia.com">Link 11</a></li>
            <li><a href="http://www.mizipedia.com">Link 12</a></li>
            <li><a href="http://www.mizipedia.com">Link 13</a></li>
        </ul>
    </li>
    </ul>
    </li>
    <li><a href="http://www.mizipedia.com">Menu 3</a>
    <ul>
        <li><a href="http://www.mizipedia.com">Link 1</a></li>
        <li><a href="http://www.mizipedia.com">Link 2</a></li>
    </ul>
    </li>
    <li><a href="http://www.mizipedia.com">Menu 4</a>
    <ul>
        <li><a href="http://www.mizipedia.com">Judul  1</a>
        <ul>
            <li><a href="http://www.mizipedia.com">Link 1</a></li>
            <li><a href="http://www.mizipedia.com">Link 2</a></li>
        </ul>
    </li>
    <li><a href="http://www.mizipedia.com">Judul  2</a>
        <ul>
            <li><a href="http://www.mizipedia.com">Link 3</a></li>
        </ul>
    </li>
        <li><a href="http://www.mizipedia.com">Judul  3</a>
        <ul>
            <li><a href="http://www.mizipedia.com">Link 4</a></li>
    <li><a href="http://www.mizipedia.com">Link 5</a></li>
            <li><a href="http://www.mizipedia.com">Link 6</a></li>
        </ul>
    </li>
    </ul>
    </li>
    </ul>
Keterangan: Ganti “http://mizipedia.com” dengan URL yang di inginkan.

Demikian penjelasan kali ini mengenai style mega menu drop down blogger, Selamat mencoba dan semoga bermanfaat untuk anda.


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

No comments

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