Horizontal Social Sharing Buttons Bar
This is the Horizontal Social Sharing Buttons Bar which help you to get more traffic from your visitors friends on social networking sites. This Widget look wise has great and beautiful it's each buttons is separated in Cube shape and it design as the buttons are places in good manner. This Bar come with title which will help to get more tweets, Likes, Follower and etc. It also has four different share buttons from different social networking sites. These four buttons are Twitter, Facebook, Google+, and comments counter button.
- Recommended : Facebook Popup Like Box For Blogger Blogs
This widget contain these four social networking share buttons which mostly used widely in the world and they will really help you to gain traffic from social networking websites. If you can know get more social traffic to your blog so, you need just placed this bar in your blogger blog where your visitors can get more. Basically, we're making this bar with the help of CSS, HTML, JavaScript and XML which are used by professional web designers. We've customized these buttons specially for fast loading and not affect to blog blog I'm sure it really helps in improving your blog quality and loading speed. It also important to take a note about it while implementing new things in your blogger blog.
How To Install This Bar In Blogger Blogs?
After read it's features and description of this. This horizontal social sharing buttons bars below post in blogger blog is not difficult to install, it is very easy to install on blogger blogs but you need to follow my simple and easiest steps. If you're not a professional blogger so below we're going to teach you step by step on how to add this. Just follow below steps.
Note : Before editing your Blogger Template make sure you've your blogger template backup? if not so please make it's backup first.
- Go To Blogger Dashboard>>Template>>Edit HTML
- Find This tag </head> Using (Ctrl+F)
- Paste the Following code before or above </head>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*<![CDATA[*/
.horizontalsocial .sharertitle{float: left; border-right: 1px solid #d2d2d2; padding: 3px 10px 2px 0px; margin: 0 0px 0 0; color: #b1a9a5; font-family:'Oswald', Arial, Helvetica, sans-serif;text-transform: uppercase; line-height: 25px; vertical-align: middle; font-size: 14px;}
.horizontalsocial .fb-like{width: 100px; float: left; border-right: 1px solid #d2d2d2; padding: 3px 0 2px; height: 25px; }
.horizontalsocial .sharertwitter{float: left; width: 115px; border-right: 1px solid #d2d2d2; margin: 0 15px 0 0; padding: 3px 0 2px; height: 25px;}
.horizontalsocial .sharergplus{float: left; width: 90px; margin: 0 15px 0 15px; padding: 3px 0 2px; border-right: 1px solid #d2d2d2; height: 25px;}
.horizontalsocial .sharerbubble{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz4J2yELIVc7j3nr8F4_cORjZOVjpsWT6d-xU1sRjcaQVlu_owCoF-4Sk_zq7qf-nAGE5HXC2Rfj6M3Ax07tBmVhMdHXWqBVojM1NiYNnUHdIhdC47bSBTsnsYSY9SRVEpzID_K7Kvtiw/s1600/Commentz.png) no-repeat; height: 25px; min-width: 25px; float: left; margin: 7px 0 0; line-height: 18px; vertical-align: top;}
.horizontalsocial .sharerbubble a{color: #2d2520; padding: 0px 0 0px 30px; font-size: 18px !important; font-family: 'Lora', Arial, Helvetica, san-serif !important; }
.horizontalsocial.fixed{ position:fixed; top: -2px; z-index: 99999;}
#NBTSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
#NBTSocialFloat td{padding:4px;margin:0;border:none;}
#NBTSocialFloat td iframe{max-width:82px;width:82px !important;}
#NBTSocialFloat.NBTFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Set the Top Offset
$theOffset = 0;
jQuery(document).ready(function(b){var a=b("#NBTSocialFloat");a.wrap('<div id="NBTSocialPlaceholder"></div>').closest("#NBTSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#NBTSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("NBTFloatSocial"):a.removeClass("NBTFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});
/*]]>*/
</script>
<script type="text/javascript" src="https://www.googledrive.com/host/0B2ww3WS8P1MJSFM3cXRycDUzUXc"></script>
<script type="text/javascript">
/*<![CDATA[*/
(function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
// Google + (plus)
(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
/*]]>*/
</script>
</b:if>
- Now, find this below code Using (Ctrl+F)
<data:post.body/>Note : If you can see maximum number of <data:post.body/> so you choose the last <data:post.body/>
- After finding the right code, add the following code just above <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div class='horizontalsocial social-buttons' id='horizontalsocial'>
<div class='NBTSocialFloat' id='NBTSocialFloat'>
<table class='NBTSocialFloat' width='100%'>
<tr>
<td><div class='sharertitle'>Socialize It →</div>
</td>
<td>
<div class='sharertwitter'><a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
</td>
<td>
<div class='fb-like'> <iframe allowTransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/></div>
</td>
<td>
<div class='sharergplus'> <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/></div>
</td>
<td>
<div class='sharerbubble'><span class='thecomments'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/> </b:if></a>
</b:if>
</span></div>
</td>
</tr>
</table>
</div></div>
</b:if>
- Click On "Save Template" Button
- You've Done.
- CONGRATULATION! you're successfully add this bar in your blogger blog.
Final Words
So friends, this is the great widget to increase your social media traffic. This is must use widget from many blogger like me you can see this post's title below you've seen this bar with four social buttons. Now it;s your time to add this in your blogger if you're facing problem so, leave comments for your solutions and don't forget to like our Facebook page and also share this post on social networking sites with your friends using this bar.
Happy Blogging!
nice post...... see mine http://www.webfeek.com/2014/09/how-to-get-unlimited-social-shares-on.html
ReplyDelete