0 [Blogger] How to add subsribe widget with RSS,Facebook,Twitter, and Email Subscription [Tricks][Customize ]

 
Wasup buddies. This is one of my favorite placement of social bookmarking buttons i.e beside Adsense ad unit. I previously post Add 'AddThis' Social Bookmarking Buttons Below Each Blogger Post. But i believe the trick today that i am sharing is pretty professional looking and uses up the empty place at the right of Adsense ad.

Lets see how we can add this widget to our blog. Note that i will be showing the complete widget with Adsense placement with social bookmarking buttons.

Step 1: (Make a new ad Unit)

First make your self a new Adsense ad unit with dimensions (300x250) and Convert it so that it can be used in blogger template. Save the code with your self in notepad or any other program. We will add that code later in our widget.

Step 2: (Placing code 1)

Go to Design >> Edit HTML and tick the check box. Do download the template for backup purposes in case you want to restore to original position.

Now search for the following code.

]]></b:skin>

Once you find it, paste the following code just above it.

.ads{margin-bottom:10px; border-top:solid 1px #DEDEDE; padding-top:10px; font-size:13px;}
.ads-right-min{border-left:solid 1px #DEDEDE; height:250px; padding-left:10px;}
.ads-right-min a:link,
.ads-right-min a:visited,
.bottom-share-links a:link,
.bottom-share-links a:visited{
font-size:12px;
color:#222;
display:block;
height:22px;
line-height:22px;
margin-bottom:16px;
padding-left:32px;
}
.ads-right-min a:hover,
.bottom-share-links a:hover{color:#666;}
.mini-tech{background:url(http://lh6.ggpht.com/_TqPdHmAEwTM/SrVsIDBoz7I/AAAAAAAAFqw/UpGK_0UQUZg/technorati.gif) no-repeat;}
.mini-facebook{background:url(
http://lh4.ggpht.com/_TqPdHmAEwTM/SrXQ3G_uRnI/AAAAAAAAFq0/ktY0xwRy4Oo/fb.gif
) no-repeat;}
.mini-tweet{background:url(
http://lh5.ggpht.com/_TqPdHmAEwTM/SrVkkLNvMlI/AAAAAAAAFqs/S-UYpTlrZa8/tweet.gif) no-repeat;}
.mini-del{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVkyMFX3w-dGDfU0suQfUl2ZPsa_EQns35IXqwBK9-_zYWuLZZJ_qbaWl9yEMK842RXWuO4Q3RmToEZaAK20_Pn3BwoytwqRsX3ZHbP7ioz0Z6dBlZRS0REYDy2bduLwqzsJOxseeX6hU/s800/delicious_icon.jpg) no-repeat;}
.mini-stumble{background:url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi19s4PK7bkLmSNH9KEX10OVto5fxo7jL1WtqGBPtfMuXac1ROIjyLfI9ulT75_gYFe1zQ19Y61S3gw3MU9UzxPGQBxB_0a5umV-xjqoyQk2oWyqRG9vil6laI5bpdw94SpvVPtxrqzI7Q/s800/stumbleupon%20icon.png) no-repeat;}
.mini-digg{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQgYMnCltM5S5mHX6Wt1oQRRntZLRGQB6MbWlVnK-W17v1qzZD9_sftAdRGFl8-T-8u2_NUOcTi6OVANA6IkeezabiNBpHdemFuyfxQbrSvglLlHEqf7aEbg1EsOcAaJ0gAOsAGG89Jqg/s800/Digg_icon.png) no-repeat;}
.flt-wdt{
position:fixed;
margin-right:10px;
left:0;
top:40%;
}
.flt-wdt img{
float:left;
clear:left;
margin:5px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.flt-wdt img:hover{

Step 3: (Placing code 2)

Now search for the following code

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

 Now just below the above code paste the following widget code.

/*** SSB Social Bookmarking Widget Beside Adsense Code START ***/
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='ads'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td width='354'>
YOUR ADSENSE CODE
</td>
<td><div class='ads-right-min'>
<a class='mini-del' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'
title='Add To Del.icio.us'>Add This To Del.icio.us</a>
<a class='mini-tweet' expr:href='&quot;http://twitter.com/home?status=Reading &quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank'
title='Post this article on Twitter'>Tweet/ReTweet This</a>
<a class='mini-facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'
target='_blank' title='Share On Facebook'>Share on Facebook</a>
<a class='mini-stumble' expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'
target='_blank' title='Stumble This'>StumbleUpon This</a>
<a class='mini-tech' expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url' target='_blank' title='Add To Technorati'>Add to
Technorati</a>
<a class='mini-digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'
target='_blank' title='Digg This'>Digg This</a>
</div>
</td>
</tr>
</table>
</div>
</b:if>
/*** SSB Social Bookmarking Widget Beside Adsense Code END***/

Replace the text  YOUR ADSENSE CODE with your Adsense converted code.


That's all! Now finally click save template. Hope you liked the widget as i liked it. Share you views about it in the comment section below :)

Posted in: add,and,blogger,customize,email,facebook,rss,subscription,subsribe,tricks,twitter,widget