Cara Menciptakan Navigasi Kecil Menyerupai Jalantikus.Com

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

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

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

Cara Membuat Navigasi Kecil Seperti JalanTikus

Untuk menciptakan navigasi kecil ini, kita hanya memakai html dan css jadi prosesnya gak ribet-ribet amat sob. sepakat simak langkah-langkahnya sob:

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

Langkah 2, Pilih sajian template kemudian klik edit html

Langkah 3, Cari instruksi </style> atau ]]><b:skin> kemudian letakkan instruksi dibawah ini sempurna 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 instruksi html yang menyatakan header wrapper berakhir sebab kita akan meletakkan navigasi ini sempurna melekat dibawah header. Lalu Letakkan instruksi dibawah ini sempurna 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 balasannya kalian dapat lihat disini => DEMO

Demikian cara menciptakan navigasi kecil versi mobile menyerupai pada web jalantikus.com, biar berhasil di terapkan pada blog kalian.

Sumber https://migimagz.blogspot.com/

Bagikan Artikel ini