How to Add Animated Sharing Is Caring Social Bookmark Buttons to Your Blog Post

An exciting new version of the Animated Share gadget has been released with more options, more social sites, and a two tier hover effect.The new version is called 'The V2 Sexy Bookmarks'.Shortly after the release of the new version the Images and script for this version expired.BUT i have added the Tutorial for V2 to Spice Up Your Blog !
To remove the Sharing is caring gadget before adding V2 see instructions below.


share the love sexy bookmarks blogger


Remove Old Sharing Is Caring  Gadget - Back Up Your Template First

 - In your dashboard click 'Design' > 'Edit Html' > Tick the 'Expand Widget Templates' box.

1. Find the following code in your template and remove.
Note - Use 'CTRL F' for a search bar


How To Use A Search Bar To Easily Find Code In Your Blogger Template

Now you have to find a piece of code in your Blogs Html, for this example lets say i told you to find this piece of code :

</head>

Heres the easy way to find it


  • The first thing you do is click and hold the 'CTRL' key on your keyboard.






  • Now while holding the 'CTRL' key Click the letter 'F' on your keyboard :





  • CTRL F

    (If you use Safari don't worry, just use the Apple+F keys to get the same effect)

    Once you have clicked 'CTRL + F' a search bar will appear at the bottom of your page as seen below :

    BLOGGER HTML




    Now paste or type the code or text your looking for into the search bar.

    We are looking for </head> so i typed it into the search bar and and as i did the search bar jumped to were the code is in my blogs html and highlighted it for me see the example below :

    spice up your blog
    Note 2 - Try Looking for the first line of code and working from there.

    <style type='text/css'>
    div.sexy-bookmarks {
    height:54px;
    background:url(&#39;http://2.bp.blogspot.com/_sunpK_FtO1E/SmLCe4iu0zI/AAAAAAAAAIg/ZXGCNjtZby0/s1600/sharing.png&#39;) no-repeat left bottom;
    position:relative;
    width:540px;
    }

    div.sexy-bookmarks span.sexy-rightside {
    width:17px;
    height:54px;
    background:url(&#39;http://i43.tinypic.com/2ueii3t.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('http://i44.tinypic.com/1znbj83.png%27') 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>

    Step 2. Find and remove this code in your blogs template - As before use search bar and start by locating the first line of 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' 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='ADD YOUR FEEDBURNER FEED URL HERE' 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><a href='http://www.spiceupyourblog.com/2010/01/get-animated-sharing-is-caring-social.html' target='_blank'>Get This Blog Gadget</a>

    0 Comments
    Disqus
    Fb Comments
    Comments :

    0 comments:

    Post a Comment