Membuat Menu + Kolom Search Melayang Saat di Scroll Tanpa jQuery

Tutorial blogspot kali ini tentang cara membuat menu dropdown dan kolom search melayang setelah di scroll, atau yang lebih dikenal dengan sticky menu/floating menu. Banyak cara untuk membuat floating menu atau sticky menu di blog, beberapa diantaranya ialah pure menggunakan CSS, menggunakan JavaScript hingga menggunakan jQuery.

Namun, pada tutorial cara membuat sticky menu kali ini ialah tanpa jQuery yang biasanya menggunakan stylesheet jQuery yang disinyalir membawa dampak buruk pada loading blog, sehingga blog menjadi terasa berat saat loading. Cara membuat menu melayang kali ini menggunakan sedikit bantuan dari JavaScript yang cukup ringan dan tentunya 100% work.

Baca juga: Cara Memasang Iklan di Tengah Postingan Tanpa Merusak Tampilan Blockquote dan Gambar

Cara ini sebetulnya saya sudah terapkan pada Template Perkasa Magazine, namun saya tidak membuat blog demonya. Namun, bagi yang tertarik untuk memiliki Template Perkasa Magazie tersebut, saya sudah sertakan HTML template khusus yang ada floating menu atau sticky menunya. Sticky menu pada tutorial ini tidak akan ditampilan pada device kecil, seperti device smartphone hingga handphone. Saya sudah menyertakan tag conditional pada script sticknya, sehingga script tersebut tidak muncul pada device tertentu.

Nah, bagi anda yang tertarik juga memasang sticky menu di template blognya, silahkan simak caranya berikut ini.

Cara membuat sticky menu di blog (mulai dari nol)

Cara ini berlaku bagi anda yang ingin mengganti tampilan menu sepenuhnya, alias memulai dari nol:

#Langkah 1
Login ke blogger, masuk ke dasbor blog > Template > Edit HTML. Lalu letakkan kode berikut ini di atas </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<style type='text/css'>
/* Menu and Search */
.menu-wrapper{width:100%;max-width:1000px;margin:0 auto;padding:0;position:relative}
.sticky-menu{font-family: &#39;Open Sans&#39;, arial;background:#2d2d2d;width:auto;padding:0;margin:0;font-size:15px;font-weight:400}
.sticky-menu ul{margin:0 auto;padding:0;float:left}
.sticky-menu ul a {display:block;padding:0 15px;}
.sticky-menu ul li{position:relative;margin:0;}
.sticky-menu ul &gt; li {float:left;}
.sticky-menu ul &gt; li &gt; a {display:block;height:57px;line-height:56px;color:#fff;font-weight:bold;overflow:hidden;transition:all .35s ease;}
.sticky-menu ul &gt; li &gt; a.active {background:#e35959;color:#fff;}
.sticky-menu ul &gt; li:hover &gt; a,.sticky-menu ul li.homex {background:#e35959;color:#fff;}
.sticky-menu ul &gt; li:hover &gt; a.active {background:#e35959}
.sticky-menu ul li a img{vertical-align:middle!important;height:10px;width:14px}
.sticky-menu ul ul {display:none;list-style:none;position:absolute;top:100%;width:190px;z-index:9999;overflow:hidden}
.sticky-menu ul &gt; li:hover ul {display:block}
.sticky-menu ul ul &gt; li {clear:both;overflow:hidden;background:rgba(22,3,48,.6);height:42px;z-index:9999;width:190px;}
.sticky-menu ul ul &gt; li &gt; a {margin:0;color:#fff !important;padding:0 15px;text-align:left;height:42px;line-height:41px;width:190px;z-index:9999}
.sticky-menu ul ul &gt; li &gt; a:hover {color:#fff !important;background:#e35959}
/* Sticky menu */
.makesticking2{position:fixed!important;padding:0!important;top:0;max-width:100%;left:0;right:0;z-index:99999}
</style>

#Langkah 2
Letakkan kode berikut ini di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<script type='text/javascript'>
//<![CDATA[
var mql = window.matchMedia('screen and (min-width: 600px)');if (mql.matches){function makemeSticky2(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" makesticking2",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky2("floating");}
//]]>
</script>

#Langkah 3
Selanjutnya, untuk kode pemanggil menu+search form di atas, anda dapat meletakkan kode berikut ini di bawah header atau di atas content-wrapper:

<div class='menu-wrapper' id='floating'>
<nav class='sticky-menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
 <ul>
   <li class='homex'><a href='/' itemprop='url' title='home'><img alt='Home' expr:title='data:blog.title' height='12' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibKroVVnoxvA_hCTa9NY8u4cmHjY3MUQHkkiOMvJYoE5-ni_OfPIhhd1n4Zat0o9K3yX1fDbDRheqodLOmAby-V4BJfOKR-ign4Fde4Sj2Nd7crgH8ehTBZNMyy1wYRWaBAnxr4WN6jjo/s1600/siminihome.png' width='14'/> Home</a></li>
   <li><a href='/search/label/Amazing' itemprop='url' title='Amazing'><span itemprop='name'>Amazing</span></a></li>
   <li><a href='/search/label/Black' itemprop='url' title='Black'><span itemprop='name'>Black</span></a></li>
   <li><a href='/search/label/Speed' itemprop='url' title='Speed'><span itemprop='name'>Speed</span></a></li>
   <li><a href='/search/label/Sport' itemprop='url' title='Sport'><span itemprop='name'>Sport</span></a></li>
   <li><a href='/search/label/Style' itemprop='url' title='Style'><span itemprop='name'>Style</span></a></li>
<li><a href='#' itemprop='url' title=''><span itemprop='name'>Other</span></a>
<ul>
<li><a href='/search/label/Red' itemprop='url' title='Red'><span itemprop='name'>Red Car</span></a></li>
<li><a href='/search/label/Modern' itemprop='url' title='Modern'><span itemprop='name'>Modern</span></a></li>
<li><a href='/search/label/ThankYou' itemprop='url' title='Thank You'><span itemprop='name'>Thank You</span></a></li>
</ul>
</li>
    </ul>
<form action='/search' id='search-wrapper' method='get'><table><tbody><tr><td class='search-box'><input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Search here...'/></td>
<td class='search-button'><input id='search-button' type='submit' value='Go'/></td></tr></tbody></table></form>
    <div class='clear'/>
</nav>
    <div class='clear'/>
</div>

#Langkah 4
Simpan Template

Cara membuat sticky menu pada menu yang sudah terpasang di blog

Bagi anda yang hanya ingin menambahkan efek sticky menu di blog, maka anda tidak perlu merombak seluruh menu yang sudah terpasang tersebut. Anda cukup menambahkan beberapa langkah berikut ini:

#Langkah 1
Tampahkan <div id='floating'> di antara kode (pemanggil) menu di blog. Contohnya:

<div id='floating'>
KODE PAMANGGIL MENU DI BLOG YANG SUDAH ADA
</div>

#Langkah 2
Temukan kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; lalu letakkan berikut ini di atas kode tadi:

<script type='text/javascript'>
//<![CDATA[
var mql = window.matchMedia('screen and (min-width: 600px)');if (mql.matches){function makemeSticky2(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" makesticking2",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky2("floating");}
//]]>
</script>

#langkah 3
Simpan template.

Selamat mencoba dan semoga sukses.