How To Install Latest Floating Blogger Label Widget

Developing new bloggers widgets has been one of my goals this year. Today, I bring you a cool floating label widget for blogger blog. This widget lets you show your blog labels as blog topics to your readers.

Instead of filling your blog sidebar with widgets, you can simply enable this floating blogger label widget for better conversions and convenience.

This widget acts as a menu for your blog. You can either add all your blog labels at once or select only a few. When your blog labels get too much, this label widget automatically hides some and show them on a scroll.


See Demo
Live Preview

Features

  1. It is very easy to install
  2. You can always change labels even without knowledge of coding
  3. With little knowledge of hex colours, you can set your own colours
  4. Fast loading and does affect your blog speed.
  5. Open and Close menu option.

How To Add Floating Label Widget To Your Blog.

Backing up your blog theme has always been the best first step ever. Visit themes >> and locate “Backup / Restore”.

Get Started

Step 1
Go to Edit HTML >> Search for </body>. Copy and paste the below code just above it.

<script>
function openNav() {
    document.getElementById(&quot;floatingsidebar&quot;).style.width = &quot;150px&quot;;
}
function closeNav() {
    document.getElementById(&quot;floatingsidebar&quot;).style.width = &quot;0&quot;;
}
</script>

Step 2
Search for </head>, Copy and paste the below CSS code just above it.

.floatingsidebar .Label li span{float:right}
.floatingsidebar .Label ul:hover{text-decoration:none;background:#000}
.floatingsidebar .Label ul{padding:0;transition-duration:1s;transition-delay:0.1s}
.floatingsidebar .Label li{list-style:none;border-bottom:1px solid #eee;padding:8px;font-size:15px}
#floatingsidebar{top:30%;height:480px;background:#fff;width:150px;z-index:9999;position:fixed;right:0;list-style:none}
.floatingsidebarwrap{top:30%;background:#fff;z-index:9999;position:fixed;right:0;list-style:none}
a.quickedit{display:none}
.floatingsidebar .section{margin:0;height:448px;scrol:auto;}
.floatingsidebarinner{padding:0}
.floatingsidebar h2,.floatingsidebar h3{border-bottom:1px solid #ddd;padding:10px;background:#b44444;font-size:16px;color:#fff;font-weight:700}

Customization
To change Label title background, replace ” ” with any hex colour of your choice.

Step 3.
To add the HTML, which is the last part, Search for <footer>, paste the below code just above it.

<div class=’floatingsidebarwrap’>
    <div class=’floatingsidebar’ id=’floatingsidebar’>
      <div class=’floatingsidebarinner’>
      <b:section class=’floatmeside’ id=’floatmeside’ name=’Float Me Side’ showaddwidget=’yes’>
        <b:widget id=’Label2′ locked=’false’ title=’Labels’ type=’Label’>
          <b:widget-settings>
            <b:widget-setting name=’sorting’>ALPHA</b:widget-setting>
            <b:widget-setting name=’display’>LIST</b:widget-setting>
            <b:widget-setting name=’selectedLabelsList’/>
            <b:widget-setting name=’showType’>ALL</b:widget-setting>
            <b:widget-setting name=’showFreqNumbers’>true</b:widget-setting>
          </b:widget-settings>
          <b:includable id=’main’>
  <b:if cond=’data:title != &quot;&quot;’>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class=’&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;’>
    <b:if cond=’data:display == &quot;list&quot;’>
      <ul>
        <b:loop values=’data:labels’ var=’label’>
          <li>
            <b:if cond=’data:blog.url == data:label.url’>
              <span expr:dir=’data:blog.languageDirection’><data:label.name/></span>
            <b:else/>
              <a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’><data:label.name/></a>
            </b:if>
            <b:if cond=’data:showFreqNumbers’>
              <span dir=’ltr’>(<data:label.count/>)</span>
            </b:if>
          </li>
        </b:loop>
      </ul>
    <b:else/>
      <b:loop values=’data:labels’ var=’label’>
        <span expr:class=’&quot;label-size label-size-&quot; + data:label.cssSize’>
          <b:if cond=’data:blog.url == data:label.url’>
            <span expr:dir=’data:blog.languageDirection’><data:label.name/></span>
          <b:else/>
            <a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’><data:label.name/></a>
          </b:if>
          <b:if cond=’data:showFreqNumbers’>
            <span class=’label-count’ dir=’ltr’>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name=’quickedit’/>
  </div>
</b:includable>
        </b:widget>
      </b:section>
      <a class=’closebtn’ href=’javascript:void(0)’ onclick=’closeNav()’ style=’font-size: 30px;cursor: pointer;width: 100%;margin-left: 5px;color: #ddd;’><i class=”fa fa-window-close” aria-hidden=”true”></i></a>
      </div>
    </div>
<span onclick=’openNav()’ style=’font-size:30px;cursor:pointer;padding:3px’><i class=”fa fa-info-circle” aria-hidden=”true”></i></span>
    </div>

Step 4
Save your blogger template and visit your blog to see this label widget floating on your sidebar.

Additional Info

Icons not Showing

If the icons are not showing, it means you have not added FontAwesome to your blog. I have used FontAwesome to style and add icons so that this widget would not affect your loading speed.

FontAwesomes are fast loading Icons and you can always used them on your blogger blog. Paste the below code above </head>.

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” />

Learn more about FontAwesome in 3 Simple Ways To Add Font Awesome Icon CSS To Blogger Blog

Open and Close not working.

I have used JavaScript to enable the open and close options which on the other hand requires Jquery to function properly. I did not add Jquery to the above code,

because nearly every blogger template has Jquery installed but if you happen to be among the few without Jquery enabled, add the below code just above </head>.

<script async=”async” src=’http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’ type=’text/javascript’/>

Jquery is an awesome developed tool, you can read more about it in
 3 Surefire Ways To Eliminate Rendering Blocking JavaScript In Blogger Blog

More From Author

This is an easy and optimised way to show your blogger blog widgets. Instead of making users surf around your blog for labels, this widget simply shows them on a click.

I enabled this widget to work on both Mobile and Desktop. It is a simple but effective BlogSpot widget. Do leave your feedback below in the case of problems plus compliments too – I love them.

P.S you should move your blog HTTPS for better SEO ranking!.

Related Articles


Leave a Reply

17 Shares