Friday, January 21, 2011

Bounce And Share Widget For Blogger

You might have noticed the beautiful sharing widget on 1001-Tricks-India blog. You can add the same bounce and share widget in your blogger blogs with some easy tweaks.

bounce-share-widget



1.Find:

</head>
Add the following code below that:
<!--BOUNCING-ICONS-STARTS-->
<link href='http://dl.dropbox.com/u/17063552/blogosphere-journal/screen2.css' media='all' rel='stylesheet' type='text/css'/>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/17063552/blogosphere-journal/bounceandshare-execute.js' type='text/javascript'/>
<!--BOUNCING-ICONS-ENDS-->
2.Find:
<data:post.body/>
Add the following code below that:
<!--SOCIAL-BOOKMARKING-BUTTONS--><br/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center>
<ul id='nav-shadow'>
<li class='button-color-1'><a expr:href='&quot;http://twitter.com/home/?status=Currently reading-&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank' title='Tweet This Post'/></li>
<li class='button-color-2'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='button-color-3'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='button-color-4'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='button-color-5'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li></ul></center>
</b:if>
<!--SOCIAL-BOOKMARKING-BUTTONS-->

No comments:

Post a Comment