Membuat menu Drop Down di Blogger

Hallo sobat .. Saya hari ini akan share tentang cara membuat menu drop down di blog, Bila sobat ingin memasang menu drop down di blog, berikut adalah cara memasang atau membuat menu drop down di blogspot.

Pertama sobat masuk ke dasbor blogspot atau blogger sobat, pilih Template >> Edit HTML >> centang Expand Template Widget, tapi sebelumnya jangan lupa download/backup templatenya dulu, buat jaga-jaga bila terjadi kesalahan dalam pembuatan drop down nya
Selajuntnya sobat cari kode </body> dan letekan kode berikut tepat diatas kode </body>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

Setelah itu sobat kemudian letekan kode berikut tepat diatas kode tadi

<script type='text/javascript'>
//<![CDATA[

(function($){
    /* hoverIntent by Brian Cherne */
    $.fn.hoverIntent = function(f,g) {
       // default configuration options
       var cfg = {
           sensitivity: 7,
           interval: 100,
           timeout: 0
       };
       // override configuration options with user supplied object
       cfg = $.extend(cfg, g ? { over: f, out: g } : f );

       // instantiate variables
       // cX, cY = current X and Y position of mouse, updated by mousemove event
       // pX, pY = previous X and Y position of mouse, set by mouseover and polling interval
       var cX, cY, pX, pY;

       // A private function for getting mouse position
       var track = function(ev) {
           cX = ev.pageX;
           cY = ev.pageY;
       };

       // A private function for comparing current and previous mouse position
       var compare = function(ev,ob) {
           ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
           // compare mouse positions to see if they've crossed the threshold
           if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) {
               $(ob).unbind("mousemove",track);
               // set hoverIntent state to true (so mouseOut can be called)
               ob.hoverIntent_s = 1;
               return cfg.over.apply(ob,[ev]);
           } else {
               // set previous coordinates for next time
               pX = cX; pY = cY;
               // use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs)
               ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval );
           }
       };

       // A private function for delaying the mouseOut function
       var delay = function(ev,ob) {
           ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
           ob.hoverIntent_s = 0;
           return cfg.out.apply(ob,[ev]);
       };

       // A private function for handling mouse 'hovering'
       var handleHover = function(e) {
           // next three lines copied from jQuery.hover, ignore children onMouseOver/onMouseOut
           var p = (e.type == "mouseover" ? e.fromElement : e.toElement) || e.relatedTarget;
           while ( p && p != this ) { try { p = p.parentNode; } catch(e) { p = this; } }
           if ( p == this ) { return false; }

           // copy objects to be passed into t (required for event object to be passed in IE)
           var ev = jQuery.extend({},e);
           var ob = this;

           // cancel hoverIntent timer if it exists
           if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); }

           // else e.type == "onmouseover"
           if (e.type == "mouseover") {
               // set "previous" X and Y position based on initial entry point
               pX = ev.pageX; pY = ev.pageY;
               // update "current" X and Y position based on mousemove
               $(ob).bind("mousemove",track);
               // start polling interval (self-calling timeout) to compare mouse coordinates over time
               if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );}

           // else e.type == "onmouseout"
           } else {
               // unbind expensive mousemove event
               $(ob).unbind("mousemove",track);
               // if hoverIntent state is true, then call the mouseOut function after the specified delay
               if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );}
           }
       };

       // bind the function to the two event listeners
       return this.mouseover(handleHover).mouseout(handleHover);
    };

})(jQuery);

//]]>
</script>
<script type='text/javascript'>
//<![CDATA[

/*
* Superfish v1.4.8 - jQuery menu widget
* Copyright (c) 2008 Joel Birch
*
* Dual licensed under the MIT and GPL licenses:
*    http://www.opensource.org/licenses/mit-license.php
*    http://www.gnu.org/licenses/gpl.html
*
* CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
*/

;(function($){
    $.fn.superfish = function(op){

       var sf = $.fn.superfish,
           c = sf.c,
           $arrow = $(['<span class="',c.arrowClass,'"> »</span>'].join('')),
           over = function(){
               var $$ = $(this), menu = getMenu($$);
               clearTimeout(menu.sfTimer);
               $$.showSuperfishUl().siblings().hideSuperfishUl();
           },
           out = function(){
               var $$ = $(this), menu = getMenu($$), o = sf.op;
               clearTimeout(menu.sfTimer);
               menu.sfTimer=setTimeout(function(){
                   o.retainPath=($.inArray($$[0],o.$path)>-1);
                   $$.hideSuperfishUl();
                   if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
               },o.delay);
           },
           getMenu = function($menu){
               var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
               sf.op = sf.o[menu.serial];
               return menu;
           },
           addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };

       return this.each(function() {
           var s = this.serial = sf.o.length;
           var o = $.extend({},sf.defaults,op);
           o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
               $(this).addClass([o.hoverClass,c.bcClass].join(' '))
                   .filter('li:has(ul)').removeClass(o.pathClass);
           });
           sf.o[s] = sf.op = o;

           $('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
               if (o.autoArrows) addArrow( $('>a:first-child',this) );
           })
           .not('.'+c.bcClass)
               .hideSuperfishUl();

           var $a = $('a',this);
           $a.each(function(i){
               var $li = $a.eq(i).parents('li');
               $a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
           });
           o.onInit.call(this);

       }).each(function() {
           var menuClasses = ;
           if (sf.op.dropShadows && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
           $(this).addClass(menuClasses.join(' '));
       });
    };

    var sf = $.fn.superfish;
    sf.o = [];
    sf.op = {};
    sf.IE7fix = function(){
       var o = sf.op;
       if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
           this.toggleClass(sf.c.shadowClass+'-off');
       };
    sf.c = {
       bcClass     : 'sf-breadcrumb',
       menuClass   : 'sf-js-enabled',
       anchorClass : 'sf-with-ul',
       arrowClass : 'sf-sub-indicator',
       shadowClass : 'sf-shadow'
    };
    sf.defaults = {
       hoverClass   : 'sfHover',
       pathClass   : 'overideThisToUse',
       pathLevels   : 1,
       delay       : 800,
       animation   : {opacity:'show'},
       speed       : 'normal',
       autoArrows   : true,
       dropShadows : true,
       disableHI   : false,       // true disables hoverIntent detection
       onInit       : function(){}, // callback functions
       onBeforeShow: function(){},
       onShow       : function(){},
       onHide       : function(){}
    };
    $.fn.extend({
       hideSuperfishUl : function(){
           var o = sf.op,
               not = (o.retainPath===true) ? o.$path : '';
           o.retainPath = false;
           var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
                   .find('>ul').hide().css('visibility','hidden');
           o.onHide.call($ul);
           return this;
       },
       showSuperfishUl : function(){
           var o = sf.op,
               sh = sf.c.shadowClass+'-off',
               $ul = this.addClass(o.hoverClass)
                   .find('>ul:hidden').css('visibility','visible');
           sf.IE7fix.call($ul);
           o.onBeforeShow.call($ul);
           $ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
           return this;
       }
    });

})(jQuery);

//]]>
</script>

<script>

    $(document).ready(function(){
        $("ul.menu-secondary").superfish({
            pathClass: 'current'
        });
    });

</script>

Jika di blog sobat sudah ada kode Jquery versi berapapun disarankan tidak menambahkan kode diatas karna akan terjadi biasanya sering terjadi galat

Selanjutnya sobat cari code berikt ]]></b:skin> Untuk mempermudah pencarian sobat bisa gunakan F3 atau ctrl +F
Selanjutnya sobat copy code berikut dan paste diatas code ]]></b:skin>

.menus,.menus *{margin:0;padding:0;list-style:none;list-style-type:none;}
.menus ul{position:absolute;top:-999em;100%;}
.menus ul li{width:100%}
.menus li:hover{visibility:inherit}
.menus li{float:left;position:relative}
.menus a{display:block;position:relative}
.menus li:hover ul,.menus li.sfHover ul{left:0;top:100%;z-index:99}
.menus li:hover li ul,.menus li.sfHover li ul{top:-999em}
.menus li li:hover ul,.menus li li.sfHover ul{left:100%;top:0}
.menus li li:hover li ul,.menus li li.sfHover li ul{top:-999em}
.menus li li li:hover ul,.menus li li li.sfHover ul{left:100%;top:0}
.sf-shadow ul{padding:0 8px 9px 0;-moz-border-radius-bottomleft:17px;-moz-border-radius-topright:17px;-webkit-border-top-right-radius:17px;-webkit-border-bottom-left-radius:17px}
.menus .sf-shadow ul.sf-shadow-off{background:transparent}
.menu-secondary-wrap{padding:0;margin:0;position:relative;height:40px;z-index:300;background: #BDB76B; width: 100%;}
.menu-secondary{height:40px}
.menu-secondary ul{min-width:160px}
.menu-secondary li a{color:#1B1A1A;padding:13px 15px 12px 15px;text-decoration:none;text-transform:uppercase;font:bold 12px Arial,Helvetica,Sans-serif; border-right: 1px solid #A52A2A;}
.menu-secondary li a:hover,.menu-secondary li a:active,.menu-secondary li a:focus,.menu-secondary li:hover > a,.menu-secondary li.current-cat > a,.menu-secondary li.current_page_item > a,.menu-secondary li.current-menu-item > a{color:#FFF;background: #C3C3C3;outline:0;}
.menu-secondary li li a{color::#A52A2A;background:#FFEBCD;padding:10px 15px;text-transform:none;font-weight:normal; border-right: 0;}
.menu-secondary li li a:hover,.menu-secondary li li a:active,.menu-secondary li li a:focus,.menu-secondary li li:hover > a,.menu-secondary li li.current-cat > a,.menu-secondary li li.current_page_item > a,.menu-secondary li li.current-menu-item > a{color:#A52A2A;background:#FFEBCD;outline:0}
.menu-secondary a.sf-with-ul{padding-right:26px;min-width:1px}
.menu-secondary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:10px 13px 0 0}
.menu-secondary li li .sf-sub-indicator{padding:6px 13px 0 0}

Untuk menyesuaikan warna menu dengan blog sobat silahkan sobat ganti kode yang berwarna pink dengan warna yang sesuai dengan blog sobat.

Masih di edit HTML sobat cari kode <div id=’content-wrapper’> setelah itu letakan kode dibawah tepat diatas kode <div id=’content-wrapper’> atau pada template standar saya meletekannya di atas kode <div class='content'>

<div class='menu-secondary-wrap'>
<ul class='menus menu-secondary'>
<li><a href='/'>Home</a></li>
<li><a href='#'>Kategori1</a>
<ul class='children'>
<li><a href='#'>Sub Kategori1</a></li>
<li><a href='#'>Sub Kategori1</a></li>
<li><a href='#'>Sub Kategori1</a></li>
</ul>
</li>
<li><a href='#'>Kategori2</a>
<ul class='children'>
<li><a href='#'>Sub Kategori2</a></li>
<li><a href='#'>Sub Kategori2</a></li>
<li><a href='#'>Sub Kategori2</a>
<ul class='children'>
<li><a href='#'>sub menu kategori2</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Kategori3</a>
<ul class='children'>
<li><a href='#'>Sub Kategori3</a>
<ul class='children'>
<li><a href='#'>Sub menu Kategori3</a></li>
<li><a href='#'>Sub menu Kategori3</a></li>
<li><a href='#'>Sub menu Kategori3</a></li>
</ul>
</li>
<li><a href='#'>Sub Kategori3</a></li>
<li><a href='#'>Sub Kategori3</a></li>
<li><a href='#'>Sub Kategori3</a></li>
</ul>
</li>
<li><a href='#'>Kategori4</a></li>
<li><a href='#'>Kategori5</a>
<ul class='children'>
<li><a href='#'>Sub Kategori5</a></li>
<li><a href='#'>Sub Kategori5</a></li>
</ul>
</li>
<li><a href='#'>Kategori6</a></li>
<li><a href='#'>Kategori7</a></li>
</ul>
</div>

Selanjutnya sobat ganti tanda # dengan link sobat dan jangan lupa untuk tulisan kategori1 sampai kategori7 sesuaikan dengan keinginan sobat. Jika ada pertanyaan harap hubungi admin...