Cara Membuat Menu Navigasi Blog Khusus buat Tampilan di HP

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

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

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! (http://www.contohblog.com/).*

Sumber: MBT

Labels: Desain Blog
39 Komentar untuk "Cara Membuat Menu Navigasi Blog Khusus buat Tampilan di HP"

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

not working gan, gmna ya

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

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

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

ea gan, gmna ya caranya biar responsive

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

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

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

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

Terimakasih.

wah patut di coba ni,, terimakasih gan

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

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

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

min kok di template ane gak ada kode <div id

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

saya nyari kode <div id ga ada mas mba CB

kok gak work ya gan ..mohon pencerahannya

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

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

Sama gan punya aku juga gitu

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

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

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

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

mf untuk no 5 letakan di mana..thanks

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

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

Banyak yang ngomen, Koq Admin tidak muncul?

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

min kode warna fontnya yang mana ?

ubah warna di kode COLOR atau BACKGROUND COLOR yang ada tanda pagar #

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

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *