Cara menambah widget menu navigasi di blog - tutorialarry

Menu Navigasi berfungsi untuk mempermudah pengunjung untuk menemukan konten yang ingin di cari di sebuah blog. biasanya blog yang mempunyai menu navigasi adalah blog yang membahas banyak niche.

di sini saya akan berbagi cara menambahkan widget menu navigasi di blog.

Berikut langkah-langkahnya.

• Masuk ke blogger 
• Pilih tata letak 
• Selanjutnya  Add Widget  lalu pilih HTML/javascript. 
• Selanjutnya masukan script berikut ke kotak HTML 

<script type="text/javascript">
/* jQuery Gooey Menu
* Created: April 7th, 2011 by DynamicDrive.com. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/
jQuery.noConflict()
jQuery.extend(jQuery.easing, {easeOutBack:function(x, t, b, c, d, s){ //see http://gsgd.co.uk/sandbox/jquery/easing/
        if (s == undefined) s = 1.70158;
        return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
    }
})

var gooeymenu={
    effectmarkup: '<li class="active"></li>',
    setup:function(usersetting){
        jQuery(function($){ //on document.ready
            function snapback(dur){
                if ($selectedlink.length>0)
                    $effectref.dequeue().animate({left:$selectedlink.position().left, width:$selectedlink.outerWidth()}, dur, setting.fx)
            }
            var setting=jQuery.extend({fx:'easeOutBack', fxtime:500, snapdelay:300}, usersetting)
            var $menu=$('#'+setting.id).find('li:eq(0)').parents('ul:eq(0)') //select main menu UL
            var $menulinks=$menu.find('li a')
            var $effectref=$(gooeymenu.effectmarkup).css({top:$menulinks.eq(0).position().top, height:$menulinks.eq(0).outerHeight(), zIndex:-1}).appendTo($menu) //add trailing effect LI to the menu UL
            $effectref.css({left:-$menu.offset().left-$effectref.outerWidth()-5}) //position effect LI behind the left edge of the window
            if (typeof setting.selectitem!="undefined"){ //if setting.selectitem defined
                var $selectedlink=$menulinks.removeClass('selected').eq(setting.selectitem).addClass('selected')
            }
            else{
                var $selectedlink=$menulinks.filter('.selected:eq(0)') //find item with class="selected" manually defined
            }
            setting.defaultselectedBool=$selectedlink.length
            $menulinks.mouseover(function(){
                clearTimeout(setting.snapbacktimer)
                var $target=$(this)
//alert($target.position().left+" "+$target.get(0).offsetLeft)
                $effectref.dequeue().animate({left:$target.position().left, width:$target.outerWidth()}, setting.fxtime, setting.fx)
                if (setting.defaultselectedBool==0) //if there is no default selected menu item
                    $selectedlink=$target //set current mouseover element to selected element
            })
            if ($selectedlink.length>0){
                snapback(0)
                $menu.mouseleave(function(){
                    setting.snapbacktimer=setTimeout(function(){
                        snapback(setting.fxtime)
                    }, setting.snapdelay)
                })
            }
                $(window).bind('resize', function(){
                    snapback(setting.fxtime)
                })
        })
    }
}
</script>
<style>
ul li.active{ /*IE6 hack- hide gooey effect from that browser*/
_visibility: hidden; /*IE6 rule*/
}

/* ######### Solid Block Menu CSS ######### */


ul.solidblockmenu{
margin: 0;
margin-bottom:1em;
padding: 0;
list-style: none;
position:relative;
text-align: left; //set value to "left", "center", or "right"*/
}

ul.solidblockmenu li{
display: inline;
}

ul.solidblockmenu li a{
font: bold 14px Arial, Myriad Pro, sans-serif;
color: #6E6E6E;
padding: 8px;
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;
}

ul.solidblockmenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
position:absolute;
width:0;
border:1px solid black;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius:4px;
-moz-box-shadow: 2px 2px 4px rgba(120,120,120,0.7);
-webkit-box-shadow: 2px 2px 4px rgba(120,120,120,0.7);
box-shadow: 2px 2px 4px rgba(120,120,120,0.7);
background:#d7ed93;
background: -moz-linear-gradient(top, #d7ed93, #fff);
background: -webkit-gradient(linear, center top, center bottom, from(#d7ed93), to(#fff));
background: linear-gradient(top, #d7ed93, #fff);
}
</style>
<ul id="gooeymenu2" class="solidblockmenu">
<li><a href="http://www.tutorialarry.com/">Home</a></li>
<li><a href="http://www.tutorialarry.com/">Software</a></li>
<li><a href="http://www.tutorialarry.com/">Info Menarik</a></li>
<li><a 
</ul>
<script>
gooeymenu.setup({id:'gooeymenu2', selectitem:1, fx:'swing'})
</script>

Keterangan:

• Ganti link yang berwarna merah dengan link blog anda
• Terakhir Save/simpan.

 Hasilnya akan seperti ini.

Nah sekarang anda tinggal cek di blog menu navigasi sudah terpasang ,cukup mudah dan simple .
demikian Cara menambah widget menu navigasi di blog.
Semoga bermanfaat dan dapat membantu .