Notifications
All Notifications

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

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.

Blogger Code CSS Feature HTML Widget
Itz TxS
Itz TxS
Whats up ! My Name is Samir, a expert Web Designer, Telegram Bot Maker,Logo Designer And UI / UX designer in addition to content material writer from Feni,Dagonbhuiyan,Bangladesh. I really like to Code and create interesting things whilst playing with it.
Join the conversation
Post a Comment