Click Below Ad for Leaning Blogging Tricks.
Hello Bloggers Today i am sharing How to Add Socialize it bar below Post Title in Blogger it very famous and useful widget for blogger it widget help in increase social traffic from your blog.in Previous day you can add some facebook widget like Facebook Sliding Like box for Blogger/Blogspot and some twitter widget like Twitter Feed widget in Blogger and some all in one widget like Add All in one Social Subscription Widget in Blogger but thes three widget are add in sidebar. But today i am comes with socialize bar widget for you it widget are placed below post title.
Also Read:-Add HTML 5 MP3 Player in Blogger
In this tutorial this widget are easy to install in your blog follow this simple and easy instruction for put this widget in your blog.
How To Add Socialize it bar below Post Title in Blogger:-
I Hope this correctly add to your blog if not please write your problem in comment box for your problem's solutions And Don't forget click on like button.
Also Read:-Add HTML 5 MP3 Player in Blogger
In this tutorial this widget are easy to install in your blog follow this simple and easy instruction for put this widget in your blog.
How To Add Socialize it bar below Post Title in Blogger:-
- Go To Blogger Dashboard>>Template>>Edit HTML
- Find this tag </head> using (Ctrl+F)
- Paste the following code before/above </head>
<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/AVvXsEhoNI1HGFCBwh6eMmeXHbVc5Ihq_kD-xcdQ3hPkQGHEm3gGAizFUCjIsBpY98wZPxvJjaLDFxFek6o2BE_iREOLoZF3_3ANmh5gLQb-FrUIVgGKjt8_Q68afbDfIOeklRE0Kq4BZT4fgvI/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;}
#nbtsocialshare {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
#nbtsocialshare td{padding:4px;margin:0;border:none;}
#nbtsocialshare td iframe{max-width:82px;width:82px !important;}
#nbtsocialshare.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("#nbtsocialshare");a.wrap('<div id="nbtSocialPlaceholder"></div>').closest("#nbtSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#nbtsocialshare 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'>
/*<![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>
- Now find these code <div class='post-body entry-content'>
- Paste the following code before <div class='post-body entry-content'>
<b:if cond='data:blog.pageType == "item"'>
<div class='horizontalsocial social-buttons' id='horizontalsocial'>
<div class='nbtsocialshare' id='nbtsocialshare'>
<table class='nbtsocialshare' 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>
- Finish
I Hope this correctly add to your blog if not please write your problem in comment box for your problem's solutions And Don't forget click on like button.
0 blogger-facebook: