Exclusive Share The Knowledge Social Bookmark Gadget For Blogger




| 18 comments

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='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://technorati.com/faves?add=&quot; + 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='&quot;http://buzz.yahoo.com/buzz?url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://twitthis.com/twit?url=&quot; + 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='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + 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 48x48 pixels.Make sure to check out more of our Social Bookmarking gadgets.

Drop your comments, views and questions below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

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. 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. 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
    1. I only have the tutorial for Blogger.Search for "Sexy Bookmarks" for the WP plugin.

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

    ReplyDelete
    Replies
    1. Sadek they are lightweight so they would not affect page load too much.

      Delete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us