Membuat Menu Navigasi Seperti Nu Online Di Blogger

Menu Navigasi

Menu navigasi yang baik adalah salah satu elemen penting dalam sebuah blog. Menu navigasi yang menarik dan mudah digunakan membantu pengunjung menemukan konten dengan cepat dan meningkatkan pengalaman pengguna. Salah satu contoh menu navigasi yang populer dan menarik adalah menu navigasi seperti yang digunakan oleh Nu Online. Dalam artikel ini, kita akan membahas cara membuat menu navigasi serupa dengan Nu Online di Blogger.

Template Premium

Template premium Blogger memiliki beberapa kelebihan dibandingkan dengan template gratis. Template premium adalah memiliki beberapa kelebihan yang dimiliki oleh template premium untuk di Blogger.

Gunakan template premium apa saja yang ingin kalian gunakan, semua template bisa kok dipasang menu navigasi scroll pada di Blogger.

Untuk template ini sendiri menggunakan template premium gratis yang disediakan oleh JetTheme.com.

Baca Juga : Pemula: Membuat Theme WordPress Sendiri

Template Premium Gratis JetTheme

Tentu saja semua template mempunyai kelebihan dan kekurangannya masing-masing, terutama yang premium, pasti setiap pengembang mempunyai caranya sendiri memberikan kejutan untuk pengguna temanya.

JetTheme sendiri saya sebut dalam kategori premium walaupun yang saya bagikan secara gratis, namun kamu bisa mendapatkan semua fiture yang rata-rata di sediakan pada versi premium, dari fitur-fiturnya sampai merubah credit footernya (copyright).

Tetapi tidak sampai disitu saja, masih banyak fitur yang mungkin para penggunanya saja belum tahu sampai membaca tulisan ini, karena saya berawal dari pengguna wordpress kebanyakan fitur diadaptasi dari tema wordpress, ok disini saya akan memberikan detail apa saja kelebihan template JetTheme.

Kalian tertarik dengan template dari JetTheme?

Template Blogger premium gratis dari JetTheme ini sangat responsif untuk digunakan. Jika kalian tertari bisa langsung download

Download Free

Nu Online

Langsung saja, saya akan kasih tau bagaimana cara menambahkan menu navigasi seperti Nu Online di Blogger menggunakan Template premium gratis dari JetTheme.

O iya, kode ini support bisa digunakan disemua template ya.

Pertama, kalian cari kode </header> menggunakan ctrl+f, lalu pastekan kode dibawah ini tepat dibawah kode </header> pertama.

<!-- Navigation Menu Horizontal Scroll by anawawy.com -->
<div class='anawawy-menu'>
    <ul>
      <li><a href='https://www.anawawy.com'>HOME</a></li>
      <li><a href='https://www.anawawy.com/search/label/Profil?max-results=10'>PROFIL</a></li>
      <li><a href='https://www.anawawy.com/search/label/Opini?max-results=10'>OPINI</a></li>
      <li><a href='https://www.anawawy.com/search/label/Hikmah?max-results=10'>HIKMAH</a></li>
      <li><a href='https://www.anawawy.com/search/label/Kisah?max-results=10'>KISAH</a></li>
      <li><a href='https://www.anawawy.com/search/label/Hukum?max-results=10'>HUKUM</a></li>
      <li><a href='https://www.anawawy.com/search/label/Logika?max-results=10'>LOGIKA</a></li>
      <li><a href='https://www.anawawy.com/search/label/Pendidikan?max-results=10'>PENDIDIKAN</a></li>
      <li><a href='https://www.anawawy.com/search/label/Kesehatan?max-results=10'>KESEHATAN</a></li>
      <li><a href='https://www.anawawy.com/search/label/Humor?max-results=10'>HUMOR</a></li>
      <li><a href='https://www.anawawy.com/search/label/Tutorial?max-results=10'>TUTORIAL</a></li>
      <li><a href='https://www.anawawy.com/search/label/Ngaji?max-results=10'>NGAJI</a></li>
    </ul>
</div>
 

Kemudian cari kode </b:skin> menggunakan ctrl+f, lalu letakan kode CSS dibawah ini tepat diatas text /*Your custom CSS is here*/

/*  Navigation Menu Horizontal Scroll by anawawy.com */

.anawawy-menu {
background:linear-gradient(120deg,#009788 35%,#003630 74%);
border-bottom:1px solid #e6e6e6;overflow-x:auto;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;font-size:90%}
.anawawy-menu a{color:#fff;font-weight:700}
.anawawy-menu ul{display:flex;margin:0;padding:0;list-style:none;white-space:nowrap}
.anawawy-menu li:first-child{margin-left:auto}
.anawawy-menu li:last-child{margin-right:auto}
.anawawy-menu li a:first-child{margin-left:12px}
.anawawy-menu li a:last-child{margin-right:12px}
.anawawy-menu li{padding:6px 0;position:relative}
.anawawy-menu li>*{display:block}
.anawawy-menu li>*:before{content:attr(data-text)}
.anawawy-menu li a:hover{color:#ffc107}
.anawawy-menu li>div{opacity:.7}
@media screen and (max-width:896px) {
.anawawy-menu ul:after {
content:'';padding:0 10px}}
@media screen and (max-width:640px) {
.anawawy-menu{font-size:14px}
.anawawy-menu::-webkit-scrollbar{display:none}
.anawawy-menu li{padding:7px 0}}

Ubahlah sesuai niche blog kalian, dan ganti link label sesuai link label kalian, jika sudah kemudian save.

Penutup

Dengan mengikuti langkah-langkah di atas, Anda dapat membuat menu navigasi yang menarik dan fungsional seperti Nu Online di Blogger. Ingatlah untuk memperhatikan desain, pengaturan halaman, dan penyesuaian CSS agar menu navigasi Anda memenuhi kebutuhan dan preferensi blog Anda. Selamat mencoba!

Terimakasih,