Cara Membuat Menu Navigasi Scroll Samping Seperti Textrim/Fletro - Jejakdzgn

Cara Membuat Menu Navigasi Scroll Samping Seperti Textrim/Fletro

Jejakdzgn.my.id - Pada kesempatan kali ini, saya akan memberikan tutorial cara membuat menu navigasi scroll samping seperti textrim/fletro.

cara-membuat-menu-navigasi-scroll-samping.

Menu navigasi merupakan sebuah widget label yang dimana widget ini digunakan oleh seorang blogger, menu navigasi ini sendiri memiliki keunikan nya tersendiri seperti template Viomagz yang dimana menu navigasi tersebut mengarah kebawah sedangkan template fletro atau textrim menu navigasi nya mengarah kesamping.

Nah, jika anda ingin membuatnya bisa ikuti langkah-langkah dibawah ini.

Cara Membuat Menu Navigasi Scroll Samping Seperti Textrim/Fletro

Langkah 1 : masuk ke akun blogger.

Langkah 2 : masuk ke menu TEMA >> Edit HTML.

Langkah 3 : silahkan copy kode dibawah ini, lalu pastekan kode tersebut tepat DIATAS kode ]]></b:skin>.

/* Navigation Menu Horizontal Scroll by JejakDzgn */ 
.JejakDzgnHorizontal ul {
background-color: #FFF; /* Warna background menu */ width: 100%; /* Lebar maksimal menu */ overflow-x: auto; }
.JejakDzgnHorizontal {color: #000; line-height: 0px; overflow: hidden; }
.JejakDzgnHorizontal a { font-size: 14px; color: #000; text-decoration: none; padding: 10px 13px; line-height: 1.5em; display: block; } .JejakDzgnHorizontal a:hover { background-color: #EBEBEB; color: #F9690E; text-decoration: none; }
.JejakDzgnHorizontal ul, .JejakDzgnHorizontal li { list-style: none; display: inline-block; white-space: nowrap; margin: 0px; padding: 0px; } @media screen and (max-width: 480px){ .JejakDzgnHorizontal a { font-size: 13px; padding: 8px 11px; } } @media screen and (max-width: 360px){ .JejakDzgnHorizontal a { font-size: 12px; padding: 7px 10px;

Langkah 4 : kemudian, silahkan copy kode dibawah ini, lalu pastekan kode tersebut tepat DIATAS kode </HEADER>.

<!-- Navigation Menu Horizontal Scroll by JejakDzgn --> 
<div class='JejakDzgnHorizontal'>
<ul>
<li><a href='#'>MENU 1</a></li>
<li><a href='#'>MENU 2</a></li>
<li><a href='#'>MENU 3</a></li>
<li><a href='#'>MENU 4</a></li>
<li><a href='#'>MENU 5</a></li>
<li><a href='#'>MENU 6</a></li>
<li><a href='#'>MENU 7</a></li>
<li><a href='#'>MENU 8</a></li>
<li><a href='#'>MENU 9</a></li>
<li><a href='#'>MENU 10</a></li>
</ul> </div>

Langkah 5 : Simpan.

PENTING : Silahkan ganti menu 1-10 dengan menu anda, dan jangan lupa ganti juga # dengan link yang dituju.

Akhir Kata :

Sampai disini tutorial cara membuat menu navigasi scroll samping seperti textrim/fletro, jangan lupa ikuti tutorialnya dengan benar.
Show Comments
Hide Comments

Belum ada Komentar untuk "Cara Membuat Menu Navigasi Scroll Samping Seperti Textrim/Fletro"

Posting Komentar

Catatan Untuk Para Jejaker
  • Mohon Tinggalkan jejak sesuai dengan judul artikel.
  • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • Dilarang mencantumkan link aktif di komentar.
  • Komentar dengan link aktif akan otomatis dihapus
  • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel