Browse > Home / / Sexy Social Bookmarking


Sexy Social Bookmarking

10 comments
Wednesday, July 29, 2009 Posted by One-4-All

sexySocial bookmarking is one of the important tools to promote our blog, can be by the other person (visitor) or by self to bookmarking it. To give an easy way for our visitor if they want bookmarking our blog or our article, we can add social bookmarking feature inline our post. So, if they want to do it, just click and it will go to social bookmarking website. I was put it into my blog. And the result will be like this one. It was called "Sexy Social Bookamrking".
sexy bookmarking
Are you interesting? I will show you how to add this social bookmark into your blog.

Sexy Social Bookmarking Installation

  • first step: Go to your blogger account

  • second step: Click Layout Tab

  • third step: Click "Edit HTML" Tab and check "Expand Widget Templates" option

  • fourth step: add this CSS code into your template. Add this code before ]]</b:skin>

    <style type='text/css'>
    div.sexy-bookmarks {
    height:54px;
    background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
    position:relative;
    width:540px;
    }

    div.sexy-bookmarks span.sexy-rightside {
    width:17px;
    height:54px;
    background:url('http://i43.tinypic.com/2ueii3t.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://img509.imageshack.us/img509/3131/sexysprite.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>

  • fifth step: add this HTML code after <p><data:post.body/></p> into your blog. If you was used read more trick, there are 2 <p><data:post.body/></p> code in your template. You must add that code after the first code.

    <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' rel='nofollow' target='_blank'/></li>
    <li class='sexy-digg'><a expr:href='&quot;http://digg.com/submit?phase=3&amp;url=&quot; + data:post.url' rel='nofollow' target='_blank'/></li>
    <li class='sexy-technorati'><a expr:href='&quot;http://www.technorati.com/cosmos/search.html?url=&quot; + data:post.url' rel='nofollow' target='_blank'/></li>
    <li class='sexy-reddit'><a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/></li>
    <li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-facebook'><a href='http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-twitter'><a href='http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;t=&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;t=&quot; + data:post.title' rel='nofollow' target='_blank'/></li>
    <li class='sexy-syndicate'><a href='your feed URL' title='Subscribe to RSS'/></li>
    <li class='sexy-email'><a href='your email' rel='nofollow' target='_blank'/></li>
    </ul>
    <span class='sexy-rightside'/></div>

  • sixth step: Save your template

  • seventh step: Look up for the result



That is an easy trick right? I hope you enjoy it, and don't forget to bookmark this article.

Best Regard
One-4-All

10 comments:

life insurance on July 29, 2009 at 11:26 PM said...

good info

masifud on July 29, 2009 at 11:44 PM said...

Bookmark apaan yaa??

Education Blog on July 30, 2009 at 9:25 PM said...

wow nice tutorial....I Like sexy...

penchenk on July 30, 2009 at 9:27 PM said...

Great info friend..

Kang suroto on July 30, 2009 at 10:59 PM said...

keren infonya mas Tikno, sukses selalu

DEVIL DIVINITY on July 31, 2009 at 10:09 AM said...

Ada ada aja...

UDIN SIRA on July 31, 2009 at 10:14 AM said...

good info tapi aku gagal baru san ngetes hihihi visitmy blogger :D

alch3mist291 on August 5, 2009 at 6:15 AM said...

i did this but my bookmarks are coming someother part of page..wil u help

www.s60applications.co.cc

please help

Anonymous said...

When I use the Tweet option (Twit This) it does not tweet the entire post title. It cuts if off and puts a \ at the end. Any ideas?

naura on August 29, 2009 at 10:38 PM said...

good info sob..

Post a Comment