Saturday, December 29, 2012

Cara Membuat Mega Menu Drop Down Menu For Blogger



Sekedar iseng, pada kesempatan kali ini saya akan memberikan sebuah tutorial khusus kepada pengunjung setia lostsector yakni mega drop down menu untuk blogspot. Tanpa basa basi lagi, langsung liat live demonya aja yuk...!!!





Mega Menu Drop Down Menu For Blogger






(sorot pointer mouse ke menunya dan lihat efeknya)





Nah, setelah melihat live demo di atas, mungkin sobat tertarik untuk memasang menu navigasi drop down tersebut, jika iya berikut tutorialnya. Eh sebelum lanjut, saya ingin jelaskan sedikit tentang mega menu drop down di atas dulu ya [hehehe]. Mega menu drop down seperti yang sobat lihat (jika mengklik live demonya :D) menggunakan perpaduan antara javascript dan jQuery sehingga menampilkan sebuah menu drop down yang mempunyai efek yang menurut saya pribadi sangatlah mengagumkan.





Selain itu, pada menu tersebut diatas bisa sobat modifikasi sedemikan rupa sehingga bisa sobat sesuaikan dengan keinginan, namun untuk memodifikasinya sobat harus mengerti dan memahami dasar-dasar untuk mengedit kode CSS, baik itu deklaratornya maupun tag-tag yang terdapat dalam template. Well, sekarang langsung aja yuk simak bagaimana cara memasang mega menu drop down ini pada blog.


  • Login ke Blogger » Template » Edit HTML » Proceed dan jangan lupa centang "Expand Template Widget"

  • Copy code di bawah ini dan pastekan tepat di atas kode ]]></b:skin>









ul.ldd_menu {

    margin: 0px;

    padding: 0;

    display: block;

    height: 50px;

    background-color: #D04528;

    list-style: none;

    font-family: "Trebuchet MS", sans-serif;

    border-top: 1px solid #EF593B;

    border-bottom: 1px solid #EF593B;

    border-left: 10px solid #D04528;

    -moz-box-shadow: 0px 3px 4px #591E12;

    -webkit-box-shadow: 0px 3px 4px #591E12;

    -box-shadow: 0px 3px 4px #591E12;

}



ul.ldd_menu a {

    text-decoration: none;

}



ul.ldd_menu > li {

    float: left;

    position: relative;

}



ul.ldd_menu > li > span {

    float: left;

    color: #fff;

    background-color: #D04528;

    height: 50px;

    line-height: 50px;

    cursor: default;

    padding: 0px 20px;

    text-shadow: 0px 0px 1px #fff;

    border-right: 1px solid #DF7B61;

    border-left: 1px solid #C44D37;

}



ul.ldd_menu .ldd_submenu {

    position: absolute;

    top: 50px;

    width: 550px;

    display: none;

    opacity: 0.95;

    left: 0px;

    font-size: 10px;

    background: #C34328;

    border-top: 1px solid #EF593B;

    -moz-box-shadow: 0px 3px 4px #591E12 inset;

    -webkit-box-shadow: 0px 3px 4px #591E12 inset;

    -box-shadow: 0px 3px 4px #591E12 inset;

}



a.ldd_subfoot {

    background-color: #f0f0f0;

    color: #444;

    display: block;

    clear: both;

    padding: 15px 20px;

    text-transform: uppercase;

    font-family: Arial, serif;

    font-size: 12px;

    text-shadow: 0px 0px 1px #fff;

    -moz-box-shadow: 0px 0px 2px #777 inset;

    -webkit-box-shadow: 0px 0px 2px #777 inset;

    -box-shadow: 0px 0px 2px #777 inset;

}



ul.ldd_menu ul {

    list-style: none;

    float: left;

    border-left: 1px solid #DF7B61;

    margin: 20px 0px 10px 30px;

    padding: 10px;

}



li.ldd_heading {

    font-family: Georgia, serif;

    font-size: 13px;

    font-style: italic;

    color: #FFB39F;

    text-shadow: 0px 0px 1px #B03E23;

    padding: 0px 0px 10px 0px;

}



ul.ldd_menu ul li a {

    font-family: Arial, serif;

    font-size: 10px;

    line-height: 20px;

    color: #fff;

    padding: 1px 3px;

}



ul.ldd_menu ul li a:hover {

    -moz-box-shadow: 0px 0px 2px #333;

    -webkit-box-shadow: 0px 0px 2px #333;

    box-shadow: 0px 0px 2px #333;

    background: #AF412B;

}






  • Lanjutkan dengan mencari tag <body> kemudian copy script & jQuery di bawah ini dan pastekan tepat di atas tag <body>










<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

    $(function () {

        /**

         * the menu

         */

        var $menu = $('#ldd_menu');



        /**

         * for each list element,

         * we show the submenu when hovering and

         * expand the span element (title) to 510px

         */

        $menu.children('li').each(function () {

            var $this = $(this);

            var $span = $this.children('span');

            $span.data('width', $span.width());



            $this.bind('mouseenter', function () {

                $menu.find('.ldd_submenu').stop(true, true).hide();

                $span.stop().animate({

                    'width': '510px'

                }, 300, function () {

                    $this.find('.ldd_submenu').slideDown(300);

                });

            }).bind('mouseleave', function () {

                $this.find('.ldd_submenu').stop(true, true).hide();

                $span.stop().animate({

                    'width': $span.data('width') + 'px'

                }, 300);

            });

        });

    });

</script>






  • Langkah selanjutnya, cari kode seperti ini pada template :





<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='(Header)' type='Header'/>

</b:section>

<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>

<div style='clear:both;'/>

</div><!-- end header-wrapper -->




  • Jika sudah ketemu, copy kode di bawah ini dan pastekan tepat di bawah kode di atas :










<ul id="ldd_menu" class="ldd_menu">

 <li>

 <span>Vacations</span>

 <!-- Increases to 510px in width-->

 <div class="ldd_submenu">

  <ul>

   <li class="ldd_heading">By Location</li>

   <li><a href="#">South America</a></li>

   <li><a href="#">Antartica</a></li>

   <li><a href="#">Africa</a></li>

   <li><a href="#">Asia and Australia</a></li>

   <li><a href="#">Europe</a></li>

  </ul>

  <ul>

   <li class="ldd_heading">By Category</li>

   <li><a href="#">Sun & Beach</a></li>

   <li><a href="#">Adventure</a></li>

   <li><a href="#">Science & Education</a></li>

   <li><a href="#">Extreme Sports</a></li>

   <li><a href="#">Relaxing</a></li>

   <li><a href="#">Spa and Wellness</a></li>

  </ul>

  <ul>

   <li class="ldd_heading">By Theme</li>

   <li><a href="#">Paradise Islands</a></li>

   <li><a href="#">Cruises & Boat Trips</a></li>

   <li><a href="#">Wild Animals & Safaris</a></li>

   <li><a href="#">Nature Pure</a></li>

   <li><a href="#">Helping others & For Hope</a></li>

   <li><a href="#">Diving</a></li>

  </ul>

  <a class="ldd_subfoot" href="#"> + New Deals</a>

 </div>

 </li>

 <li>

 <span>Equipment</span>

 <div class="ldd_submenu">

  <ul>

   <li class="ldd_heading">By Location</li>

   <li><a href="#">South America</a></li>

   <li><a href="#">Antartica</a></li>

   <li><a href="#">Africa</a></li>

   <li><a href="#">Asia and Australia</a></li>

   <li><a href="#">Europe</a></li>

  </ul>

  <ul>

   <li class="ldd_heading">By Category</li>

   <li><a href="#">Sun & Beach</a></li>

   <li><a href="#">Adventure</a></li>

   <li><a href="#">Science & Education</a></li>

   <li><a href="#">Extreme Sports</a></li>

   <li><a href="#">Relaxing</a></li>

   <li><a href="#">Spa and Wellness</a></li>

  </ul>

  <ul>

   <li class="ldd_heading">By Theme</li>

   <li><a href="#">Paradise Islands</a></li>

   <li><a href="#">Cruises & Boat Trips</a></li>

   <li><a href="#">Wild Animals & Safaris</a></li>

   <li><a href="#">Nature Pure</a></li>

   <li><a href="#">Helping others & For Hope</a></li>

   <li><a href="#">Diving</a></li>

  </ul>

  <a class="ldd_subfoot" href="#"> + New Deals</a>

 </div>

 </li>

 <li>

 <span>Locations</span>

 <div class="ldd_submenu">

  <ul>

   <li class="ldd_heading">By Location</li>

   <li><a href="#">South America</a></li>

   <li><a href="#">Antartica</a></li>

   <li><a href="#">Africa</a></li>

   <li><a href="#">Asia and Australia</a></li>

   <li><a href="#">Europe</a></li>

  </ul>

  <ul>

   <li class="ldd_heading">By Category</li>

   <li><a href="#">Sun & Beach</a></li>

   <li><a href="#">Adventure</a></li>

   <li><a href="#">Science & Education</a></li>

   <li><a href="#">Extreme Sports</a></li>

   <li><a href="#">Relaxing</a></li>

   <li><a href="#">Spa and Wellness</a></li>

  </ul>

  <ul>

   <li class="ldd_heading">By Theme</li>

   <li><a href="#">Paradise Islands</a></li>

   <li><a href="#">Cruises & Boat Trips</a></li>

   <li><a href="#">Wild Animals & Safaris</a></li>

   <li><a href="#">Nature Pure</a></li>

   <li><a href="#">Helping others & For Hope</a></li>

   <li><a href="#">Diving</a></li>

  </ul>

  <a class="ldd_subfoot" href="#"> + New Deals</a>

 </div>

 </li>

</ul>





    Keterangan :


    Tanda # (pagar) silahkan ganti dengan URL yang sobat inginkan


    Tulisan yang saya tandai dengan warna Biru, silahkan ganti dengan kata-kata sobat




  • Sebelum mengklik save / simpan, baiknya pilih pratinjau dulu dan jika sobat merasa sudah pas, nah baru tekan save atau simpan.






at

No comments:

Post a Comment