New Version Share The Love Sexy Bookmarks V2 For Blogger




| 15 comments

social network listIn this post i will show you how to add the latest version of the popular 'Sexy Bookmarks' social Bookmarking Gadget by Shareaholic to Blogger.The latest version 'V2' has seen the addition of more Bookmarking options and a two tier effect when hovered over.Now the most popular Bookmarking icons are visible and a second selection pop out underneath.The new V2 Sexy Bookmarks Gadget has a scribbled 'Share The Love' caption.In all 18 icons are included like Facebook, Twitter, Digg, Stumble Upon, Mixx, Technorati, Rss, Delicious to name a few.Once added to your blog the Share The Love Sexy Bookmarks will appear below every post.

Demo - You Can See A Working Demo By Clicking Here.

Update - We have published an even newer version with lots of options find it here - Complete Animated Sexy Social Bookmarks V3 For Blogger

The previous Sexy Bookmarks gadget was allowed to expire by the designer.If you used the previous 'Sharing Is Caring' gadget from this Blog you can replace that code with the code for Share The Love V2.For extra instructions on removing the old gadget see the original post Here.

share the love sexy bookmarks blogger

Add V2 Share The Love Sexy Bookmark Gadget Now !


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 this piece of code in your blogs html:
(Click 'CTRL' and 'F' for a search bar to find the code - More Info)

</head>

Step 3. Now add the code below Directly Before / Above </head>

Scroll Box - Make Sure Your Get All the Code
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function() {
// xhtml 1.0 strict way of using target _blank
jQuery(&#39;.sexy-bookmarks a.external&#39;).attr(&quot;target&quot;, &quot;_blank&quot;);
// this block sets the auto vertical expand when there are more than
// one row of bookmarks.
var sexyBaseHeight=jQuery(&#39;.sexy-bookmarks&#39;).height();
var sexyFullHeight=jQuery(&#39;.sexy-bookmarks ul.socials&#39;).height();
if (sexyFullHeight&gt;sexyBaseHeight) {
jQuery(&#39;.sexy-bookmarks-expand&#39;).hover(
function() {
jQuery(this).animate({
height: sexyFullHeight+&#39;px&#39;
}, {duration: 400, queue: false});
},
function() {
jQuery(this).animate({
height: sexyBaseHeight+&#39;px&#39;
}, {duration: 400, queue: false});
}
);
}
// autocentering
if (jQuery(&#39;.sexy-bookmarks-center&#39;)) {
var sexyFullWidth=jQuery(&#39;.sexy-bookmarks&#39;).width();
var sexyBookmarkWidth=jQuery(&#39;.sexy-bookmarks:first ul.socials li&#39;).width();
var sexyBookmarkCount=jQuery(&#39;.sexy-bookmarks:first ul.socials li&#39;).length;
var numPerRow=Math.floor(sexyFullWidth/sexyBookmarkWidth);
var sexyRowWidth=Math.min(numPerRow, sexyBookmarkCount)*sexyBookmarkWidth;
var sexyLeftMargin=(sexyFullWidth-sexyRowWidth)/2;
jQuery(&#39;.sexy-bookmarks-center&#39;).css(&#39;margin-left&#39;, sexyLeftMargin+&#39;px&#39;);
}
});
</script>

<style type='text/css'>
div.sexy-bookmarks{margin:20px 0 0 0; border: 0;outline: none;clear:both !important}
div.sexy-bookmarks-expand{height:29px; overflow:hidden}
.sexy-bookmarks-bg-sexy, .sexy-bookmarks-bg-love{background-image:url(&#39;http://1.bp.blogspot.com/_T46SliM0-PI/TCFkPDH5OYI/AAAAAAAAAeM/ezhvTzyOva4/sexytrans.png&#39;) !important; background-repeat:no-repeat}
div.sexy-bookmarks-bg-love{padding:26px 0 0 10px; background-position:left -1148px !important}
div.sexy-bookmarks ul.socials{width:95% !important; margin:0 !important; padding:0 !important; float:left}
div.sexy-bookmarks ul.socials li{display:inline !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:60px !important; cursor:pointer !important; padding:0 !important}
div.sexy-bookmarks ul.socials li:before, div.sexy-bookmarks ul.socials li:after, div.sexy-bookmarks ul.socials li a:before, div.sexy-bookmarks ul.socials li a:after{content:none !important}
div.sexy-bookmarks ul.socials a{display:block !important; width:60px !important; height:29px !important; text-indent:-9999px !important; background-color:transparent !important}
div.sexy-bookmarks ul.socials a:hover{background-color:transparent !important}
.sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumbleupon, .sexy-stumbleupon:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoobuzz, .sexy-yahoobuzz:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-scriptstyle, .sexy-scriptstyle:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-comfeed, .sexy-comfeed:hover, .sexy-newsvine, .sexy-newsvine:hover, .sexy-linkedin, .sexy-linkedin:hover, .sexy-google, .sexy-google:hover, .sexy-friendfeed, .sexy-friendfeed:hover{background:url(&#39;http://bnote.googlecode.com/files/sexy-sprite-new.png&#39;) no-repeat !important;border: 0;outline: none;}
.sexy-digg{background-position:-980px bottom !important}
.sexy-digg:hover{background-position:-980px top !important}
.sexy-reddit{background-position:-700px bottom !important}
.sexy-reddit:hover{background-position:-700px top !important}
.sexy-stumbleupon{background-position:-630px bottom !important}
.sexy-stumbleupon:hover{background-position:-630px top !important}
.sexy-delicious{background-position:-1190px bottom !important}
.sexy-delicious:hover{background-position:-1190px top !important}
.sexy-yahoobuzz{background-position:-1120px bottom !important}
.sexy-yahoobuzz:hover{background-position:-1120px top !important}
.sexy-blinklist{background-position:-1260px bottom !important}
.sexy-blinklist
.sexy-technorati{background-position:-560px bottom !important}
.sexy-technorati:hover{background-position:-560px top !important}
.sexy-myspace{background-position:-770px bottom !important}
.sexy-myspace:hover{background-position:-770px top !important}
.sexy-twitter{background-position:-490px bottom !important}
.sexy-twitter:hover{background-position:-490px top !important}
.sexy-facebook{background-position:-1330px bottom !important}
.sexy-facebook:hover{background-position:-1330px top !important}
.sexy-mixx{background-position:-840px bottom !important}
.sexy-mixx:hover{background-position:-840px top !important}
.sexy-scriptstyle{background-position:-280px bottom !important}
.sexy-scriptstyle:hover{background-position:-280px top !important}
.sexy-designfloat{background-position:-1050px bottom !important}
.sexy-designfloat:hover{background-position:-1050px top !important}
.sexy-newsvine{background-position:left bottom !important}
.sexy-newsvine:hover{background-position:left top !important}
.sexy-google{background-position:-210px bottom !important}
.sexy-google:hover{background-position:-210px top !important}
.sexy-comfeed{background-position:-420px bottom !important}
.sexy-comfeed:hover{background-position:-420px top !important}
.sexy-linkedin{background-position:-70px bottom !important}
.sexy-linkedin:hover{background-position:-70px top !important}
.sexy-friendfeed{background-position:-1750px bottom !important}
.sexy-friendfeed:hover{background-position:-1750px top !important}
.sexy-link{ margin-left:25px; float:left}
.sexy-link A{padding:10px 0; width:470px; text-align:right; border:0; outline:none}</style>


Step 4. Find The following piece of code in your blogs html :

<data:post.body/>

Step 6. Add the code below Directly After / Below <data:post.body/>

Scroll Box - Make Sure You Get All The Code.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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><div class='sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love' style='margin:20px 0 0 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;'>
<ul class='socials'>
<li class='sexy-delicious'><a class='external' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on del.icio.us'>Share this on del.icio.us</a></li>
<li class='sexy-digg'><a class='external' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Digg this!'>Digg this!</a></li>
<li class='sexy-stumbleupon'><a class='external' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'>Stumble upon something good? Share it on StumbleUpon</a></li>
<li class='sexy-reddit'><a class='external' expr:href='&quot;http://reddit.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Reddit'>Share this on Reddit</a></li>
<li class='sexy-google'><a class='external' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Add this to Google Bookmarks'>Add this to Google Bookmarks</a></li>
<li class='sexy-twitter'><a class='external' expr:href='&quot;http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@NAME)&quot;' rel='nofollow' title='Tweet This!'>Tweet This!</a></li>
<li class='sexy-facebook'><a class='external' expr:href='&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Facebook'>Share this on Facebook</a></li>
<li class='sexy-mixx'><a class='external' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url' rel='nofollow' title='Share this on Mixx'>Share this on Mixx</a></li>
<li class='sexy-comfeed'><a class='external' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='nofollow' title='Subscribe'>Subscribe</a></li>
<li class='sexy-yahoobuzz'><a class='external' expr:href='&quot;http://buzz.yahoo.com/submit/?submitUrl=&quot; + data:post.url' rel='nofollow' title='Buzz up!'>Buzz up!</a></li>
<li class='sexy-linkedin'><a class='external' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Linkedin'>Share this on Linkedin</a></li>
<li class='sexy-designfloat'><a class='external' expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Submit this to DesignFloat'>Submit this to DesignFloat</a></li>
<li class='sexy-technorati'><a class='external' expr:href='&quot;http://technorati.com/faves?add=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Technorati'>Share this on Technorati</a></li>
<li class='sexy-scriptstyle'><a class='external' expr:href='&quot;http://scriptandstyle.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Submit this to Script &amp; Style'>Submit this to Script &amp; Style</a></li>
<li class='sexy-myspace'><a class='external' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=http&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Post this to MySpace'>Post this to MySpace</a></li>
<li class='sexy-blinklist'><a class='external' expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Blinklist'>Share this on Blinklist</a></li>
<li class='sexy-friendfeed'><a class='external' expr:href='&quot;http://friendfeed.com/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on FriendFeed'>Share this on FriendFeed</a></li>
<li class='sexy-newsvine'><a class='external' expr:href='&quot;http://www.newsvine.com/_tools/seed&amp;save?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Seed this on Newsvine'>Seed this on Newsvine</a></li>
</ul><div style='clear:both;'/></div><p><a href='http://www.spiceupyourblog.com/2010/10/sexy-bookmark-share-love-gadget.html' target='_blank'><font color='#ccc' size='small'>Blogger Tips - Get This Gadget</font></a></p>
</b:if>

Note 1  - The code at the top and bottom in Red makes the gadget only appear on the post page of your blog and not on the home page to help with blogs using Read More and Post Summary's.If you want the gadget below your posts on the Home Page also just remover the Red code.

Note 2 - If you feel comfortable changing the code you can move around the position of the buttons to have your favorite Bookmarking sites at the top.

Step 7 .Save Your Template and the new Share The Love sexy bookmarks are in place !

We have a selection of Sexy Bookmarks gadgets exclusive to Spice Up Your Blog Readers Check Them Out Here :

- 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

Drop Your Comments 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.

15 comments:

  1. hi there, I love this, but when I tried it, I got the following error message:

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

    can you help?

    ReplyDelete
  2. Nice friends..thanks for this information...good job..

    ReplyDelete
  3. Thanks so much for posting this, I've just added to my blog. HOWEVER, I am running into trouble with it picking up the post titles correctly if there's an apostrophe. For example, the twitter link should say "Reading: drey's library etc etc etc". Instead it says "Reading: drey/". The same slash shows up whenever it runs into the first apostrophe, and the title is then truncated. Please help, I can't figure out how to fix this! :(

    ReplyDelete
  4. First of all, this not a spam post.
    I love your content and blog design.
    This is the sharing info I've been
    searching for on google.

    thanks,

    ReplyDelete
  5. @ Lonnie - Why would i think it is a spam comment, no links or keywords added looking for link juice ? You want to see my comment moderation page, then you would know spam ! Thanks for your comment and your welcome to comment anytime.

    ReplyDelete
  6. I followed directions exactly and it is not working.
    www.savingwithsybil.com

    ReplyDelete
  7. Thanks body, it's working ^^

    ReplyDelete
  8. It doesnt work for my new template :o

    Is there any way to fix it? http://perlebune.blogspot.com

    ReplyDelete
  9. Great post and easily installed. Thanks!

    ReplyDelete
  10. This is Good..but this not work on my site...its my site had a problem.

    ReplyDelete
  11. LoL.. Easier than i thought thanks paul.

    ReplyDelete
  12. Thanks for sharing this. I love it but am having some problems - the buttons appear fine and seem to work but the text saying "share the love" is missing....any ideas on why?

    ReplyDelete
  13. can i use it on my personal website

    ReplyDelete
  14. Done installing it but the word Share the love doesnt exist, Can you please help me?

    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