Add Floating Social Buttons with Hover Effect to Blogger

Today Let me show how you can add floating social subscription button (Twitter, Facebook) in Blogger. Seeing that already stated these buttons are floating i.e. there position remains same also after the page scrolling. This widget additionally had Hover effect inside it. When mouse placed, there opacity increases.

After added these icons will likely be displayed within the left hand side of the template. On hitting these buttons you will end up redirected on the Twitter and Facebook Page you desire. So lets start rolling you fingers on adding these buttons in your blog.

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.bwp-hover img { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5;} a.bwp-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="bwp-hover" href="http://twitter.com/BloggerWPCom" imageanchor="1" rel="nofollow" style="margin-left: 1em; margin-right: 1em;" target="_blank" title="Follow Us"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihspAakQBRhlbygOTCMqEzvN1FnlTe6yy4ncuQXbCynudNclaJs6c7Glm_n5uqZi4bzME55Z9jAUapStP0Q04K2xigd24psZx21Y1E8SytTlZFfThSeWJ1q-h1js5TgXDucEzOkwIYDlY/s1600/Twitter-bwp.png" /></a>
    <a class="bwp-hover" href="http://www.facebook.com/BloggerWP" imageanchor="1" rel="nofollow" style="margin-left: 1em; margin-right: 1em;" target="_blank" title="Like Us"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfLgnLK3Kg4vDi1hxg480ATcNYYSoHQ1CMrt2yRfet7rla4pA2hXJpeAXDWuprLxGo-X3dFErbJ07APtW5Iwk7IizKVjdaTqf9rrrJqh9AfmLqpx06873x4dnK50DS_gOXNUjbpjTnsN0/s1600/Facebook-bwp.png" /></a>
    </div>

Change  BloggerWPCom and BloggerWP with your desired ID.

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