Hai sobat blogger ! Sudah beberapa
bulan saya vacuum dari dunia blogger, kali ini saya akan menyempatkan
diri untuk memposting artikel yang mungkin hanya sekedar tindak lanjut
dari postingan sebelumnya mengenai menu navigasi dropdown horizontal.
Kali ini menu tersebut lebih elegan dengan tambahan Javascript yang
indah serta background yang menarik. Untuk previewnya bisa anda lihat
pada gambar diatas. Bagaimana ? tertarik untuk membuatnya ? langsung
saja kalau begitu kita simak dan bahas tutorialnya bersama-sama.
2.) Masuk ke akun blogger sobat
3.) Masuk ke Dashboard > Template > Edit Html > Lanjutkan
4.) Centang tanda
5.) Lalu cari kode ]]></b:skin>
6.) Jika sudah ketemu, masukkan kode dibawah ini tepat diatas kode ]]></b:skin>
Kode
.menus,.menus *{margin:0;padding:0;list-style:none;list-style-type:none;line-height:1.0}.menus ul{position:absolute;top:-999em;width: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:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbuuzdG1o7_TygbBy0qtwtFveE36ZXpoMhlo4qR8VsIY649Ww761QRkKJAlkgWZonQi7mXgQqA0oPVE-prsJbsG1u3SVotcwY9kOBXElS0Zs1erf9xk9vE8eYOQ1Z5J96G2D4WWv7jA_4/s1600/menu-secondary-background.jpg) left top repeat-x}.menu-secondary{height:40px}.menu-secondary ul{min-width:160px}.menu-secondary li a{color:#FFF;padding:14px 15px 10px 15px;text-decoration:none;border-right:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih-rtH-mr4Ixn4APwD-gNwET6IwdifOP896feyHC_JbEY2AlZnqQI8N0Jb0UPw4l2nRcD0o9grT4VujnZ1pMovhAKLick8lilN4f-uLXypHmvGYKwdjHJTozEDMEJf108bLq0b2Tf9Yvw/s1600/topmenu_border_blue.jpg) 100% 1px no-repeat;color:#fff;text-transform:uppercase;text-shadow:0 1px 0 #444;font:bold 12px Arial,Helvetica,Sans-serif}.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;text-shadow:0 1px 0 #444;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkHP-HQWCrQIJesJQmv6NPIi6xeEvwgUI-8MR0BKfnzCBAytbgb-dZKdBUWPoN8TGX4TUtECK9J1_F5hH0rWeap7NF4HUcOs2PhQ1OwQVh089YtbRrH-eKJxpHmsbUgOB5l-HxyxuWxTw/s1600/Highlight.png);left -140px repeat-x;outline:0}..menu-secondary li.home{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibRpmUgImsc4qz4t3aaue-m0KqfZFDmJ9tOjhuFlpZMYMWz5clG6JMq1RYqDictWqaszsayzf6I1l05kjEEAxloM0wowWZYbYnZK05DvyQ_mq_HXC6gFiXr4w-khcmzBWU2I_Z7exl3wA/s1600/bk_menu_blue.jpg)}.menu-secondary li li a{color:#FFF;background:#3D79E1;padding:10px 15px;text-transform:none;margin:0;font-weight:normal}.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:#000;background:#9EBCF0;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:12px 13px 0 0}.menu-secondary li li .sf-sub-indicator{padding:6px 13px 0 0}.menu-secondary-wrap .sf-shadow ul{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglAWRNpr40QSZ-2nwwqECEJXqcLF2d63YESr7pkWkPXQ1KfCgyOCcqSjVMN6qshi5eC5NQtXw4oJQ84IlZF6Q6UVf8pFoEjTmAZZMslDH56hjNRUh4cWBhLLFkwxm1ZaZG7SUkzuq6Th7S/s1600/menu-secondary-shadow.png') no-repeat bottom right}
Kode
<script type='text/javascript'>
//<![CDATA[
;(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 = [c.menuClass];
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>
Kode
<script type='text/javascript'>/* <![CDATA[ */jQuery.noConflict();jQuery(function(){ jQuery('ul.menu-primary').superfish({ animation: {opacity:'show'},autoArrows: true, dropShadows: false, speed: 200, delay: 800 }); });jQuery(function(){ jQuery('ul.menu-secondary').superfish({ animation: {opacity:'show'},autoArrows: true, dropShadows: false, speed: 200, delay: 800 }); });jQuery(document).ready(function() {jQuery('.fp-slides').cycle({fx: 'fade',timeout: 4000,delay: 0,speed: 400,next: '.fp-next',prev: '.fp-prev',pager: '.fp-pager',continuous: 0,sync: 1,pause: 1,pauseOnPagerHover: 1,cleartype: true,cleartypeNoBg: true}); });/* ]]> */</script>
10. Lalu letakkan kode dibawah ini tepat dibawah kode </b:section> tersebut atau anda bisa ganti kode navigasi yang anda gunakan di blog anda sekarang
Kode
<div class='menu-secondary-wrap'><ul class='menus menu-secondary'><li class='home'><a href='#' title='homepage'><img alt='homepage' border='0' height='18px' src='http://png-3.findicons.com/files/icons/60/doodle/24/home.png' style='center' width='18px'/></a></li><li><a href='#'>Menu Link</a><ul class='children'><li><a href='#'>Sub-Menu Link</a></li><li><a href='#'>Sub-Menu Link</a></li><li><a href='#'>Sub-Menu Link</a></li><li><a href='#'>Sub-Menu Link</a></li></ul></li><li><a href='#'>Menu Link</a></li><li><a href='#'>Menu Link</a></li><li><a href='#'>Menu Link</a></li></ul></div>
Ganti Menu Link dengan nama yang akan ditampilkan dalam menu utama.
Ganti Sub-menu Link dengan nama yang akan menjadi menu yang berada di bawah menu utama
12.) Simpan dan lihat hasilnya
Publish by : http://rizaldipriantama.blogspot.com
