√ Cara Menciptakan Navigasi Blog Melayang Khusus Mobile

Konten [Tampil]

Navigasi merupakan salah satu element penting untuk sebuah blog. Pasalnya Navigasi ini mempunyai kegunaan untuk menampilkan isi dari sebuah blog tersebut. Maka dari itu peranan navigasi sangatlah penting untuk itu. Tapi terkadang navigasi template hasil d0wnl0ad an (dari pihak ke-3) hanya tampil di mode desktop(pc). Dan tidak tampil di mode Mobile.
Jika begitu aku akan memberi tutorial bagaimana cara menciptakan Navigasi (Navbar) khusus mode Mobile di BLOGGER.
Tutorial berikut untuk menciptakan NAVBAR MELAYANG (FIXED) diatas.
Baiklah simak Tutorial berikut ini :
• Buka Blogger sobat
• Pilih Template/Tema
• Edit HTML

• Copy isyarat dibawah ini & letakkan sempurna di atas kode </head> :

<script type='text/j4vascript'>//

<![CDATA[(function($) { $.fn.menumaker = function(options) { var cssmenu = $(this), settings =

$.extend({ title: "Menu", format: "dropdown", sticky: false }, options); return this.each(function() { cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');

$(this).find("#menu-button").on('click', function(){ $(this).toggleClass('menu-opened'); var mainmenu = $(this).next('ul');

if (mainmenu.hasClass('open')) { mainmenu.hide().removeClass('open'); }

else { mainmenu.show().addClass('open'); if (settings.format === "dropdown") { mainmenu.find('ul').show(); } } }); cssmenu.find('li ul').parent().addClass('has-sub');

multiTg = function() { cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>'); cssmenu.find('.submenu-button').on('click', function() { $(this).toggleClass('submenu-opened'); if ($(this).siblings('ul').hasClass('open')) { $(this).siblings('ul').removeClass('open').hide(); } else { $(this).siblings('ul').addClass('open').show(); } }); }; if (settings.format === 'multitoggle') multiTg(); else cssmenu.addClass('dropdown'); if (settings.sticky === true) cssmenu.css('position', 'fixed'); resizeFix = function() { if ($( window ).width() > 768) { cssmenu.find('ul').show(); } if ($(window).width() <= 768) { cssmenu.find('ul').hide().removeClass('open'); } }; resizeFix(); return $(window).on('resize', resizeFix); }); };})(jQuery);(function($){$(document).ready(function(){$("#cssmenu").menumaker({ title: "MENU", format: "multitoggle"});});})(jQuery);//]]></script>
• Kemudian cari lagi isyarat ]]></b:skin>
dan letakkan isyarat dibawah ini di Atas kode ]]></b:skin>

#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu

#menu-button {margin: 0;padding: 0;border: 0;list-style: none;line-height: 1;display: block;position: relative;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

#cssmenu:after,#cssmenu > ul:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}#cssmenu #menu-button {display: none;}

#cssmenu {font-family: Montserrat, sans-serif;background: #333333;}

#cssmenu > ul > li {float: left;}#cssmenu.align-center > ul {font-size: 0;text-align: center;}

#cssmenu.align-center > ul > li {display: inline-block;float: none;}

#cssmenu.align-center ul ul {text-align: left;}#cssmenu.align-right > ul > li {float: right;}

#cssmenu > ul > li > a {padding: 17px;font-size: 12px;letter-spacing: 1px;text-decoration: none;color: #dddddd;font-weight: 700;text-transform: uppercase;}

#cssmenu > ul > li:hover > a {color: #ffffff;}

#cssmenu > ul > li.has-sub > a {padding-right: 30px;}#cssmenu > ul > li.has-sub > a:after {position: absolute;top: 22px;right: 11px;width: 8px;height: 2px;display: block;background: #dddddd;content: '';}

#cssmenu > ul > li.has-sub > a:before {position: absolute;top: 19px;right: 14px;display: block;width: 2px;height: 8px;background: #dddddd;content: '';-webkit-transition: all .25s ease;-moz-transition: all .25s ease;-ms-transition: all .25s ease;-o-transition: all .25s ease;transition: all .25s ease;}

#cssmenu > ul > li.has-sub:hover > a:before {top: 23px;height: 0;}

#cssmenu ul ul {position: absolute;left: -9999px;}

#cssmenu.align-right ul ul {text-align: right;}

#cssmenu ul ul li {height: 0;-webkit-transition: all .25s ease;-moz-transition: all .25s ease;-ms-transition: all .25s ease;-o-transition: all .25s ease;transition: all .25s ease;}

#cssmenu li:hover > ul {left: auto;}

#cssmenu.align-right li:hover > ul {left: auto;right: 0;}

#cssmenu li:hover > ul > li {height: 35px;}

#cssmenu ul ul ul {margin-left: 100%;top: 0;}

#cssmenu.align-right ul ul ul {margin-left: 0;margin-right: 100%;}

#cssmenu ul ul li a {border-bottom: 1px solid rgba(150, 150, 150, 0.15);padding: 11px 15px;width: 170px;font-size: 12px;text-decoration: none;color: #dddddd;font-weight: 400;background: #333333;}

#cssmenu ul ul li:last-child > a,

#cssmenu ul ul li.last-item > a {border-bottom: 0;}

#cssmenu ul ul li:hover > a,

#cssmenu ul ul li a:hover {color: #ffffff;}

#cssmenu ul ul li.has-sub > a:after {position: absolute;top: 16px;right: 11px;width: 8px;height: 2px;display: block;background: #dddddd;content: '';}

#cssmenu.align-right ul ul li.has-sub > a:after {right: auto;left: 11px;}

#cssmenu ul ul li.has-sub > a:before {position: absolute;top: 13px;right: 14px;display: block;width: 2px;height: 8px;background: #dddddd;content: '';-webkit-transition: all .25s ease;-moz-transition: all .25s ease;-ms-transition: all .25s ease;-o-transition: all .25s ease;transition: all .25s ease;}#cssmenu.align-right ul ul li.has-sub > a:before {right: auto;left: 14px;}

#cssmenu ul ul > li.has-sub:hover > a:before {top: 17px;height: 0;}@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {

#cssmenu {width: 100%;}#cssmenu ul {width: 100%;display: none;}

#cssmenu.align-center > ul {text-align: left;}

#cssmenu ul li {width: 100%;border-top: 1px solid rgba(120, 120, 120, 0.2);}#cssmenu ul ul li,#cssmenu li:hover > ul > li {height: auto;}

#cssmenu ul li a,#cssmenu ul ul li a {width: 100%;border-bottom: 0;}#cssmenu > ul > li {float: none;}#cssmenu ul ul li a {padding-left: 25px;}

#cssmenu ul ul ul li a {padding-left: 35px;}#cssmenu ul ul li a {color: #dddddd;background: none;}#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a {color: #ffffff;}

#cssmenu ul ul,#cssmenu ul ul ul,#cssmenu.align-right ul ul {position: relative;left: 0;width: 100%;margin: 0;text-align: left;}#cssmenu > ul > li.has-sub > a:after,

#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before {display: none;}#cssmenu #menu-button {display: block;padding: 17px;color: #dddddd;cursor: pointer;font-size: 12px;text-transform: uppercase;font-weight: 700;}

#cssmenu #menu-button:after {position: absolute;top: 22px;right: 17px;display: block;height: 4px;width: 20px;border-top: 2px solid #dddddd;border-bottom: 2px solid #dddddd;content: '';}#cssmenu #menu-button:before {position: absolute;top: 16px;right: 17px;display: block;height: 2px;width: 20px;background: #dddddd;content: '';}

#cssmenu #menu-button.menu-opened:after {top: 23px;border: 0;height: 2px;width: 15px;background: #ffffff;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}#cssmenu #menu-button.menu-opened:before {top: 23px;background: #ffffff;width: 15px;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}#cssmenu .submenu-button {position: absolute;z-index: 99;right: 0;top: 0;display: block;border-left: 1px solid rgba(120, 120, 120, 0.2);height: 46px;width: 46px;cursor: pointer;}

#cssmenu .submenu-button.submenu-opened {background: #262626;}#cssmenu ul ul .submenu-button {height: 34px;width: 34px;}

#cssmenu .submenu-button:after {position: absolute;top: 22px;right: 19px;width: 8px;height: 2px;display: block;background: #dddddd;content: '';}

#cssmenu ul ul .submenu-button:after {top: 15px;right: 13px;}#cssmenu .submenu-button.submenu-opened:after {background: #ffffff;}

#cssmenu .submenu-button:before {position: absolute;top: 19px;right: 22px;display: block;width: 2px;height: 8px;background: #dddddd;content: '';}

#cssmenu ul ul .submenu-button:before {top: 12px;right: 16px;}

#cssmenu .submenu-button.submenu-opened:before {display: none;}>}

• Letakkan isyarat dibawah ini di Atas kode <div id='header' atau sejenisnya :

<div id='cssmenu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'><ul> <li>

<a href='#'>LABEL</a> <ul> <li><a href='#'>MENU 1</a> <ul><li>

<a href='#'>Submenu 1</a></li> <li>

<a href='#'>Submenu 2</a></li> </ul> </li> <li>

<a href='#'>SubMenu 1</a></li> <li>

<a href='#'>SubMenu 2</a></li><li>

<a href='#'>SubMenu 3</a></li>

</ul>

</li>

</ul> </li>

</ul>

</div><div class='clear'/>

• # = link tujuan
• silahkan untuk warna background, nama hidangan dapat di desain sendiri.

Selamat , NAVBAR khusus Mobile anda sudah jadi.
jika terjadi kesalahan Coment di bawah ya!!
Sekian..

Sumber http://tiksatuweru.blogspot.com

berbagi jawaban 5

√ Cara Menciptakan Navigasi Blog Melayang Khusus Mobile

Menu Halaman Statis