BarokOnline

I was visiting one of my favorite Blog and found that sexy bookmarks that will automatically hide half portion of the icon after rolling your mouse over them. They are really sexy as the name suggest - Sharing is Sexy bookmarks. But I am not only attracted to it, I also wanted to have them in my Blog.  So I searched around and found quite a number of tutorial posts claiming to get your blog setup in minutes with this sexy thing. All of them didn't work as explained. Instead, I was getting errors of which I am too lazy to trace or debug. Until finally I found one that suits my needs and I've made some minor modifications to perfectly fit my taste. See the live sample below this post.

So here it is: Don't forget to backup your existing templates and widgets before proceeding.
1. Let's start editing your template. Go to Layout and click on "Edit HTML".
2. Tick the "Expand Widget Templates".
3. Open your browser search window or press F3 on your keyboard. Search this key in the search box: </head>
4. The text will then be highlighted. Copy and paste the code below before </head>

<br /> <style type='text/css'> div.sexy-bookmarks { height:54px; background:url('img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMs_xtn9levdSX9Qt4intg5xcsUJnxtippT45Ts2b7qPa3UJl5z51B5MTLrhDdhsE3tfV5BokPnaM0LkTW2ctVk3MOxR39hkZS5t7K8B_sbQspoDLY8v8N50rJf9nARnFSAP1lr9FZa3Cz/s320/SharingMe.png') no-repeat left bottom; position:relative; width:540px; } div.sexy-bookmarks span.sexy-rightside { width:17px; height:54px; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMs_xtn9levdSX9Qt4intg5xcsUJnxtippT45Ts2b7qPa3UJl5z51B5MTLrhDdhsE3tfV5BokPnaM0LkTW2ctVk3MOxR39hkZS5t7K8B_sbQspoDLY8v8N50rJf9nARnFSAP1lr9FZa3Cz/s320/SharingMe.png') no-repeat right bottom; position:absolute; right:-17px; } div.sexy-bookmarks ul.socials { margin:0 !important; padding:0 !important; position:absolute; bottom:0; left:10px; } div.sexy-bookmarks ul.socials li { display:inline-block !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:48px !important; cursor:pointer !important; padding:0 !important; } div.sexy-bookmarks ul.socials a { display:block !important; width:48px !important; height:29px !important; font-size:0 !important; color:transparent !important; } .sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo: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-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover { background:url('http://i44.tinypic.com/1znbj83.png') no-repeat !important; } .sexy-furl { background-position:-300px top !important; } .sexy-furl:hover { background-position:-300px bottom !important; } .sexy-digg { background-position:-500px top !important; } .sexy-digg:hover { background-position:-500px bottom !important; } .sexy-reddit { background-position:-100px top !important; } .sexy-reddit:hover { background-position:-100px bottom !important; } .sexy-stumble { background-position:-50px top !important; } .sexy-stumble:hover { background-position:-50px bottom !important; } .sexy-delicious { background-position:left top !important; } .sexy-delicious:hover { background-position:left bottom !important; } .sexy-yahoo { background-position:-650px top !important; } .sexy-yahoo:hover { background-position:-650px bottom !important; } .sexy-blinklist { background-position:-600px top !important; } .sexy-blinklist:hover { background-position:-600px bottom !important; } .sexy-technorati { background-position:-700px top !important; } .sexy-technorati:hover { background-position:-700px bottom !important; } .sexy-myspace { background-position:-200px top !important; } .sexy-myspace:hover { background-position:-200px bottom !important; } .sexy-twitter { background-position:-350px top !important; } .sexy-twitter:hover { background-position:-350px bottom !important; } .sexy-facebook { background-position:-450px top !important; } .sexy-facebook:hover { background-position:-450px bottom !important; } .sexy-mixx { background-position:-250px top !important; } .sexy-mixx:hover { background-position:-250px bottom !important; } .sexy-script-style { background-position:-400px top !important; } .sexy-script-style:hover { background-position:-400px bottom !important; } .sexy-designfloat { background-position:-550px top !important; } .sexy-designfloat:hover { background-position:-550px bottom !important; } .sexy-syndicate { background-position:-150px top !important; } .sexy-syndicate:hover { background-position:-150px bottom !important; } .sexy-email { background-position:-753px top !important; } .sexy-email:hover { background-position:-753px bottom !important; } </style><br />

5. Go back to your search box and search this text:  <data:post.body/>. Some templates will have more than one of this. Go to the last one and paste the code below after <data:post.body/>

<br /> <div class='sexy-bookmarks'><ul class='socials'><li class='sexy- delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Add to Delicious'/></li> <li class='sexy-digg'><a expr:href='" http://digg.com/submit? url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Digg This Post'/></li> <!-- <li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Add to Technorati'/></li> <li class='sexy-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' title='Add to Reddit'/></li> --> <li class='sexy-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Stumble This Post'/></li> <!-- <li class='sexy-designfloat'><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' title='Share on DesignFloat'/></li> --> <li class='sexy-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share on Facebook'/></li> <li class='sexy-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share on Twitter'/></li> <!-- <li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on Furl'/></li> --> <li class='sexy-syndicate'><a href='http://www.korabtech.com/feeds/posts/default' rel='nofollow' title='Subscribe to RSS'/></li> <li class='sexy-email'><a expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share on Email'/></li> </ul><span class='sexy-rightside'/></div>

Note: There are areas in the code which are being commented or the ones in between the tag:
<!-- Sample Text or Code Here -->
I choose not to dispaly them so they are being considered as comment. Comments in codes are only used for reference purposes or if you wanted to temporarily exclude portions of the code and should not affect the entire code in any way. Play around with the comment tag. You will see the examples below how things are done based on my preference.

Lastly, don't forget to change the feed burner URL: http://www.korabtech.com/feeds/posts/default to yours.


Related Articles:
How To Invite Your Facebook Friends To Join a Group or Fan Page
Setup Vanity URLs For Your Facebook Fan Page
Add Digg "Dugg", Twitter "Tweet", Facebook "Share" Buttons To Your Blogger Blog
Blogumus: Flash Animated Cloud for Blogger
"Follow Me And I'll Follow You" Principle In Twitter
Filtering Facebook Emails And Notifications Inside Yahoo Mail

How To Add Facebook Fan Page In Blogger
Unfollow Twitter User's Who Ain't Following You Back - for Dummies