Cara Membuat Navigasi Scroll di Median UI
Pada kesempatan kali ini saya akan membuat tutorial Cara Membuat Navigasi Scroll Menu di Median UI.
Tutorial ini di buat oleh ferisp yang saya request dari telegram, kode ini sebagai simpanan saya dan juga bisa kalian semua gunakan.
Untuk kalian yang belum tahu, apa itu scroll menu? Scroll menu adalah salah satu elemen dalam semua blog yang berguna untuk menampilkan daftar link secara horizontal (ke kanan dan ke kiri).
Scroll menu sudah banyak sekali digunakan oleh situs web besar yang memiliki topik beragam, salah satunya adalah ferisp.com dan detik.com.
Untuk demo atau contoh kalian bisa lihat gambar yang sudah saya sediakan di bawah ini :
Banyak sekali kelebihan dari scroll menu ini, diantaranya adalah tidak ada batasan link yang dapat digunakan.
Selain itu, script yang digunakan tidak memakai JavaScript dan hanya menggunakan HTML dan juga CSS sehingga loading blog kalian tidak akan terlalu terbebani.
Cara Memasang Scroll Menu di Template Median UI
- Silahkan masuk ke dalam Dashboard Blogger kalian
- Selanjutnya pilih TEMA > Pilih icon DROP BAWAH
- Pilih EDIT HTML
- Salin semua kode di bawah ini, lalu tempel di atas kode ]]></b:skin>
/* Scroll Menu by www.hiropedia.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}
- Salin semua lagi kode di bawah ini, lalu letakan kode tersebut di bawah kode </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 ? "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>- Cari kode /* Header Section */ dan hapus kode di bawahnya seperti berikut
border-bottom:var(--headerL) solid var(--contentL)Catatan : Berguna untuk menghapus garis bawah pada header (agar tampilan tampak menyatu dengan scrool menu)
- Terakhir silahkan hapus kode di bawah ini
border-right:var(--navL) solid var(--contentL)- Selesai.