Blog Tricks Center: How To Add Floating Social Share Buttons To

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<span style="font-size: x-large;"><b>Add Floating Share Buttons "Facebook" "Twitter" More</b></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdstG1fLrOjXqob8aZ0Ma8cWJ1qkZ_jwZuYEYbuRyUYZ0uT3VseAYGCb4o-B2YOiLVhF_YxjdqT7MI-zfF9OS2feFZZ6mdnYydAJ4R8lp8h1haDRVqNnAfjnjkjsZpRF-2OWHmNxF5x1rr/s1600/7217559838_0fff6b8ae3_o.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdstG1fLrOjXqob8aZ0Ma8cWJ1qkZ_jwZuYEYbuRyUYZ0uT3VseAYGCb4o-B2YOiLVhF_YxjdqT7MI-zfF9OS2feFZZ6mdnYydAJ4R8lp8h1haDRVqNnAfjnjkjsZpRF-2OWHmNxF5x1rr/s1600/7217559838_0fff6b8ae3_o.png" width="375" /></a></div>
<span style="font-size: x-large;"><b><br /></b></span></div>
<span style="font-size: large;"><i>Ever wondered to create a Mashable type floating sharing widget for your blogger blogs? There you have it today! We released a sliding, scrolling widget last month which contained major social media sharing buttons but some of you complained that the widget do not work properly with the new blogger templates so to keep things more flexible, we are releasing yet another version of a floating widget which contains the best social buttons like Facebook Share/like,</i></span><br />
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-8616135883183169" data-ad-slot="7224714538" style="display: inline-block; height: 280px; width: 336px;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<br />
<br />
<span style="font-size: large;"><i>Twitter and Google +1 button. All in one. I have not used any scripts this time and this widget works purely on CSS and HTML and is fully compatible with all major browsers. You can see this sticky widget to left of my blog post. I have made sure to keep the installation process as easy as possible so be confident to try this one out to better increase your social engagement and thereby your page views.</i></span><br />
<span style="font-size: large;"><i><br /></i></span>
<span style="font-size: large;"><i><b>Adding The Sticky Floating Widget Next To Blogger Posts</b></i></span><br />
<span style="font-size: large;"><i><b>Go To Blogger > Design</b></i></span><br />
<span style="font-size: large;"><i><b>Choose a HTML/JavaScript widget</b></i></span><br />
<span style="font-size: large;"><b><i></i></b></span><br />
<span style="font-size: large;"><i><b>Paste the following code inside it,</b></i></span><br />
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-8616135883183169" data-ad-format="auto" data-ad-slot="6504860932" style="display: block;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<span style="font-size: large;"><i><style> </i></span><br />
<span style="font-size: large;"><i>/*-------Tricks Floating Sharing Widget------------*/</i></span><br />
<span style="font-size: large;"><i>#floatdiv { </i></span><br />
<span style="font-size: large;"><i>  position:fixed; </i></span><br />
<span style="font-size: large;"><i>bottom:15%; </i></span><br />
<span style="font-size: large;"><i>margin-left:-70px; </i></span><br />
<span style="font-size: large;"><i>z-index:10; </i></span><br />
<span style="font-size: large;"><i>float:left; </i></span><br />
<span style="font-size: large;"><i>padding-bottom:2px; </i></span><br />
<span style="font-size: large;"><i>}</i></span><br />
<span style="font-size: large;"><i>#mmkzsidebar { </i></span><br />
<span style="font-size: large;"><i>        background:#fff; </i></span><br />
<span style="font-size: large;"><i>        border-top:1px solid #ddd; </i></span><br />
<span style="font-size: large;"><i>        border-left:1px solid #ddd; </i></span><br />
<span style="font-size: large;"><i>        border-bottom:1px solid #ddd; </i></span><br />
<span style="font-size: large;"><i>        border-radius:5px; </i></span><br />
<span style="font-size: large;"><i>       -moz-border-radius:5px; </i></span><br />
<span style="font-size: large;"><i>       -webkit-border-radius:5px; </i></span><br />
<span style="font-size: large;"><i>        padding-left:5px; </i></span><br />
<span style="font-size: large;"><i>        width:60px; </i></span><br />
<span style="font-size: large;"><i>        margin:0 0 0 5px; </i></span><br />
<span style="font-size: large;"><i>}</i></span><br />
<span style="font-size: large;"><i>.fb_share_count_top {width:52px !important;}</i></span><br />
<span style="font-size: large;"><i>.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}</i></span><br />
<span style="font-size: large;"><i>.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}</i></span><br />
<span style="font-size: large;"><i>.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </i></span><br />
<span style="font-size: large;"><i></style></i></span><br />
<span style="font-size: large;"><i><br /></i></span>
<span style="font-size: large;"><i><br /></i></span>
<span style="font-size: large;"><i><div id="floatdiv"> </i></span><br />
<span style="font-size: large;"><i><div id="mmkzsidebar"> </i></span><br />
<span style="font-size: large;"><i>    <table cellpadding="1px" cellspacing="0"></i></span><br />
<span style="font-size: large;"><i><br /></i></span>
<span style="font-size: large;"><i>    <tr> </i></span><br />
<span style="font-size: large;"><i>    <td style="padding:5px 0px 0px 0;"> </i></span><br />
<span style="font-size: large;"><i><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="mmktricks">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </i></span><br />
<span style="font-size: large;"><i>    </td> </i></span><br />
<span style="font-size: large;"><i>    </tr></i></span><br />
<span style="font-size: large;"><i>    <tr> </i></span><br />
<span style="font-size: large;"><i>    <td style="padding:5px 0 2px 0;"> </i></span><br />
<span style="font-size: large;"><i>    <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </i></span><br />
<span style="font-size: large;"><i>    </td> </i></span><br />
<span style="font-size: large;"><i>    </tr> </i></span><br />
<span style="font-size: large;"><i>    <tr> </i></span><br />
<span style="font-size: large;"><i>    <td style=" padding:5px 0px 0px 0px;"> </i></span><br />
<span style="font-size: large;"><i><script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script> </i></span><br />
<span style="font-size: large;"><i><g:plusone size="Tall" expr:href="data:post.url"> </i></span><br />
<span style="font-size: large;"><i>    </g:plusone></td> </i></span><br />
<span style="font-size: large;"><i>    </tr> </i></span><br />
<span style="font-size: large;"><i>    <tr> </i></span><br />
<span style="font-size: large;"><i>    <td> </i></span><br />
<span style="font-size: large;"><i><p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href=" http://blogtrickscenter.blogspot.in//2012/06/add-floating-share-buttons-facebook.html ">Widgets</a></p> </i></span><br />
<span style="font-size: large;"><i>    </td> </i></span><br />
<span style="font-size: large;"><i>    </tr> </i></span><br />
<span style="font-size: large;"><i>    </table> </i></span><br />
<span style="font-size: large;"><i></div> </i></span><br />
<span style="font-size: large;"><i></i></span><br />
<span style="font-size: large;"><i></div></i></span><br />
<span style="font-size: large;"><i><b>Save your widget and drag it just below the post body as shown below,</b></i></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGD1fvDsTrYMSeDKznom4II4zpFTS97k8-aIS65uOojxcFE1FasK-zTiAf-gLLglsO95teJrTYQcLhqmTveYdUGW3IuZAIN5IVPtECBWTzGE99a3twc9zK-uCAo1zGjdYSvlRxZT2FcJte/s1600/floating-widget_thumb%5B4%5D.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGD1fvDsTrYMSeDKznom4II4zpFTS97k8-aIS65uOojxcFE1FasK-zTiAf-gLLglsO95teJrTYQcLhqmTveYdUGW3IuZAIN5IVPtECBWTzGE99a3twc9zK-uCAo1zGjdYSvlRxZT2FcJte/s1600/floating-widget_thumb%5B4%5D.gif" width="400" /></a></div>
<div class="separator" style="clear: both;">
<b><span style="font-size: large;">Now finally Click the save button at the top right corner and you are all done!</span></b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTrfjgOH-TGGtMEci9Xg3oe7RRcx35ut0VV4wT46tgsttcVAVyJNKRhFPuqTa4vlisbzNJxh3phxyuTvBrdM7mF7mh3G73oAv0Z4lF4b8NobjqBpoqre6PEi8OOO0fcmNtRyqu-RalvxXs/s1600/save-button%5B2%5D.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="151" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTrfjgOH-TGGtMEci9Xg3oe7RRcx35ut0VV4wT46tgsttcVAVyJNKRhFPuqTa4vlisbzNJxh3phxyuTvBrdM7mF7mh3G73oAv0Z4lF4b8NobjqBpoqre6PEi8OOO0fcmNtRyqu-RalvxXs/s1600/save-button%5B2%5D.gif" width="400" /></a></div>
<div>
<br /></div>
<span style="font-size: large;"><i><b></b></i></span><br />
<span style="font-size: large;"><b><i>View your blog to see it hanging just to the left of your blog post body. </i></b></span><br />
<div>
<br /></div>
<div>
<div>
<b><span style="font-size: large;">Customization</span></b></div>
<div>
<span style="font-size: large;">To align the widget more towards the left or right then edit this value margin-left:-70px;  Decreasing this numeric value will shift the widget to the right and increasing the value will shift it to left.</span></div>
<div>
<span style="font-size: large;">To Change the background colour of the floating widget then change this background:#fff; </span></div>
<div>
<span style="font-size: large;">Use our color generator or colour chart to select a colour. </span></div>
<div>
<span style="font-size: large;">If you wish to show the widget only on post pages and not the homepage then follow these steps.</span></div>
<div>
<span style="font-size: large;">Give this floating widget a temporary title then do this</span></div>
<div>
<span style="font-size: large;"><br /></span></div>
<div>
<span style="font-size: large;"><b>Go To Blogger > Design > Edit HTML</b></span></div>
<div>
<span style="font-size: large;"><b>Backup your template</b></span></div>
<div>
<span style="font-size: large;"><b>Check the Expand Widgets Templates Box</b></span></div>
<div>
<span style="font-size: large;"><b>Search for the title of the widget</b></span></div>
<div>
<span style="font-size: large;"><b>The code for the widget will look something similar to this one,</b></span></div>
</div>
<div>
<span style="font-size: large;"><i></i></span><br />
<div>
<span style="font-size: large;"><i><b:widget id='HTML8' locked='false' title='WIDGET-TITLE-HERE'  type='HTML'></i></span></div>
<span style="font-size: large;"><i>
</i></span>
<br />
<div>
<span style="font-size: large;"><i><b:includable id='main'></i></span></div>
<span style="font-size: large;"><i>
</i></span>
<div>
<span style="font-size: large;"><i>bla bla bla bla</i></span></div>
<span style="font-size: large;"><i>
<div>
</b:includable> </b:widget></div>
<div>
<br /></div>
<div>
Once you find the title then add the following two Red bolded codes just below and after the bolded black text. For example if you wish to show a widget at Homepage only then do this,</div>
<div>
<div>
<b:widget id='HTML8' locked='false' title='WIDGET-TITLE-HERE' type='HTML'></div>
<div>
<b:includable id='main'></div>
<div>
<b:if cond='data:blog.pageType == "item"'></div>
<div>
bla bla bla bla</div>
<div>
</b:if></div>
<div>
</b:includable> </b:widget></div>
</div>
<div>
<br /></div>
<div>
<div>
Save your template and you have successfully stopped the widget display on homepage and allowed it on all post pages. For learning more about how to control the widget display then read:</div>
<div>
How To Show and Hide Widgets in Blogger?</div>
<div>
If you liked this widget then please try tweeting and sharing this post using this new widget to your left. :) Peace and blessings brothers and sisters.</div>
</div>
</i></span></div>
</div>

Add Floating Share Buttons "Facebook" "Twitter" More Ever wondered to create a Mashable type floating sharing widg...