How To Add Floating social media buttons for Blogger

Today we will discuss How To Add Floating social media buttons for bloggerfloating share buttons for blogger.


Today My goal is to show how one can add hanging social symbols (Twitter in addition to Facebook) about Blogger. As already explained these symbols are hanging me. elizabeth. there placement remains identical after scrolling. This golf widget also furthermore Hover effect from it. When hovered that has a mouse about these control keys the opacity improves.

After the actual configuration, the actual icons are going to be displayed around the left palm side from the template. On hitting these buttons you'll be redirected towards the Twitter and Facebook Page you choose.

Floating social media buttons for blogger
Floating social media buttons for blogger



Adding this widget to Blogger


Go to Blog Title → Layout → Add Widget → HTML/JavaScript. Paste the below code and save the widget.
<style type="text/css">
    a.abt-hover img { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5;} a.abt-hover:hover img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; -khtml-opacity: 1.0; }
    </style>
    <div style="display: scroll; left: 30px; position: fixed; top: 200px;">
    <a class="abt-hover" href="http://twitter.com/mychakri" imageanchor="1" rel="nofollow" style="margin-left: 1em; margin-right: 1em;" target="_blank" title="Follow Us"><img border="0" src="http://3.bp.blogspot.com/-8OirkHkuX74/UkpjFhHJBlI/AAAAAAAABeU/b4tKmsiNOys/s1600/Twitter.png" /></a>
    <a class="abt-hover" href="http://www.facebook.com/mychakri" imageanchor="1" rel="nofollow" style="margin-left: 1em; margin-right: 1em;" target="_blank" title="Like Us"><img border="0" src="http://3.bp.blogspot.com/-84T65kGjuhM/UkpjFZT4GdI/AAAAAAAABeM/AVWx4JVkoIw/s1600/Facebook.png" /></a>
    </div>

Change mychakri with your desired ID. Save the Template. You are done now. In blogs with wider template, the placement may not be correct. If it so comments below with your blog URL. I will re-write the code for you till then Peace and Blessings.

You can also read: How To Create Tabbed Sitemap Page for Blogger.

0 Comments