Cara Memasang Scroll Menu di Median UI

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:

Cara Memasang Scroll Menu di Median UI

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.ferisp.com */
    .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.

Cara Memasang Scroll Menu di Median UI

Penutup

Jika tidak puas dengan tampilan yang ada, kamu bisa mengubah CSS tampilan sesuai keinginan.

Cukup sekian artikel tentang Cara Memasang Scroll Menu di Median UI ini, Terima kasih.

Suka menulis berita yang berhubungan dengan dunia teknologi khususnya Blog, Aplikasi, Provider, Smartphone, dan Desktop

6 komentar

  1. Mas nanya dong, cara ngelatakin scroll itu dibagian samping kanan "Pencarian" gimana ya
  2. Bang gimana cara ngasih tulisan selamat siang sore malem gitu gitu di atas judul postingan ini?
  3. terima kasih banyak tutorialnya bang, saya sangat suka menu ini
    1. Terima kasih atas feedbacknya.
  4. bisa diterapkan di thema lain ga mas
    1. Bisa, tapi skrip CSS-nya harus disesuaikan gan.
Chat via WhatsApp