Adding an official X (Twitter) Follow Button to your Blogger site is a quick way to let visitors follow you with one click. It helps you grow your followers and stay connected with your audience. In this guide I will show you how to add the button directly to your blog.

Copy and Paste This Code

Here is the code you need. Replace YourHandle with your actual X/Twitter username (without the @ sign).

<a href="https://twitter.com/YourHandle"
   class="twitter-follow-button"
   data-show-screen-name="true"
   data-show-count="false"
   data-size="large">
  Follow @YourHandle
</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Tip: You only need the script line once per page. If your template already has it, you can remove the last line.

Note: This follow button code is not limited to Blogger. You can also use the same code on any other website, such as WordPress, static HTML pages, or custom CMS platforms. Just paste it into your site’s HTML and it will work the same way.

Method A: Add the Button with a Gadget

1. Log in to Blogger and go to Layout.
2. Click Add a Gadget → HTML/JavaScript.
3. Paste the code shown above.
4. Click Save.

The button will now appear in the sidebar, footer or any gadget area you choose.

Method B: Add the Button in Your Theme

Important: Make a backup of your theme first (Theme → Backup). Blogger templates can be different, so check carefully before editing.

1. Go to Theme → Edit HTML.
2. Search for <b:includable id='post' var='post'>. Inside this block you will see <data:post.body/>.
3. Paste the same follow button code just before <data:post.body/>.

This will make the button appear at the top of every blog post.

If you want the button to be aligned to the right, wrap it with a simple <div> like this:

<div style="float:right; margin:6px 0 10px 10px;">
  <!-- Follow button code goes here -->
</div>

Customize the Button

• Show or hide username: Change data-show-screen-name to true or false.
• Show or hide follower count: Change data-show-count to true or false.
• Button size: Add data-size="large" for a bigger button or remove it for the default size.
• Position: Use a wrapper <div> and add CSS such as float:right; or margin.

Fixing Common Problems

• Button shows only as a link: Make sure the script line is included once per page: <script async src="https://platform.twitter.com/widgets.js"></script>
• Button does not appear in posts: Check that you pasted the code inside <b:includable id='post' var='post'> and before <data:post.body/>.
• Button loads twice: Remove extra copies of the script so only one remains.
• Wrong account: Double check that you replaced YourHandle with your own username.

That’s it. Now your Blogger site has a working X (Twitter) Follow Button and visitors can follow you instantly. Happy blogging!

The post How to Add Official X (Twitter) Follow Button to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

1.Login to your blogger account and go to "Edit HTML" page.

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag:

<style type='text/css'>
/* Blogger Share Buttons by www.bloggertipandtrick.net */
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,300,300italic,700,700italic,600,600italic&subset=latin,latin-ext);
.blogger-share-buttons{color:rgb(126,126,126);display:block;font-family:'Open Sans',Tahoma,Verdana,Arial,sans-serif;font-size:14px;font-weight:normal;height:auto;line-height:24px;margin-top:10px;margin-bottom:10px;width:100%;width:100%;text-align:center;}
.blogger-share-buttons div{display:block;width:120px;margin:2px;display:inline-block;vertical-align:middle;}
.blogger-share-buttons a{text-decoration:none;display:block;padding-left:20px;color:#fff !important;font-weight:bold;-webkit-transition:background-color .3s;-moz-transition:background-color .3s;transition:background-color .3s;}
.blogger-share-buttons a{padding:7px 10px 7px 10px;}
.blogger-share-buttons a i{margin-right:10px;}
.blogger-share-buttons .fb-sharebtn a{background:#3B5999;}
.blogger-share-buttons .twitter-sharebtn a{background:#01BBF6;}
.blogger-share-buttons .gplus-sharebtn a{background:#D54135;}
.blogger-share-buttons .linkedin-sharebtn a{background:#136F9B;}
.blogger-share-buttons .pinterest-sharebtn a{background:#CB2027;}
.blogger-share-buttons .delicious-sharebtn a{background:#3173D1;}
.blogger-share-buttons .fb-sharebtn a:hover{background-color:rgb(50,75,129);}
.blogger-share-buttons .twitter-sharebtn a:hover{background-color:rgb(1,159,211);}
.blogger-share-buttons .gplus-sharebtn a:hover{background-color:rgb(191,52,40);}
.blogger-share-buttons .linkedin-sharebtn a:hover{background-color:rgb(15,89,125);}
.blogger-share-buttons .pinterest-sharebtn a:hover{background-color:rgb(174,28,35);}
.blogger-share-buttons .delicious-sharebtn a:hover{background-color:rgb(38,90,168);}
</style>

4. Now find this line:

<b:includable id='post' var='post'>

5. From that line scroll down slowly until you see a code more similar to this:

<b:if cond='data:post.title'>
  <h3 class='post-title entry-title' itemprop='name'>
  <b:if cond='data:post.link'>
	<a expr:href='data:post.link'><data:post.title/></a>
  <b:else/>
	<b:if cond='data:post.url'>
	  <b:if cond='data:blog.url != data:post.url'>
		<a expr:href='data:post.url'><data:post.title/></a>
	  <b:else/>
		<data:post.title/>
	  </b:if>
	<b:else/>
	  <data:post.title/>
	</b:if>
  </b:if>
  </h3>
</b:if>

6.Copy below code and paste it after the above code:

<!-- Blogger Share Buttons by www.bloggertipandtrick.net -->
<div class='blogger-share-buttons'>
    <div class='fb-sharebtn'>
		<a expr:href='&quot;https://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' onclick='window.open(this.href,&quot;sharer&quot;,&quot;toolbar=0,status=0,width=626,height=436&quot;); return false;' rel='nofollow' target='_blank' title='Share this on Facebook'><i class='fa fa-facebook' aria-hidden='true'></i> Facebook</a>
    </div>
    <div class='twitter-sharebtn'>
		<a expr:href='&quot;https://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url' rel='nofollow' target='_blank' title='Tweet This!'><i class='fa fa-twitter' aria-hidden='true'></i> Twitter</a>
    </div>
    <div class='gplus-sharebtn'>
		<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,   &quot;&quot;, &quot;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&quot;);return false;' rel='nofollow' target='_blank' title='Share this on Google+'><i class='fa fa-google-plus' aria-hidden='true'></i> Google+</a>
    </div>
    <div class='linkedin-sharebtn'>
		<a expr:href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share this on Linkedin'><i class='fa fa-linkedin' aria-hidden='true'></i> Linkedin</a>
    </div>
    <b:if cond='data:post.firstImageUrl'><div class='pinterest-sharebtn'>
		<a expr:href='&quot;https://pinterest.com/pin/create/button/?source_url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on Pinterest'><i class='fa fa-pinterest' aria-hidden='true'></i> Pinterest</a>
    </div></b:if>
    <div class='delicious-sharebtn'>
		<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this on Delicious'><i class='fa fa-delicious' aria-hidden='true'></i> Delicious</a>
    </div>
</div>

7. Save your Blogger Template and refresh your site. Final result will look like this:

The post How to Add Flat UI Share Buttons to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

1.Login to your blogger account and go to "Edit HTML".

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

<style type='text/css'>
@import url(https://fonts.googleapis.com/css?family=Lora:400,700);

#subscribe-btt {
    margin: 0;
    padding: 10px;
    background: #eee;
    border: 3px solid #e8e8e8;
}

#subscribe-btt:hover {
    background: #e9e9e9;
    border: 3px solid #ddd;
}

#subscribe-btt h2.mysocialurl {
    border: 0;
    margin: 0 0 8px 0;
    padding: 0 0 0 56px;
    height: 48px;
    line-height: 48px;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    font-family: Lora;
}

#subscribe-btt h2.my-twitter {
    background: url(http://1.bp.blogspot.com/-YMZoxe6YeAU/VjLfx48cbzI/AAAAAAAANS4/-xMF6d-h6pI/s1600/twitter.png) no-repeat top left;
}

#subscribe-btt h2.my-facebook {
    background: url(http://3.bp.blogspot.com/-x3I2mVz4dz0/VjLfvv-E4lI/AAAAAAAANSU/mtI8MA00knA/s1600/facebook.png) no-repeat top left;
}

#subscribe-btt h2.my-googleplus {
    background: url(http://4.bp.blogspot.com/-ZgHjLWTv3hg/VjLfvhnsveI/AAAAAAAANSY/d-so__lf_MU/s1600/google_plus.png) no-repeat top left;
}

#subscribe-btt h2.my-pinterest {
    background: url(http://3.bp.blogspot.com/-QsPPcMl7rrw/VjLfxLofDUI/AAAAAAAANSs/1v1y-fB5pEQ/s1600/pinterest.png) no-repeat top left;
}

#subscribe-btt h2.my-instagram {
    background: url(http://2.bp.blogspot.com/-y1lyKz1gpew/VjLfviE7bHI/AAAAAAAANSk/bK4YGPwJfpI/s1600/instagram.png) no-repeat top left;
}

#subscribe-btt h2.my-linkedin {
    background: url(http://3.bp.blogspot.com/-g8Svw7M45HQ/VjLfwfBFNEI/AAAAAAAANSc/6kG75VOZyiM/s1600/linkedin.png) no-repeat top left;
}

#subscribe-btt h2.my-youtube {
    background: url(http://2.bp.blogspot.com/-B2Mt0Xr7s1Q/VjLfx4_kfqI/AAAAAAAANS8/5xcxmsRniRc/s1600/youtube.png) no-repeat top left;
}

#subscribe-btt h2.my-rss {
    background: url(http://2.bp.blogspot.com/-OTpOGowrvfg/VjLfxSHIbhI/AAAAAAAANS0/VnHf1jK_WLk/s1600/rss.png) no-repeat top left;
}

#subscribe-btt h2.my-email {
    background: url(http://1.bp.blogspot.com/-F3CIjKLAcrU/VjLfw_yOCdI/AAAAAAAANSo/vqPj9oNwe6c/s1600/mail.png) no-repeat top left;
}

#subscribe-btt .mysocialurl a {
    color: #252e28;
    text-decoration: none;
}

#subscribe-btt .mysocialurl a:hover {
    color: #000000;
    text-decoration: underline;
}
</style>

4.Now go to "Layout" and click on "Add a Gadget".

5.Select "HTML/JavaScript" and add the code given below and click "Save".

<div id="subscribe-btt">

<h2 class="mysocialurl my-twitter"><a href="YOUR-TWITTER-URL">FOLLOW ME ON TWITTER</a></h2>

<h2 class="mysocialurl my-facebook"><a href="YOUR-FACEBOOK-URL">FOLLOW ME ON FACEBOOK</a></h2>

<h2 class="mysocialurl my-googleplus"><a href="YOUR-GOOGLE-PLUS-URL">FOLLOW ME ON GOOGLE PLUS</a></h2>

<h2 class="mysocialurl my-pinterest"><a href="YOUR-PINTEREST-URL">FOLLOW ME ON PINTEREST</a></h2>

<h2 class="mysocialurl my-instagram"><a href="YOUR-INSTAGRAM-URL">FOLLOW ME ON INSTAGRAM</a></h2>

<h2 class="mysocialurl my-linkedin"><a href="YOUR-LINKEDIN-URL">FOLLOW ME ON LINKEDIN</a></h2>

<h2 class="mysocialurl my-youtube"><a href="YOUR-YOUTUBE-URL">FOLLOW ME ON YOUTUBE</a></h2>

<h2 class="mysocialurl my-rss"><a href="YOUR-RSS-FEED-URL">SUBSCRIBE VIA RSS</a></h2>

<h2 class="mysocialurl my-email"><a href="YOUR-FEEDBURNER-EMAIL-SUBSCRIPTION-URL">SUBSCRIBE VIA EMAIL</a></h2>

</div>

NOTE : In above code, replace pink colored codes with your social profile URLs.

Final result will look like this:

The post How To Add Beautiful Subscribe Widget to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

Tutorial updated: 2015/10/18

1.Log in to your Blogger account and go to "Edit HTML".

2.Scroll down to where you see </head> tag.

3.Now add below code before </head> tag.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/jquery-migrate-1.2.1.js'></script>

<script type='text/javascript'>
//<![CDATA[

jQuery(document).ready(function() {
	// xhtml 1.0 strict way of using target _blank
	jQuery('.sexy-bookmarks a.external').attr("target", "_blank");
	// this block sets the auto vertical expand when there are more than
	// one row of bookmarks.
	var sexyBaseHeight = jQuery('.sexy-bookmarks').height();
	var sexyFullHeight = jQuery('.sexy-bookmarks ul.socialsbtt').height();
	if (sexyFullHeight > sexyBaseHeight) {
		jQuery('.sexy-bookmarks-expand').hover(
			function() {
				jQuery(this).animate({
					height: sexyFullHeight + 'px'
				}, {
					duration: 400,
					queue: false
				});
			},
			function() {
				jQuery(this).animate({
					height: sexyBaseHeight + 'px'
				}, {
					duration: 400,
					queue: false
				});
			}
		);
	}
	// autocentering
	if (jQuery('.sexy-bookmarks-center')) {
		var sexyFullWidth = jQuery('.sexy-bookmarks').width();
		var sexyBookmarkWidth = jQuery('.sexy-bookmarks:first ul.socialsbtt li').width();
		var sexyBookmarkCount = jQuery('.sexy-bookmarks:first ul.socialsbtt li').length;
		var numPerRow = Math.floor(sexyFullWidth / sexyBookmarkWidth);
		var sexyRowWidth = Math.min(numPerRow, sexyBookmarkCount) * sexyBookmarkWidth;
		var sexyLeftMargin = (sexyFullWidth - sexyRowWidth) / 2;
		jQuery('.sexy-bookmarks-center').css('margin-left', sexyLeftMargin + 'px');
	}
});

//]]>
</script>

<style type='text/css'>
div.sexy-bookmarks{margin:20px 0 20px 0; border: 0;outline: none;clear:both !important;-webkit-box-sizing:content-box !important;-moz-box-sizing:content-box !important;box-sizing:content-box !important;}
div.sexy-bookmarks-expand{height:29px; overflow:hidden}
.sexy-bookmarks-bg-sexy, .sexy-bookmarks-bg-love{background-image:url('http://2.bp.blogspot.com/-x0M4XT4hAy4/ViMtGjT-51I/AAAAAAAAM-8/_rnU2cOKDI4/s1600/sexytrans.png') !important; background-repeat:no-repeat}
div.sexy-bookmarks-bg-love{padding:26px 0 0 10px; background-position:left -1148px !important}
div.sexy-bookmarks ul.socialsbtt{width:100% !important; margin:0 !important; padding:0 !important; float:left}
div.sexy-bookmarks ul.socialsbtt li{display:inline !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:60px !important; cursor:pointer !important; padding:0 !important}
div.sexy-bookmarks ul.socialsbtt li:before, div.sexy-bookmarks ul.socialsbtt li:after, div.sexy-bookmarks ul.socialsbtt li a:before, div.sexy-bookmarks ul.socialsbtt li a:after{content:none !important}
div.sexy-bookmarks ul.socialsbtt a{display:block !important; width:60px !important; height:29px !important; text-indent:-9999px !important; background-color:transparent !important}
div.sexy-bookmarks ul.socialsbtt a:hover{background-color:transparent !important}
.sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumbleupon, .sexy-stumbleupon:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoobuzz, .sexy-yahoobuzz:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-scriptstyle, .sexy-scriptstyle:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-comfeed, .sexy-comfeed:hover, .sexy-newsvine, .sexy-newsvine:hover, .sexy-linkedin, .sexy-linkedin:hover, .sexy-google, .sexy-google:hover, .sexy-friendfeed, .sexy-friendfeed:hover{background:url('http://3.bp.blogspot.com/-6HwqVMwZniw/ViMtHInF-AI/AAAAAAAAM_A/TBybj65pIKI/s0/sexy-sprite-new.png') no-repeat !important;border: 0;outline: none;}
.sexy-digg{background-position:-980px bottom !important}
.sexy-digg:hover{background-position:-980px top !important}
.sexy-reddit{background-position:-700px bottom !important}
.sexy-reddit:hover{background-position:-700px top !important}
.sexy-stumbleupon{background-position:-630px bottom !important}
.sexy-stumbleupon:hover{background-position:-630px top !important}
.sexy-delicious{background-position:-1190px bottom !important}
.sexy-delicious:hover{background-position:-1190px top !important}
.sexy-yahoobuzz{background-position:-1120px bottom !important}
.sexy-yahoobuzz:hover{background-position:-1120px top !important}
.sexy-blinklist{background-position:-1260px bottom !important}
.sexy-blinklist:hover{background-position:-1260px top !important}
.sexy-technorati{background-position:-560px bottom !important}
.sexy-technorati:hover{background-position:-560px top !important}
.sexy-myspace{background-position:-770px bottom !important}
.sexy-myspace:hover{background-position:-770px top !important}
.sexy-twitter{background-position:-490px bottom !important}
.sexy-twitter:hover{background-position:-490px top !important}
.sexy-facebook{background-position:-1330px bottom !important}
.sexy-facebook:hover{background-position:-1330px top !important}
.sexy-mixx{background-position:-840px bottom !important}
.sexy-mixx:hover{background-position:-840px top !important}
.sexy-scriptstyle{background-position:-280px bottom !important}
.sexy-scriptstyle:hover{background-position:-280px top !important}
.sexy-designfloat{background-position:-1050px bottom !important}
.sexy-designfloat:hover{background-position:-1050px top !important}
.sexy-newsvine{background-position:left bottom !important}
.sexy-newsvine:hover{background-position:left top !important}
.sexy-google{background-position:-210px bottom !important}
.sexy-google:hover{background-position:-210px top !important}
.sexy-comfeed{background-position:-420px bottom !important}
.sexy-comfeed:hover{background-position:-420px top !important}
.sexy-linkedin{background-position:-70px bottom !important}
.sexy-linkedin:hover{background-position:-70px top !important}
.sexy-friendfeed{background-position:-1750px bottom !important}
.sexy-friendfeed:hover{background-position:-1750px top !important}
.sexy-link{ margin-left:25px; float:left}
.sexy-link A{padding:10px 0; width:470px; text-align:right; border:0; outline:none}
</style>

NOTE :
1. Download Image Files if you need to host images yourself.
2. If jQuery is already included into your theme remove this from above code:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/jquery-migrate-1.2.1.js'></script>

4.Scroll down to where you see <data:post.body/> tag.

5.Copy below code and paste it just after <data:post.body/>.

<b:if cond='data:blog.pageType == "item"'>
<div class='sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love' style='margin:20px 0 20px 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;'>
<ul class='socialsbtt'>
<li class='sexy-delicious'><a class='external' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on del.icio.us'>Share this on del.icio.us</a></li>
<li class='sexy-digg'><a class='external' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Digg this!'>Digg this!</a></li>
<li class='sexy-stumbleupon'><a class='external' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'>Stumble upon something good? Share it on StumbleUpon</a></li>
<li class='sexy-reddit'><a class='external' expr:href='&quot;http://reddit.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Reddit'>Share this on Reddit</a></li>
<li class='sexy-google'><a class='external' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Add this to Google Bookmarks'>Add this to Google Bookmarks</a></li>
<li class='sexy-twitter'><a class='external' expr:href='&quot;http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@NAME)&quot;' rel='nofollow' title='Tweet This!'>Tweet This!</a></li>
<li class='sexy-facebook'><a class='external' expr:href='&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Facebook'>Share this on Facebook</a></li>
<li class='sexy-mixx'><a class='external' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url' rel='nofollow' title='Share this on Mixx'>Share this on Mixx</a></li>
<li class='sexy-comfeed'><a class='external' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='nofollow' title='Subscribe'>Subscribe</a></li>
<li class='sexy-yahoobuzz'><a class='external' expr:href='&quot;http://buzz.yahoo.com/submit/?submitUrl=&quot; + data:post.url' rel='nofollow' title='Buzz up!'>Buzz up!</a></li>
<li class='sexy-linkedin'><a class='external' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Linkedin'>Share this on Linkedin</a></li>
<li class='sexy-designfloat'><a class='external' expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Submit this to DesignFloat'>Submit this to DesignFloat</a></li>
<li class='sexy-technorati'><a class='external' expr:href='&quot;http://technorati.com/faves?add=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Technorati'>Share this on Technorati</a></li>
<li class='sexy-scriptstyle'><a class='external' expr:href='&quot;http://scriptandstyle.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Submit this to Script &amp; Style'>Submit this to Script &amp; Style</a></li>
<li class='sexy-myspace'><a class='external' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=http&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Post this to MySpace'>Post this to MySpace</a></li>
<li class='sexy-blinklist'><a class='external' expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Blinklist'>Share this on Blinklist</a></li>
<li class='sexy-friendfeed'><a class='external' expr:href='&quot;http://friendfeed.com/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on FriendFeed'>Share this on FriendFeed</a></li>
<li class='sexy-newsvine'><a class='external' expr:href='&quot;http://www.newsvine.com/_tools/seed&amp;save?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Seed this on Newsvine'>Seed this on Newsvine</a></li>
</ul>
<div style='clear:both;'/>
</div>
</b:if>

6.Now save your template and you are done.

The post How To Add Social Sexy Bookmarks v2 to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

Here I am going to add this share buttons below post title in my blogger blog.

First go to "Edit HTML" of your blog and Find ]]></b:skin> tag.

Add below code just above ]]></b:skin> tag:

.btt-socialshare{margin:10px 0}
.btt-socialshareul{margin:0!important;padding:0!important;list-style:none;list-style-type:none;line-height:1}
.btt-socialshareul li{margin:0 10px 0 0 !important;padding:3px 8px!important;list-style:none!important;list-style-type:none;display:inline-block}
.btt-socialshareul li.btt-share-this{padding:3px 8px 3px 0 !important}
.btt-socialshareul li.btt-facebook{background:#3c5b9b!important}
.btt-socialshareul li.btt-twitter{background:#2daae1!important}
.btt-socialshareul li.btt-google{background:#f63e28!important}
.btt-socialshareul li.btt-stumbleupon{background:#eb4924!important}
.btt-socialshareul li.btt-digg{background:#1b5891!important;margin:0!important}
.btt-socialshareul li a,.btt-socialshareul li a:visited{color:#fff!important;text-decoration:none!important;font-style:italic}
.btt-socialshareul li a:hover,.btt-socialshareul li a:active{color:#fff!important;text-decoration:underline!important}
.btt-socialshareul li p{margin:0}

Now find this line:

<b:includable id='post' var='post'>

Scroll down slowly until you see this line:

<div class='post-header-line-1'/>

Now add below code just after above line:

<b:if cond='data:blog.pageType == "item"'>
<div class='btt-socialshare'>
<ul class='btt-socialshareul' id='btt-socialshareul'>
<li class='btt-share-this'><p>Share This Article  </p></li>
<li class='btt-facebook'>
<a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' onclick='window.open(this.href,&quot;sharer&quot;,&quot;toolbar=0,status=0,width=626,height=436&quot;); return false;' rel='nofollow' title='Share this on Facebook'><p>Facebook</p></a>
</li>
<li class='btt-twitter'>
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url' rel='nofollow' title='Tweet This!'><p>Twitter</p></a>
</li>
<li class='btt-google'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,   &quot;&quot;, &quot;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&quot;);return false;' rel='nofollow' title='Share this on Google+'><p>Google+</p></a>
</li>
<li class='btt-stumbleupon'>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><p>Stumble</p></a>
</li>
<li class='btt-digg'>
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Digg this!'><p>Digg</p></a>
</li>
</ul>
</div>
</b:if>

Save your theme. Now social buttons will be displayed in post pages of your blog.

Find results will be look like this:

The post How to Add Simple Post Share Buttons to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

Tutorial Updated : 2013/01/22

Now follow the steps given below to add this share box for your blog.

1.Go to "Template" --> "Edit HTML" of your blog.

2.Click on "Expand Widget Templates"

3.Add this code just above <head> tag:

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'>
{lang: 'en-US'}
</script>

4.Now Scroll down to where you see below code:

5.Copy Share Box code given below and paste it just below the above code.

NOTE: If you can't find <div class='post-header-line-1'/> in your template, paste your "Share Box" code just before <data:post.body/> .

<b:if cond='data:blog.pageType == "item"'>

<style type='text/css'>
.multisharebox{background:none repeat scroll 0 0 #EFEFEF;float:right;margin:5px 0 3px 10px;padding:0 5px 0;text-shadow:0 1px 0 #FFF;width:260px;border:4px solid #d8dfea}
.multisharebox table{margin-bottom:0 !important}
.multisharebox td{padding:4px 3px !important}
.fb-like-boxtop{background:none repeat scroll 0 0 #EDEFF4;border:1px solid #D8DFEA;color:#000;float:right;font-size:11px;margin:0 0;padding:5px 10px;text-align:left;width:230px}
.fb-like-boxtop a{color:#000;text-decoration:none}
.fb-like-boxtop a:hover{color:#000;text-decoration:underline}
.fb-like-box{background:none repeat scroll 0 0 #EDEFF4;border:1px solid #D8DFEA;color:#000;float:right;font-size:11px;height:60px;margin:5px 0;overflow:hidden;padding:5px 10px;text-align:left;width:230px}
</style>

<!-- Perfect Share Box : Created by www.bloggertipandtrick.net  -->
<div class='multisharebox'>
<table><tr>
<td><table><tr>
<td><a class='twitter-share-button' data-count='vertical' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/>
<b:if cond='data:post.isFirstPost'>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'>
</script>
</b:if></td>
<td><script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=5&amp;r=&quot; + data:post.url'/></td>
<td><g:plusone size="tall" expr:href="data:post.canonicalUrl"/></td>
<td><a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></td>
</tr></table></td>
</tr><tr>
<td><div class='fb-like-boxtop'><a class='pin-it-button' count-layout='none' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It Now!</a>
<a href='javascript:void(run_pinmarklet())' style='height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;); e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script> <script src='http://platform.linkedin.com/in.js' type='text/javascript'/><script data-counter='right' expr:data-url='data:post.url' type='in/share'/> <a href='javascript:window.print();'><img src='http://4.bp.blogspot.com/-2gJyVWWzvxo/UP4jFrCs6-I/AAAAAAAAECY/WE5hMFoeSwA/s1600/printbutton.png'/></a></div></td>
</tr><tr>
<td><div class='fb-like-box'>
Do you like this post?
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=230&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:230px; height:40px;'/>
</div></td>
</tr></table>
</div>
<!-- Perfect Share Box : Created by www.bloggertipandtrick.net  -->

</b:if>

Note : This share box now will add to your Blogger post pages only. If you want to show it in every pages, then simply remove green lines from the code.

6. Save your template and you are done.

The post How To Add Perfect Share Box to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

If you like o add these Twitter official share button to your blogger blog,then follow the steps given below.

1.Login to your blogger Dashboard--> Design- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see below code:

4.Now Copy your "Twitter tweet button" code and paste it just below the above code.

NOTE: If you can't find <div class='post-header-line-1'/> in your template, paste your "Twitter tweet button" code just before <data:post.body/> .

Code 1 : Vertical Count

<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;margin-right:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="TWITTER-USERNAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</b:if>

Result:

Code 2 : Horizontal Count

<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;margin-right:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="TWITTER-USERNAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</b:if>

Result:

Code 3 : No Count

<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;margin-right:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="TWITTER-USERNAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</b:if>

Result:

Note :
Remember to replace "TWITTER-USERNAME" with your real Twitter username.

If you want to show Tweet buttons not only Post pages but also Home page,Archive pages,Label pages,etc... , then remove "<b:if cond='data:blog.pageType == "item"'>" and "</b:if>" from above codes.

5.Now save your template.

You can view more info from here:

http://twitter.com/goodies/tweetbutton

Want to build a custom tweet button for your site? Check out developer documentation for the Sharing API to provide the same Tweet Button sharing functionality with your own style :

http://dev.twitter.com/pages/tweet_button

The post How To Add Twitter Official Tweet Buttons to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

Twitter is a social networking and microblogging service, owned and operated by Twitter Inc., that enables its users to send and read other user messages called tweets. Tweets are text-based posts of up to 140 characters displayed on the author's profile page.

Now follow the steps given below to add this recent tweets widget to your website or blog.

1.Login to your blogger dashboard--> Design - -> Edit HTML.

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" charset="utf-8">

function showTweets(elem, username, number)
{
var html = '<ul>';

var tweetFeed = 'http://twitter.com/status/user_timeline/' + username + '.json?count=' + number + '&callback=?'
$.getJSON(tweetFeed, function(d)
{

$.each(d, function(i,item)
{
html+='<li>'+item.text+'</li>';
})
html+="</ul>";

elem.children().fadeOut('fast',function() {
elem.append(html);
})
})
}

$(function() {
$('#error').remove();
$('#preload').show();
showTweets($('#tweets'), 'btipandtrick', 5)
});

</script>

<style type="text/css">
#preload {display: none;}

#tweets ul li{
list-style-type:square;
list-style-position:inside;
list-style-image:url('http://4.bp.blogspot.com/_HJvXUqHmf9Y/TGISCT-W4yI/AAAAAAAAABI/VdnChTmVqUs/s1600/twitter.png');
margin:0 0 0;
padding:0 0 0;
}
</style>

NOTE :
btipandtrick : Replace this with your twitter username.

5 : Number of tweets must appear.

4.Now save your template.

5.Go to Layout --> Page Elements.

6.Click on 'Add a Gadget'.

7.Select 'HTML/Javascript' and add the code given below:

<div style="font-size:12px;font-family:Arial;">
<div id="tweets">
<h3 id="error">There was a problem fetching tweets</h3>
<h3 id="preload">Currently loading your tweets...</h3>
</div>
<ul><li style="list-style-type:none;"><a href="http://www.twitter.com/btipandtrick">Follow me on twitter</a></li></ul>
</div>

You are done.

The post How To Display Recent Twitter Tweets Using JQuery appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

1.Login to your blogger dashboard-->Layout > Page Elements

2.Click on 'Add a Gadget'.

3.Select 'HTML/Javascript' and add the one of code given below and click save.

1.Big Twitter followers counter button:

<script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=YOUR-TWITTER-USERNAME&style=bird"></script>

2.White Twitter followers counter button:

<script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=YOUR-TWITTER-USERNAME"></script>

3.Black Twitter followers counter button:

<script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=YOUR-TWITTER-USERNAME&style=black"></script>

4.Show your Twitter followers in Text:

<script type="text/javascript" language="javascript" src="http://twittercounter.com/widget/index.php?username=YOUR-TWITTER-USERNAME"></script>

The post Twitter Followers Counters For Blogger/Websites appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

<div class='post-header-line-1'/>

4.Now copy below code and paste it just after the above line.

For Large Button:

<div style='padding: 4px; float: right;'>
<script src='http://button.topsy.com/widget/retweet-big?nick=TWITTER-USERNAME&amp;url=' type='text/javascript'/>
</div>

For Small Button:

<div style='padding: 4px; float: right;'>
<script src='http://button.topsy.com/widget/retweet-small?nick=TWITTER-USERNAME&amp;url=' type='text/javascript'/>
</div>

Important : Replace TWITTER-USERNAME with your Twitter username.

5.Now save your template and you are done.

The post How To Add Topsy Retweet Counter Buttons For Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.