The Complete Animated Sexy Social Bookmarks V3 For Blogger




| | 77 comments

The Sexy Bookmarks range, so called as the very first gadget had the 'Sharing Is Sexy' message is probably the most eye catching Social Sharing Widget available.On Spice Up Your Blog i have covered a few versions and even used the Arrow Messages to create my own unique versions.However in this post i have the complete sexy bookmarks range with the awesome accordion auto hide and all 8 arrow messages.

With the accordion effect one row of icons are visible and on hover the page drops to display 48 more sharing options, that's 56 in total.The icons themselves are sprites with a pop up effect, all making for a totally animated look using jQuery.Best of all by changing just one line in the code you can use any of the 8 messages.The message and icons are all transparent so work on any background color.We will be adding the sexy bookmarks gadget directly below all the posts on your blog.

Along with the steps I have a complete video tutorial walking you through the steps as I add the sharing buttons to a test blog.

Updated : 03/03/2014.

I have 2 demos showing the sexy bookmarks in action, one on a light background and one on a dark background.The demo has all 8 gadgets make sure to hover over the icons to see the drop down for the other icons.

Demo 1 - Light Background Sexy Bookmarks Demo

Demo 2 - Dark Background Sexy Bookmarks Demo

Very Cool Eh ! This version is the most complete i have seen for Blogger and thanks go to Harish from Way2Blogging.Harish also works with me on projects in the Hire Us section of Spice Up Your Blog.

Arrow Messages - The arrow messages available are Sharing Is Sexy, Sharing Is Caring, Sharing Is Caring With Hearts, Share The Love, Share The Wealth, Share And Enjoy, Share The Knowledge and even an arrow message in German !

Sharing Buttons - The Bookmarking Icons In The Gadget are for : Twitter, Facebook, Linkedin, Stumble Upon, Delicious, Digg, Google Buzz, Blogger, Yahoo Mail, Gmail, Google Bookmarks, Google Reader, Rss, Orkut, Design Bump, Reddit, Design Float, Friend Feed, Dzone, Web Blend, Propeller, Tumblr, Squidoo, Posterous, Technorati, Bebo, Hotmail, Blinklist, Blog Engage, Blog Marks, Box.Net, Current, Diigo, Ekudos, Evernote, Hacker News, Hives, Identica, Jumptags, Email, Meneame, Mister Wong, My Link Vault, Myspace, Netvibes, Netvouz, Newsvine, Ning, Ping FM, Plaxo, Plurk, Print Friendly, Slashdot, Sphinn, Techmeme and Tipd.

OK lets add it to your blog.

Add The V3 Complete Sexy Bookmarks 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 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)

</head>

Step 3. Copy and Paste the following code directly Above / Before </head>

Note - If you previously added jQuery to your blog you can remove the line in yellow.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js'
type='text/javascript' />
<link href='http://widgets.way2blogging.org/blogger-widgets/w2b-autohide-social-bookmarking.css'
rel='stylesheet' type='text/css' />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.sexy-bookmarks a.external').attr("target", "_blank");
var sexyBaseHeight = jQuery('.sexy-bookmarks').height();
var sexyFullHeight = jQuery('.sexy-bookmarks ul.socials').height();
if (sexyFullHeight > sexyBaseHeight) {
jQuery('.sexy-bookmarks-expand').hover(

function() {
jQuery(this).animate({
height: sexyFullHeight + 15 + 'px'
}, {
duration: 800,
queue: false
});
}, function() {
jQuery(this).animate({
height: sexyBaseHeight + 'px'
}, {
duration: 800,
queue: false
});
});
}
if (jQuery('.sexy-bookmarks-center')) {
var sexyFullWidth = jQuery('.sexy-bookmarks').width();
var sexyBookmarkWidth = jQuery('.sexy-bookmarks:first ul.socials li').width();
var sexyBookmarkCount = jQuery('.sexy-bookmarks:first ul.socials li').length;
var numPerRow = Math.floor(sexyFullWidth / sexyBookmarkWidth);
var sexyRowWidth = Math.min(numPerRow, sexyBookmarkCount) * sexyBookmarkWidth;
var sexyLeftMargin = (sexyFullWidth - sexyRowWidth) / 2;
jQuery('.sexy-bookmarks-center').css('margin-left', sexyLeftMargin + 'px');
}
});
</script>


Step 4. 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)

<div class='post-footer'>

- If you cant find this use <data:post.body/>
instead.

Step 5. Copy and Paste the following code Directly Below / Under <div class='post-footer'>

<!--start bookmarks sexy-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='post-width-w2b' style='width:550px;'>
<div class='sexy-bookmarks-bg-sexy sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-center '>
<ul class='socials'>
<li class='sexy-twitter'>
<a class='external' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Tweet This!'/>
</li>
<li class='sexy-facebook'>
<a class='external' expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Facebook'/>
</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 + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' title='Share this on LinkedIn'/>
</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'/>
</li>
<li class='sexy-delicious'>
<a class='external' expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on del.icio.us'/>
</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!'/>
</li>
<li class='sexy-googlebuzz'>
<a class='external' expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' title='Post on Google Buzz'/>
</li>
<li class='sexy-blogger'>
<a class='external' expr:href='&quot;http://www.blogger.com/blog_this.pyra?t&amp;u=&quot; + data:post.url + &quot;&amp;n=&quot; + data:post.title + &quot;&amp;pli=1&quot;' rel='nofollow' title='Blog this on Blogger'/>
</li>
<li class='sexy-yahoomail'>
<a class='external' expr:href='&quot;http://compose.mail.yahoo.com/?Subject= &quot; + data:post.title + &quot;&amp;body=Link:&quot;+ data:post.url' rel='nofollow' title='Email this via Yahoo! Mail'/>
</li>
<li class='sexy-gmail'>
<a class='external' expr:href='&quot;https://mail.google.com/mail/?ui=2&amp;view=cm&amp;fs=1&amp;tf=1&amp;su=&quot; + data:post.title + &quot;&amp;body=Link:&quot; + data:post.url' rel='nofollow' title='Email this via Gmail'/>
</li>
<li class='sexy-googlebookmarks'>
<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'/>
</li>
<li class='sexy-googlereader'>
<a class='external' expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcUrl=&quot; + data:post.url + &quot;&amp;srcTitle=&quot; + data:post.title + &quot;&amp;snippet=&quot;' rel='nofollow' title='Add this to Google Reader'/>
</li>
<li class='sexy-comfeed'>
<a class='external' expr:href='data:blog.homepageUrl + &quot;feeds/&quot; + data:post.id + &quot;/comments/default?alt=rss&quot;' rel='nofollow' title='Subscribe to the comments for this post?'/>
</li>
<li class='sexy-orkut'>
<a class='external' expr:href='&quot;http://promote.orkut.com/preview?nt=orkut.com&amp;tt=&quot; + data:post.title + &quot;&amp;du=&quot; + data:post.url + &quot;&amp;cn=&quot;' rel='nofollow' title='Promote this on Orkut'/>
</li>
<li class='sexy-designbump'>
<a class='external' expr:href='&quot;http://designbump.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;body=&quot;' rel='nofollow' title='Bump this on DesignBump'/>
</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'/>
</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'/>
</li>
<li class='sexy-friendfeed'>
<a class='external' expr:href='&quot;http://www.friendfeed.com/share?title=&quot; + data:post.title + &quot;&amp;link=&quot; + data:post.url ' rel='nofollow' title='Share this on FriendFeed'/>
</li>
<li class='sexy-dzone'>
<a class='external' expr:href='&quot;http://www.dzone.com/links/add.html?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;description=&quot;' rel='nofollow' title='Add this to DZone'/>
</li>
<li class='sexy-webblend'>
<a class='external' expr:href='&quot;http://thewebblend.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;body=&quot;' rel='nofollow' title='Blend this!'/>
</li>
<li class='sexy-propeller'>
<a class='external' expr:href='&quot;http://www.propeller.com/submit/?url=&quot; + data:post.url ' rel='nofollow' title='Submit this story to Propeller'/>
</li>
<li class='sexy-tumblr'>
<a class='external' expr:href='&quot;http://www.tumblr.com/share?v=3&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' rel='nofollow' title='Share this on Tumblr'/>
</li>
<li class='sexy-squidoo'>
<a class='external' expr:href='&quot;http://www.squidoo.com/lensmaster/bookmark?&quot; + data:post.url ' rel='nofollow' title='Add to a lense on Squidoo'/>
</li>
<li class='sexy-posterous'>
<a class='external' expr:href='&quot;http://posterous.com/share?linkto=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;selection=&quot;' rel='nofollow' title='Post this to Posterous'/>
</li>
<li class='sexy-technorati'>
<a class='external' expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' title='Share this on Technorati'/>
</li>
<li class='sexy-hotmail'>
<a class='external' expr:href='&quot;http://mail.live.com/?rru=compose?subject=&quot; + data:post.title + &quot;&amp;body=Link: &quot; + data:post.url ' rel='nofollow' title='Email this via Hotmail'/>
</li>
<li class='sexy-bebo'>
<a class='external' expr:href='&quot;http://www.bebo.com/c/share?Url=&quot; + data:post.url + &quot;&amp;Title=&quot; + data:post.title ' rel='nofollow' title='Share this on Bebo'/>
</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'/>
</li>
<li class='sexy-blogengage'>
<a class='external' expr:href='&quot;http://www.blogengage.com/submit.php?url=&quot; + data:post.url ' rel='nofollow' title='Engage with this article!'/>
</li>
<li class='sexy-blogmarks'>
<a class='external' expr:href='&quot;http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Mark this on BlogMarks'/>
</li>
<li class='sexy-boxnet'>
<a class='external' expr:href='&quot;https://www.box.net/api/1.0/import?url=&quot; + data:post.url + &quot;&amp;name=&quot; + data:post.title + &quot;&amp;description=&amp;import_as=link&quot;' rel='nofollow' title='Add this link to Box.net'/>
</li>
<li class='sexy-current'>
<a class='external' expr:href='&quot;http://current.com/clipper.htm?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Post this to Current'/>
</li>
<li class='sexy-diigo'>
<a class='external' expr:href='&quot;http://www.diigo.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;desc=&quot;' rel='nofollow' title='Post this on Diigo'/>
</li>
<li class='sexy-ekudos'>
<a class='external' expr:href='&quot;http://www.ekudos.nl/artikel/nieuw?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;desc=&quot;' rel='nofollow' title='Submit this to eKudos'/>
</li>
<li class='sexy-evernote'>
<a class='external' expr:href='&quot;http://www.evernote.com/clip.action?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Clip this to Evernote'/>
</li>
<li class='sexy-hackernews'>
<a class='external' expr:href='&quot;http://news.ycombinator.com/submitlink?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' rel='nofollow' title='Submit this to Hacker News'/>
</li>
<li class='sexy-hyves'>
<a class='external' expr:href='&quot;http://www.hyves.nl/profilemanage/add/tips/?name=&quot; + data:post.title + &quot;&amp;text=Text about this site+-+&quot; + data:post.url + &quot;&amp;rating=5&quot;' rel='nofollow' title='Share this on Hyves'/>
</li>
<li class='sexy-identica'>
<a class='external' expr:href='&quot;http://identi.ca//index.php?action=newnotice&amp;status_textarea=Reading:&quot; + data:post.title + &quot;+-+from+&quot; + data:post.url ' rel='nofollow' title='Post this to Identica'/>
</li>
<li class='sexy-jumptags'>
<a class='external' expr:href='&quot;http://www.jumptags.com/add/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Submit this link to JumpTags'/>
</li>
<li class='sexy-mail'>
<a class='external' expr:href='&quot;mailto:?subject=%22&quot; + data:post.title + &quot;%22&amp;body=Link: &quot; + data:post.url + &quot; (sent via Way2blogging) &quot;' rel='nofollow' title='Email this to a friend?'/>
</li>
<li class='sexy-meneame'>
<a class='external' expr:href='&quot;http://meneame.net/submit.php?url=&quot; + data:post.url ' rel='nofollow' title='Submit this to Meneame'/>
</li>
<li class='sexy-misterwong'>
<a class='external' expr:href='&quot;http://www.mister-wong.com/addurl/?bm_url=&quot; + data:post.url + &quot;&amp;bm_description=&quot; + data:post.title + &quot;&amp;plugin=sexybookmarks&quot;' rel='nofollow' title='Add this to Mister Wong'/>
</li>
<li class='sexy-mylinkvault'>
<a class='external' expr:href='&quot;http://www.mylinkvault.com/link-page.php?u=&quot; + data:post.url + &quot;&amp;n=&quot; + data:post.title ' rel='nofollow' title='Store this link on MyLinkVault'/>
</li>
<li class='sexy-myspace'>
<a class='external' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' rel='nofollow' title='Post this to MySpace'/>
</li>
<li class='sexy-netvibes'>
<a class='external' expr:href='&quot;http://www.netvibes.com/share?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url ' rel='nofollow' title='Submit this to Netvibes'/>
</li>
<li class='sexy-netvouz'>
<a class='external' expr:href='&quot;http://www.netvouz.com/action/submitBookmark?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;popup=no&quot;' rel='nofollow' title='Submit this to Netvouz'/>
</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;h=&quot; + data:post.title ' rel='nofollow' title='Seed this on Newsvine'/>
</li>
<li class='sexy-ning'>
<a class='external' expr:href='&quot;http://bookmarks.ning.com/addItem.php?url=&quot; + data:post.url + &quot;&amp;T=&quot; + data:post.title ' rel='nofollow' title='Add this to Ning'/>
</li>
<li class='sexy-pingfm'>
<a class='external' expr:href='&quot;http://ping.fm/ref/?link=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;body=&quot;' rel='nofollow' title='Ping this on Ping.fm'/>
</li>
<li class='sexy-plaxo'>
<a class='external' expr:href='&quot;http://www.plaxo.com/?share_link=&quot; + data:post.url ' rel='nofollow' title='Share this on Plaxo'/>
</li>
<li class='sexy-plurk'>
<a class='external' expr:href='&quot;http://www.plurk.com/m?content=9+beautiful+web+forms+for+free+download+-+&quot; + data:post.url + &quot;&amp;qualifier=shares&quot;' rel='nofollow' title='Share this on Plurk'/>
</li>
<li class='sexy-printfriendly'>
<a class='external' expr:href='&quot;http://www.printfriendly.com/print?url=&quot; + data:post.url ' rel='nofollow' title='Send this page to Print Friendly'/>
</li>
<li class='sexy-slashdot'>
<a class='external' expr:href='&quot;http://slashdot.org/bookmark.pl?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Submit this to SlashDot'/>
</li>
<li class='sexy-sphinn'>
<a class='external' expr:href='&quot;http://sphinn.com/index.php?c=post&amp;m=submit&amp;link=&quot; + data:post.url ' rel='nofollow' title='Sphinn this on Sphinn'/>
</li>
<li class='sexy-techmeme'>
<a class='external' expr:href='&quot;http://twitter.com/home/?status=Tip+@Techmeme+&quot; + data:post.url + &quot;--&quot; + data:post.title + &quot;&amp;source=Way2blogging&quot;' rel='nofollow' title='Tip this to TechMeme'/>
</li>
<li class='sexy-tipd'>
<a class='external' expr:href='&quot;http://tipd.com/submit.php?url=&quot; + data:post.url ' rel='nofollow' title='Share this on Tipd'/>
</li>
<li class='sexy-way2blogging'>
<a class='external' href='http://way2blogging.blogspot.com' rel='follow' title='Grab this Widget'/>
</li>
<li class='sexy-way2blogging'>
<a class='external' href='http://www.spiceupyourblog.com' rel='follow' title='Social Bookmarking Gadgets'/>
</li>
</ul>
<div class='sexy-link'>
Widget for blogger by <a href='http://way2blogging.blogspot.com/2010/12/add-sexy-auto-hide-social-bookmarking.html' rel='follow' title='Grab this Widget'>Way2Blogging</a> | Via <a href='http://www.spiceupyourblog.com/2011/05/awesome-complete-animated-sexy-social.html' rel='follow' title='Blogger Bookmarking Gadgets'>Spice Up Your Blog Gadgets</a>
</div>
</div>
</div>
</b:if>
<!--end bookmarks-->

The Options

The line in red at the top sets the gadget to only be displayed on full posts pages not on the home page.To display the gadget on your home page also remove the line in red and Important if you look the the bottom of the code you will see </b:if> in red, this is the closing tag so remove this also.

The width is highlighted in blue at 550px and can be changed to suit your blog.

Change The Arrow Message

To change the arrow message simple change the line highlighted in yellow above with one of the lines below.Currently the message is Sharing Is Sexy.

Sharing Is Sexy Bookmark Arrow Message

sexy-bookmarks-bg-sexy

Sharing Is Caring Hearts Bookmark Arrow Message

sexy-bookmarks-bg-caring

Sharing Is Caring Bookmark Arrow Message

sexy-bookmarks-bg-caring-old

Share The Love Bookmark Arrow Message

sexy-bookmarks-bg-love

Share The Wealth Bookmark Arrow Message

sexy-bookmarks-bg-wealth

Share And Enjoy Bookmark Arrow Message

sexy-bookmarks-bg-enjoy

Share The Knowledge Bookmark Arrow Message

sexy-bookmarks-bg-knowledge

German Bookmark Arrow Message

sexy-bookmarks-bg-german

How about a different message every day ?

And that the awesome Sexy Bookmarks with all the options.Once again all thanks go to Way2Blogging make sure to check out Harish's Blog.Also if you use Wordpress check out the original Wordpress Plugin by Shareaholic.Here on SUYB we have lots more Social Bookmarking Gadgets including my unique versions of Sexy Bookmarks.

Drop Your Comments And Questions Below.

AuthorAuthor - Paul Crowe is the owner and main author of Spice Up Your Blog.Paul lives in Ireland, has been blogging since 2006 and writing Spice Up Your Blog since 2009.You can find him in the usual social networks.


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

Stay Connected With Free Updates

Subscribe via Email

77 comments:

  1. great, easy to follow!
    SUYB always give the best trick for us to make our blog looks COOL!
    thanks bro...keep it up ur good job...

    http://ilovepahang.blogspot.com

    ReplyDelete
  2. Why can't I save my template after I copied the codes? It says:

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "script" must be terminated by the matching end-tag "".

    ReplyDelete
    Replies
    1. Since it says you're missing an end tag, it's probably because you didn't realize there is more code to copy than just what you see. Make sure you go back and copy all of it. That should fix it.

      Delete
  3. Awesome Share sir. Loved it very much. Used on my "Dark Background" Blog, it looks awesome and I have a featured Slideshow too but it wasn't affected because of this jQuery widget. I just love SUYB. Thanks once again sir.

    ReplyDelete
  4. @ Aemy - You mush have missed part of the code when copying it.Make sure to get all the code in the scroll boxes.

    ReplyDelete
  5. I love this! Any way to add a url shortener for Twitter?

    Bonus points for automatically adding my Twitter handle! Thanks!

    ReplyDelete
  6. baru pertama kali saya menemukan sebuah website yang sangat berguna sekali seperti ini

    ReplyDelete
  7. I encountered a problem with twitter button does not share the link and nose if they do not have social bookmarking counter.
    But still very good. Thank you very much. Excellent your contributions. Excuse me for my bad English. I speak Spanish.

    ReplyDelete
  8. That looks really good for blogger. Is this website running on the blogger platform?

    ReplyDelete
  9. I have the problem with adding code before /head because I used auto read more. when I add your code before /head your code and Auto Readmore code is mix together. Could you help me solve this problem?

    ReplyDelete
  10. @ Enco - It's not a problem, just add the code below the code fot the read more.

    ReplyDelete
  11. My custom template does not have < div class='post-footer' > or < data:post.body/ > in it. What I do have is a < div id='footer-wrapper' > and when the second code is placed below it I get the pretty sharing is sexy graphic and then a long list of the following error - "TEMPLATE ERROR: Invalid data reference post.title: No dictionary named: 'post' in: ['blog'] TEMPLATE"

    Any suggestions on how to fix this?

    ReplyDelete
  12. @ Deena - Every Blogger template has the <data:post.body> code.Did you tick the expand widget templates box before looking ?

    ReplyDelete
  13. I love this, but it appears that the Twitter button doesn't work? All it does is open Twitter. ANy clue what I might have done wrong?

    ReplyDelete
  14. this is cool! thanks for sharing.. :)

    ReplyDelete
  15. I like sharing is caring, but I don't like sharing is sexy.....


    just kidding,,,,

    ReplyDelete
  16. This is an awesome tutorial ! Thanks a lot ! However, do you know how to center the toolbar and how to remove the Arrow Message ? Thanks in advance !

    ReplyDelete
  17. I have redone this til my hands are numb ;) I made sure everything was copied right. twice. this is the msg i get : Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: Content is not allowed in prolog.

    ReplyDelete
  18. @ Kari - Sorry to hear that, the code is correct and if added correctly will work.I know that's not much good to you right now, did you make sure to get all the code from the scroll box in steps 3 and 5 ? With a scroll box it is easy to miss the last few characters.

    ReplyDelete
  19. Love this! Just a minor issue: I can only see the first line of icons. How can I get blogger to show more than 1 line?

    ReplyDelete
  20. @ Pola - Is it not dropping down to reveal the icons ? If the code is added correctly it should be fine, check it all again and make sure it's right.

    ReplyDelete
  21. Awesome tutorial ! Sexy bookmark is fierce ! Just one question : do you know how to remove the arrow mesage ? it doesn't fit the design of my blog...Thanks in advance ! : )

    ReplyDelete
  22. Hi,is there any way to change the icons? Id really like to use this but the with the hearts. Helpppp :)

    ReplyDelete
  23. wow..thanks for this! really helpful and easy to follow.

    ReplyDelete
  24. This is great. Do you have any plans on adding a button to share on Google+?

    ReplyDelete
  25. Slight problem - My tags show up all scrunched together on the very right side, even if I choose not to show tags at all. Also, the comment count is scrunched over to the right as well. Could you help me with this?

    ReplyDelete
  26. Hi, I loved it but it shows too many options. It expnads to about 5 lines of options with 7-8 in each. How to limit it to 3-4 imp ones like Facebook, Twitter, Blogger.

    ReplyDelete
  27. very awesome thanks. It doesnt take up much space to start with and looks really nice but then also gives people so many options to share. I might use this to bookmark my posts on all the social bookmarking sites to get the page rank up as well as hopefully some new readers.

    Cheers
    Cohen @Techtalktips
    http://tech-talk-tips.blogspot.com/

    ReplyDelete
  28. Google+ button should definitely be added, please! Or a demo how to add your own services of choice?

    ReplyDelete
  29. That is awesome ,thank you

    but when i installed a social bookmarks , it caused that my drop down menu bar and the image slider to stop working ,

    But when i remove the jQuery line , the menu bar and slider works again , but the social bookmark widget doesnot animate any more .

    thank you

    ReplyDelete
  30. Hi ^.^ This is so great! I do seem to be having one small problem however.. The Tumblr sharing button does not seem to be working.. I simply get sent to a Tumblr "Page not found" page. Could there be something wrong with the link in the html? I have copied it exactly as it says, and all other links work fine. Hope you can help ^.^

    ReplyDelete
  31. it does not work om my blogger blog and I' dont't know why

    ReplyDelete
  32. Is there a similar tutorial for using this widget in a regular website? I attempted to use the javascript and css but didn't have any luck other than some blank bullet points and the credit links. Any help or a download link would be much appreciated. Thanks!

    ReplyDelete
  33. that's awsum... i tried and it worked well

    ReplyDelete
  34. It worked great, but when I deleted the red code for the home page it covers my signature. How do I move the sexy is caring down?

    ReplyDelete
  35. The best sharing widget ever..thanks a tonnes Paul Crowe.. just loved these icons.. superb

    ReplyDelete
  36. Amazing, worked first time problem free, added it to my blog, thanks so much!

    ReplyDelete
  37. Amazing blog!
    Love your tutorial!

    ReplyDelete
  38. Awesome script. One thing though, noticed the "title" on hover doesn't popup in chrome.

    ReplyDelete
  39. Hi This is so amazing! I do seem to be having one small problem. The Tumblr sharing button does not seem to be working.. I simply get sent to a Tumblr "Page not found" page. Could there be something wrong with the link in the html? I have copied it exactly as it says, and all other links work fine first time....have i done something wrong or is it tumblr?

    ReplyDelete
  40. greaaatttt!!!!!!

    i just try it.. ad it works... thanks sir or brother... :D

    ReplyDelete
  41. Can anybody help that i have added this awesum widget..But it appears above the post.. i want it shows below every post

    ReplyDelete
  42. Hey it works thanks! However it doesn't expand. How can I get it to expand?

    ReplyDelete
    Replies
    1. Same here. Looks good but not expanding.

      How can I make it that the "posted by" and comments are not beside it but at the bottom?

      Delete
  43. hello,
    Can i erase Icons In The Gadget, like Stumble Upon, Delicious and Digg?

    ReplyDelete
  44. I did erase the red line, but it comes with all my posts and not on the home page separately on the side. How can I get it only for my home page on the side?

    ReplyDelete
    Replies
    1. same here :(

      How can I just get it at the bottom of my home page??

      Delete
  45. Ohhhhhhh...LOVE IT

    Great turorial!!!

    ReplyDelete
  46. Thank u allot, u just saved my live, LoOooOove it so so much!!

    ReplyDelete
  47. I just installed the "share the love" version of the bookmark, and for some reason it doesn't look like I got all the widgets. I got:

    Twitter
    Facebook
    LinkedIn
    StumbledUpon
    Del.icio.us
    Digg this!
    Google Buzz
    And Blog this And Blogger

    Is that all that should be there? Thanks!

    ReplyDelete
  48. Awesome! Thanks so much ~ very easy, and looks great on my site! :)

    ReplyDelete
  49. This comment has been removed by the author.

    ReplyDelete
  50. Paul,
    Is there a way to add our twitter handles to this code so that when they tweet from the Share the Knowledge/etc. plugin our handle will appear in the tweet? Thanks!!

    ReplyDelete
  51. Great tutorial, thank you so much! Is there any way to get Pinterest on here?

    ReplyDelete
  52. I have the code up and running on my blog. It looks great :) I do have one question though, how do I remove the original bookmark that blogger provides?

    ReplyDelete
  53. Exactly what I was looking for my blog....Better than any other share button but still I want to customize it. Paul, can you tell me how to inlcude the Title of your blog to show with every sharing apart from blogpost name???

    ReplyDelete
  54. waw nice info guys.

    thank 4 share :) i like your blog!!!

    ReplyDelete
  55. Awesome Tuttorial and Script Editor............I have make it,and its look Amazing on my blog now.

    I can conect to my social network very easy and fast,share everything to them with that pluggin....Sexy!!!!!
    Thanks Alot Mister

    ReplyDelete
  56. I also had problems with the Twitter button. This solution is the best I could do:

    < li class='sexy-twitter' >
    < a class='external' expr:href='"http://twitter.com/home?status=Reading: " + data:blog.title + " - " + data:post.url ' rel='nofollow' title='Tweet This!'/ >
    < /li >

    Remove the spaces after each < > symbols

    ReplyDelete
  57. Can i rearrange these buttons ?

    ReplyDelete
  58. Outstanding walk through! I adore these, thanks so much for the post!

    ReplyDelete
  59. Interesting post. I have been wondering about this issue,so thanks for posting.

    ReplyDelete
  60. Thank you! I have been on several different sites trying this and it never worked. Yours worked on the first try! You're the best!

    ReplyDelete
  61. I couldn't find this < class='post-footer'> and in new blogger design

    ReplyDelete
  62. It's hard to find educated people in this particular subject, however, you sound like you
    know what you're talking about! Thanks

    My weblog; wordpress theme developer

    ReplyDelete
  63. Hi! I know this is kind of off topic but I was wondering which blog platform are you
    using for this website? I'm getting fed up of Wordpress because I've had issues with
    hackers and I'm looking at alternatives for another platform.

    I would be awesome if you could point me in the direction of
    a good platform.|

    My website :: darmowy program pit 2013

    ReplyDelete
  64. No matter what I do, I cannot get this to display. I don't get any error codes when I add the text but it will not display anywhere. Beyond frustrated.

    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