Cara Membuat Menu Navigasi Melayang (Sticky) di Blogger

mekz

blogging

10 Agustus 2014

2 Komentar

Apakah teman-teman blogger sudah bosan dengan bentuk atau arsitektur menu navigasi pada blog milikmu? Bila iya, tak ada salahnya kalian mencoba membuat menu navigasi kalian menjadi sticky atau melayang. Dengan membuat menu navigasi tersebut menjadi sticky dan tetap berada diatas meskipun user scroll down ke laman bawah blog.

Selain ingin membahas Bagaimana Cara Membuat Menu Navigasi Melayang (Sticky) di Blogger, postingan ini juga sekaligus untuk menjawab pertanyaan dari sobat blogger HAMIDAH (http://hamidah-21.blogspot.com). Tanpa berlama-lama lagi silahkan langsung saja kalian simak beberapa langkah singkat untuk membuat menu navigasi sticky (melayang) berikut.

Lihat Demo

Langkah Pertama

1. Masuk ke Blogger → Edit/HTML, dengan menggunakan CTRL + F, carilah kode ]]></b:skin> lalu letakkan kode CSS yang ada dibawah ini tepat diatas ]]></b:skin> tadi.

/*--Sticky Navigation Bar--*/
#MBL_wrapper .MBL_social_wrapper
{
margin-top: 15px;
}

#MBL_wrapper
{
width: 100%;
margin: auto;
background: #fff;
height: 50px;
border-top: 5px solid #2c2f32;
border-bottom: 1px solid #EBEBEC;
-webkit-box-shadow: 0 1px 0 #D2D2D3, 0 1px 3px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);
-o-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);
box-shadow: 0 1px 0 #D2D2D3, 0 1px 3px rgba(0, 0, 0, .2);
position: fixed;
z-index: 999;
}

#MBL_wrapper .topmenu.notice
{
float: left;
width: 500px;
margin-top: 15px;
color: #fff;
}

#top_menu a
{
color: #fff;
}

#top_menu
{
display: block;
float: left;
list-style: none;
margin-top: 12px;
}

#top_menu li
{
display: inline-block;
margin-right: 15px;
font-family: 'Patua One', 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;
font-size: 14px;
text-transform: uppercase;
}

#top_menu li ul
{
display: none;
}

#boxed_wrapper
{
width: 980px;
margin: auto;
}

.MBL_standard_wrapper
{
width: 960px;
margin: auto;
}

.MBL_standard_wrapper.wide
{
width: 980px;
}

.MBL_standard_wrapper.header
{
margin-bottom: 0px;
}

.MBL_social_wrapper
{
width: auto;
float: right;
}

#menuforall .MBL_social_wrapper
{
margin-top: 15px;
}

.MBL_social_wrapper ul
{
list-style: none;
}

.MBL_social_wrapper ul li
{
float: right;
margin-left: 5px;
}

.MBL_social_wrapper ul li img
{
width: 24px;
}

#MBL_menu_wrapper
{
width: 930px;
height: 50px;
padding: 0;
margin:auto;
}

.mainmenu.notice
{
float: left;
width: 600px;
padding: 17px 0 10px 12px;
z-index: 999;
}

#MBL_menu_wrapper .nav ul, #MBL_menu_wrapper .nav
{
list-style: none;
display: block;
float: left;
margin: 0 23px 0 5px;
width: 700px;
}

#MBL_menu_wrapper .nav ul li, #MBL_menu_wrapper .nav li
{
display: block;
float :left;
margin: 0;
}

#MBL_menu_wrapper .nav ul li ul, #MBL_menu_wrapper div .nav li ul, .main_nav li ul
{
display: none;
list-style: none;
background: #000;
position:absolute;
padding: 0;
margin-top: 51px;
width: 200px;
height: auto;
z-index: 1000;
padding-top: 5px;
border-bottom: 5px solid #000;
border-left: 0;
}

#MBL_menu_wrapper .nav ul li ul li ul, #MBL_menu_wrapper div .nav li ul, .main_nav li ul li ul
{
margin-left: 200px;
margin-top: 5px;
}

#MBL_menu_wrapper .nav li ul li a, .nav li ul li a, #MBL_menu_wrapper .nav ul li.current_page_parent ul.sub-menu li.current_page_item a, .nav li.current-menu-parent ul.sub-menu li.current_page_item a
{
background: none;
}

.main_nav li ul li
{
width: 100%;
}

#MBL_menu_wrapper .nav li ul li a, #MBL_menu_wrapper .nav li.current-menu-item ul li a, #MBL_menu_wrapper .nav li ul li.current-menu-item a,#MBL_menu_wrapper .nav ul li ul li a, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a
{
color: #fff;
display: block;
width: 188px;
font-weight: bold;
line-height: 1em;
padding: 10px 0 10px 12px;
background: none;
}

.main_nav ul, .main_nav
{
list-style: none;
margin: auto;
width: 600px;
height: 50px;
z-index: 999;
float: left;
border-left: 1px solid #EBEBEC;
}

.main_nav ul li,  .main_nav li
{
display: block;
float :left;
margin: 0;
}

.main_nav ul li a,  .main_nav li a
{
display: block;
float :left;
margin: 0 0 0 0;
padding: 18px 15px 14px 15px;
color: #2c2f32;
font-family: 'Patua One';
text-transform: uppercase;
font-size: 13px;
font-weight: 500;
border-right: 1px solid #EBEBEC;
}

.main_nav ul li ul li a,  .main_nav li ul li a
{
width: 165px;
padding: 7px 19px 7px 16px;
border: 0;
font-size: 12px;
font-weight: normal;
color: #ccc;
font-family: 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;
}

.main_nav ul li ul li:last-child a,  .main_nav li ul li:last-child a
{
border-bottom: 0;
}

.main_nav ul li a:hover,  .main_nav li a:hover, .main_nav ul li a.hover,  .main_nav li a.hover, .main_nav ul li a:active,  .main_nav li a:active, .main_nav li.current-menu-item a
{
color: #fff;
background: #1bc4de;
}

.main_nav li:last-child a:hover, .main_nav li:last-child a.hover
{
border-right: 0;
}

.main_nav li ul li a,  .main_nav li.current-menu-item ul li a,#MBL_menu_wrapper .nav ul li ul li a, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a,
{
display: block;
width: 170px;
line-height: 0.7em;
padding: 5px 0 5px 30px;
}

.main_nav li ul li a:hover,  .main_nav li.current-menu-item ul li a:hover, .main_nav li ul li a.hover,  .main_nav li.current-menu-item ul li a.hover, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a:hover, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a:hover, .main_nav li ul li:last-child a:hover, .main_nav li ul li:last-child a.hover
}

 div
{
margin:0;
padding:0;
border:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}

a
{
color: #2C2F32;
text-decoration: none;
-webkit-transition: color .2s linear, background .1s linear;
-moz-transition: color .2s linear, background .1s linear;
-ms-transition: color .2s linear, background .1s linear;
-o-transition: color .2s linear, background .1s linear;
transition: color .2s linear, background .1s linear;
}

/* Font Face ----------------------------------------------- */
@font-face {
font-family: 'Patua One';
font-style: normal;
font-weight: 400;
src: local('Patua One'), local('PatuaOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/patuaone/v3/yAXhog6uK3bd3OwBILv_SLO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}

ul{
margin: 0;
padding: 0;
list-style: none;
}

Langkah Kedua

1. Masih pada halaman Edit/HTML, dengan menggunakan CTRL+F silahkan kamu cari syntax <body> kemudian letakkan kode dibawah ini tepat dibawah <body> tersebut.

<!-- Begin Navigation -->
<div id='MBL_wrapper'>
<div class='MBL_standard_wrapper'>
<div class='menu-main-menu-container'><ul class='main_nav' id='main_menu'><li class='menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-533' id='menu-item-533'>

<a href='#'>Home</a></li>

<li><a href='#'>Blog</a></li>

<li><a href='#'>About Us</a></li>

<li><a href='#'>Advertise Here</a></li>

<li><a href='#'>Contact Us</a></li>

<li><a href='htto://www.thesigit.net'>StickyMenu</a></li>
</ul></div>
<div id='menu_border_wrapper'></div>
<div class='MBL_social_wrapper'>
<ul>

<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAfRlWPLKnHTbiovRsPZ10inMtot_OJkaV2jNgrAbqbg5nwEfIEuSUrYS2iK1WRgCxmoqZan_xPxeN_l-uGHMnoEK4As6eB1RXPmlqEioVTGChCw0oNtbzJS3KoLzHPMETWiK8pZgLJQg_/s1600/facebook.png'/></a></li>

<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGtFCYG7KELCRoPjWUqlI3byjJ7hNHwbqFfUPbOxBLDo-nUbDdzQFaIyRXorCoHW4ncUnfPwWyXHbR8p1hr-RMm9AbZW3ARuT63TE2-ttCm7GxJiE4C9raHSMy_9eUQNAXyDDxi2bHt_0h/s1600/twitter.png'/></a></li>

<li><a href='#' target='_blank' title='Flickr'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMFiap8Av8SnQcSSfAkpspt4HTAvTw3VHrvvwU-e1eDiVEp0SFOQJUiCOb3yrvtzL2_jSpeLEz21uWym4x2wCQQu56Jg_-9NBJoo9Clm1Iq_V6AroVvQUU7-EuQrIaXhEl5d9uwRh6Oc-8/s1600/flickr.png'/></a></li>

<li><a href='#' target='_blank' title='Vimeo'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGTnVBEf3dLHR_WKlz6ow0QlSCI5YSS18MBO7qXY8bdBi8DTq4ONLjYNDrfJsrCzk8vt2ZsD6SRzAQX-eK_5tRrEyibbg602WZa0Se1MD2YRO61LqJ_fDL_Pn3L5gh18Doo9-VgamNbu_n/s1600/vimeo.png'/></a></li>

<li><a href='#' target='_blank' title='Tumblr'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYsmvV_V6paGrPJy8aU4eXotDBdeApAMEP5Hv6JlSDTjTp-r6YALQMPJuItRfnT6VDTGYPvQ1ghSl4nG00x9UBastSgmFZXydYdGJN4FzQqQ22grforC0dqa4D6iYKXjPEDnicgmx7CgGl/s1600/tumblr.png'/></a></li>

<li><a href='#' target='_blank' title='Google+'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Ux9HMt9LMZ2SsnZrOeGiuRu3TW3ikGYptfJTPA6HayA3_PKmtpHiNTkTJghplipy_9LTNaIRPDSZzpOC3oC_3lHKAka8upgqtDPrsY236HO71BJMK3a83mgtttvtSfl6O_1fEZwPW6sL/s1600/google.png'/></a></li>

<li><a href='#' target='_blank' title='Dribbble'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnyi9jWMvv6ReeywTwcDZODMvak2aslBpwatBAVIxsJkkD2wnqouN6FAAkrwcR-gQFubljWZlIC2zlEmvEXibY6Ec6rlYY2465S-IwAIwF5gFBW163Ll-Zfo2EDfX6s93YrXsF7niDhCZP/s1600/dribbble.png'/></a></li>

<li><a href='#' target='_blank' title='Digg'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE9QLEDAJDHZ5gtyjK7NVpKpZ3sogcAzuUXddZjx1qwB6OVH6sZVqsv6otxZWYYiWUU9zSSMiMa1St2gK8dbBJM6kwssq28DFMXC3hKtp4cMq_fU-MvsCMtN9o1Zj-FJQ87gnQ33a2cmq7/s1600/digg.png'/></a></li>

<li><a href='#' target='_blank' title='Linkedin'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOIgy3M6wfyJRNg6ineXn2WWrivV4wdORL6SgSgiL1ySXBJKugjGlT3uYkNn-3LwmQ5hIHEe14RmGSa5735d5AjqAVjiEceIfAcOWKnXSzGTkwGje7tBrT7zW5DfjPLt2hZtTD2-Rdk0Bg/s1600/linkedin.png'/></a></li>

<li><a href='#' target='_blank' title='Pinterest'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9AXaDptxmCmbv91A1kMVBVTdTdiMviCRENSarlF2SLSqTFsUUSsxWjMTIlxVYCLs9ZZACd52CZs0S1JcM9HMgXDoWEQq9kmpvJYGXbbol8mToPLiJhvCrNaoaDX6Uw4FzpmYdLD4BJQeZ/s1600/pinterest.png'/></a></li>

<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGp_Z_8VJjtWPNdWjxbUwNE48-Fk156eO_PCE16RYsOwAm8aH4BBJhaJq7o_0Sb7uZ93C1lY8Fklu9CxD44PV1cp_JfQWVtHZb4QVdiJI6m-p7QEKYtI7BHkaaiiXrblkNwcQCIdHsEVQW/s1600/rss.png'/></a></li>

</ul>
</div>
</div>
</div>
<!-- End Navigation -->

Setelah semua langkah-langkah diatas selesai kamu terapkan dengan benar, langsung saja kamu tekan tombol save template untuk melihat perubahannya. Sebagai antisipasi kamu bisa mencoba untuk back up template terlebih dahulu, atau mencoba menu preview sebelum klik tombol "Save template".

Setelah melakukan langkah-langkah ini biasanya akan mengakibatkan bagian Area Header kalian menjadi tumpang tindih. Untuk mengatasi hal ini silahkan kamu menambahkan margin-top: 50px; dalam CSS Header-wrapper milikmu.

Langkah-langkah diatas tentu saja masih bisa kalian kreasikan sendiri sesuai dengan selera dan keinginan kalian baik itu pada bagian CSS maupun HTML nya, contohnya seperti mengganti ikon sosial media maupun menghilangkan nya. Silahkan teman-teman kreasikan sendiri.

Sekian kiranya ulasan saya kali ini tentang Bagaimana Cara Membuat Menu Navigasi Melayang (Sticky) di Blogger / Blogspot. Semoga ulasan ini dapat berguna dan bermanfaat. :)