May 18, 2014

Cara Membuat Menu Navigasi Blog Khusus buat Tampilan di HP

May 18, 2014

MENU navigasi blog responsive dropdown berikut ini khusus hanya muncul di tampilan versi mobile (HP/SmartPhone), tidak muncul di komputer desktop.

Namun, tutorial ini tidak perlu diterapkan di blog Anda, jika sudah menggunakan navigasi menu responsive.

Bagaimana Cara Membuat Menu Navigasi Blog Khusus buat Tampilan di HP saja? Yang pernah CB praktikkan adalah sebagai berikut.

Cara Membuat Menu Navigasi Blog Khusus buat Tampilan di HP

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.

3. Save Template!
4. Test langsung di HP Anda!

Sumber: HubSpot.

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):

Menu Navigasi Khusus HP

Cara Membuatnya:
1. Template > Edit HTML
2. Copas kode berikut ini di bawah kode <head> atau di atas kode </head>


<script src='http://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'/>

Catatan:
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:0px 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 &gt; li{float:left;text-align:left;margin:0 1px}.sf-menu li:hover &gt; ul,.sf-menu li.sfHover &gt; 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 &gt; li &gt; 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 &gt; a,.sf-menu li.sfHover,.sf-menu &gt; li &gt; 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:&#39;&#39;;position:absolute;top:50%;right:.75em;margin-top:-3px;height:0;width:0;border:5px solid transparent;border-top-color:#FFF}.sf-arrows &gt; li &gt; .sf-with-ul:focus:after,.sf-arrows &gt; li:hover &gt; .sf-with-ul:after,.sf-arrows &gt; .sfHover &gt; .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 &gt; .sf-with-ul:focus:after,.sf-arrows ul li:hover &gt; .sf-with-ul:after,.sf-arrows ul .sfHover &gt; .sf-with-ul:after{border-left-color:#FFF}.sf-menu li &gt; 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 &gt; i:after{content:&#39;+&#39;;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 &gt; ul li i{border-radius:100px;-webkit-border-radius:100px;-moz-border-radius:100px; width:20px; height:20px;}
.sf-menu li &gt; i.active:after{content:&#39;-&#39;;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:&quot;f0c9&quot;;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 &gt; 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 &gt; a.home,.sf-menu &gt; li &gt; 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 &gt; ul,.sf-menu li.sfHover &gt; ul{display:none}.sf-menu ul li,.sf-menu ul ul li,.sf-menu li:hover &gt; 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"},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"}if(k){s+=" mousedown.superfish"}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"},animationOut:{opacity:"hide"},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"},animationOut:{height:"hide"}});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 name='q' onblur='if (&apos;&apos; === this.value) {this.value = &apos;Search here…&apos;;}' onfocus='if (&apos;Search here…&apos; === this.value) {this.value = &apos;&apos;;}' type='text' value='Search here…'/>
<button title='Search' type='submit'>
<i class='fa fa-search siy'/>
</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'>
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.

<b:if cond='data:blog.isMobileRequest == "false"'>
Kode Menu Desktop Anda di Sini</b:if>

6. Save template!

Demikian Cara Membuat Menu Navigasi Blog Khusus buat Tampilan di HP (tidak muncul di desktop). Good Luck! (www.contohblog.com/).*

Sumber: MBT

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

49 comments on Cara Membuat Menu Navigasi Blog Khusus buat Tampilan di HP

  1. Replies
    1. alhamdulillah... kasih screnshotnya tampilan HP dong biar CB muat di sini.... :)

      Delete
  2. not working gan, gmna ya

    ReplyDelete
    Replies
    1. nah itu yang lain berhasil.... templatenya gak responsive kali ya...???

      Delete
    2. ea gan, gmna ya caranya biar responsive

      Delete
  3. sore gan, ada 1 maslah nih pas pake template johny wuss... pas di buka via blackberry saja tombol navigasi/menu tidak respon saat di tekan
    kesalahan dimana ya?
    pengguna blackberry kan masih banyak, sayang kl ga kebuka

    trims ya

    ReplyDelete
    Replies
    1. punya CB baik-baik saja.... mungkin ada kode yang kehapus....?

      Delete
  4. Om saya koreksi sedikit ya
    yang kata align:right'> diganti om jadi center jika nggak digan ti tulisan menu nya akan berada di kanan om. Hehehehe berdasarkan pengalaman

    ReplyDelete
  5. GagaL gan,, code html tdk ada yg error, tapi template tdk bsa disave,, !!!
    Mohon penjeLasan Lanjutnya... :)

    ReplyDelete
  6. div id header weapper tak ada.adany div class, macam mana ini?
    fmmm

    ReplyDelete
  7. Artikel yang sangat bermanfaat. Perlu memakai template nya sendiri kali yan Gan sehingga pada template standar agak susah kerjanya? mohon pencerahan

    Terimakasih.

    ReplyDelete
  8. Makasih buat infonya

    ReplyDelete
  9. wah patut di coba ni,, terimakasih gan

    ReplyDelete
  10. 1 pertanyaan gan,, untuk tampilan mobile nya apakah di atur ke khusus atau bagaimana?

    ReplyDelete
  11. @Abdul Kholis, lakukan saja seperti tutorial di atas :)

    ReplyDelete
  12. satu saran.. berikan contoh foto yang sudah agan coba pada blog ini, supaya lebih meyakinkan pengunjung blog yang membutuhakn informasi...
    salam sukses selalu..

    ReplyDelete
  13. min kok di template ane gak ada kode <div id

    ReplyDelete
  14. saya nyari kode <div id='header-wrapper ga ada di HTML blog sya ...

    ReplyDelete
  15. saya nyari kode <div id ga ada mas mba CB

    ReplyDelete
  16. kok gak work ya gan ..mohon pencerahannya

    ReplyDelete
  17. gan, kok template aku kode id='header-wrapper'> gak ada ?

    ReplyDelete
    Replies
    1. kalo gak ada kode itu blognya gak akan ada bagian header buat nama/logo, jadi pasti ada

      Delete
    2. Yg ada headwrapper, tapi sudah aku tes copas kode diatasnya tetap gak bisa

      Delete
  18. mas kalo buat menu yang seperti home, tips seo, free template dll di tampilan mobile gimana ?

    ReplyDelete
  19. kalau cara membuat yang versi mobile tampak seperti versi komputer gmn ya gan,

    ReplyDelete
  20. maaf CB, berhubung artikel ini bermanfaat saya mau tanya yang di maksud Kode menu dekstop itu seperti apa ya? CSSnya kah? tak kondisional? atau apanya?
    saya berharap sekali CB konfirmasi ke email saya dayatlopedia@gmail.com

    ReplyDelete
  21. mf untuk no 5 letakan di mana..thanks

    ReplyDelete
  22. templatenya di save bisa gan, tapi di cek di hp kok gak muncul sama sekali yaa ?

    ReplyDelete
  23. Work pake cara yang pertama,ane pake template brosense.Terima kasih CB

    ReplyDelete
  24. Banyak yang ngomen, Koq Admin tidak muncul?

    ReplyDelete
  25. min kasih tau cara merubah warna nya dong, templete saya warna merah jd gmna cra ngubah warna hijau itu

    ReplyDelete
    Replies
    1. ubah warna di kode COLOR atau BACKGROUND COLOR yang ada tanda pagar #

      Delete
  26. min kode warna fontnya yang mana ?

    ReplyDelete
  27. waduh ini gimana min! berhasil sih berhasil , tapi pas di desktop blog ane ga ada layarnya putih semua. alhasil saya lagi kode2 di atas

    ReplyDelete
  28. Cra masukin CSS nua dimana...??

    ReplyDelete
  29. Mantap jiwa gan thanks buat ilmunya 100% Work cantik

    ReplyDelete
  30. bang mau tanya ni saya pakai Tamplate CB basik tapi menu nav nya di hp ga bisa kebuka

    ReplyDelete
  31. Gan klo ganti template premium apa semua isi dari blog sebelumnya akan hilang

    ReplyDelete
  32. Tidak akan. Ganti template sama sekali tidak akan mempengaruhi isi blog, cuma tampilan saja yang berubah sesuai dengan template baru.

    ReplyDelete
  33. Untuk android, layarnya kalau di rotasi menu navigasinya hilang? Kok punya saya gitu?

    ReplyDelete
  34. Makasih banyak gan , berhasil

    ReplyDelete

Contact Form

Name

Email *

Message *