Cara Membuat Menu Scroll Ke Samping – albabbarrosa.com
Halo sobat blogger semua, ketemu lagi dengan albabbarrosa. Kali ini saya akan memberikan tutorial lagi yah, lagi hobi banget bikin tutorial. Kemarin kemarin saya sudah memberikan tutorial tentang Sticky Nav sama Meni navigasi Sidebar. Kali ini saya akan memberikan tutorial tentang menu lagi, yaitu cara membuat menu scroll ke samping atau horizontal’s Scroll Menu.
Menu dengan tampilan scroll ke samping banyak kita temui di website website toko online. Selain itu google juga menggunakan menu scroll ke samping loh, ga percaya? Cek aja sendiri. Untuk web berita banyak juga yang menggunakan menu dengan gaya seperti itu, salah satunya adalah website liputan6.
Nah, kebetulan saya memiliki script menu scroll kesamping yang saya dapatkan dari template textrim buatan Igniel. Saya tertarik untuk menempatkan menu tersebut disalah satu blog saya, dan ternyata bagus juga tampilannya. Bagi kamu yang ga mau repot repot edit script di template textrim, berikut saya buatkan tutorial pemasangan menu scroll ke samping di blog, dan caranya sangat simpel sekali.
Pertama masuk ke Pengaturan > Tema > Edit Html.
Pastekan kode berikutdi bagian paling bawah rentetan kode html header, tepatnya di bawah kode </div>. sebenarnya bisa ditaruh dimana saja sesuai keinginan kamu.
Rentetan kode html header biasanya di awali dengan <div class=’header-menu’>, atau kode lain yang hampir mirip. Dan ditutup dengan tag </div>.
<div class=’textrimMenu’>
<div class=’inner’>
<ul>
<li><a href=’https://textrim.blogspot.com’ title=’Download Template’>Download Template</a></li>
<li><a href=’#’ title=’Menu 1′>Menu 1</a></li>
<li><a href=’#’ title=’Menu 2′>Menu 2</a></li>
<li><a href=’#’ title=’Menu 3′>Menu 3</a></li>
<li><a href=’#’ title=’Menu 4′>Menu 4</a></li>
<li><a href=’#’ title=’Menu 5′>Menu 5</a></li>
</ul>
</div>
</div>
Kemudian paste kode dibawah tepat di atas kode ]]></b:skin>.
.textrimMenu{
position:sticky;
position:-webkit-sticky;
top:0px;
z-index:2;
background-color:#fffdf2;
font:$(fontBold);
font-size:12px;
color:#1b1b1b;
}
.textrimMenu .inner{
color:#1b1b1b;
max-width:calc($(width.all) + 40px); /* 40px dari padding (20px x 2) */;
margin:auto;
}
.textrimMenu a{
color:#1b1b1b;
white-space:nowrap;
display:block;
padding:15px 0px;
}
.textrimMenu ul, .textrimMenu li{
list-style:none;
list-style-type:none;
padding:0px;
margin:0px;
}
.textrimMenu ul{
display:-webkit-box;
display:-webkit-flex;
display:-moz-box;
display:-ms-flexbox;
display:flex;
flex-wrap:nowrap;
align-items:center;
overflow-x:auto;
}
.textrimMenu ul li{
padding:0px 20px;
cursor:pointer;
position:relative;
white-space:nowrap;
}
.textrimMenu ul li:hover{
background-color:rgba(0,0,0,.15);
}
.textrimMenu ul li ul{
background-color:#4d95ee;
position:absolute;
display:block;
top:45px;
left:0px;
min-width:100%;
}
Save dan coba lihat hasilnya.
Cukup itu doang tutorialnya, mudah sekali bukan.
Menu dengan scroll ke samping biasanya diisi dengan sub label yang ada di blog kamu. Misalnya blog kamu membahas tentang blogging, maka menu scroll ke samping diisi dengan sub label blogging, misalnya : Tutorial Blogging, Tips n Trick, Tips Adsense, dan lain sebagainya.
Akan sangat bagus jika blog kamu mempunyai banyak sub label, jadi menunya bisa kelihatan sangat menarik dan tentunya bisa digeser geser, kalau Cuma kamu isi dengan 3 label saja ya tidak bisa digeser menunya.
Nah itulah tutorial yang sangat singkat sekali tentang cara membuat menu scroll ke samping di blog. Semoga bermanfaat sampai jumpa di tutorial berikutnya.