Cara Membuat Menu Navigasi Blogger Responsif

Dengan semakin populer dan meluasnya penggunaan perangkat mobile untuk browsing di dunia maya, maka membuat blog yang "mobile friendly" merupakan sebuah keharusan yang tidak bisa dihindari lagi. Apalagi Google sendiri untuk pencarian melalui perangkat mobile akan memberikan prioritas untuk blog atau situs yang dikategorikan "mobile friendly" dalam menampilkan hasil pencarian mobile tersebut. Untuk mendukung blog yang "mobile friendly" tersebut, menu navigasi blog yang responsif sekaligus "mobile friendly" juga harus diperhatikan.

Menu navigasi blogger responsif yang dibuat dengan cara berikut ini memiliki keistimewaan dalam versi mobile, di mana menu navigasi yang ditampilkan otomatis akan mendorong konten artikel ke bawah, tepat di bawah menu navigasi, dan tidak akan menutupi konten artikel atau iklan yang ada di bagian atas blog.

Silakan ikuti langkah demi langkah berikut cara membuat menu navigasi responsif khusus untuk platform blogger.

Langkah pertama :
Buka "Template Blogger", kemudian "Edit HTML". Backup terlebih dahulu template yang ada. Setelah itu, copy kode CSS berikut ini dan letakkan di atas kode </style> atau ]]></b:skin> :

/* Navigasi Menu */
#pull{display:none;text-decoration:none}
#navi{background:#222;width:100%;display:block;font-size:16px; font-family:"Open Sans Condensed",sans-serif;text-transform:uppercase;font-weight:bolder; width:100%; overflow:hidden; position:relative;text-decoration:none;margin:0 auto; padding:0
#navi ul{margin:0 auto; padding:0}
#navi li{list-style:none}
#navi li a{float:left;display:block; color:#fff;font-size:16px; padding:10px 20px;text-decoration:none}
#navi li a:hover{display:block;text-decoration:none; color:#fff;background:#ea6153;}
@media screen and (max-width:960px){
#navi{height:auto; border-bottom:0}
#navi ul{width:100%; display:none; height:auto}
#navi li{width:100%; float:left; position:relative;}
#navi li a{padding:10px 0}
#navi a{text-align:left; color:#f1f1f1; padding-top:14px; width:100%; text-indent:20px}
#navi a#pull{display:block; margin:0 auto; background-color:#333; height:40px; width:100%; position:relative}
#navi a#pull:after{content:''; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgftu4mSnUCSLxikkGAOdHHq6Rv1KVw5VAR45FTjA8z-fDokgmyR_2xQ5f5-nPZVfBQju_QuATFrdon9MhOyA5XiM5M6KdcDmhp_lA1Lj0J3JCF29qan61lqLR46BWXQJV3bLIbk6tqwgg3/s320/nav-icon.png) no-repeat; width:30px; height:30px; display:inline-block; position:absolute; right:10px; top:14px}
}

Langkah kedua :
Tambahkan jquery berikut di atas </head>, tidak menjadi masalah jika versinya berbeda dan abaikan jika sudah ada dalam blog Anda.

<script async='async' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'/>

Langkah ketiga :
Copy script berikut ini, lalu letakkan di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(function(){var pull=$('#pull');menu=$('#navi ul');menuHeight=menu.height();$(pull).on('
click',function(e){e.preventDefault();menu.slideToggle()})});
//]]>
</script>

Langkah terakhir :
Letakkan kode berikut di bawah kode </header>

<nav class='clearfix' id='navi' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<a href='#' id='pull'>Menu</a>
<ul class='clearfix'>
<li><a href='/' title='Home'>Home</a>
</li>
<li><a href='/search/label/A?max-results=5' title='A'>A</a>
</li>
<li><a href='/search/label/B?max-results=5' title='B'>B</a>
</li>
<li><a href='/search/label/C?max-results=5' title='C'>C</a></li>
<li><a href='/search/label/D?max-results=5' title='D'>D</a></li>
</ul>
</nav>

Sesuaikan A, B, C, D di atas dengan label yang ada di blog Anda. Simpan template.

Selamat mencoba !