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 4:- And then click this button⏷ Near Customise
/* 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
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 <= 12'>
<li>
<b:tag class='l' expr:data-text='data:link.name' expr:name='data:link.target != "#" and data:link.target != data:blog.url.canonical ? "a" : "span"'>
<b:attr cond='data:link.target != "#" and data:link.target != data:blog.url.canonical' expr:value='data:link.target' name='href'/>
<b:attr cond='data:link.target != "#" 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>
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.