How To Add Sexy Social Bookmark to Blogger

Posted by Lasantha Bandara on May 27th, 2009 File Under : bookmarks, change template, html, widget15 Comments

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see </head> tag.

4.Now add below code before </head> tag.

<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url(&#39;http://3.bp.blogspot.com/_4HKUHirY_2U/SxTyvjcqvPI/AAAAAAAAAcU/lQxqcVMXpoE/sharingsexy.png&#39;) no-repeat left bottom;
position:relative;
width:540px;
}

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url(&#39;http://3.bp.blogspot.com/_4HKUHirY_2U/SxTyvjcqvPI/AAAAAAAAAcU/lQxqcVMXpoE/sharingsexy.png&#39;) 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(&#39;http://1.bp.blogspot.com/_4HKUHirY_2U/SxTyqWVZBZI/AAAAAAAAAcM/FEdBsycXjkU/Sexysprite.png&#39;) 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>

Note : If you use "Read more...." feature in your template,find second code like this( <data:post.body/> ).

6.Now add below code immediately after <data:post.body/> .

<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></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' target='_blank'/></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' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></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' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></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' target='_blank'/></li>

<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/YOUR-FEEDBURNER-ID' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul>
<span class='sexy-rightside'/></div>

Note : Remember to replace YOUR-FEEDBURNER-ID with your real feedburner ID.

7.Now save your template and you are done.

Demo

File Under : bookmarks, change template, html, widget

Related Posts

15 Responses to “How To Add Sexy Social Bookmark to Blogger”

  1. Adsense templates says:

    Thx mate for this post! its help me much

  2. JajQo says:

    not working now properly

  3. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    Thanks JajQo for your comment.I correct the problem.Now it works correctly.

  4. BanglaHindi says:

    how to show bookmarks only post not homepage check my problme http://www.bdmusiczone.com/

  5. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    Add your social bookmark code(second code of above tutorial) between <b:if cond='data:blog.pageType == "item"'> and </b:if>.

    Look at below:

    <b:if cond='data:blog.pageType == "item"'>Social Bookmark Code</b:if>

  6. Produkjasaku says:

    boss ma kasih banget tentang tips sexy bookmarknya. Sangat bermanfaat sekali di http://casioproduk.blogspot.com/ dan http://produkjasaku.blogspot.com/. Soalnya bookmarkku yang lama kagak bisa diliat kagak tau kenapa? Boss tolong dong minta tipsnya kalo kita klik lihat blog kita, koq ada juga blog lain yang nongol yang gambarnya orang mau nendang bola atau gambar lain yang nga diharapkan. Gimana ya? cegah gambar itu supaya kagak nongol bersamaan dengan munculnya website kita juga

  7. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    @Produkjasaku

    Sorry,But I can't understand your language.

  8. Kumpulan Cerita Sex says:

    Thx it work

  9. samy says:

    thanks

  10. Luiz Felipe says:

    Desculpe mas não posso entender sua linguagem
    UHAUSHASUAHUSHUAHSUAHUSUHUHUSAHUSHUA eu ri muito!

  11. aina rahim says:

    thanks, i feel sexy using it now!

  12. Amomin says:

    After all sharing is sexy working, I had tried to get the code from so many sites and they didn't worked out.

    Thanks its really Sexy now to have it on Blog at http://optimizing-pc-tips-and-tricks.blogspot.com/

    Just tell me if would like to add more social buttons in it. Like in wordpress

  13. pratik says:

    I want to put this stuff in my blogger sidebar..what to do for it. Can you send your email address & send your Facebook address also,just because I want talk with about it.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.