Hai sobat
blogger ! sudah lama tak berjumpa ya, hampir 1 bulan saya tidak
mengupdate isi postingan di blog ini, hampir sebulan itu saya mendapat
kendala besar yang membuat saya jarang update. Saya memohon maaf untuk
hal itu. Oke , kali ini saya akan berbagi ilmu tutorial blogging yang
cukup keren sobat . Sesuai judulnya, kali ini saya akan membuat menu
navigasi yang pernah saya pakai di blog ini atau bisa lihat sendiri pada
gambar yang saya pasang diatas. Menu navigasi ini telah saya modifikasi
sedemikian rupa sehingga menjadikannya keren dan elegan.. Bagaimana ?
tertarik untuk membuatnya ? langsung saja kalau begitu kita simak dan
bahas tutorialnya bersama-sama.
Lihat Versi Terbaru dari Menu Navigasi Dropdown v2 yang lebih keren ( seperti yang digunakan di blog ini ) di http://rizaldipriantama.blogspot.com/2012/12/menu-navigasi-horizontal-dropdown-versi.html
FIX + TUTORIAL PENGEDITAN ( 21 Oktober 2012 )
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/AVvXsEjV0BI224Zk2Sd9icTq-lESaH2d-v6ui-f0GGUWm9pAKNND-qDi9F8Els6RoaYDSqlxxZpZX-2zDbC-6OLf3j1KXKRGhyHWmp-o5aJk6zL-Yzj8H3sZfFCCuOrNa3FT1yxjg-6zIXuTXPg/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/AVvXsEhkAvZSnQpPxcVY5PDJoLoBrdel4RJDoWh1HrjXsaekfw7Z4UN5eucp2GhrXKKo3WqqzCWfMF9M5cCNn_N4tE-LVp-ZmJRH_56rIHl3nBigVjLD-K_Ag5EBUA_bN8SXd_Q5Pnnx6xxT-nQ/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/AVvXsEgLj9hnWNqn7TdipO4LPD3rnUPe3lKm8eRXihy8RqhMA2ezrMBJ761DSE3SGbeIdepzuu3eZYYxXCUF7n5P0LTWUgbqf3EYgKOUfRYdueeAzyipgoqThoWkjN5_-MFXtx7RBldBvnyhDUg/s1600/Highlight.png);left -140px repeat-x;outline:0}..menu-secondary li.home{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ7kXNLFg0m9akPhMIyC5lkn9qq4wvjgNk0pkg7H3a-m6JfkDehlVI8NmBObE_uBVww3ezubJ1wRNEcV-FHLKG8VduW1y9t9Eh-MGQKrvpCpqYXnRtzGWWwKI4M23UoJ4-eiShySa00wo/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/AVvXsEg1gt2SoLS7Ny0UJCdEDH-TuiXSMprk9sOA8fLbh6O9hUYilsljX2jCflc9_IG6VyDD4IDYi8Aq8xZZEm1vQPgAOUgrK3Za8Y6jmUWFoh8ufmrcbGvyR9sYyXeI8t0GoJOu2UMBdCucdEBq/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
0 komentar:
Posting Komentar