Follow us on Google News Follow Now!

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 sc
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Hallo sahabat telatngoding pada kesempatan kali ini saya akan berbagi tutorial Cara Membuat Scroll Menu Seperti Fletro Pada Blog dengan mudah.

Cara Membuat Scroll Menu Seperti Fletro Pada Blog

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.

Baca juga :

About the Author

someone who really likes writing articles and various info to you and hopefully useful

Posting Komentar

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.