Cara Membuat Navigasi Kecil Seperti Jalantikus.com

Kalian pernah berkunjung ke jalantikus.com? dan tertarik untuk membuat naviagsi kecil yang hanya tampil pada mode mobile saja?. Tepat sekali kalian berkungjung ke sini sob, karena pada kali ini kita akan membahas bagaimana cara membuat navigasi kecil khusus versi mobile seperti pada jalantikus.com.

Selain mempercantik tampilan blog, menu navigasi kecil ini sangat mempermudah pengunjung blog untuk mengeksplorasi blog kalian. Tentunya pengunjug blog akan betah berlama-lama di blog kalian karena navigasinya jelas dan mudah.

Baca Juga : Cara Submit URL di Google Webmaster Terbaru
Untuk membuat navigasi ini, sebaiknya header blog kalian merupakan  jenis header sticky, karena navigasi kecil ini hanya cocok bila dipasang di blog dengan header sticky,seperti header jalantikus.

Cara Membuat Navigasi Kecil Seperti JalanTikus

Untuk membuat navigasi kecil ini, kita hanya menggunakan html dan css jadi prosesnya gak ribet-ribet amat sob. oke simak langkah-langkahnya sob:

Langkah 1,Login ke blogger.com lalu masuk ke dashboard blog yang ingin di pasang menu navigasi kecil ini

Langkah 2, Pilih menu template lalu klik edit html

Langkah 3, Cari kode </style> atau ]]><b:skin> lalu letakkan kode dibawah ini tepat diatasnya

/* migimagz-menu-kecil */
#migimagz-menu-kecil{-webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);margin-bottom:10px;left:0;right:0;top:35px;display:none;max-width:100%;overflow:scroll;overflow-y:hidden;position:fixed;z-index:999;background:#ddd;border-bottom:1px solid #ccc;height:35px;line-height:5px;font-size:13.5px;font-weight:500}
#migimagz-menu-kecil ul{width:500%;margin-left:82px}
#migimagz-menu-kecil ul li{float:left;padding:0 17.5px;display:block;text-align:center;text-transform:uppercase}
#migimagz-menu-kecil ul li a{color:#444;padding:0 .5px 5px .5px;transition:all .0}
#migimagz-menu-kecil li.satu a{color:#49ace1;padding-bottom:5px;border-bottom:3px solid #49ace1}
#migimagz-menu-kecil ul li a:hover{color:#49ace1;border-bottom:6px solid #49ace1}
#migimagz-menu-kecil ul{margin-left:30px}
#migimagz-menu-kecil ul{margin-left:48px}
#migimagz-menu-kecil{z-index:998;top:45px;height:30px;line-height:8px;font-size:13px;font-weight:700;display:block}
#migimagz-menu-kecil ul{margin-left:-5px}

Langakh 4, Cari kode  <!-- header wrapper end --> ,jika tidak ada cari saja kode html yang menyatakan header wrapper berakhir karena kita akan meletakkan navigasi ini tepat menempel dibawah header. Lalu Letakkan kode dibawah ini tepat dibawah kode  <!-- header wrapper end -->

<b:if cond="data:blog.isMobileRequest == &quot;true&quot;">
<b:if cond="data:blog.pageType != &quot;item&quot;">
<b:if cond="data:blog.pageType != &quot;static_page&quot;">
<div id="migimagz-menu-kecil">
<ul>
<li class="satu"><a href="https://migimagz.com/">Home</a></li>
<li><a href="https://www.blogger.com/search/label/Sport">Black</a></li>
<li><a href="https://www.blogger.com/search/label/Green">Green</a></li>
<li><a href="https://www.blogger.com/search/label/Gold">Gold</a></li>
<li><a href="https://www.blogger.com/search/label/red">Red</a></li>
<li><a href="https://www.blogger.com/search/label/Gold">Blue</a></li>
<li><a href="https://www.blogger.com/search/label/Gold">Yellow</a></li>
<li><a href="https://www.blogger.com/search/label/Gold">Orange</a></li>
</ul>
</div>
</b:if></b:if></b:if>

Langkah 5, Simpan template

Setelah itu kalian tinggal edit menu-menu dan link nya, untuk hasilnya kalian bisa lihat disini => DEMO

Demikian cara membuat navigasi kecil versi mobile seperti pada web jalantikus.com, semoga berhasil di terapkan pada blog kalian.

Share This Article :