Why to add floating bar:
This small tool gives a new way to sharing, and tweeting a blogger post. A reliable source for spreading knowledge on all famous networks! Great user experience plus give a new glance to your web/blog. If a user finds something helpful then he shares with an easy and new style with this widget. I add most worthy platforms in this widget. A number of experiments I make with this widget since last two days. Now it is ready to releasing. This branded widget add a new taste in your blog.
Also
Adding Stumble upon button in blogger
Adding widget:
Integration of this widget is very easy in 3 steps.
then choose Layout >
Select add a Gadget.
Choose HTML java script widget and paste the following coding there. Hit the orange save button and reload page. You are almost done.
<style type=”text/css”>
#tcm-floating-bar {
position:fixed;
bottom:15%;
margin-left:-690px;
float:left;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#f7f7f7;
padding:0px 0px 0px 2px;
z-index:10;
border:1px solid #CCC; }
.tcm-share {
float:left;
clear:both;
margin:5px 5px 1px 2px;
}
</style>
<div id=’tcm-floating-bar’>
<div class=’tcm-share’ id=’fblike’ style=’margin-left:7px; margin-bottom:0px’>
<div id=”fb-root”></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/all.js#xfbml=1”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
<div class=”fb-like” data-send=”false” data-layout=”box_count” data-width=”40″ data-show-faces=”false”></div>
</div>
<br /><div class=’tcm-share’ style=”margin-left: 2px;” ><a class=’twitter-share-button’ data-count=’vertical’ data-via=’technologymake‘ expr:data-counturl=’data:blog.url’ href=’http://twitter.com/share’ rel=’nofollow’>Tweet</a><script src=’http://platform.twitter.com/widgets.js’; type=’text/javascript’></script>
<br />
<div class=’tcm-share’ style=”margin-left: 3px;” id=’st’>
<script src=”http://www.stumbleupon.com/hostedbadge.php?s=5″></script>
</div>
<div class=’tcm-share’ id=’diggit’ style=’margin-left:3px;width:48px’>
<script src=’http://widgets.digg.com/buttons.js’ type=’text/javascript’></script>
<a class=”DiggThisButton DiggMedium”></a>
</div>
<div class=’tcm-share’ id=’pinit’ style=’margin:28px 5px 0px 7px;width:48px’ display:’block’>
<a href=”//gb.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.technologymake.com&media=http%3A%2F%2Fwww.technologymake.com&description=Next%20stop%3A%20Pinterest” data-pin-do=”buttonPin” data-pin-config=”above”><img src=”//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png” /></a>
<!– Please call pinit.js only once per page –>
<script type=”text/javascript” async src=”//assets.pinterest.com/js/pinit.js”></script></div>
<div class=’button-share’ style=’margin-left:3px;’ id=’gplusone’>
<script type=”text/javascript” src=”https://apis.google.com/js/plusone.js”></script>
<g:plusone size=”tall”></g:plusone>
</div>
<div style=”clear: both;font-size: 9px;text-align:center;”>
<p style=” line-height:0px; font-size:10px; font-weight:bold; text-align:center;”>
<a style=”color:#D3D3D3;” href=”http://www.technologymake.com/2014/03/Social-floating-widget-in-blogger.html”>Widgets</a></p>
</div></div></div>
Customization:
margin-left:-690px; change according to your page setting. Decreasing value widget will go R.H.S & increasing value gadget will move Left Hand Side.
background-color:#f7f7f7; Also if you want to change the color then replace this value by your own desired or similar color to your template. Replace data-via=’technologymake‘ with your Twitter name.
Alternatively remains unchanged in case of insufficient knowledge of CSS.
Need Help:
Facing any type of problem ask us. We will be feel glad to help you in any nuisance. If you find this widget helpful for others then Brothers and Sisters P.s. Share it as you can.
I love this however my code is showing where I added the html code. How do I keep the code from showing?
@Glenda Hampton Anderson Which piece of code showing? Could you able to giving me the URL where you showing this Widget Let I check for You?