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>:
- Tempel di bawah </header>:
- Cari /* Header Section */ dan hapus kode berikut:
- Terakhir, hapus kode berikut:
- Selesai.
/* 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}<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 ? "a" : "div"'>
<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>border-bottom:var(--headerL) solid var(--contentL)
Catatan: Berguna untuk menghapus garis bawah pada header (agar tampak menyatu dengan scroll menu).
border-right:var(--navL) solid var(--contentL)
Catatan: Berguna untuk menghapus garis kanan pada menu navigasi.
Setelah memasang dan mengatur HTML template, lanjut dengan mengatur link yang akan ditampilkan di beranda. Pilih menu TATA LETAK > SCROLL MENU > TAMBAHKAN ITEM BARU.
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.