Get Latest Tweaks via Facebook, Twitter, Google+ & FeedBurner
    Subscribe:
    Subscribe Twitter Facebook

    Wednesday, March 23, 2011

    Add Sexy Bookmark To Blogger

    SOCIALIZE IT →

    Sexy Bookmark for Blogger

    Steps:

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

    Click on "Expand Widget Templates"

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

    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>
    



    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>
    


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

    Now save your template and you are done.


    0 comments:

    Post a Comment