Blogger Share Button extended

enhance blogger new share buttons with more services such as Digg, Google Bookmarks, Reddit, Delicious, StumbleUpon

Screenshot: Extend Blogger Share Buttons

Edit Template, find ]]></b:skin> just before add this CSS code

/* Share Buttons
---------------------------------------------- */
.post-share-buttons{width:226px;}
.share-button2{display:block;width:21px;height:22px;float:left;background:url(http://lh6.ggpht.com/_ewREQ2z7SjM/TCSB-FQtCQI/AAAAAAAAD-s/Qye0anZ2Ajw/share_buttons2b.png) no-repeat left!important;overflow:hidden;margin-left:-1px;}
.sb-google{background-position:0 0!important;}
a:hover.sb-google{background-position:0 -22px!important;}
a:active.sb-google{background-position:0 -44px!important;}
.sb-stumbleupon{background-position:-21px 0!important;}
a:hover.sb-stumbleupon{background-position:-21px -22px!important;}
a:active.sb-stumbleupon{background-position:-21px -44px!important;}
.sb-delicious{background-position:-42px 0!important;}
a:hover.sb-delicious{background-position:-42px -22px!important;}
a:active.sb-delicious{background-position:-42px -44px!important;}
.sb-digg{background-position:-63px 0!important;}
a:hover.sb-digg{background-position:-63px -22px!important;}
a:active.sb-digg{background-position:-63px -44px!important;}
.sb-reddit{background-position:-84px 0!important;width:22px;}
a:hover.sb-reddit{background-position:-84px -22px!important;}
a:active.sb-reddit{background-position:-84px -44px!important;}


Find the following code in your template:

<span class='share-button-link-text'><data:top.shareToBuzzMsg/></span></a>

add the following code immediately after

<a class='share-button2 sb-google' expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add to Google Bookmarks'>
<span class='share-button-link-text'>Add to Google Bookmarks</span></a>
<a class='share-button2 sb-stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Submit to StumbleUpon'>
<span class='share-button-link-text'>Submit to StumbleUpon</span></a>
<a class='share-button2 sb-delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Post to del.icio.us'>
<span class='share-button-link-text'>Post to del.icio.us</span></a>
<a class='share-button2 sb-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'>
<span class='share-button-link-text'>Digg this</span></a>
<a class='share-button2 sb-reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Submit to Reddit'>
<span class='share-button-link-text'>Submit to Reddit</span></a>


news source: http://customize-your-blogger.blogspot.com/2010/06/how-to-create-bookmark-buttons.html

2 comments:

Roy Hutabarat said...

well, how to make the 'Save and Share!' section of yours?
can i get the script?

Jessica Allen said...

Is there any way to add custom icons (img) to the code?
I've been searching for some time with no luck

Post a Comment