Populer Post

Loading...

Cara Mudah Buat Menu Navigasi Scroll Samping

Cara Mudah Buat Menu Navigasi Scroll Samping
Posted by Yudha Wahyu Pratama

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>

Cara Mudah Buat Menu Navigasi Scroll Samping
Cara Mudah Buat Menu Navigasi Scroll Samping






<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

1 Response to "Cara Mudah Buat Menu Navigasi Scroll Samping"

  1. Susah copy paste codenya, terhalangi iklan dan widget baca juga di tengah postingan.

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

DMCA.com Protection Status