MENU NAVIGASI MOBILE BLOG PALING MUDAH DIBUAT

Saya telah memberikan tutorial contoh cara membuat menu navigasi mobile pada postingan yang berjudul: CARA MEMBUAT MENU NAVIGASI MOBILE FRIENDLY DENGAN MUDAH

Dan tentu saja itu dapat diterapkan dengan mudah pada tema tema bawaan blogger. Baik pada template terbaru maupun varian template blogger yang lebih tua.  Saya sangat merekomendasikan anda untuk membuat menu navigasi blog demi tampilan blog agar tampak premium dan tidak gratisan.

Kenapa harus mobile, ya karena zaman sekarang memang bukan hanya untuk zaman tampilan laptop dan desktop,  tapi MOBILE. Tampilan kali ini adalah: Menu blog  hanya akan terlihat setelah navigasi disentuh oleh jari:

Untuk kali ini kami melanjutkan trik membuat menu navigasi mobile dan anda tinggal meletakan kode kodenya menurut petunjuk yang akan kami berikan namun. Sebenarnya triknya hampir sama dengan tutorial terdahulu hanya saja perintah perintah didalam kodenya berubah dari dropdown menjadi horisontal. Baiklah kita mulai:

Langkah Pertama masuk pengaturan blog, pilih tema, lalu klik edtit-HTML. Cari kode: </head> dan letakan kode css di bawah ini sebelum atau diatas tag </head> tadi:

<style>body { font-family: Arial, Helvetica, sans-serif;}.mobile-container { max-width: 480px; margin: auto; background-color: #fff; height: 500px; color: white; border-radius: 10px;}.topnav { overflow: hidden; background-color: #333; position: relative;}.topnav #myLinks { display: none;}.topnav a { float: left; color: white; padding: 14px 16px; text-decoration: none; font-size: 17px;}.topnav a.icon { float: right;}.topnav a:hover { background-color: #ddd; color: black;}.active { background-color: #4CAF50; color: white;}</style>

Langkah Kedua Masih dalam mode edit-HTML cari kode </header> lalu masukan kode html dibawah ini sebelum atau diatas tag </header> tadi:

<div class='topnav'> <a class='active' href='#home'>Logo</a> <div id='myLinks'> <a href='#news'>News</a> <a href='#contact'>Contact</a> <a href='#about'>About</a> </div> <a class='icon' href='javascript:void(0);' onclick='myFunction()'> <i class='fa fa-bars'/> </a></div><div style='padding-left:16px'></div>Langkah ketiga, masih pada opsi edit-HTML, cari kode </body> setelah ketemu letakan kode JS dibawah ini diatas tag </body> tadi:<script>function myFunction() { var x = document.getElementById(&quot;myLinks&quot;); if (x.style.display === &quot;block&quot;) { x.style.display = &quot;none&quot;; } else { x.style.display = &quot;block&quot;; }}</script>

Terakhir SAVE tema dan lihat Demo  animasi tangkapan layar yang saya buat melalui hape:

Sekilas memang mirip dengan menu navigasi editblogtema yang sedang kami pakai (Menu navigasi EditblogTema sedang dalam penyempurnaan terutama pada menu pencarian), tetapi menu osiris  dibuat dengan material dan elemen HTML yang jauh lebih ringan dan bersih, kecuali pada penggunaan JavaScript. 

Sebenarnya saya tidak terlalu suka JavaScript, namun untuk menghidupkan beberapa fungsi sementara hal ini terpaksa diterapkan.  Mudah mudahan kedepannya akan dapat saya perbaiki untuk meningkatkan performa dan kecepatan template blog...