Cara Membuat Widget Scroll Navigation

Menu navigasi scroll saat ini menjadi salah satu trend, dimana beberapa template menggunakan navigasi seperti ini diantaranya : textrim (igniel), fletro (jagodesain), TeTora News (JetTheme). Bahkan menu ini juga digunakan oleh beberapa situs besar salah satunya Liputan6 (m.liputan6.com). Menu ini memang sangat cocok untuk yang ingin menempatkan label atau membuat menu kategori.

Menu navigasi scroll ini tidak perlu menggunakan javascript sehingga tidak akan mempengaruhi loading blog anda. 

Langkah Memasang Widget Scroll Navigation

Step 1. Masuk pada tata letak blogger anda

Step 2. Tambahkan gadget HTML/Javascript

Step 3. Copy code HTML berikut ini :

<div class="scroll-navigation">
  <ul>
    <li><a href="#URL" title="Topik1">Topik1</a></li>
    <li><a href="#URL" title="Topik2">Topik2</a></li>
    <li><a href="#URL" title="Topik3">Topik3</a></li>
    <li><a href="#URL" title="Topik4">Topik4</a></li>
    <li><a href="#URL" title="Topik5">Topik5</a></li>
    <li><a href="#URL" title="Topik6">Topik6</a></li>
    <li><a href="#URL" title="Topik7">Topik7</a></li>
    <li><a href="#URL" title="Topik8">Topik8</a></li>
	<li><a href="#URL" title="Topik9">Topik9</a></li>
	<li><a href="#URL" title="Topik10">Topik10</a></li>
  </ul>
</div>

<style>
.scroll-navigation ul {
  background-color: Transparent;/* Warna background menu */
  max-width: 100%;
  overflow-x: auto;
}
.scroll-navigation {
  color: Transparent;
  line-height: 0px;
  overflow: hidden;
}
.scroll-navigation a {
  font-size: 12px;/* Ukuran tulisan maksimal*/
  color: #000;/* Warna tulisan menu */
  text-decoration: none;
  padding: 10px 10px;
  line-height: 1.5em;
  display: block;
}
.scroll-navigation a:hover {
  background-color: Transparent;/* Warna background hover */
  color: #424242;/* Warna hover */
}
.scroll-navigation ul, .scroll-navigation li {
  list-style: none;
  display: inline-block;
  white-space: nowrap;
  margin: 0px;
  padding: 0px;
}
@media screen and (max-width: 480px){
  .scroll-navigation a {
    font-size: 13px;
    padding: 8px 11px;
  }
}
@media screen and (max-width: 360px){
  .scroll-navigation a {
    font-size: 12px;
    padding: 7px 10px;
  }
}
</style>

Keterangan : 

• #URL : ubah menjadi url blog anda, apabila ingin memasukan label, silakan gunakan "/search/label/Namalabelanda" (huruf pertama wajib besar)
• Topik1 : ubah menjadi judul menu / label anda

Setelah pengaturan selesai, silakan save atau simpan gadget HTML/Javascript dan lihatlah hasilnya.

Source : igniel.com