Cara Memasang Scroll Menu di Median UI

Cara Memasang Scroll Menu di Median UI - Kali ini, saya akan membagikan tutorial cara membuat dan memasang scroll menu di template Median UI. Tutorial ini direquest oleh Mas Hirotaka via Telegram.

Scroll menu adalah salah satu elemen dalam blog yang berguna untuk menampilkan daftar link secara horizontal (ke kanan atau ke kiri). Scroll menu banyak digunakan oleh web-web besar yang memiliki topik beragam seperti TribunNews dan Detik.com.

Kurang lebih tampilannya akan seperti berikut:

Adapun kelebihan dari scroll menu ini adalah tidak ada batasan link yang dapat digunakan. Selain itu, script yang digunakan hanya sebatas HTML dan CSS sehingga loading blog tidak akan terlalu terbebani.

Cara Memasang Scroll Menu di Median UI

Sebelum memasang script, ada baiknya untuk mencadangkan HTML template terlebih dahulu untuk menghindari hal-hal yang tidak diinginkan.

Masuk ke BLOGGER
Pilih menu TEMA
Pilih EDIT HTML
Tempel di atas ]]></b:skin>:

/* Scroll Menu by www.imaginationman.eu.org */
.scrollMenu{background:#fffdfc;border-bottom:1px solid #e6e6e6;overflow-x:auto;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;font-size:96%}.scrollMenu a{color:#444;font-weight:700}.scrollMenu ul{display:flex;margin:0;padding:0;list-style:none;white-space:nowrap}.scrollMenu li:first-child{margin-left:auto}.scrollMenu li:last-child{margin-right:auto}.scrollMenu li a:first-child{margin-left:13px}.scrollMenu li a:last-child{margin-right:13px}.scrollMenu li{padding:15px 0;position:relative}.scrollMenu li>*{display:block}.scrollMenu li>*:before{content:attr(data-text)}.scrollMenu li a:hover{color:#009ee0}.scrollMenu li>div{opacity:.7}@media screen and (max-width:896px){.scrollMenu ul:after{content:'';padding:0 10px}}@media screen and (max-width:640px){.scrollMenu{font-size:13px}.scrollMenu::-webkit-scrollbar{display:none}.scrollMenu li{padding:15px 0}}
/* Dark Mode */
.drK .scrollMenu{background:transparent;border-color:transparent}.drK .scrollMenu li>*:after{background:#2d2d30}.drK .scrollMenu ul li a{color:#989b9f}

Tempel di bawah </header>:

<b:tag class='scrollMenu' cond='!data:view.isPage' name='nav'>
  <b:section class='sectionInner' cond='!data:view.isPage' id='nav-menu' maxwidgets='1' showaddelement='no'>
    <b:widget id='LinkList00' locked='true' title='Scroll Menu' type='LinkList' version='2' visible='true'>
      <b:widget-settings>
        <b:widget-setting name='sorting'>NONE</b:widget-setting>
        <b:widget-setting name='text-1'>Link 2</b:widget-setting>
        <b:widget-setting name='link-1'>#</b:widget-setting>
        <b:widget-setting name='text-0'>Link 1</b:widget-setting>
        <b:widget-setting name='link-2'>#</b:widget-setting>
        <b:widget-setting name='link-0'>#</b:widget-setting>
        <b:widget-setting name='text-2'>Link 3</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
        <b:include name='content'/>
      </b:includable>
      <b:includable id='content'>
        <ul>
          <b:loop values='data:links' var='link'>
            <li>
              <b:tag expr:data-text='data:link.name' expr:name='data:blog.url.canonical != data:link.target ? &quot;a&quot; : &quot;div&quot;'>
                <b:attr cond='data:blog.url.canonical != data:link.target' expr:value='data:link.target' name='href'/>
                <b:attr cond='data:blog.url.canonical != data:link.target' expr:value='data:link.name' name='aria-label'/>
              </b:tag>
            </li>
          </b:loop>
        </ul>
      </b:includable>
    </b:widget>
  </b:section>
</b:tag>

Cari /* Header Section */ dan hapus kode berikut:

border-bottom:var(--headerL) solid var(--contentL)

Catatan: Berguna untuk menghapus garis bawah pada header (agar tampak menyatu dengan scroll menu).

Terakhir, hapus kode berikut:

border-right:var(--navL) solid var(--contentL)

Catatan: Berguna untuk menghapus garis kanan pada menu navigasi.

Selesai.

Setelah memasang dan mengatur HTML template, lanjut dengan mengatur link yang akan ditampilkan di beranda. Pilih menu TATA LETAK > SCROLL MENU > TAMBAHKAN ITEM BARU.