Panduan Mengedit Menu Navigasi Pada Template Median UI

Panduan Mengedit Menu Navigasi Pada Template Median UI
Source: jagodesain.com

kebanyakan menu navigasi pada template responsive mengharuskan penggunanya untuk menguba/menambahkan link melalui Edit HTML template, begitu pula template ini Anda harus mengeditnya melalui Edit HTML template.

Alasan satu-satunya hal ini adalah karena template ini menggunakan icon SVG, kami bisa memindahkan kodenya ke menu tata letak blogger namun Anda tetap harus menambahkan linknya secara manual pada menu tata letak.

Mengubah link pada menu navigasi

Pada artikel ini kami akan memberikan arahan pada Anda agar lebih mudah mengedit menu navigasi pada template ini. Ikuti cara dibawah ini untuk menambahkan atau mengubah link di menu navigasi:

  1. Silahkan menuju Edit HTML template Anda
  2. Cari id='HTML00', klik pada kode template kemudian tekan CTRL + F.
  3. Cara mudahnya adalah silahkan klik icon yang ditandai pada gambar dibawah, lalu gulir sampai bawah maka Anda akan menemukan widget dengan id HTML 00
  4. Dalam widget tersebut Anda akan menemukan kode yang kurang lebih seperti dibawah ini: 
    <li>
  <a class='link' href='javascript:void(0)' itemprop='url'>
    <!-- Link Icon -->
    <svg class='icon' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g transform='translate(4.000000, 2.000000)'><path d='M5.88450545,12.7673223 C7.32107647,12.6441193 8.76545208,12.6441193 10.2020231,12.7673223 C10.9876051,12.819974 11.7678606,12.9347129 12.5355802,13.1104786 C14.1961639,13.4448359 15.2799133,14.1047518 15.7343888,15.0726283 C16.0974922,15.8767717 16.08789,16.80158 15.7081691,17.5979063 C15.2449536,18.5657829 14.1612043,19.2256987 12.4744008,19.568855 C11.7092951,19.7410988 10.9319902,19.8528915 10.1495836,19.9032123 C9.2843321,20 8.5501793,20 7.86846599,20 L7.59752865,20 C7.21132744,19.9581349 6.91855939,19.6299512 6.91855939,19.2388971 C6.91855939,18.8478429 7.21132744,18.5196592 7.59752865,18.4777941 L7.59752865,18.4777941 L8.19552997,18.4776566 C8.7948969,18.470645 9.39795098,18.4425986 10.0010051,18.3898053 C10.7124372,18.3432116 11.4194216,18.2432131 12.1160643,18.0906435 C13.3134326,17.8266771 14.0650652,17.4483254 14.3010429,16.9467893 C14.484604,16.5631348 14.484604,16.1161987 14.3010429,15.7325442 C14.0650652,15.2222093 13.3134326,14.8262598 12.1422841,14.5886901 C11.4348379,14.4289038 10.7159053,14.3259265 9.99226515,14.2807293 C8.64034215,14.1575279 7.28012802,14.1575279 5.92820502,14.2807293 C5.21388459,14.3273105 4.50399397,14.4273069 3.80440586,14.5798912 C2.6070376,14.8438575 1.86414489,15.2222093 1.61942729,15.7237453 C1.53272302,15.9142245 1.48799947,16.1213408 1.48832858,16.3308679 C1.48783807,16.5432444 1.53254045,16.7532629 1.61942729,16.9467893 C2.03541113,17.5187562 2.66831687,17.8915039 3.36741014,17.9762581 L3.36741014,17.9762581 L3.46883074,18.003768 C3.69882672,18.0836728 3.87936538,18.2709306 3.94969781,18.5098707 C4.03007773,18.7829451 3.95322349,19.0783682 3.75020277,19.2767179 C3.54718205,19.4750675 3.25156561,19.5435453 2.98285392,19.4544696 C1.85607336,19.2695203 0.86780853,18.5933528 0.282220408,17.6067052 C-0.0940734694,16.8075691 -0.0940734694,15.8805633 0.282220408,15.0814272 C0.745435864,14.087154 1.82918523,13.4448359 3.49850886,13.1016797 C4.28445329,12.9305221 5.08200812,12.8187582 5.88450545,12.7673223 Z M5.96471469,0.407206951 C7.95471011,-0.421671419 10.2447427,0.0383955276 11.7663081,1.57274551 C13.2878734,3.1070955 13.7410933,5.41333076 12.9145002,7.41538679 C12.0879072,9.41744281 10.1444105,10.7207439 7.99082479,10.717191 C5.05464341,10.7123299 2.67695692,8.31466134 2.67695692,5.35866706 L2.67695692,5.35866706 L2.68189526,5.12722783 C2.77053718,3.05238043 4.04579053,1.20648252 5.96471469,0.407206951 Z M7.99082479,1.53114502 C6.98099466,1.52881803 6.01172919,1.93104061 5.29685022,2.6490918 C4.58197126,3.367143 4.18021208,4.34202145 4.18021208,5.35866706 C4.17668538,6.91110569 5.10286315,8.31266199 6.52650415,8.90922336 C7.95014515,9.50578474 9.59058472,9.17974169 10.6822224,8.08325997 C11.77386,6.98677826 12.1014841,5.3360245 11.512191,3.90141287 C10.9228979,2.46680125 9.53286415,1.53114502 7.99082479,1.53114502 Z'></path></g></svg>
    <!-- Teks link -->
    <span class='name' itemprop='name'>Tentang</span>
  </a>
</li>

    Kode diatas adalah kode penulisan untuk satu link, anda akan menemukan beberapa kode serupa seperti diatas. Silahkan salin kode diatas dan letakkan tepat dibawahnya untuk menambahkan link baru

  5. Keterangan:
    • [ href='javascript:void(0)' ] : Tempat meletakkan url blog Anda
    • [ <svg>...</svg> ] : Merupakan kode untuk menampilkan icon pada menu navigasi, tempel kode svg anda pada bagian ini.
    • [ <span class='name' itemprop='name'>Tentang</span> ] : Adalah kode untuk menampilkan judul pada link blog Anda ubahlah tulisan 'Tentang' dengan judul link yang Anda inginkan.
  6. Simpan template Anda dan lihat hasil perubahannya.

Menambahkan menu dropdown baru

Secara default template ini menyediakan satu menu dropdown untuk link label/tag pada blog Anda, tapi bukan berarti Anda tidak bisa menambahkan dropdown baru. Cukup mudah cara untuk menambahkannya, Anda hanya perlu menyalin kode dari <li> ... </li> atau kode lengkapnya seprti dibawah ini:

<!-- Category/dropdown menu -->
<li class='submenu break'>
  <input class='sub-menu hidden' id='offsub-menu1' name='dropdown-menu' type='checkbox'/>
  <label class='link' for='offsub-menu1'>
    <!-- Link Icon -->
    <svg class='icon' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g transform='translate(2.000000, 2.000000)'><path d='M19.2351648,10.6772248 C19.6575716,10.6772248 20,10.334646 20,9.91205367 L20,8.89182545 C20,4.84609283 18.1978022,2.87599695 14.5054945,2.87599695 L11.7802198,2.87599695 C11.3365661,2.87810205 10.9172736,2.67324132 10.6461538,2.32190748 L9.76703297,1.15216305 C9.19910638,0.423105508 8.32609921,-0.0022260158 7.4021978,0 L5.48571429,0 C1.84615385,0 0,2.10203071 0,6.25330418 L0,13.7554997 C0,17.6077407 2.39120879,20 6.25054945,20 L13.7406593,20 C17.5912088,20 19.9912088,17.6077407 19.9912088,13.7554997 C19.9491205,13.3621883 19.6173632,13.0639212 19.221978,13.0639212 C18.8265928,13.0639212 18.4948355,13.3621883 18.4527473,13.7554997 C18.4527473,16.7897991 16.7824176,18.4696577 13.7406593,18.4696577 L6.24175824,18.4696577 C3.2,18.4696577 1.52967033,16.7985942 1.52967033,13.7554997 L1.52967033,13.0255088 L13.8373626,13.0255088 C14.2597694,13.0255088 14.6021978,12.68293 14.6021978,12.2603376 C14.6021978,11.8377452 14.2597694,11.4951664 13.8373626,11.4951664 L1.52967033,11.4951664 L1.52967033,6.21812389 C1.52967033,2.91117723 2.70769231,1.49517082 5.47692308,1.49517082 L7.41098901,1.49517082 C7.854606,1.50172958 8.27146542,1.70863441 8.54505495,2.05805535 L9.42417582,3.21900471 C9.98216939,3.95874311 10.8538928,4.39479629 11.7802198,4.39754422 L14.4967033,4.39754422 C17.3538462,4.39754422 18.4615385,5.6728295 18.4615385,8.89182545 L18.4615385,9.91205367 C18.461525,10.1165228 18.5433112,10.3124919 18.6886527,10.4562448 C18.8339941,10.5999978 19.030799,10.6795751 19.2351648,10.6772248 Z'/></g></svg>
    <!-- Teks link -->
    <span class='name' itemprop='name'>Kategori</span>
    <!-- Arrow Icon -->
    <svg class='icon name' viewBox='0 0 512 512'><path d='M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z'/></svg>
  </label>
  <ul class='sub-first'>
    <li itemprop='name'><a expr:href='data:blog.homepageUrl + &quot;search/label/Blogger&quot;' itemprop='url'>Blogger</a></li>
    <li itemprop='name'><a expr:href='data:blog.homepageUrl + &quot;search/label/Dokumentasi&quot;' itemprop='url'>Dokumentasi</a></li>
    <li itemprop='name'><a expr:href='data:blog.homepageUrl + &quot;search/label/Fitur&quot;' itemprop='url'>Fitur</a></li>
    <li itemprop='name'><a expr:href='data:blog.homepageUrl + &quot;search/label/List&quot;' itemprop='url'>List</a></li>
    <li itemprop='name'><a expr:href='data:blog.homepageUrl + &quot;search/label/Preview&quot;' itemprop='url'>Preview</a></li>
    <li itemprop='name'><a expr:href='data:blog.homepageUrl + &quot;search/label/Tutorial&quot;' itemprop='url'>Tutorial</a></li>
  </ul>
</li>
Keterangan:
  • [ offsub-menu1 ] : harus diubah menjadi 'offsub-menu2' pastikan kedua kode yang ditandai sama, jika ingin menambahkan dropdown baru lagi ubah menjadi 'offsub-menu3' dan seterusnya
  • [ Kategori ] : Judul dari menu dropdown yang anda buat
  • [ search/label/Blogger ] : link label pada blog Anda

Mengganti link social media

Link social media di menu navigasi pada template ini ditandai dengan tag <ul class='sosmed-link'> atau kode lengkapnya seperti dibawah ini:

<ul class='sosmed-link'>
  <!-- Facebook link -->
  <li>
    <a aria-label='Social media' href='javascript:void(0)' rel='nofollow noreferrer noopener' role='button' target='_blank' title='Facebook'>
      <svg viewBox='0 0 32 32'><path d='M24,3H8A5,5,0,0,0,3,8V24a5,5,0,0,0,5,5h8a1,1,0,0,0,1-1V20a1,1,0,0,0-1-1H15V17h1a1,1,0,0,0,1-1V12.5A2.5,2.5,0,0,1,19.5,10H22v2H21a2,2,0,0,0-2,2v2a1,1,0,0,0,1,1h1.72l-.5,2H20a1,1,0,0,0-1,1v4a1,1,0,0,0,2,0V21h1a1,1,0,0,0,1-.76l1-4a1,1,0,0,0-.18-.86A1,1,0,0,0,23,15H21V14h2a1,1,0,0,0,1-1V9a1,1,0,0,0-1-1H19.5A4.51,4.51,0,0,0,15,12.5V15H14a1,1,0,0,0-1,1v4a1,1,0,0,0,1,1h1v6H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H24a3,3,0,0,1,3,3V24a3,3,0,0,1-3,3H20a1,1,0,0,0,0,2h4a5,5,0,0,0,5-5V8A5,5,0,0,0,24,3Z'/></svg>
    </a>
  </li>
  <!-- Instagram -->
  ...
</ul>

Untuk menambahkan link Anda hanya perlu mengedit bagian href='...' yang sudah ditandai dengan link sosial media Anda

Ketika mengedit menu navigasi Anda mungkin akan menemukan tag <a> dengan atribut unik expr:href='...'. Fungsi atribut ini untuk mempersingkat domain blog Anda, dari para menuliskan langsung domain homepage Anda kami menyingkatnya dengan memakai atribut ini.

Kelebihannya adalah ketika Anda mengganti domain, Anda tidak perlu repot-repot untuk mengubah link dalam blog satu-persatu. Untuk mengeditnya Anda hanya perlu mengubah bagian yang ditandai dalam kode dibawah ini.

Sebagai contoh anggap saja domain laman Anda seperti ini:

https://www.domain_kamu.com/p/laman-kamu.html

Cukup salin dan tempel bagian yang diblok warna pada domain Anda dan tempelkan pada bagian yang ditandai pada contoh tag dibawah ini:

<a expr:href='data:blog.homepageUrl + &quot;p/contact.html&quot;' title='...'> ... </a>

Menambahkan teks New! pada menu navigasi (optional)

Jika Anda perhatikan pada bagian navigasi, terdapat menu dengan tambahan teks 'New!' yang bertujuan untuk menyoroti menu tersebut agar lebih banyak dilihat dan mengundang klik oleh user. Teks ini bersifat opsional anda bisa menambahkannya atau tidak, pada kode menu navigasi HTML00 carilah kode seperti dibawah ini :

<!-- Teks link -->
<span class='name' itemprop='name'>Tentang</span>

// Tambahkan class 'new' pada tag tersebut sehinggal hasilnya menjadi seperti dibawah ini

<span class='name new' itemprop='name'>Tentang</span>
bagaimana jika saya ingin mengubahnya menjadi teks lain ?

Kami menggunakan CSS Pseudo ::after untuk menampilkan teks tersebut, jadi Anda tidak perlu repot-repot menulis ulang atau mengganti satu persatu kata tersebut. Cukup cari kode CSS seperti dibawah ini dan ganti teks 'new!' pada kode tersebut dengan kata yang Anda inginkan.

.navigation-menu li .link span.new:after{content:'New!';margin-left:5px;font-size:85%;font-weight:400;color:$(link.colors)}

Bagaimana cara menambahkan icon baru pada blog?

Kami menyadari mungkin SVG masih terasa baru dan menyulitkan bagi beberapa orang, untuk itu kami sudah menyiapkan beberapa list icon serta rekomendasi icon set yang cocok digunakan pada template ini.

Silahkan pergi ke halaman ini dan cari icon yang sesuai dengan keinginan Anda.

Bagaimana cara agar hanya menampilkan icon pada menu?

Pada template ini defaultnya menu navigasi akan menampilkan icon dan teks lalu hanya menampilkan icon saja ketika tombol navigasi di klik. Bagaimana jika ingin fungsi kebalikannya? maksudnya apakah bisa hanya menampilkan icon saja pada menu navigasi dan menyembunyikan teks keterangannya sebaliknya teks akan dimunculkan ketika tombol navigasi di klik.

Well, hal ini bukanlah tidak mungkin hanya saja anda harus sedikit mengedit HTML template Anda. Pertama silahkan cari kode HTML dibawah ini dan tambahkan atribut checked='checked', contoh lengkapnya perhatikan kode dibawah :

<input class='nav-menu hidden' id='offnav-menu' type='checkbox'/>

Tambahkan atribut checked='checked' hasilnya kurang lebih seperti dibawah ini:

<input class='nav-menu hidden' id='offnav-menu' type='checkbox' checked='checked'/>

Sampai disini seharusnya sudah selesai, menu navigasi Anda hanya akan menampilkan icon saja. Tapi pada tampilan mobile menu navigasi akan langsung ditampilkan ketika halaman di load. untuk mengatasinya cari dan kode CSS dibawah ini :

penting:
Kode CSS dibawah diletakkan secara terpisah jadi pastikan Anda mencarinya satu persatu! semua kumpulan kode CSS dibawah ini ada pada CSS responsive @media screen and (max-width:640px){

1. Kode CSS pertama
#nav-widget{width:100%;padding:0;background:transparent;box-shadow:none;z-index:49;margin-left:-100%}

Ubah jadi seperti dibawah ini:
#nav-widget{width:100%;padding:0;background:transparent;box-shadow:none;z-index:49;margin-left:0}


2. Kode CSS Kedua
.nav-menu:checked + .mainWrapper .asideIner #nav-widget{width:100%;margin-left:0;z-index:50}

Ubah jadi seperti dibawah ini:
.nav-menu:checked + .mainWrapper .asideIner #nav-widget{width:100%;margin-left:-100%;z-index:50}


3. Kode CSS ketiga
.nav-menu:checked + .mainWrapper .asideIner .navigation-menu,
.nav-menu:checked + .mainWrapper .asideIner .navigation-menu .sosmed,
.nav-menu:checked + .mainWrapper .asideIner .navigation-menu .close{margin-left:0}

Ubah jadi seperti dibawah ini:
.nav-menu:checked + .mainWrapper .asideIner .navigation-menu,
.nav-menu:checked + .mainWrapper .asideIner .navigation-menu .sosmed,
.nav-menu:checked + .mainWrapper .asideIner .navigation-menu .close{margin-left:-100%}


4. Kode CSS keempat
.navigation-menu{position:fixed;top:0;left:0;background-color:$(nav.bg.colors);max-width:480px;width:85%;height:100%;margin-left:-100%;padding:calc($(header.height) + 15px) 0 90px 0;-webkit-transition:all .2s ease;transition:all .2s ease;z-index:3;overflow:hidden;box-shadow:0 6px 18px 0 rgba(30,30,30,.035);border-radius:0 20px 20px 0}
.navigation-menu .sosmed{max-width:480px;width:85%;margin-left:-100%;border-radius:0 0 20px 0} .navigation-menu .close{display:block;border-radius:0 20px 0 0}

Ubah jadi seperti dibawah ini:
.navigation-menu{position:fixed;top:0;left:0;background-color:$(nav.bg.colors);max-width:480px;width:85%;height:100%;margin-left:0;padding:calc($(header.height) + 15px) 0 90px 0;-webkit-transition:all .2s ease;transition:all .2s ease;z-index:3;overflow:hidden;box-shadow:0 6px 18px 0 rgba(30,30,30,.035);border-radius:0 20px 20px 0}
.navigation-menu .sosmed{max-width:480px;width:85%;margin-left:0;border-radius:0 0 20px 0} .navigation-menu .close{display:block;border-radius:0 20px 0 0;margin-left:0}


5. Kode CSS kelima
.nav-menu:checked + .mainWrapper .asideIner .full-close.nav-close{background:rgba(0,0,0,.25);opacity:1;visibility:visible}

Ubah jadi seperti dibawah ini:
.nav-menu:checked + .mainWrapper .asideIner .full-close.nav-close{background:transparent;opacity:0;vibility:hidden}
.full-close.nav-close{background:rgba(0,0,0,.25);opacity:1;visibility:visible}

Simpan template Anda dan cek perubahannya, jika ada bug atau kesalahan penulisan kode CSS pada artikel ini silahkan beritahu kami pada kolom komentar.

BLTemplates