How to add Scrolling Social Sharing Widget in Blogger Blog Sidebar?
We use plugins to share our online contents on the social networks. Social networks are also promoting their plugins/buttons/widgets in between the web developers. We can get the social buttons and plugins from the social network websites, very easily. But bloggers want to add a useful widget in their blog which provides the sharing button of all popular social networks. That is why I published the steps below to add a useful Scrolling Social Sharing Widget in your Blogger blog. This social bar render on the left sidebar of your blog post. You can see the Live Demo of this widget, check the scrolling social sharing widget on the left hand side of this post.
Steps to add scrolling social sharing widget in your Blogger blog
So follow the below given steps and add this social sharing widget in your Blogger or Blogspot blog.
- First of all Log in into your Blogger blog and select your blog.
- Then select Template option from the sidebar on left hand side.
- Backup your template and click on Edit HTML button.
- Then find the below given code in your template:
<b:includable id='post' var='post'>
- Copy and paste the below given code just below the code founded in the previous step.
<!-- HiFiFun.Net Scrolling Social Bar -->
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
.hififun_social_floating{
position:fixed; bottom:18%; margin-left:-82px; float:left;
width:65px;
background-color:#f7f7f7;
padding: 5px 0 0px 0px;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}
.hififun_social_floating .hififun_side_social_button{
margin-bottom:5px;
float:none;
height:auto;
width:60px;
}
.hififun_social_floating .hififun_fblike_vcount{
margin-left:5px;
}
.hififun_social_floating .hififun_pinit_vcount{
margin-left:10px;
}
.hififun_social_floating .hififun_twitter_vcount{
margin-left:2px;
}
.hififun_social_floating .hififun_gplus_vcount{
margin-left:5px;
}
.hififun_social_floating .hififunButton_gradient{
background:none !important;
height:21px !important;
padding-left:0 !important;
}
.hififun_social_floating .chicklets, .hififun_social_floating .hififunMainServices {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyLLzQ3vYXzhQQaKa-p43Y14l7lNc6rLQ1vvskw78MZh6EGaiLpznUfX976OKxqBUwfZ4LagLioYyvL-RDp2q_nBH_wKiodFbsBaDpgPO5RfTuZHrYT5U93JOvYLm-YAKi2vLLbHZd_Tmg/s400/gc_social_sprite.gif') no-repeat !important;
height:19px !important;
width:45px !important;
padding:0 !important;
}
.hififun_social_floating .hififun_twitter_vcount .hififun-twitter-counter{
background-position:0 -58px !important;
}
.hififun_social_floating .hififunButton_gradient{
border:none !important;
}
.hififun_social_floating .hififunBubble_count{
width:44px !important;
font-size: 15px !important;
font-weight: normal !important;
padding-top:7px !important;
height:23px !important;
background:none !important;
}
.hififun_social_floating .hififun_twitter_vcount .hififunBubble_count{
color:#00a6df;
background-color:#f8fbfc !important;
}
.hififun_fblike_vcount{
margin-bottom: 0px;
display: block;
}
.hififun_gplus_vcount{
margin-bottom: 0px;
display: block;
}
.hififun_twitter_vcount{
margin-bottom: 3px;
margin-top: 3px;
display: block;
}
.hififun_pinit_vcount{
margin-bottom: 0px;
display: block;
}
.hififun_social_floating .hififunBubble{
background-position: 21px 31px !important;
height:35px !important;
}
</style>
<div class='hififun_social_floating'>
<script type='text/javascript'>hififunLight.options({onhover:false});</script>
<center>
<b>Plz<br/> Share!</b></center>
<br/>
<span class="hififun_fblike_vcount">
<!-- Facebook Like button start -->
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=box_count&show_faces=false&width=55&action=like&font=verdana&colorscheme=light&height=35"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:65px;'/>
<!-- Facebook Like button End -->
</span>
<span class="hififun_gplus_vcount">
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<g:plusone expr:href="data:post.url" size="tall"></g:plusone>
</span>
<span class="hififun_twitter_vcount">
<!-- Twitter tweet button start -->
<a class='twitter-share-button' data-count='vertical' expr:data-text='data:post.title' expr:data-url='data:post.url' data-via='hififun' data-related='' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
<!-- Twitter tweet button End -->
</span>
<br/>
<span class="hififun_pinit_vcount">
<a class='pin-it-button' count-layout='vertical' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&description=" + data:post.title + "&media=" + data:post.thumbnailUrl'>Pin It</a>
</span>
</div>
</b:if></b:if>
<!-- HiFiFun.Net Scrolling Social Bar End -->
- Click on the Save button to save your blog’s Template.
- Done!
Now you can test the scrolling social sharing widget by opening any post in your blog. This widget will render on the left hand side of all the posts of your blog.
0 comments:
Post a Comment