Stay Connected Stylish Rss Feed And Social Gadget For Blogger

In this post i will show you a much more simple way to display the Subscription options for your blog.The gadget has Three icons for your Rss Feed, Twitter Profile and Facebook Page proceeded by a handwriting Follow message with arrow.The icons are the standard design but with a caption, so along with the follow arrow this will be an eye catching addition to your blog.

Adding the gadget is easy and i will show you how to add it to your blogs sidebar or footer.I will also show you how to add it below all your posts, when someone reaches the end of a post if they like it they will often subscribe.The icons along with thousands more can be found on Social Icon Studio.

Screenshot :

Add Stylish Subscribe Section To Your Blog

Add Gadget To Blog Sidebar Or Footer

Step 1. In your Blogger dashboard click Design > Add A Gadget > Choose Html/Javascript.

Step 2. Copy and paste the code below into the Html/Javascript gadget :

<table border="0"><tbody>
<tr><td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHD2xSz5oFFGTOivgNPJjHgDfrEaEewu6VmaWnXWmcAWFoMU00Zj0-VBWasPc99hyphenhyphenH4HHmDBdnepB9LKsHmQdtHts1ErJ7ZJl0dFjWrirhPs2LFoAeJ0_6rQzUmAddIkBZNyO1PC6U03Lx/s1600/stay+connected.png" /></td><td>
<a target="_blank" href="FEED-URL-HERE" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPqzgCfRm80OKs7vngnti9ZSpKkC2vNfXKXKxlunjn7lJcv42uLbCM57dkN6xce8xtFGlCd0PE2oNPwYato1HrYEgteY_x5LgzZJzyNUZmjOjbDk4Pa8LvwDJbHpPD0aCOC5uHwxSOUyI/s1600/connect-rss-feed.png" /></a></td><td>
<a target="_blank" href="TWITTER-URL-HERE" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgagX2Zj37LetvUkFlJ27JXzgXKwHGOM_iTDZAEPiy47PcZUEqRMDimmDkapXOQdpGMGZFg4Nz5tYvq44SREByOOMaRyGg5PL1tJfTs6Xii8oU_HsF20lgzoM7uc9zNM6MNe8OdrULfERc/s1600/connect-twitter-follow.png" /></a></td><td>
<a target="_blank" href="FACEBOOK-URL-HERE" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ-vo_baDwHhGM61IOTuh29sKwXGUQabdpWu0oQ-0VBIn6A5u3ibsu2vlC4EdIKAUXWBE0HWQ3sLpnsZ2tHCHgCL-WEfXGxPiktiv6e-FIF_lmLmUWv6vVp9EpOp1CxjDA2CUaKxlCaso/s1600/connect-facebook-follow.png" /></a></td></tr>
</tbody></table>
<a href="http://www.createtheblogger.blogspot.com/"><img alt="Best Blogger Tips" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAH6CBD-AUjFNI-vLZwNgx-R5oKymOEbxMpRKUDY_tGPIrjCQB_Y-NuBAIq44oWLLOhs0GqbQlrMI1QBj64vvS8fxl5Uj85_hYSYszmiDx3fKku6yvgZNrOTluqeT5VAq6YH7BjhwbZ6sV/s1600/best+blogger+tips.png" /></a>

Important - You must add your Rss, Twitter and Facebook URLs.

Replace the text in red with the relevant URL.

Optional - If you have a narrow sidebar and just want the icons without the Stay Connected message remove the code highlighted in yellow. 

Step 3. Save the gadget and drag and drop into the desired position.

Add Below All Blog Posts

Step 1. In Your Blogger Dashboard Click Design > Edit Html > Tick The Expand Widget Templates Box.

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code):

<data:post.body/>

Step 3. Copy and Paste the following code directly Below / Under <data:post.body/>

<table border="0"><tbody>
<tr><td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHD2xSz5oFFGTOivgNPJjHgDfrEaEewu6VmaWnXWmcAWFoMU00Zj0-VBWasPc99hyphenhyphenH4HHmDBdnepB9LKsHmQdtHts1ErJ7ZJl0dFjWrirhPs2LFoAeJ0_6rQzUmAddIkBZNyO1PC6U03Lx/s1600/stay+connected.png" /></td><td>
<a href="FEED-URL-HERE" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPqzgCfRm80OKs7vngnti9ZSpKkC2vNfXKXKxlunjn7lJcv42uLbCM57dkN6xce8xtFGlCd0PE2oNPwYato1HrYEgteY_x5LgzZJzyNUZmjOjbDk4Pa8LvwDJbHpPD0aCOC5uHwxSOUyI/s1600/connect-rss-feed.png" /></a></td><td>
<a href="TWITTER-URL-HERE" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgagX2Zj37LetvUkFlJ27JXzgXKwHGOM_iTDZAEPiy47PcZUEqRMDimmDkapXOQdpGMGZFg4Nz5tYvq44SREByOOMaRyGg5PL1tJfTs6Xii8oU_HsF20lgzoM7uc9zNM6MNe8OdrULfERc/s1600/connect-twitter-follow.png" /></a></td><td>
<a href="FACEBOOK-URL-HERE" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ-vo_baDwHhGM61IOTuh29sKwXGUQabdpWu0oQ-0VBIn6A5u3ibsu2vlC4EdIKAUXWBE0HWQ3sLpnsZ2tHCHgCL-WEfXGxPiktiv6e-FIF_lmLmUWv6vVp9EpOp1CxjDA2CUaKxlCaso/s1600/connect-facebook-follow.png" /></a></td></tr>
</tbody></table>
<a href="http://www.createtheblogger.blogspot.com/"><img alt="Best Blogger Tips" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAH6CBD-AUjFNI-vLZwNgx-R5oKymOEbxMpRKUDY_tGPIrjCQB_Y-NuBAIq44oWLLOhs0GqbQlrMI1QBj64vvS8fxl5Uj85_hYSYszmiDx3fKku6yvgZNrOTluqeT5VAq6YH7BjhwbZ6sV/s1600/best+blogger+tips.png" /></a>

Important - You must add your Rss, Twitter and Facebook URLs.

Replace the text in red with the relevant URL.

Optional - If you have a narrow sidebar and just want the icons without the Stay Connected message remove the code highlighted in yellow.

Step 4. Save your template and your new subscribe options are below all your posts.

Check out more of our Best Blog Gadgets and Best Social Media Tips.

Drop You Comments Below.

Read More

7 Colored Twitter Counter Buttons For Blogger

Become a guest author on Create the Blogger.

The basic twitter counter button is probably the most popular social bookmarking tool used by Bloggers.Allowing readers to Tweet and ReTweet blog posts with the numbers displayed you usually find the buttons floating at the top and bottom of blog posts.With so many blogs using the twitter counter button they have almost become invisible to readers so adding a different looking retweet button to your blog seems like a great idea.In this post i will show you how you can choose from a selection of colored  Twitter counter buttons and add one to your blog.We will see how to float the colored Twitter button at the top of your posts wrapped in text, at the foot of your posts or on other sections.These buttons are from Twittley and as an added bonus when readers Tweet your posts they are also listed on the Twittley website.If you just want the standard Twitter Counter Button Click Here.

Add Colored Twitter Counter Button To Blogger

Step 1. In your dashboard click 'Design' > 'Edit Html' > Tick the 'Expand Widget Templates' Box.

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code):

<data:post.body/>

Step 3. Pick the color Twitter button you want and add the code for your choosen button Directly Above / Before <data:post.body/> 

Note - All The Buttons Are Working Try Them Out !

1. Blue Twitter Counter Button.

<div style='float:left; margin-right:3px;'>
<script>var twittleystyle = "0";</script><script src='http://twittley.com/button/button.js'/>
</div>

2. Green Twitter Counter Button.

<div style='float:left; margin-right:3px;'>
<script>var twittleystyle = "1";</script><script src='http://twittley.com/button/button.js'/>
</div>

3. Orange Twitter Counter Button.

<div style='float:left; margin-right:3px;'>
<script>var twittleystyle = "2";</script><script src='http://twittley.com/button/button.js'/>
</div>

4. Pink Twitter Counter Button.

<div style='float:left; margin-right:3px;'>
<script>var twittleystyle = "3";</script><script src='http://twittley.com/button/button.js'/>
</div>

5.Red Twitter Counter Button.

<div style='float:left; margin-right:3px;'>
<script>var twittleystyle = "4";</script><script src='http://twittley.com/button/button.js'/>
</div>

6. Purple Twitter Counter Button.

<div style='float:left; margin-right:3px;'>
<script>var twittleystyle = "5";</script><script src='http://twittley.com/button/button.js'/>
</div>

7. Yellow Twitter Counter Button.

<div style='float:left; margin-right:3px;'>
<script>var twittleystyle = "6";</script><script src='http://twittley.com/button/button.js'/>
</div>

Twitter Button Position

OK i have added code to the buttons to make them float at the top left of your posts.If thats were you want your button save your template and your done. Here are other placement options :

Float the buttons at the top right of your posts - Change float:left to float:right & change margin-right to margin-left.

Position the buttons at the bottom of your posts - Place your button code Below / Under the <data:post.body/> code you found (You can use the same technique as above to move the button to the left and right).

Use the button elsewhere on your Blog - Only use the middle section of code like this : <script>var twittleystyle = "5";</script><script src='http://twittley.com/button/button.js'/>

That's your seven coloured Twitter counter buttons, let us know what you think by adding a comment below !

Read More

Subscribe And Follow Icons Gadget Using Sprite Effect For Blogger

Become a guest author on Create the Blogger.

A friend had asked me for help implementing some social icons using a sprite technique she had seen a tutorial for on Rob Cubbon's blog.I came to her aid and the result was great and using sprites has some advantages.By using a sprite image we can easily display the icons in black and white they then change to color on hover.Also we only use one image instead of 14 which helps with the load speed of your blog.It worked so well I decided to provide the tutorial for all our readers.Once added to your Blogger sidebar it will display icons for Google +, Your Rss Feed, Email Feed, Facebook, Twitter, LinkedIn and YouTube.

Add Css Sprite Social Icons To Your Blog

Remember Always Back Up Your Template Before You Make Changes

Step 1. - In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Customize > Advanced > Add Css

Step 2. Copy and Paste the following code into the Css Section

/*Social Sprite Css*/
#head-soc ul li {list-style :none; padding: 0 0 0 12px; float: right;}
#head-soc ul li a {text-indent: -9999px; font-size: 0; line-height: 0; overflow: hidden ; height: 32px; width: 32px ;border: 0; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihI9ZuimAz69cGSgbJNW7zn2JMRe4cXaOARwIxQ6Mguj7GkGez5n4mqvJDp80os6EaGwJfWTAntTptLVS7KEJwzJRgPrlRV5QTUCYekbeqD9-v3ck3NQdQX210uhFuVqkzw5KpJh_G1y7a/s1600/spice-up-blog-sprite.gif) no-repeat; display: block;}

#head-soc li#g a {background-position: 0px 0px;} 
#head-soc li#g a:hover {background-position: 0px -32px;}

#head-soc li#rss a {background-position: -32px 0px;}
#head-soc li#rss a:hover {background-position: -32px -32px;}

#head-soc li#sub a {background-position: -64px 0px;}
#head-soc li#sub a:hover {background-position: -64px -32px;}

#head-soc li#fb a {background-position: -96px 0px;}
#head-soc li#fb a:hover {background-position: -96px -32px;}

#head-soc li#twit a {background-position: -128px 0px;}
#head-soc li#twit a:hover {background-position: -128px -32px;}

#head-soc li#li a {background-position: -160px 0px;}
#head-soc li#li a:hover {background-position: -160px -32px;}

#head-soc li#youtube a {background-position: -192px 0px;}
#head-soc li#youtube a:hover {background-position: -192px -32px;}
/*Social Sprite Css http://www.createtheblogger.blogspot.com */

Step 3. You now need to add the html for the icons and add the URLs for your social profiles.

Go to your layout page, Choose add a gadget for your sidebar, choose HTML/Javascript from the list and paste the following code into the HTML/Javascript gadget.You will need to change the URLs highlighted in yellow to yours then save.

<!--Social Sprite Html-->
<div id="head-soc">
<ul>
<li id="g"><a href="https://plus.google.com/u/0/114664599119980888174/posts">Google+</a></li>
<li id="rss"><a href="http://feeds.feedburner.com/createtheblogger">RSS Feed</a> </li>
<li id="sub"><a href="http://feedburner.google.com/fb/a/mailverify?uri=createtheblogger&loc=en_US">Subscribe</a></li>
<li id="fb"><a href="http://www.facebook.com/pomoczabloggere">Facebook</a></li>
<li id="twit"><a href="https://twitter.com/BestBloggerTips">Twitter</a></li>
<li id="li"><a href="http://www.linkedin.com/profile/view?id=62595960">LinkedIn</a></li>
<li id="youtube"><a href="YOUR YOUTUBE ADRESS">YouTube</a></li>
</ul>
</div>
<!--Social Sprite Html http://www.createtheblogger.blogspot.com-->

And that's a very tidy set of social and subscribe icons with a cool effect using a quick loading sprite image.

Drop Your Comments Below.

Read More

New Version Share The Love Sexy Bookmarks V2 For Blogger

Become a guest author on Create the Blogger.

In this post i will show you how to add the latest version of the popular 'Sexy Bookmarks' social Bookmarking Gadget by Shareaholic to Blogger.The latest version 'V2' has seen the addition of more Bookmarking options and a two tier effect when hovered over.Now the most popular Bookmarking icons are visible and a second selection pop out underneath.The new V2 Sexy Bookmarks Gadget has a scribbled 'Share The Love' caption.In all 18 icons are included like Facebook, Twitter, Digg, Stumble Upon, Mixx, Technorati, Rss, Delicious to name a few.Once added to your blog the Share The Love Sexy Bookmarks will appear below every post.

Update - We have published an even newer version with lots of options find it here - Complete Animated Sexy Social Bookmarks V3 For Blogger 

The previous Sexy Bookmarks gadget was allowed to expire by the designer.If you used the previous 'Sharing Is Caring' gadget from this Blog you can replace that code with the code for Share The Love V2.For extra instructions on removing the old gadget see the original post Here.

Add V2 Share The Love Sexy Bookmark Gadget Now !

Step 1. In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Now Proceed > Tick The Expand Widget Templates Box

Step 2. Find this piece of code in your blogs html: (Click 'CTRL' and 'F' for a search bar to find the code): 

</head>

Step 3. Now add the code below Directly Before / Above </head> (Make Sure Your Get All the Code)

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function() {
// xhtml 1.0 strict way of using target _blank
jQuery(&#39;.sexy-bookmarks a.external&#39;).attr(&quot;target&quot;, &quot;_blank&quot;);
// this block sets the auto vertical expand when there are more than
// one row of bookmarks.
var sexyBaseHeight=jQuery(&#39;.sexy-bookmarks&#39;).height();
var sexyFullHeight=jQuery(&#39;.sexy-bookmarks ul.socials&#39;).height();
if (sexyFullHeight&gt;sexyBaseHeight) {
jQuery(&#39;.sexy-bookmarks-expand&#39;).hover(
function() {
jQuery(this).animate({
height: sexyFullHeight+&#39;px&#39;
}, {duration: 400, queue: false});
},
function() {
jQuery(this).animate({
height: sexyBaseHeight+&#39;px&#39;
}, {duration: 400, queue: false});
}
);
}
// autocentering
if (jQuery(&#39;.sexy-bookmarks-center&#39;)) {
var sexyFullWidth=jQuery(&#39;.sexy-bookmarks&#39;).width();
var sexyBookmarkWidth=jQuery(&#39;.sexy-bookmarks:first ul.socials li&#39;).width();
var sexyBookmarkCount=jQuery(&#39;.sexy-bookmarks:first ul.socials li&#39;).length;
var numPerRow=Math.floor(sexyFullWidth/sexyBookmarkWidth);
var sexyRowWidth=Math.min(numPerRow, sexyBookmarkCount)*sexyBookmarkWidth;
var sexyLeftMargin=(sexyFullWidth-sexyRowWidth)/2;
jQuery(&#39;.sexy-bookmarks-center&#39;).css(&#39;margin-left&#39;, sexyLeftMargin+&#39;px&#39;);
}
});
</script>

<style type='text/css'>
div.sexy-bookmarks{margin:20px 0 0 0; border: 0;outline: none;clear:both !important}
div.sexy-bookmarks-expand{height:29px; overflow:hidden}
.sexy-bookmarks-bg-sexy, .sexy-bookmarks-bg-love{background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzcXidhouwROGtwJxEcnhMrR59uJq9XacBwHfOaDGAFsggJ70W8xNyQGjLbCAOm_hCy8lmknF_69iQhyEtznEUgJ6x-j8TGE0N8vxOwCm3kYsv7KIsHl1Nfb-BWKByspvelQD00e_r29EY/&#39;) !important; background-repeat:no-repeat}
div.sexy-bookmarks-bg-love{padding:26px 0 0 10px; background-position:left -1148px !important}
div.sexy-bookmarks ul.socials{width:95% !important; margin:0 !important; padding:0 !important; float:left}
div.sexy-bookmarks ul.socials 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.socials li:before, div.sexy-bookmarks ul.socials li:after, div.sexy-bookmarks ul.socials li a:before, div.sexy-bookmarks ul.socials li a:after{content:none !important}
div.sexy-bookmarks ul.socials a{display:block !important; width:60px !important; height:29px !important; text-indent:-9999px !important; background-color:transparent !important}
div.sexy-bookmarks ul.socials 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(&#39;http://bnote.googlecode.com/files/sexy-sprite-new.png&#39;) 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
.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>

Step 4. Find The following piece of code in your blogs html :

<data:post.body/>

Step 6. Add the code below Directly After / Below <data:post.body/> (Make Sure You Get All The Code)

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<a href='http://www.createtheblogger.blogspot.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAH6CBD-AUjFNI-vLZwNgx-R5oKymOEbxMpRKUDY_tGPIrjCQB_Y-NuBAIq44oWLLOhs0GqbQlrMI1QBj64vvS8fxl5Uj85_hYSYszmiDx3fKku6yvgZNrOTluqeT5VAq6YH7BjhwbZ6sV/s1600/best+blogger+tips.png'/></a><div class='sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love' style='margin:20px 0 0 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;'>
<ul class='socials'>
<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><p><a href='http://www.createtheblogger.blogspot.com/2010/10/sexy-bookmark-share-love-gadget.html' target='_blank'><font color='#ccc' size='small'>Blogger Tips - Get This Gadget</font></a></p>

</b:if>

Note 1  - The code at the top and bottom in Red makes the gadget only appear on the post page of your blog and not on the home page to help with blogs using Read More and Post Summary's.If you want the gadget below your posts on the Home Page also just remover the Red code.

Note 2 - If you feel comfortable changing the code you can move around the position of the buttons to have your favorite Bookmarking sites at the top.

Step 7 Save Your Template 

And the new Share The Love sexy bookmarks are in place !

Drop Your Comments Below.

Read More