Cara Mudah Buat Menu Navigasi Scroll Samping
Cara Mudah Buat Menu Navigasi Scroll Samping ~ Hay sobat akal lama ya tidak ketemu dengan admin kali ini admin akan kasih tutorial cara mudah buat navigasi scroll samping seperti yang di gunakan blog besar seperti akalnesia dan faronesia dan mirip di template mbak igniel yaitu textrim tapi sedikit berbeda apa yang beda yuk kita lihat apa perbedanya.
Meski caranya pemasangannya mudaj tapi kalian akan mendapatkan hasip yang memuaskan untuk mempercantil template kalian yuk disimak cara pembuatanya cekidot
Pertama silakan kalian pasang kode css dibawah ini tepat diatas ]]></b:skin>
<div class='akalmenu-scroll'>
<ul>
<li><a href='#' title='Label 1'>Label 1</a></li>
<li><a href='#' title='Label 2'>Label 2</a></li>
<li><a href='#' title='Label 3'>Label 3</a></li>
<li><a href='#' title='Label 4'>Label 4</a></li>
<li><a href='#' title='Label 5'>Label 5</a></li>
</ul>
</div>
Jika sudah kalian pasang kode html dibawah ini tempat di atas kode </header> </div>
/* akalmenu-scroll scroll samping */
.akalmenu-scroll ul {
background: linear-gradient(to right, #f39c12, #f9690e);
max-width: 100%;
overflow-x: auto;
}
.akalmenu-scroll {
color: #fff;
line-height: 0px;
overflow: hidden;
}
.akalmenu-scroll a {
font-size: 14px;
color: #fff;
text-decoration: none;
padding: 10px 13px;
line-height: 1.5em;
display: block;
font-weight: bold;
}
.akalmenu-scroll a:hover {
background-color: rgba(0,0,0,.25);
color: #fff;
text-decoration: none;
}
.akalmenu-scroll ul, .akamenu-scroll li {
list-style: none;
display: inline-block;
white-space: nowrap;
margin: 0px;
padding: 0px;
}
@media screen and (max-width: 480px){
.akalmenu-scroll a {
font-size: 13px;
padding: 8px 11px;
}
}
@media screen and (max-width: 360px){
.akalmenu-scroll a {
font-size: 12px;
padding: 7px 10px;
}
}
dan simpan template dan lihat hasilnya dari Cara Mudah Buat Menu Navigasi Scroll Samping