Join Our Community Join!

How To Add Stylish And Cool Design Scroll Menu In Blogger Theme l Blogspot

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated



How To Add Comment's delete button In Blogger


Hello, Friends! Welcome To Itz TxS In this post, I'll show you how
to Add Stylish And Cool Design Scroll Menu In Blogger Theme.The Scroll Menu feature in Blogger is a widget You Can Add Your Category Or Your Pages Link.




In fact, you can use this feature in any Blogger template, but you need only a
basic understanding of CSS and coding.



This Feature (Scroll Menu) also available in Plus UI And
Royal UI- Blogger Template.



This Code Only Work On Blogger



Adding Scroll Menu on Blogger:-



Make sure you have backed up the template before you start, just in case you
make a mistake and need to restore it later!



Follow These Steps



Step 1:- Go To Blogger.com

Step 2:- Login To Your Account

Step 3:- Now Click on Theme Option


Step 4:- And then click  this button Near Customise

Step 5:- Now Click Edit HTML

Step 6:- Then Find 3 css Code Below and Then Remove one by one


/* Scroll Menu By Itz TxS */ .navSTxS{box-shadow:0 0 25px rgba(0,0,0,.07);background:var(--contentB);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} .navSTxS ul{display:flex;list-style:none;margin:0;padding:0;white-space:nowrap} .navSTxS li{margin:0 15px;padding:10px 0;position:relative;scroll-snap-align:start} .navSTxS li:first-child{margin-left:auto} .navSTxS li:last-child{margin-right:auto} .navSTxS .l{display:block;color:#fff;padding:8px 0;background:var(--linkC);opacity:0.9;box-shadow: rgba(23,43,99,.3) 0 1px 2px;border-radius:8px;padding: 5px 7px;}.navSTxS .l::before{content:attr(data-text)} .navSTxS .l::after{content:'';height:1px;border-radius:2px 2px 0 0;background:var(--darkU);position:absolute;bottom:0;left:0;right:0;opacity:0} .navSTxS span.l{opacity:.7} .navSTxS a.l:hover, .navSTxS .l.a{color:var(--darkU)} @media screen and (max-width:896px){.navSTxS .secIn{padding:0} .navSTxS li{margin:0;padding:8px 0;display:flex} .navSTxS li::before{content:'';padding:10px} .navSTxS ul::after{content:'';display:block;padding:10px;scroll-snap-align:start} .navSTxS .l{position:relative} .navSTxS .l::after{bottom:-8px} .navSTxS a.l:hover::after, .navSTxS .l.a::after{opacity:1}} @media screen and (max-width:500px){.navSTxS{font-size:13px}} .drK .navSTxS{background:var(--darkBs)} .drK .navSTxS .l{color:var(--darkC)} .drK .navSTxS a.l:hover, .drK .navSTxS .l.a{color:var(--darkU)} .drK .navSTxS .l::after{background:var(--darkU)}.drK .navSTxS .l{background:var(--darkU)}.drK .navSTxS .l::after{background:var(--linkC)}.drK .navSTxS a.l:hover,.drK .navSTxS .l.a{color:var(--linkC)}



Scroll Menu Html


Now If You Are Add Css Than Just Add This Html Than Your Scroll Menu Is Ready


Step:7 Search Blog Content Or You Can Also Add This As you Need


  
<b:widget id='LinkList001' locked='true' title='Scroll Menu' type='LinkList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='link-5'>/search/label/Food</b:widget-setting>
<b:widget-setting name='link-6'>/search/label/Adventure</b:widget-setting>
<b:widget-setting name='link-3'>/search/label/Photography</b:widget-setting>
<b:widget-setting name='link-4'>/search/label/Nature</b:widget-setting>
<b:widget-setting name='text-1'>Travel</b:widget-setting>
<b:widget-setting name='text-0'>Art</b:widget-setting>
<b:widget-setting name='text-3'>Photography</b:widget-setting>
<b:widget-setting name='text-2'>Life Style</b:widget-setting>
<b:widget-setting name='text-5'>Food</b:widget-setting>
<b:widget-setting name='text-4'>Nature</b:widget-setting>
<b:widget-setting name='text-6'>Adventure</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'>/search/label/Travel</b:widget-setting>
<b:widget-setting name='link-2'>/search/label/Life%20Style</b:widget-setting>
<b:widget-setting name='link-0'>/search/label/Art</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<!--[ Scroll Menu ]-->
<nav class='navSTxS scrlH'>
<div class='secIn'>
<ul>
<b:loop index='s' values='data:links' var='link'>
<b:if cond='data:s &lt;= 12'>
<li>
<b:tag class='l' expr:data-text='data:link.name' expr:name='data:link.target != &quot;#&quot; and data:link.target != data:blog.url.canonical ? &quot;a&quot; : &quot;span&quot;'>
<b:attr cond='data:link.target != &quot;#&quot; and data:link.target != data:blog.url.canonical' expr:value='data:link.target' name='href'/>
<b:attr cond='data:link.target != &quot;#&quot; and data:link.target != data:blog.url.canonical' expr:value='data:link.name' name='aria-label'/>
<b:class cond='data:link.target == data:blog.url.canonical' name='a'/>
</b:tag>
</li>
</b:if>
</b:loop>
</ul>
</div>
</nav>
</b:includable>
</b:widget>



Step:8 Now Save The Theme And See Your Website


Conclusion



You ought to indeed note by thinking in the remark box underneath. Or on the other hand you moreover bear to give some sort of Suggestion, likewise you can partake your conviction with me in the Comment Box beneath.


I didn't give this content to any individual who saw or replicated them. This content I've looked through a great deal and given by experience. So kindly don't note on this substance.


Assuming you experience any issues while copying this script you can impart me by Contact and I'll attempt to help.

Related Posts
Hi I am Samir From Bangladesh. I Will Create A Ui/Ux Website And Blogger Theme. I like to playing to code.

إرسال تعليق

Cookies Consent

This website uses cookies to ensure you get the best experience on our website.