Exclusive Sharing Is Caring Social Bookmark Gadget For Blogger




| 19 comments

It's day five and the final day of our Sexy Bookmarks week on Spice Up Your Blog.This week in connection with the launch of Social Icon Studio we are publishing 5 unique social bookmarking gadgets.Each gadget uses a different set of social icons and a different arrow message from the sexy bookmarks collection.

Today's bookmarking gadget is all about hearts with the Heart shaped social icons and the Sharing Is Caring arrow message with hearts.We will add the gadget below all your posts where it will grab the attention of your readers and get them sharing your posts on their favorite social networks.So lets look at the gadgets we have published so far and the demo of the Sharing Is Caring gadget.

- 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

Live Demo - Click To See The Demo : Sharing Is Caring Bookmark Gadget

Add The Sharing Is Caring Bookmark Gadget To Your Blog


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 as shown in the video Below :

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 == &quot;item&quot;'>
<!--Start Sharing Is Caring Bookmarks 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://4.bp.blogspot.com/_rKG-ziTSNUQ/TOaed31zc8I/AAAAAAAACO8/534zFFe2u_0/s1600/sharing+is+caring+hearts.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>
<!-- 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://4.bp.blogspot.com/_rKG-ziTSNUQ/TOagqwq3OGI/AAAAAAAACPI/bME2dWPpn_0/s1600/facebook.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/TOaieu9vfSI/AAAAAAAACPk/78Ii_ygGBtU/s1600/digg.png' width='48'/></a>
</li>
<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://3.bp.blogspot.com/_rKG-ziTSNUQ/TOagKuDqChI/AAAAAAAACPA/lxZJOhJENrA/s1600/stumble.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://1.bp.blogspot.com/_rKG-ziTSNUQ/TOagslBDv6I/AAAAAAAACPY/TaoVTOxzWSo/s1600/twitter.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/TOagvrxLHNI/AAAAAAAACPg/Qr5X9G5Frb8/s1600/delicious.png' width='48'/></a>
</li><li>

<!-- Design Float -->

<a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Float This Post' height='48' src='http://1.bp.blogspot.com/_rKG-ziTSNUQ/TOagqf-dP2I/AAAAAAAACPE/RscvMGavqlU/s1600/designfloat.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://3.bp.blogspot.com/_rKG-ziTSNUQ/TOagrpbZVII/AAAAAAAACPQ/dngIdFG2arY/s1600/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='Bookmark On Technorati' height='48' src='http://4.bp.blogspot.com/_rKG-ziTSNUQ/TOagsHvPMEI/AAAAAAAACPU/dKQ9SgFZrec/s1600/technorati.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 Sharing Is Caring Bookmarks http://www.spiceupyourblog.com-->
</b:if>

Step 4. Save Your Template And Check Out Your New Sharing Is Caring Bookmark Gadget.

Remember SocialIconStudio.Com has lots more social icons you ca use with this or any Bookmark gadget.Make sure to check out more of our Social Media Posts.

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.

19 comments:

  1. I really want to use this on my blog; however, when I tried to add the code above, I got this message:

    More than one widget was found with id: PageList1. Widget IDs should be unique.

    can you help?

    ReplyDelete
  2. @ Kathie - That is odd.Ok add the bookmark gadget again and save your template.When you get the error search the code for pagelist1 and change that to pagelist10 then save.

    ReplyDelete
  3. Hi, thank u SO,SO much! I have added this tool, now my question is.... why doesn't it show up on the post? I mean it shows up when I go to the comments (embedded comments)... is there anyway I can get it just below the post?

    ReplyDelete
  4. @Manasi - I think you are referring to below the posts when they are viewed on your blogs home page.If you take a look at the code for the gadget above you will see i have a line of code at the top and a small bit of code at the bottom that are both red.If you remove these two pieces of code it will be displayed below the posts no matter how they are viewed.

    Paul.

    ReplyDelete
  5. Thanks again, Paul! Will try this asap :)

    ReplyDelete
  6. I love this! I've been looking for weeks for good looking bookmark links!

    One question: Is there any way to get the white background transparent or in another color somehow? My blog is a dark theme so the white really stands out...

    Thanks!
    hed

    ReplyDelete
  7. Uhmm.. i tried searching for the code but there wasn't any matching ones though

    ReplyDelete
  8. I was wondering if there is a way to add just the "sharing is caring" text to another set of buttons?

    ReplyDelete
  9. Hi, I just added this to my blog. I was wondering is there a way to have this go one line down instead of being so close to the end of blog post text?

    Also do you know how to make the read more button larger, bolder and also with a space? I only know how to put spaces into individual blogs so would be cool to know what html coding to put into the template in advance section of blogger for my own knowledge.

    Thanks

    ReplyDelete
  10. Hello. I've put this into my blog. But, instead of using the hearts icon, I use the pigtails icon that I downloaded from socialiconstudio.com. One thing that I'm wondering is, can you make a "share on blogger" code?

    ReplyDelete
  11. Nevermind about my last question. I have a new one hee hee :D
    How do you center it? I've tried the center and table align code but it doesn't work. Please help.

    ReplyDelete
  12. @ Redcherii - I haven't tested this I'm just checking mail on the go, were you see this in the code - #wrapper{width:488px; height:110px; - add this - #wrapper{width:488px; height:110px; text-align:center; - should do the trick.Your posts must be very wide if you need it centered, or very narrow i guess...

    ReplyDelete
  13. It's great!
    May I ask what was the font used?

    ReplyDelete
  14. It's a shame I really liked this but I have a black background, so I can't use it. :(

    ReplyDelete
  15. It does not even work on my blog. I followed the directions to a T and I got nothing. :(

    ReplyDelete
  16. I just installed it on my blog!Thanks so much :)

    ReplyDelete
  17. I love this but what is the code so that I can add a Google+1 share icon to it. I couldnt find an icon so I made one, but I need the code for it. :)

    Thanks

    ReplyDelete
  18. Hey i like to read your blog man great articles

    ReplyDelete



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