Skip to content Skip to sidebar Skip to footer
Home / Blogging / Cara Membuat Menu Navigasi Blog Khusus untuk HP
Cara Membuat Menu Navigasi Blog Khusus untuk HP

Cara Membuat Menu Navigasi Blog Khusus untuk HP

By Dewa Plokis
Banyak blog yang sudah menshare cara membuat menu navigasi khusus untuk tampilan mobile atau mobile view ini. Memang untuk tampilan pada HP haruslah disesuaikan oleh pemilik template blog. Namun beberapa template belum menambahkan fitur responsive ini.

Saat ini, beberapa template terbaru yang diciptakan oleh tiap-tiap creatornya sudah mulai melukakan perbaikan pada fitur ini. Karena saat ini pengguna moile lebih banyak daripada dekstop. Maka tidak ada jalan lain selain memperbaiki tampilan responsive blog.

Cara Membuat Menu Navigasi Responsive
Mengapa harus responsive? Ini sudah jelas agar pengguna HP bisa juga menikmati tampilan khusus pada template blog yang kita miliki. Penting bagi para blogger untuk memperhatikan hal ini pada template blognya. Berikut ini adalah tutorial dasar yang bisa Anda terapkan dan di kembangkan pada template masing-masing.
Turorial ini telah lama dikembangkan, saya cuma share ulang, dan melakukan sedikit perubahan pada CSS dan menambahkan beberapa fitur pada bagian HTMLnya agar terlihat lebih menarik.

Sebelum memasang kode ini pada template Anda, harap diperhatikan baik-baik, apakah pada Meta Tag Anda sudah ada kode  Meta Viewport didalamnya, jika belum copy terlebih dahulu kode ini kemudian letakkan tepat dibawah <head>
<meta content='width=device-width, initial-scale=1' name='viewport'/>

Untuk Informasi seputar Meta Tag terbaru, silakan baca Pasang Meta Tag SEO Friendly Terbaru 


Lanjut pada pemasangan menu responsive. Silakan login ke Blogger >> masuk ke Theme >> lalu edit Theme

1. Letakkan kode berikut ini DI ATAS kode </head>
<style type="text/css">   .mobileShow{display: none;}   /* Smartphone Portrait and Landscape */   @media only screen   and (min-device-width : 320px)   and (max-device-width : 480px){.mobileShow{display: inline;}}</style>

2. Letakkan kode berikut ini DI ATAS kode <div id='header-wrapper'>
<div class="mobileShow"><div style='background-color:#ddd;height:20px;padding:10px;text-align:right'><a href="/">Home</a> - <a href="#">About</a> - <a href="#">Sitemap</a> - <a href="#">Contact</a> - <a href="#">Link</a></div></div>

Anda juga bisa meletakkannya di bawah kode <div id='header-wrapper'> jika ingin memunculkan menu khusus versi mobile ini di bawah logo/nama blog, tapi nanti akan "bentrok" dengan menu versi mobile yang sudah ada.

Save Template!. Test langsung di HP Anda!


Cara Lain Membuat Menu Navigasi Blog Khusus buat Tampilan di HP

Cara lainnya adalah sebagai berikut. Namun, sebelumnya Anda bisa lihat dulu DEMO. Minimize browser Anda!

Gambarnya navigasi menu responsive dropdown khusus HP sebagai berikut (tampilan mobile saja, di dekstop gak muncul):

Cara Membuatnya:

1. Template > Edit HTML
2. Copas kode berikut ini di bawah kode <head> atau di atas kode</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"> 
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/> 
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Jika di template blog Anda sudah ada tiga kode di atas --jQuery library, FontAwesome, dan font Oswald, abaikan langkah di atas!

3. Copas kode berikut ini di atas kode </head>  
<style>.sf-menu a.home:before,#searchnya button:before{position:absolute;font-family:FontAwesome;font-weight:400;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased}
.highlight{background-color:#f09903;color:#1a1308}
#searchnya{float:right;width:80%;position:relative;right:0}
.siy{bottom:0;left:0;background:none;font-size:19px;color:#fff}
#searchnya input{padding:5px 10px;width:75%;margin:5px 0 0;background-color:#FFF;height:21px;box-shadow:1px 2px 4px #A2A2A2 inset;position:relative}
#searchnya input,#searchnya button{border:0;-moz-border-radius:1px;-webkit-border-radius:1px;border-radius:1px;display:inline-block;outline:0;font-size:14px;font-family:oswald;color:#BDB5B5;font-weight:400}
#searchnya button{background-color:#6FC415;padding:0;width:15%;height:31px;margin-right:5px;cursor:pointer;position:relative;top:0}
#searchnya button:hover{background:#76D314}
#navitions{background-color:#242729;border-bottom:0 solid #6FC415;box-shadow:0 1px 9px #666;display:none}
#mobilenav{display:none}
#nav1{height:40px;position:relative;background:#242729;box-shadow:1px 2px 9px #6FC415}
.sf-menu,.sf-menu *{list-style:none;margin:0;padding:0}
.sf-menu li{white-space:normal;-moz-transition:background-color .2s;-webkit-transition:background-color .2s;transition:background-color .2s;position:relative}
.sf-menu ul{position:absolute;display:none;top:100%;left:0;z-index:99;min-width:12em;padding-top:4px;width:100%}
.sf-menu >li{float:left;text-align:left;margin:0 1px}
.sf-menu li:hover >ul,.sf-menu li.sfHover >ul{display:block}
.sf-menu a{display:block;position:relative;height:40px;line-height:40px;text-decoration:none;zoom:1;color:#FFF;font-size:100%;padding:0 15px;font-family:oswald;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
.sf-menu >li >a{font-size:105%;font-family:oswald}
.sf-menu ul ul{top:0;left:100%}
.sf-menu{float:left}
.sf-menu a.home{background-color:#A30000;margin-left:4px;text-indent:-9999px;padding:0}
.sf-menu li:hover{background:#222}
.sf-menu ul li{background-color:#242729}
.sf-menu ul li:hover{background-color:#333}
.sf-menu ul a{font-weight:400;height:30px;line-height:30px;font-family:oswald,arial}
.sf-menu ul ul li{background:#3C3C3C}
.sf-menu li:hover >a,.sf-menu li.sfHover,.sf-menu >li >a.current{-moz-transition:none;-webkit-transition:none;transition:none}
.sf-arrows .sf-with-ul{padding-right:1em}
.sf-arrows .sf-with-ul:after{content:'';position:absolute;top:50%;right:.75em;margin-top:-3px;height:0;width:0;border:5px solid transparent;border-top-color:#FFF}
.sf-arrows >li >.sf-with-ul:focus:after,.sf-arrows >li:hover >.sf-with-ul:after,.sf-arrows >.sfHover >.sf-with-ul:after{border-top-color:#FFF}
.sf-arrows ul .sf-with-ul:after{margin-top:-5px;margin-right:-3px;border-color:transparent transparent transparent #FFF}
.sf-arrows ul li >.sf-with-ul:focus:after,.sf-arrows ul li:hover >.sf-with-ul:after,.sf-arrows ul .sfHover >.sf-with-ul:after{border-left-color:#FFF}
.sf-menu li >i{position:absolute;top:15px;right:15px;width:27px;height:22px;cursor:pointer;display:none;background-color:#6FC415;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;outline:0;font:12px Verdana,Geneva,sans-serif}
.sf-menu li >i:after{content:'+';color:#FFF;font-size:19px;position:absolute;left:5px;top:-2px}
.sf-menu li ul li i:after{left:3px;font-size:16px;top:-1px}
.sf-menu li ul li i.active:after{left:4px;font-size:26px;top:-8px}
.sf-menu li >ul li i{border-radius:100px;-webkit-border-radius:100px;-moz-border-radius:100px;width:20px;height:20px}
.sf-menu li >i.active:after{content:'-';font-size:36px;top:-14px}
.sf-menu a.home{position:relative}
.sf-menu a.home:before{position:absolute;font-family:FontAwesome;font-weight:400;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;height:30px;top:0;font-size:27px;left:9px}
.sf-menu a.home:before,#view a:before{text-indent:0}
html{-webkit-text-size-adjust:100%}
@media only screen and (max-width:320px){#searchnya input{width:67%}}
@media only screen and (max-width:768px){#navitions{display:block}#nav1{width:100%}#mobilenav{display:block;text-indent:-9999px;width:35px;top:4px;left:10px;position:absolute;height:32px;outline:0;background-color:#6FC415;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;color:#FFF;text-decoration:none}#mobilenav.active{color:#fff}#mobilenav:before{content:"f0c9";top:3px;text-indent:0;left:7px;font-size:26px}#menunav{float:none;display:none;position:absolute;top:45px;left:10px;right:10px;z-index:99999999;background-color:#242729;padding:5px 10px}#menunav li{float:none;margin:0}#menunav >li{margin:1px 0}.sf-menu a.home,.sf-menu a{text-indent:0;margin-left:0;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background-color:#1D1D1D!important;padding:5px 20px;border:0}.sf-menu a:hover{background-color:#2c2c2c!important}.sf-menu ul{position:static;padding-top:0}.sf-menu ul a{padding-left:30px}.sf-menu ul ul li a{padding-left:50px}.sf-menu ul ul ul li a{padding-left:60px}.sf-menu a.home,.sf-menu li:hover >a.home,.sf-menu >li >a.current{color:#FFF;background-color:#cd2122}.sf-menu ul a:hover{padding-left:40px}.sf-menu ul ul a:hover{padding-left:60px}.sf-menu a.home:before,.sf-menu li:hover >ul,.sf-menu li.sfHover >ul{display:none}.sf-menu ul li,.sf-menu ul ul li,.sf-menu li:hover >a,.sf-menu li.sfHover{background-color:transparent}.sf-menu a.home:before,#mbt-search-layout button:before,#mobilenav:before{position:absolute;font-family:FontAwesome;font-weight:400;font-style:normal;text-decoration:inherit}}
</style><script type="text/javascript">//<![CDATA[ 
// Superfish v1.7.2 - jQuery menu widget - Joel Brich 
(function(b){var a=(function(){var p={bcClass:"sf-breadcrumb",menuClass:"sf-js-enabled",anchorClass:"sf-with-ul",menuArrowClass:"sf-arrows&quot}
,f=/iPhone|iPad|iPod/i.test(navigator.userAgent),k=(function(){var c=document.documentElement.style;return("behavior"in c&&"fill"in c&&/iemobile/i.test(navigator.userAgent))}
)(),d=(function(){if(f){b(window).load(function(){b("body").children().on("click",b.noop)}
)}}
)(),m=function(s,t){var c=p.menuClass;if(t.cssArrows){c+=""+p.menuArrowClass}
s.toggleClass(c)}
,r=function(c,s){return c.find("li."+s.pathClass).slice(0,s.pathLevels).addClass(s.hoverClass+""+p.bcClass).filter(function(){return(b(this).children("ul").hide().show().length)}
).removeClass(s.pathClass)}
,n=function(c){c.children("a").toggleClass(p.anchorClass)}
,g=function(c){var s=c.css("ms-touch-action");s=(s==="pan-y")?"auto":"pan-y";c.css("ms-touch-action",s)}
,j=function(t,u){var c="li:has(ul)";if(b.fn.hoverIntent&&!u.disableHI){t.hoverIntent(l,h,c)}
else{t.on("mouseenter.superfish",c,l).on("mouseleave.superfish",c,h)}
var s="MSPointerDown.superfish";if(!f){s+="touchend.superfish&quot}
if(k){s+="mousedown.superfish&quot}
t.on("focusin.superfish","li",l).on("focusout.superfish","li",h).on(s,"a",i)}
,i=function(t){var s=b(this),c=s.siblings("ul");if(c.length>0&&c.is(":hidden")){s.one("click.superfish",false);if(t.type==="MSPointerDown"){s.trigger("focus")}
else{b.proxy(l,s.parent("li"))()}}}
,l=function(){var c=b(this),s=o(c);clearTimeout(s.sfTimer);c.siblings().superfish("hide").end().superfish("show")}
,h=function(){var c=b(this),s=o(c);if(f){b.proxy(q,c,s)()}
else{clearTimeout(s.sfTimer);s.sfTimer=setTimeout(b.proxy(q,c,s),s.delay)}}
,q=function(c){c.retainPath=(b.inArray(this[0],c.$path)>-1);this.superfish("hide");if(!this.parents("."+c.hoverClass).length){c.onIdle.call(e(this));if(c.$path.length){b.proxy(l,c.$path)()}}}
,e=function(c){return c.closest("."+p.menuClass)}
,o=function(c){return e(c).data("sf-options")}
;return{hide:function(s){if(this.length){var v=this,w=o(v);if(!w){return this}
var t=(w.retainPath===true)?w.$path:"",c=v.find("li."+w.hoverClass).add(this).not(t).removeClass(w.hoverClass).children("ul"),u=w.speedOut;if(s){c.show();u=0}
w.retainPath=false;w.onBeforeHide.call(c);c.stop(true,true).animate(w.animationOut,u,function(){var x=b(this);w.onHide.call(x)}
)}
return this}
,show:function(){var t=o(this);if(!t){return this}
var s=this.addClass(t.hoverClass),c=s.children("ul");t.onBeforeShow.call(c);c.stop(true,true).animate(t.animation,t.speed,function(){t.onShow.call(c)}
);return this}
,destroy:function(){return this.each(function(){var s=b(this),t=s.data("sf-options"),c=s.find("li:has(ul)");if(!t){return false}
clearTimeout(t.sfTimer);m(s,t);n(c);g(s);s.off(".superfish").off(".hoverIntent");c.children("ul").attr("style",function(u,v){return v.replace(/display[^;]+;?/g,"")}
);t.$path.removeClass(t.hoverClass+""+p.bcClass).addClass(t.pathClass);s.find("."+t.hoverClass).removeClass(t.hoverClass);t.onDestroy.call(s);s.removeData("sf-options")}
)}
,init:function(c){return this.each(function(){var t=b(this);if(t.data("sf-options")){return false}
var u=b.extend({}
,b.fn.superfish.defaults,c),s=t.find("li:has(ul)");u.$path=r(t,u);t.data("sf-options",u);m(t,u);n(s);g(t);j(t,u);s.not("."+p.bcClass).superfish("hide",true);u.onInit.call(this)}
)}}}
)();b.fn.superfish=function(d,c){if(a[d]){return a[d].apply(this,Array.prototype.slice.call(arguments,1))}
else{if(typeof d==="object"||!d){return a.init.apply(this,arguments)}
else{return b.error("Method "+d+"does not exist on jQuery.fn.superfish")}}}
;b.fn.superfish.defaults={hoverClass:"sfHover",pathClass:"overrideThisToUse",pathLevels:1,delay:800,animation:{opacity:"show&quot}
,animationOut:{opacity:"hide&quot}
,speed:"normal",speedOut:"fast",cssArrows:true,disableHI:false,onInit:b.noop,onBeforeShow:b.noop,onShow:b.noop,onBeforeHide:b.noop,onHide:b.noop,onIdle:b.noop,onDestroy:b.noop}
;b.fn.extend({hideSuperfishUl:a.hide,showSuperfishUl:a.show}
)}
)(jQuery);function menunav(b){b("#mobilenav").click(function(){b("#menunav").slideToggle();b(this).toggleClass("active");return false}
);b(".sf-menu ul").each(function(){var d=b(this).parent("li");d.append("<i></i>")}
);function a(){var d=b(window).width();if(d>979){b("#menunav").css("display","block");b("#menunav").superfish({animation:{height:"show&quot}
,animationOut:{height:"hide&quot}}
);b(".sf-menu i").css("display","none")}
else{if(d<=979&&b("#mobilenav").attr("class")==="active"){b("#menunav").css("display","block");b("#menunav").superfish("destroy");b(".sf-menu i").css("display","block")}
else{if(d<=979&&b("#mobilenav").attr("class")!=="active"){b("#menunav").css("display","none");b("#menunav").superfish("destroy");b(".sf-menu i").css("display","block")}}}}
a();b(window).resize(a);b(".sf-menu i").click(function(){var d=b(this).parent("li");var e=d.children("ul");e.slideToggle();b(this).toggleClass("active");return false}
);var c=window.location.href;b("#menunav a").each(function(){if(this.href===c){var d=b(this).parents("li").children("a").addClass("current")}}
)}
;//]]></script>

4. Copas kode berikut ini di bawah kode <body>

<b:if cond="data:blog.isMobileRequest == &quot;true&quot;"><div id="navitions"><div class="isi"><nav class="navix" id="nav1"><div id="searchnya"><form action="/search"><input here="" name="q" onblur="if (" onfocus="if (" search="" this.value="" type="text" value="Search here…" /><button title="Search" type="submit"><i class="fa fa-search siy"></i></button></form></div><a href="#" id="mobilenav">Select Menu
            </a><ul class="sf-menu" id="menunav"><li><a class="home" expr:href="data:blog.homepageUrl" href="https://www.blogger.com/null">Home
                </a></li><li><a href="#">LINK TEXT </a></li><li><a href="#">LINK TEXT </a></li><li><a href="#">DROPDOWN MENU</a><ul><li><a href="#">Submenu 1</a></li><li><a href="#">Submenu 2</a></li><li><a href="#">Submenu 3</a></li></ul></li></ul><script type="text/javascript">//<![CDATA[
              menunav (jQuery);//]]></script></nav></div></div></b:if>

5. Saatnya menyembunyikan Menu Desktop di Mobile Device (Jika navigasi menu blog Anda tidak responsive), yaitu dengan menambahkan Tag Kondisional.

&lt;b:if cond=&quot;data:blog.isMobileRequest == &amp;quot;false&amp;quot;&quot;&gt;
Kode Menu Desktop Anda di Sini
&lt;/b:if&gt;

6. Save template!
Demikian Cara Membuat Menu Navigasi Blog Khusus buat Tampilan di HP (tidak muncul di desktop). Selamat mencoba


Untuk cara lainnya bisa Anda coba dengan mengembangkan cara diatas

Sumber : https://www.contohblog.com/2014/05/cara-membuat-menu-navigasi-blog-khusus-versi-mobile.html
Load Comments
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parse Box

strong em u strike
pre code pre code spoiler
embed