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.
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>.
Langkah 4 : kemudian, silahkan copy kode dibawah ini, lalu pastekan kode tersebut tepat DIATAS kode </HEADER>.
Langkah 5 : Simpan.
Akhir Kata :
Sampai disini tutorial cara membuat menu navigasi scroll samping seperti textrim/fletro, jangan lupa ikuti tutorialnya dengan benar.
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.
Belum ada Komentar untuk "Cara Membuat Menu Navigasi Scroll Samping Seperti Textrim/Fletro"
Posting Komentar
Catatan Untuk Para Jejaker