Pada kesempatan kali ini saya akan memberikan tutorial bagaimana Cara Mudah Membuat Menu Navigasi Scroll Ke Samping Di Bawah Header Blogger. Fungsi dari menu navigasi scroll ke samping di bawah header blogger untuk mempermudah pengunjung blog untuk mencari categori label yang mereka cari.
Tampilan menu navigasi scroll ke samping di bawah header blogger ini hanya mucul pada versi mobile saja jadi tidak akan muncul di versi desktop. Banyak sekali situs popular yang menerapkan menu navigasi scroll ke samping di bawah header blogger seperti kaskus.co.id, jalantikus.com dan situs besar lainnya.
Sebenarnya tips ini dan khususnya di bagian koding tersebut saya dapat dari situs idnxmus jadi di sini saya hanya menshare kembali tutorial yang idnxmus berikan karna saya rasa tutorial tersebut sangat bermanfaat dan ini adalah satu-satunya tutorial yang paling mudah untuk di terapkan di berbagai situs blog.
Oleh sebab itu saya sangat merekomendasikan tutorial menu navigasi scroll ke samping di bawah header blogger yang di berikan oleh idnxmus yang saya tulis dan share kembali untuk para pengguna blog.
Cara menerapkan menu navigasi scroll ke samping bisa di bilang cukup mudah, kalian hanya perlu menambahkan beberapa code html dan css saja. Apalagi jika penerapannya pada template viomagz dan untuk template lainnya hanya tinggal menyesuaikan saja. berikut adalah langkah-langkah untuk menerapkan menu navigasi scroll ke samping di bawah header blogger.
Cara Mudah Membuat Menu Navigasi Scroll Ke Samping Di Bawah Header Blogger
1. Jadi, untuk membuat menu navigasi ini, Pertama, masuk ke Dashboard Blog > Edit HTML. Di dalam mode Edit HTML ini, Cari code </header></div> lalu tambahkan kode berikut ini tepat di bawahnya.
<div class='second menu'>
<div class='inner'>
<div class='inner-one'>
<span>KATEGORI :</span>
<svg style='width: 18px;height: 18px;margin-left: 5px;vertical-align: -6px;' viewBox='0 2 24 24'><path d='M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z' fill='#444444'></path></svg>
</div>
<div class='inner-two'>
<ul>
<li><a href='#' title='Label 1'>Kesehatan</a></li>
<li><a href='#' title='Label 2'>Otomotif</a></li>
<li><a href='#' title='Label 3'>Teknologi</a></li>
<li><a href='#' title='Label 4'>Sejarah</a></li>
<li><a href='#' title='Label 5'>Olahraga</a></li>
</ul>
</div>
</div>
</div>
Pada HTML Code diatas, ganti tanda # dengan Url kategori yang kalian inginkan, dan Label dengan Nama atau Title dari kategori tersebut.
2. Selanjutnya tambahkan CSS Code berikut ini tepat di atas kode ]]></b:skin>
/*--- nav-scroll ---*/
.second-menu {
position: fixed;
font-size: 14px;
top: 48px;
width: 100%;
z-index: 99;
background: #fff;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.04);
}
.inner {
max-width: calc(960px + 40px);
margin: auto;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
}
.inner-one {
-webkit-box-flex: 0;
flex: 0 0 auto;
position: relative;
padding: 5px 10px 5px 0;
box-shadow: 3px 0px 4px -4px rgba(17, 14, 27, 0.2);
}
.inner-two {
display: -webkit-box;
overflow-x: auto;
}
.inner-two ul, .inner-two li {
list-style: none;
list-style-type: none;
padding: 0px;
margin: 0px;
}
.inner-two ul {
display: -webkit-box;
display: flex;
}
.inner-two ul li {
padding: 0px 12px;
cursor: pointer;
position: relative;
white-space: nowrap;
}
.inner-two a {
white-space: nowrap;
display: block;
padding: 12px 0px;
color: #444;
}
.inner-two a:hover {
color: #49ACE1;
}
@media (max-width:1060px) {
.inner{margin: 0 0 0 30px}
}
@media (max-width:800px) {
.inner{margin: 0 0 0 20px}
.inner-two a {
padding: 10px 0px;
}
}
@media (max-width:640px) {
.inner{margin: 0 0 0 15px}
}
3. Selanjutnya cari CSS Code berikut ini.
@media only screen and (max-width:640px) {
#wrapper {
padding: 70px 15px 15px;
}
4. Lalu ganti semua dengan CSS Code 70px ini menjadi 100px.
@media only screen and (max-width:640px) {
#wrapper {
padding: 100px 15px 15px;
}
Menu navigasi scroll ke samping di bawah header blogger memiliki fitur melayang (sticky/fixed) dan Cara ini juga bisa kalian terapkan di blog yang menggunakan template yang Valid AMP, karena penerapannya hanya menggunakan HTML dan CSS.
Demikian tutorial bagaimana Cara Mudah Membuat Menu Navigasi Scroll Ke Samping Di Bawah Header Blogger. Jika ada pertanyaan mengenai tutorial tersebut silahkan meninggalkan pesan pada kolom komentar di bawah. Semoga informasinya bermanfaat dan sampai jumpa.
Sumber Referensi : Idnxmus