Monday, 17 June 2013

Add Sharing is Sexy Bookmark to Blogger

Leave a Comment
Add Sharing is Sexy Bookmark to Blogger
Social bookmarking is a great tool to drive tons of traffic to a blog/website within minutes. “Sharing is sexy” blog gadget/widget is one of the most popular social bookmarking widget in blogsphere. The button of this widget has autohide effect when you hover on it.
  1. Log in to your "Blogger Dashboard "> "Template" > "Edit HTML".

  2. Click on "Expand Widget Templates" check box.

  3. Find (Ctrl + F) below code in your template:

  4. ]]></b:skin>

  5. Copy and paste the code below before it.

  6. .sexy-bookmarks {
     height: 54px;
     background:url('http://4.bp.blogspot.com/-Cpq2EvNo7cQ/TvtIdwHLAjI/AAAAAAAAA7o/GgtjfWGsMc8/s1600/11sharingsexy.png') no-repeat left bottom;
     position: relative;
     width: 540px; }
    .sexy-bookmarks span.sexy-rightside {
     width: 17px;
     height: 54px;
     background:url('http://4.bp.blogspot.com/-Cpq2EvNo7cQ/TvtIdwHLAjI/AAAAAAAAA7o/GgtjfWGsMc8/s1600/11sharingsexy.png') no-repeat right bottom;
     position: absolute;
     right: -17px; }
    .sexy-bookmarks ul.socials {
     margin: 0 !important;
     padding: 0 !important;
     position: absolute;
     bottom: 0;
     left: 10px; }
    .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; }
    .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://2.bp.blogspot.com/-CbLImS-FYzE/TvtIimuGxcI/AAAAAAAAA7w/qC_c-F8jtYI/s1600/11Sexysprite.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; }

  7. Now find (Ctrl + F) this code in the template:

  8. <data:post.body/>

  9. Copy the following code and paste it just below it:

  10. <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='YOUR FEED BURNER URL' 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>

  11. Save your template.
Remember to replace "YOUR FEEDBURNER URL" with your real feedburner url.

0 comments :

Post a Comment

Related Posts Plugin for WordPress, Blogger...