Exclusive Share The Knowledge Social Bookmark Gadget For Blogger



Nearly every blog we visit has a different set of social bookmarking icons below their posts.Some Bloggers just go with a standard set of icons but with the selection of icons available you should use a more eye catching set.Readers are more likely to share your content when the bookmarking options catch their attention.

So this week I’m going to post 5 social bookmarking gadgets all using not only great icons but also the arrow message from the ‘Sexy Bookmarks’ collection.The gadgets i will publish are not the standard Sexy Bookmarks they are sets i created just for Spice Up Your Blog readers.This is to go with the Recent Launch of Social Icon Studio a site listing the best free social icons.

Starting today with the Share the Knowledge bookmark gadget through the week i will also bring you :

Sharing Is Caring Social Bookmarks
Share The Love Social Bookmarks
Sharing Is Sexy Social Bookmarks
Share The Wealth Social Bookmarks
Share The Knowledge Social Bookmarks

The Original :
WordPress Style Share The Love Bookmarks

Each widget will have a different set of icons as well as a different arrow message.The icons used in this gadget are the Premium Pack Free Social Icons.So lets get started with our Unique Sharing The Knowledge Social Bookmarks.

Live Demo – Demo Of share the knowledge bookmarks

Add The Share The Knowledge Social Gadget To Your Blog

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 – More Info)

<data:post.body/>

Step 3. Copy And Paste The Following Code Directly Below / Under <data:post.body/>

Scroll Box – Be Sure To Get All The Code.

<b:if cond=’data:blog.pageType == “item”‘>

<!–Start Share The Knowledge Bookmark http://www.spiceupyourblog.com–>
<a href=’http://www.spiceupyourblog.com’><img alt=’Best Blogger Tips’ src=’http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png’/></a><style>
img{border:0;}
#wrapper{width:488px; height:110px; background-image:url(http://2.bp.blogspot.com/_rKG-ziTSNUQ/TOFzLGt8lbI/AAAAAAAACJY/wwmlFp9QAGc/s1600/share+the+knowledge+bookmark+gadget.jpg); position:relative; background-repeat:no-repeat; background-color:transparent;}
#wrapper ul{position:absolute; width:600px; top:42px; left:3px; list-style-type:none;}
#wrapper li{float:left;}
</style>

<div id=’wrapper’>
<ul>
<li>

<!– Stumbleupon –>

<a expr:href='”http://www.stumbleupon.com/submit?url=” + data:post.url + “&title=” + data:post.title’ rel=’nofollow’ target=’_blank’><img alt=’Stumble This Post’ height=’48’ src=’http://4.bp.blogspot.com/_rKG-ziTSNUQ/TN_2ZUI3cZI/AAAAAAAACIs/_RB2J8f8KL0/s1600/Social_Stumble.png’ width=’48’/></a>
</li><li>
<!– Delicious –>

<a expr:href='”http://del.icio.us/post?url=” + data:post.url + “&title=” + data:post.title’ rel=’nofollow’ target=’_blank’><img alt=’Save Tis Post To Delicious’ height=’48’ src=’http://1.bp.blogspot.com/_rKG-ziTSNUQ/TN_2Yd_oS_I/AAAAAAAACIg/A8hWMRw5uCY/s1600/Social_Delicious.png’ width=’48’/></a>
</li><li>
<!– Reddit –>

<a expr:href='”http://www.reddit.com/submit?url=” + data:post.url + “&title=” + data:post.title’ rel=’nofollow’ target=’_blank’><img alt=’Share On Reddit’ height=’48’ src=’http://4.bp.blogspot.com/_rKG-ziTSNUQ/TN_2ZNj-QjI/AAAAAAAACIo/KNVpxuOc7xQ/s1600/Social_Reddit.png’ width=’48’/></a>
</li><li>
<!– Technorati –>

<a expr:href='”http://technorati.com/faves?add=” + data:post.url’ rel=’nofollow’ target=’_blank’><img alt=’Fave On Technorati’ height=’48’ src=’http://1.bp.blogspot.com/_rKG-ziTSNUQ/TOFyfnpf73I/AAAAAAAACJQ/ga4qfZj5Xps/s1600/Social_Technorati.png’ width=’48’/></a>
</li><li>
<!– Yahoo Buzz –>

<a expr:href='”http://buzz.yahoo.com/buzz?url=” + data:post.url + “&title=” + data:post.title’ rel=’nofollow’ target=’_blank’><img alt=’Buzz This Post’ height=’48’ src=’http://1.bp.blogspot.com/_rKG-ziTSNUQ/TN_2ZqCl10I/AAAAAAAACIw/_zO2ii0f_h8/s1600/Social_Yahoo_Buzz.png’ width=’48’/></a>
</li><li>
<!– Twitthis –>

<a expr:href='”http://twitthis.com/twit?url=” + data:post.url’ rel=’nofollow’ target=’_blank’><img alt=’Tweet This Post’ height=’48’ src=’http://3.bp.blogspot.com/_rKG-ziTSNUQ/TOFyqD0aa0I/AAAAAAAACJU/htmFv-6FCkI/s1600/Social_Twitter.png’ width=’48’/></a>
</li><li>
<!– Digg –>

<a expr:href='”http://digg.com/submit?url=” + data:post.url + “&title=” + data:post.title’ rel=’nofollow’ target=’_blank’><img alt=’Digg This Post’ height=’48’ src=’http://4.bp.blogspot.com/_rKG-ziTSNUQ/TN19nLV8ihI/AAAAAAAACHI/-Nh7a36NvyE/s1600/digg+48_48.png’ width=’48’/></a>
</li><li>
<!– Facebook –>

<a expr:href='”http://www.facebook.com/share.php?u=” + data:post.url + “&title=” + data:post.title’ rel=’nofollow’ target=’_blank’><img alt=’Share On Facebook’ height=’48’ src=’http://3.bp.blogspot.com/_rKG-ziTSNUQ/TN_2Y0zIffI/AAAAAAAACIk/X6Cs6hasj-U/s1600/Social_Facebook.png’ width=’48’/></a>
</li></ul></div><a href=’http://www.spiceupyourblog.com’ target=’_blank’><font color=’#ccc’ size=’small’>Blog Gadgets</font></a><br/>
<!–End Share The Knowledge Bookmark http://www.spiceupyourblog.com–>

</b:if>

Note. The code highlighted at the top and bottom in red sets the gadget to only be displayed on post pages, if you also want the gadget displayed on the home page remove that code.

Step 4. Save your template and check out your cool new share the knowledge bookmarks.

Check out SocialIconStudio.Com if you want to use different icons, you should use icons that are 48×48 pixels.Make sure to check out more of our Social Bookmarking gadgets.

 

18 comments:

  1. What code do I remove so that the white background becomes transparent?

    ReplyDelete

  2. Paul, I figured out how to remove the white background, but when I do, the “Share the Knowledge” text is also removed.

    Could you make this background transparent, so I can add it to my blog? THANKS!

    I LOVE your site!

    ReplyDelete

  3. Hi Yvonne, if it was as easy as removing some code for transparency it would be great but all browsers work different.However just for you i made a transparent PNG share the knowledge image :).

    Replace the current JPG image URL in your code, this one :

    http://2.bp.blogspot.com/_rKG-ziTSNUQ/TOFzLGt8lbI/AAAAAAAACJY/wwmlFp9QAGc/s1600/share+the+knowledge+bookmark+gadget.jpg

    With the new PNG image, this one :

    http://1.bp.blogspot.com/_rKG-ziTSNUQ/TOe0hkOHz7I/AAAAAAAACP4/pOEi2zUIeNw/s1600/share+the+knowledge+bookmark+gadget+trans.png

    Good luck !

    ReplyDelete

  4. I am using a template that I got from the internet, so shows up in my html 3 different time.

    I’m not sure of where to put the code you provided above. Please help. Thanks!

    ReplyDelete

  5. I figured it out! Thank you…

    ReplyDelete

  6. Lynette @ Cleverly SimpleJanuary 12, 2011 at 1:39 AM

    This is AWESOME! Thanks so much! I’ve been looking for something like this to add to my blog. www.cleverlysimple.com

    …and I did.

    ReplyDelete

  7. Hi, I love this icon. Can I use it on my WordPress blog?

    ReplyDelete

  8. Hello. I’ve gone to the HTML on my blog, but even after using the search feature I cannot find the code:

    I’d really like to add this to my blog: www.adisciplesguidetocommonsense.blogspot.com

    Thank you for any help or advice. Blessings!
    Aaron

    ReplyDelete

  9. @ Aaron – The code is definatly there Aaron, did you remember to tick the expand widget templates box before looking ?

    ReplyDelete

  10. Okay so I put the code in my template like you said and everything looks great except for this little blank white lined box that shows in all my posts and it says its your link I think.. Help!!!! =)

    ReplyDelete

  11. thanks for your tips..

    I love your site .. ๐Ÿ™‚

    ReplyDelete

  12. Virgilio Esquilla Jr.September 14, 2012 at 10:22 AM

    Thanks!..This is nice!..
    I will add this one to my blog.
    http://vinstervee.blogspot.com/

    But I’ll have to customize first.. ๐Ÿ™‚

    ReplyDelete

  13. I can’t believe it actually worked (or, I should say, that I was able to get it to work!) ๐Ÿ™‚ This made my day- thank you!

    ReplyDelete

  14. This was just what I was looking for! I am so impressed that I was able to get it to work (which is a compliment to you for making it so easy!). Thank you!

    ReplyDelete

  15. in others sites how to?

    ReplyDelete

     

    Replies

     

  16. I only have the tutorial for Blogger.Search for “Sexy Bookmarks” for the WP plugin.

    Delete

  17.  

  18. Well integrating these increases page-size dramatically. I prefer to use Add this widget which is great and light.

    ReplyDelete

     

    Replies

     

  19. Sadek they are lightweight so they would not affect page load too much.

    Delete

  20.