Modifikasi Sticky Menu Template LinkMagz Supaya Jadi Lebih Wow

Setalah sebelumnya saya pernah iseng - iseng modifikasi template Evo Magz, sekarang saya mau mencoba untuk modifikasi template linkmagz yang masih milik mas sugeng.

Secara Default Template Link Magz memiliki satu buah menu, dan baik menu standar (non sticky) ataupun pada saat sticky itu mengkases data menu yang sama atau data menu default dari menu utamnya.

Sebelumnya perlu digaris bawahi terlebih dahulu, bahwa proses modifikasi template ini mungkin bisa menghilangkan support dari template yang telah Anda beli, tetapi disini bahwa kode tidaklah kita rubah tetapi kita tambah.

Hasil Modifikasi yang Ingin Dicapai

Dalam contoh kasus kali ini Saya akan melakukan modifikasi terhadap menu template link magz dimana modifikasi yang ingin saya capai disini adalah sebagai berikut

Membuat daftar menu yang berbeda antara menu sticky dengan menu non sticky
Menu Sticky hanya akan tampil ketika konten blog scrolling kebawah / ketika memang aktif
Jadi nantinya pada template ini akan memiliki 2 daftar menu yang berbeda, ID menu yang berbeda, tetapi akan tetap menggunakan class yang sama

Jadi disini modifikasi pada template itu bukan hanya sekedar warna/tampilannya, karena template tersebut sudah menyediakan antar muka untuk melakukan perubahan tersebut, tanpa harus meruba – rubah isi kode template

Memahami alur kerja Menu Sticky LinkMagz

Seperti menu sticky pada umumnya, bahwa menu sticky ini juga diatur oleh kode javascript, secara sederhana dalam template ini, ketika scroll dengan kondisi tertentu class=”navsticky-show” akan tampil dan ketika kondisinya tidak terpenuhi maka class akan dihapus, nah kelas tersebut nantinya akan kita manfaatkan pada costum css

Ringkasan Modifikasi

Modifikasi Query Selector Javascript .nav-copy dan nav-original
Penambahan menu kedua dari main menu utama
Costum css dari tata letak yang sudah disediakan Template Link Magz

Modifikasi Sticky Menu Template LinkMagz

Jadi untuk memodifikasi sticky menu template linkmagz supaya jadi lebih wow, keren dan berbeda dari orang lain, Anda bisa mengikuti langkah – langkah berikut :

Buat sebuah menu baru atau cari kodenya dengan kata Kunci “Kode Menu Navigasi”

Copy kode widget htmlnya, lalu rubah selectornya supaya tidak terjadi error, atau jika Anda tidak mau pusing – pusing, silahkan copy contohnya dibawah ini, dan taruh dibawah menu utamanya

  
  <!--test menu 2-->
      <b:section class='navmenu' id='navmenu2' maxwidgets='1' showaddelement='no'>
        <b:widget id='HTML772' locked='true' title='Kode Menu Navigasi2' type='HTML' version='2' visible='true'>
          <b:widget-settings>
            <b:widget-setting name='content'><![CDATA[<li><a href="https://www.bumisoftware.com/search/label/komputer">komputer</a></li>]]></b:widget-setting>
          </b:widget-settings>
          <b:includable id='main'>
                
                <div class='nav-outer nav-original2 mydisplay'>
                    
                    <nav class='navmenu-content'>
                        <ul>
                            <li><a expr:href='data:blog.homepageUrl'><data:messages.home/></a></li>
                            <data:content/>
                        </ul>
                    </nav>

                    <div class='nav-secondary'>
                        <b:include name='searchIcon'/>
                        <b:include name='darkmodeSwitch'/>
                    </div>

                    <button aria-label='menu' class='navmenu-button'>
                        <div/>
                        <div/>
                        <div/>
                    </button>
                    
                </div>
                <b:include name='mobileMenuContainer'/>

                </b:includable>
        </b:widget>
      </b:section>

Silahkan untuk menu stickynya bisa Anda rubah sesuai keinginan, supaya tidak sama dengan menu utamanya
Selanjutnya cari kode javascript nav-copy, lalu rubah query selectornya dari yang awalnya seperti ini
```
e=document.querySelector(".nav-copy"),i=document.querySelector(".nav-original")
```

Menjadi sepert ini, atau maksudnya adalah diarahkan ke menu content kedua

e=document.querySelector(".nav-copy"),i=document.querySelector(".nav-original2")

Simpan perubahannya
Selanjutnya buka Tata Letak
Jika berhasil nanti pada di tata letak Anda akan memiliki 2 widget menu utama seperti berikut

Terakhir costum css, masukan kode css berikut

#navmenu2:not(.navsticky-show) { display: none !important; }

Simpan

Kemudian silahkan cek tampilan blog Anda, nanti Anda akan memiliki 2 isi menu yang berbeda antara menu sticky dan non sticky seperti blo berikut

[ DEMO Hasil Modifikasi Sticky Menu ]

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple

Modifikasi Sticky Menu Template LinkMagz Supaya Jadi Lebih Wow

1 Response to "Modifikasi Sticky Menu Template LinkMagz Supaya Jadi Lebih Wow"