Hallo sahabat telatngoding pada kesempatan kali ini saya akan berbagi tutorial Cara Membuat Scroll Menu Seperti Fletro Pada Blog dengan mudah.
Semakin maraknya pengguna template median ui dan plus ui pada kalangan blogger, semakin maraknya pula redesign template blogger yang di lakukan oleh maker. Seperti template plus ui ini yang di redesign dari gabungan template median ui, fletro, dan imagz yang dilakukan oleh orang india.
Pasti kalian tahu dengan template plus ui ini disitu terdapat gabungan antara median ui dan fletro, pada bagian fletro yang di ambil adalah menu scroll dan pada bagian menu footer. Untuk penampakannya silahkan lihat gambar di bawah ini.
Bagaimana jika menu scroll tersebut dipasang di blog kalian? Sudah pasti sangat bermanfaat karena selain memudahkan pengunjung mencari label maupun tag menu scroll tersebut bisa mempercantik blog kalian.
Menu tersebut bisa di pasang di jenis template apapun dan bisa juga di bagian manapun, tergantung selera dari kalian masing - masing.
Cara Membuat Scroll Menu Seperti Fletro Pada Blog
Untuk memasang menu scroll tersebut yang harus kalian perhatikan adalah penempatannya yang tepat karena jika kalian tidak tepat maka bisa saja menu scroll tersebut tidak responsife.
Sebelum lanjut ke tutorial silahkan backup dulu template kalian untuk jaga - jaga.
Silahkan masuk ke blog kalian lalu piih tema dan edit Html.
Salin kode CSS di bawah ini lalu letakan di atas kode ]]></b:skin>
/* Widget Scroll Menu Telatngoding.com */ .navS{background:var(--navB);overflow-y:hidden;overflow-x:scroll;scroll-behavior:smooth;scroll-snap-type:x mandatory; -ms-overflow-style:none;-webkit-overflow-scrolling:touch; display:flex;padding:0;border-radius:10px} .navS ul{display:flex;list-style:none;margin:0;padding:0;white-space:nowrap} .navS li{margin:0 15px;padding:10px 0;position:relative;scroll-snap-align:start} .navS li:first-child{margin-left:auto} .navS li:last-child{margin-right:auto} .navS .l{display:block;color:var(--bodyC);padding:8px 0} .navS .l::before{content:attr(data-text)} .navS .l::after{content:'';height:1px;border-radius:2px 2px 0 0;background:var(--linkC);position:absolute;bottom:0;left:0;right:0;opacity:0} .navS span.l{opacity:.7} .navS a.l:hover, .navS .l.a{color:var(--linkC)} @media screen and (max-width:896px){.navS .secIn{padding:0} .navS li{margin:0;padding:8px 0;display:flex} .navS li::before{content:'';padding:10px} .navS ul::after{content:'';display:block;padding:10px;scroll-snap-align:start} .navS .l{position:relative} .navS .l::after{bottom:-8px} .navS a.l:hover::after, .navS .l.a::after{opacity:1}} @media screen and (max-width:500px){.navS{font-size:13px}} .drK .navS{background:var(--darkBs)} .drK .navS .l{color:var(--darkC)} .drK .navS a.l:hover, .drK .navS .l.a{color:var(--darkU)} .drK .navS .l::after{background:var(--darkU)}Selanjutnya silahkan salin kode HTML di bawah ini dan letakan dibagian tag <body> ( disini kalian bisa meletakan kode HTML tersebut sesuka kalian, cari posisi yang pas dengan template yang kalian pakai )
<!--[ Scroll menu telatngoding.com ]-->
<b:section cond='!data:view.isPreview' id='notif-widget' maxwidgets='1' showaddelement='false'>
<b:widget id='LinkList001' locked='true' title='Scroll Menu' type='LinkList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='link-5'>#</b:widget-setting>
<b:widget-setting name='link-6'>#</b:widget-setting>
<b:widget-setting name='link-3'>#</b:widget-setting>
<b:widget-setting name='link-4'>#</b:widget-setting>
<b:widget-setting name='text-1'>Aplikasi</b:widget-setting>
<b:widget-setting name='text-0'>Informasi</b:widget-setting>
<b:widget-setting name='text-3'>Youtube</b:widget-setting>
<b:widget-setting name='text-2'>Teknologi</b:widget-setting>
<b:widget-setting name='text-5'>Pinterest</b:widget-setting>
<b:widget-setting name='text-4'>LinkedIn</b:widget-setting>
<b:widget-setting name='text-6'>Whatsapp</b:widget-setting>
<b:widget-setting name='shownum'>7</b:widget-setting>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='link-1'>https://www.telatngoding.com/search/label/aplikasi</b:widget-setting>
<b:widget-setting name='link-2'>https://www.telatngoding.com/search/label/tekno</b:widget-setting>
<b:widget-setting name='link-0'>https://www.telatngoding.com/search/label/Informasi</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='content'/>
</b:includable>Simpan tema kalian dan selesai.
Tapi jika kalian menggunakan template Median UI silahkan cari kode seperti dibawah ini
<div class='blogCont'>
<div class='secIn'>Letakan kode HTML tersebut di bawah kode <div class='secIn'>
Simpan template kalian dan selesai.
Sebenarnya untuk memasang menu scroll seperti fletro pro maupun plus ui sangat mudah di lakukan, dan jika kalian ingin melihat demonya silahkan lihat disini
Untuk merubah link dan textnya kalian bisa edit pada bagian Tata Letak blog kalian.
Sekian dulu tutorial tentang Cara Membuat Scroll Menu Seperti Fletro Pada Blog, jika ada pertanyaan silahkan berkomentar di bawah ini.