Get Widget

Learn how to add an attractive sliding share widget to your blog



The easiest and most effective way to bring your latest post to the spotlights is by using the social media platform. People are not constantly reloading your website to check if you have uploaded some new content, but most of your audience are guaranteed to be on some kind of social network at all times, thanks to the mobile revolution.

When a new article is posted, usually the author first shares it on a public platform, where most of his loyal audience is present. If they like the content, they share it further. This second step - sharing by other people - is what makes a content go viral. 

To ensure that your readers readily share your content, you must not only write quality content, but also make sure that your viewers find the right tools for sharing. Users will not go the extra mile to share your content if there is no straightforward way to do that. To make things easy, their are a lot of widgets available that consist of all the share buttons. Below is the code for the social share widget we use on this website. 


<style type="text/css"> 
#floating_bar { 
background-color:#fff; 
position:fixed; 
padding:0 0 3px 0; 
bottom: 30%; 
float:left; 
margin-left: -80px;
border: 1px dotted #f7f7f7; 
border-radius: 5px; 
-moz-border-radius:5px; 
-webkit-border-radius:5px; 
z-index:10; 
} 
#floating_bar { 
clear:both; 
} 
</style> 
<div id='floating_bar'> 
<div style='margin:10px 0 5px 13px;' id='like'> 
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div> 
</div> 
<div style='margin:0px 0 0 10px;' id='gplusone'> 
<g:plusone size="tall"></g:plusone> 
</div> 
<div style='margin:5px 5px 5px 6px;'> 
<a href="https://twitter.com/share" class="twitter-share-button" data-via="Cyber_Lingo" data-lang="en" data-count="vertical">Tweet</a> 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> 
</div> 
<div style='margin:5px 5px 5px 5px;' id='linkedin'> 
<script src='http://platform.linkedin.com/in.js' type='text/javascript'></script> 
<script data-counter='top' type='IN/Share'></script> 
</div> 
<div style='margin:0 0 10px 11px; id='su'> 
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> 
</div> 
<p style='line-height:0px; margin-bottom:8px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://cyberlingo.blogspot.com/2015/12/how-to-get-sliding-share-widget.html' style='color:#333;'> Get Widget</a></p> 
</div>

For adding this in Blogger, go to Layout -> Add a Gadget -> HTML/JavaScript -> Copy and Paste the above code.
You need to make some modifications, such as in data-via="Cyber_Lingo", change the text Cyber_Lingo to your twitter handle, or if you don't have twitter, you can remove this part. 
Share on Google Plus
The Daily Programmer is a multi-topic blog focussing primarily on computer science and technology.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment