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.
2. Letakkan kode berikut ini DI ATAS kode <div id='header-wrapper'>
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.
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>
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>
4. Copas kode berikut ini di bawah kode <body>
5. Saatnya menyembunyikan Menu Desktop di Mobile Device (Jika navigasi menu blog Anda tidak responsive), yaitu dengan menambahkan Tag Kondisional.
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
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):
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 > 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"},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>
<b:if cond='data:blog.isMobileRequest == "true"'>
<div id='navitions'>
<div class='isi'>
<nav class='navix' id='nav1'>
<div id='searchnya'>
<form action='/search'>
<input name='q' onblur='if ('' === this.value) {this.value = 'Search here…';}' onfocus='if ('Search here…' === this.value) {this.value = '';}' 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
« Prev Post
Next
Next Post »
Next Post »
CB Blogger
Makasih ya om. Berhasil
ReplyDeletealhamdulillah... kasih screnshotnya tampilan HP dong biar CB muat di sini.... :)
Deletenot working gan, gmna ya
ReplyDeletenah itu yang lain berhasil.... templatenya gak responsive kali ya...???
Deleteea gan, gmna ya caranya biar responsive
Deletesore gan, ada 1 maslah nih pas pake template johny wuss... pas di buka via blackberry saja tombol navigasi/menu tidak respon saat di tekan
ReplyDeletekesalahan dimana ya?
pengguna blackberry kan masih banyak, sayang kl ga kebuka
trims ya
punya CB baik-baik saja.... mungkin ada kode yang kehapus....?
DeleteOm saya koreksi sedikit ya
ReplyDeleteyang 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,, !!!
ReplyDeleteMohon penjeLasan Lanjutnya... :)
div id header weapper tak ada.adany div class, macam mana ini?
ReplyDeletefmmm
aku ga bisa :(
ReplyDeleteArtikel yang sangat bermanfaat. Perlu memakai template nya sendiri kali yan Gan sehingga pada template standar agak susah kerjanya? mohon pencerahan
ReplyDeleteTerimakasih.
Makasih buat infonya
ReplyDeletenice post
ReplyDeletewah patut di coba ni,, terimakasih gan
ReplyDelete1 pertanyaan gan,, untuk tampilan mobile nya apakah di atur ke khusus atau bagaimana?
ReplyDelete@Abdul Kholis, lakukan saja seperti tutorial di atas :)
ReplyDeleteNice Postt!!
ReplyDeleteThanks
satu saran.. berikan contoh foto yang sudah agan coba pada blog ini, supaya lebih meyakinkan pengunjung blog yang membutuhakn informasi...
ReplyDeletesalam sukses selalu..
min kok di template ane gak ada kode <div id
ReplyDeletesaya nyari kode <div id='header-wrapper ga ada di HTML blog sya ...
ReplyDeletesaya nyari kode <div id ga ada mas mba CB
ReplyDeletekok gak work ya gan ..mohon pencerahannya
ReplyDeletekalo gak ada kode itu blognya gak akan ada bagian header buat nama/logo, jadi pasti ada
ReplyDeletemas kalo buat menu yang seperti home, tips seo, free template dll di tampilan mobile gimana ?
ReplyDeletekalau cara membuat yang versi mobile tampak seperti versi komputer gmn ya gan,
ReplyDeletemaaf CB, berhubung artikel ini bermanfaat saya mau tanya yang di maksud Kode menu dekstop itu seperti apa ya? CSSnya kah? tak kondisional? atau apanya?
ReplyDeletesaya berharap sekali CB konfirmasi ke email saya dayatlopedia@gmail.com
mantaf jajal ah :D
ReplyDeletemf untuk no 5 letakan di mana..thanks
ReplyDeletetemplatenya di save bisa gan, tapi di cek di hp kok gak muncul sama sekali yaa ?
ReplyDeleteWork pake cara yang pertama,ane pake template brosense.Terima kasih CB
ReplyDeleteBanyak yang ngomen, Koq Admin tidak muncul?
ReplyDeletemin kasih tau cara merubah warna nya dong, templete saya warna merah jd gmna cra ngubah warna hijau itu
ReplyDeleteubah warna di kode COLOR atau BACKGROUND COLOR yang ada tanda pagar #
Deletemin kode warna fontnya yang mana ?
ReplyDeletewaduh ini gimana min! berhasil sih berhasil , tapi pas di desktop blog ane ga ada layarnya putih semua. alhasil saya lagi kode2 di atas
ReplyDeleteCra masukin CSS nua dimana...??
ReplyDeletepanduan sudah sangat jelas banget
Deleteok nice...
ReplyDeletethanks gan
Mantap jiwa gan thanks buat ilmunya 100% Work cantik
ReplyDeletebang mau tanya ni saya pakai Tamplate CB basik tapi menu nav nya di hp ga bisa kebuka
ReplyDeleteGan klo ganti template premium apa semua isi dari blog sebelumnya akan hilang
ReplyDeleteTidak akan. Ganti template sama sekali tidak akan mempengaruhi isi blog, cuma tampilan saja yang berubah sesuai dengan template baru.
ReplyDeleteUntuk android, layarnya kalau di rotasi menu navigasinya hilang? Kok punya saya gitu?
ReplyDeletega bisa
ReplyDeleteMakasih banyak gan , berhasil
ReplyDelete