Social Floating bar for blogger version 2

In previous post of social floating widget for blogger we share commonly use social buttons. May be you notice this thing or not but after releasing this floating bar a number of TcM readers ask us to share a widget containing Buffer, LinkedIn and Pocket buttons. So keeping in view there demand also making some other changes is aim to release this social floating bar. As we know that with every moment of time new bloggers are coming. And every day it has been seen hundreds are blogs created. Every one wants to garnish his site with multi stylish buttons and look good in the race of blogging. So on one side where this widget will fulfill their ambition regarding dress up the blog alternatively it is a good way to distribute your site on different social channels.

Specifications:

This is branded widget in its kind with addition of Pocket, LinkedIn and Buffer social plug-in. Pocket is an application which allows you to book mark something like a post, website, a special page etc. If a user finds any thing helpful then he easily book mark that page for future concerns. Similarly spreading information among professionals that are in your connection at LinkedIn this plug in gives you all in one package.

social floating sharing plug in

Buffer App:

Buffer is an application which allows to automate your content on all social pages. It is very easy and professionals recommend this app. It is also available in Chrome, Firefox extensions. However in order to minify complexity now you use it in social sharing floating bar as a button. Also in this present gadget after its installation your readers will be able to share content using buff. The method of this application is straightforward. Just press the button and it press the whole post with thumbnail and link. After completion post will be share on your connected social profiles.

How to add:

Go to dashboard > select Layout > add a gadget
Select a new widget then copy whole coding from here

<style type=”text/css”>
#tcm-floating-bar {
            position:fixed;
            bottom:15%;
            margin-left:-721px;            float:left;
            background-color:#ddd;            padding:0px 0px 0px 1px;              z-index:10;
            border-bottom-right-radius:1em;
            border-top-right-radius:1em;
        border-top:5px solid #E5E5DD;
            border-left:5px solid #E5E5DD;
            border-bottom:5px solid #E5E5DD;}
.tcm-share {
float:left;
clear:both;
margin:5px 5px 1px 2px;
}
</style>
<div id=’tcm-floating-bar’>
<div class=’tcm-share’ id=’like’ 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:3px;’><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’ id=’linkedin’ style=’margin-left:2px;width:48px’>
<script src=”//platform.linkedin.com/in.js” type=”text/javascript”>
  lang: en_US
</script>
<script type=”IN/Share” data-counter=”top”></script>
</div>
<div class=’tcm-share’ id=’buffer’ style=’margin-left:3px;width:48px’>
<a href=”http://bufferapp.com/add” class=”buffer-add-button” data-count=”vertical”>Buffer</a>
<script type=”text/javascript” src=”https://d389zggrogs7qo.cloudfront.net/js/button.js”></script></div>
<div class=’tcm-share’ id=’pocket’ style=’margin-left:3px;width:48px’>
<a data-pocket-label=”pocket” data-pocket-count=”vertical” class=”pocket-btn” data-lang=”en”></a>
<script type=”text/javascript”>!function(d,i){if(!d.getElementById(i))
{var j=d.createElement(“script”);j.id=i;j.src=”https://widgets.getpocket.com/v1/j/btn.js?v=1″;
var w=d.getElementById(i);d.body.appendChild(j);}}(document,”pocket-btn-js”);</script>
</div>
<div class=’tcm-share’ style=’margin-left:3px;’ id=’gplusone’>
<!– Place this tag where you want the share button to render. –>
<div class=”g-plus” data-action=”share” data-annotation=”vertical-bubble” data-height=”60″></div>
<!– Place this tag after the last share tag. –>
<script type=”text/javascript”>
  (function() {
    var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
    po.src = ‘https://apis.google.com/js/platform.js’;
    var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
</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”>Widgets</a></p>

</div></div></div></script></div></div></div>

and paste entire coding inside it.
Save the gadget. You are done.

Customization:

The default setting according to blogger non customized templates. However if you are using other templates and social plug in not adjusted properly then change the   margin-left:-721px;      according to accurate resemblance.
Also if  
back ground colour of  your blog is other then the colour of plug in then you can change it from this     background-color:#ddd; highlighted piece of code. 

Need help:

In case of don’t tackle or facing any error while adding this social floating bar you may ask us in comment section. We are ready to help you. 🙂 

One Response

  1. Desiree Rynerson 14 July 2020

Leave a Reply