Welcome To "Softway RKO" !

What You Can Get in Softway RKO?

We provide the tutorials, guides, articles, tricks and tips about Blogger, Blogging, SEO Tips, Basic Tips For New Bloggers, Making Money Online, Widgets, Templates and many more resources. All this is just for free! You can Sign Up to get updated for Latest Posts.

Friday, May 30, 2014

Filled Under:

Add Socialize it bar below Post Title in Blogger


HTML tutorial

Click Below Ad for Leaning Blogging Tricks.

Next Blogger 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:-

  • 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[*/
 // Twitter
 (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 == &quot;item&quot;'>
<div class='horizontalsocial social-buttons' id='horizontalsocial'>
<div class='nbtsocialshare' id='nbtsocialshare'>
<table class='nbtsocialshare' width='100%'>
    <tr>
<td><div class='sharertitle'>Socialize It &#8594;</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='&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;' 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
Final Words
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:

Comment here

 
  • Home
  • About Us
  • Contact Us
  • Sitemap
  • Privacy Policy
  • Back To Top