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. sebenar nya 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.
Nah, bagi anda yang tertarik juga memasang sticky menu di template blognya, silahkan simak caranya berikut ini.

Cara membuat sticky menu di blog

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

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

/* Menu and Search */

.menu-wrapper{width:100%;max-width:1000px;margin:0 auto;padding:0;position:relative}

.sticky-menu{font-family: 'Open Sans', 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 > li {float:left;}

.sticky-menu ul > li > a {display:block;height:57px;line-height:56px;color:#fff;font-weight:bold;overflow:hidden;transition:all .35s ease;}

.sticky-menu ul > li > a.active {background:#e35959;color:#fff;}

.sticky-menu ul > li:hover > a,.sticky-menu ul li.homex {background:#e35959;color:#fff;}

.sticky-menu ul > li:hover > 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 > li:hover ul {display:block}

.sticky-menu ul ul > li {clear:both;overflow:hidden;background:rgba(22,3,48,.6);height:42px;z-index:9999;width:190px;}

.sticky-menu ul ul > li > 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 > li > 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>

<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/AVvXsEiR61kA7QUSlpDBRNRUyFyo23CHGBYqxD9jDCUMNukYcfkAorn3870VCrsP2qyg1kJhMLYwkHXX4KBIhvWGGbNYpNUY-8_dAz1OLUz9LLjsTfOenkX7AF_N3u-U8RY3ohGQgp3Jhzti39Y/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.