Add a Simple Scroll Menu Widget

🤗 Hello there, How are you all?

“Want to Add a Simple Scroll Menu Widget in your blogger website? Here is a short article which will surely help you.”

One thing about this widget is ”Your audience will love this widget. And your competitors will be in trouble of losing their audience.”

Onboarding

In this post, I'll show you how to add a basic scroll menu widget to your Blogger websites, similar to this one. This menu Widget will be responsive and will work on all devices.

How to Add a Simple Text Notification Widget

Step 1 :- First Login To Your Blogger Account.

Step 2 :- Then Click on Theme Menu.

Step 3 :- After that Click on Edit Html.

Step 4 :- Then find The Below Given Code.

/* Main Element */

Step 5 :- Then Paste Following Code After ending it.

/* Widget Scroll Menu */ .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)}

Step 6 :- Then find The Below Given Code.

<b:tag class='blogM' name='div'>

<!--[ Main content ]-->

Step 7 :- Then Paste following Code above it.

<!--[ Scroll Menu Widget]-->

               <b:section cond='!data:view.isPreview' id='scroll-widget' maxwidgets='1' showaddelement='false'>

                <b:widget id='LinkList003' locked='true' title='Scroll Menu Widget' type='LinkList' version='2' visible='true'>

                  <b:widget-settings>

                    <b:widget-setting name='link-5'>https://techyzipper.blogspot.com</b:widget-setting>

                    <b:widget-setting name='link-6'>https://techyzipper.blogspot.com</b:widget-setting>

                    <b:widget-setting name='link-3'>https://techyzipper.blogspot.com</b:widget-setting>

                    <b:widget-setting name='link-4'>https://techyzipper.blogspot.com</b:widget-setting>

                    <b:widget-setting name='text-1'>Techy Zipper</b:widget-setting>

                    <b:widget-setting name='text-0'>Techy Zipper</b:widget-setting>

                    <b:widget-setting name='text-3'>Techy Zipper</b:widget-setting>

                    <b:widget-setting name='text-2'>Techy Zipper</b:widget-setting>

                    <b:widget-setting name='text-5'>Techy Zipper</b:widget-setting>

                    <b:widget-setting name='text-4'>Techy Zipper</b:widget-setting>

                    <b:widget-setting name='text-6'>Techy Zipper</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://techyzipper.blogspot.com</b:widget-setting>

                    <b:widget-setting name='link-2'>https://techyzipper.blogspot.com</b:widget-setting>

                    <b:widget-setting name='link-0'>https://techyzipper.blogspot.com</b:widget-setting>

                  </b:widget-settings>

                  <b:includable id='main'>

                    <b:include name='content'/>

                  </b:includable>

                  <b:includable id='content'>

                    <!--[ Scroll Menu ]-->

                    <nav class='navS 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>

                </b:section>

                

<!--[ Scroll Menu Widget]-->

⚠️ Note: Replace Techy Zipper and Techy Zipper Link with your Text and link.

Last Words

I hope this article will helpful you in adding a Simple Scroll Menu Widget in your site. If you have any doubts related to this article ask me in the comment section or contact us on Telegram. Thanks for visiting and reading this post! Have a nice day!

Go to Link