Saturday, September 24, 2011

Cool Leaves Social Bookmark Buttons For Blogger

This post helps you to,How to add leaves social bookmark
button for below your blogger post



1. Log in to blogger account and Go to Design >> Edit HTML

2. Make sure you put check mark to “Expand Widget Templates

3. Find this tag by using Ctrl+F    ]]></b:skin>

4. Paste  below code Before  ]]></b:skin> tag

.social {
padding: 5px 5px 5px 5px;
margin: 5px;
text-align:left;
font-family:Trebuchet MS;
font-size:12px;
height: 78px;
}
.social img {
margin:10px 2px 0px 2px;
padding: 3px 2px 2px 2px;
text-align:center;
border:1px solid #cfdde9;
}
.social img:hover {
border:1px solid #abcce9;
}
a.opacity img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;}
a.opacity:hover img {
filter:alpha(opacity=50);
-moz-opacity: 0.7;
opacity: 0.7;
-khtml-opacity: 0.7; }

5. Now Find this tag also by using Ctrl+F
                              <div class='post-footer-line post-footer-line-1'>
                                  If cant find above tag try to find below tag
                                <p class='post-footer-line post-footer-line-1'>

6. After found one of above code, paste below code after it

<div class='social'>
<strong> Share this </strong><a class='opacity' href='http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ARk22nlSJ723gas0Dlr1xT7i6tsU519A8i1Qs4XylWEfl4J79llhaC3qCBWuKnG8Vq2VlDJAirrNc8bAzHLLXKVvqp22jPzoP-3j0F1lgn5-sDTeYZqIHT4LTlMHw8HH6BfGoyxt8TM/s1600/Facebook.png' style='width:52px; height:52px; padding:0; border:0; vertical-align:middle;'/></a><a class='opacity' href='http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-X5ysThsFPL62RBiGN0ir2fxUgxFm2p6Le66TYwoOYiLgjLO-l7V8tni5mVPSBqObSbap-58VaocBEqgV-vfn2qSBB67p_3vr31NuLj6ovrXlmdAXi1y3CV7FuQUyEHWEqXfbHgoz9o4/s1600/Twitter.png' style='width:52px; height:52px; padding:0; border:0; vertical-align:middle;'/></a>
<a class='opacity' href='http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFUj9xmfMK7slQbaW8uqY54LDXRjA_WWtkF2KcU5MQ7I8DQW7Z5KFp2MRiXz2oif4Qg5iQSka46NkgbBDTRT_eurYGtuD-LQnGCUVqUkHRjNgfcfiPCfOBCM6ykvi_NgWGimma4z8Fj0k/s1600/del.icio.us.png' style='width:52px; height:52px; padding:0; border:0; vertical-align:middle;'/></a>
<a class='opacity' href='http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='StumbleUpon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9bWupgAHHtWp4acHye5lns98aH3BqRFgOdeavlmtTV2sUoRM8gSzI_T7sqVAgbEQ7067pHuHiMhdQmgAJTtn_5tN0wJZ4EYmF8ah-ljLCxPXPPhlNp_9Q085JhcQQf58fhjMCGaG1JpI/s1600/StumbleUpon.png' style='width:52px; height:52px; padding:0; border:0; vertical-align:middle;'/></a>
<a class='opacity' href='http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Digg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5IltV83DmKt-j4ffcHbjjPKbI5ZpwDUKJ9Paa8csDCujkiPVBda0V5LYbORFEgIJ0crXDlzC0hMIcNj30_BNGjA1QeAPlW3atIpbIwiFZwsrYZiAKzY2OvyZ1EJ670cm53qXVvlVTGxE/s1600/Digg.png' style='width:52px; height:52px; padding:0; border:0; vertical-align:middle;'/></a>
<a class='opacity' href='http://www.technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg56b9NyFBzYBcm-BNmhpNyD8lYW7bjjWssBpGrN7LVH2pNH8IbsMRtW9nNStZ22kvd8hdIMr9VUL3qZgWtOxPPoy1bDeIEJppmybRrGjdGjhiJgNoHis6vj6Ddwvdqbe0SXba7XtXcFy0/s1600/Technorati.png' style='width:52px; height:52px; padding:0; border:0; vertical-align:middle;'/></a>
<a class='opacity' href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='external nofollow' target='_blank'><img alt='Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuatl8hY19eQz_RJ0e4aW78-m9JaOAx-2Bw9jwnepr1hCrj9CZaTFqmwBw51PAu7voVKah6ZgkD7ngZLAQXtuq7gGrZAQ0ZMPFxBgV8Q71X57JN3bdijazNCDVVqggrQtkgnToFm3KSNw/s1600/RSS.png' style='width:52px; height:52px; padding:0; border:0; vertical-align:middle;'/></a>
<a class='opacity' href='http://reddit.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjntUhxj1kzTgh63P9976UfcCMGAHTd-YPcct1dTZ2kJSntn_bm7yFisWjCxgCFpfbTJTk-Le61frr-lwAMqvFmVSqHTj-TPAB5g6Ofhu56QRagUS9un8VZ7-Bu2lxnZq1VXuuQMV1vR3E/s1600/Reddit.png' style='width:52px; height:52px; padding:0; border:0; vertical-align:middle;'/></a>
</div>

7. You are done. Cheers

7 comments:

  1. thanks for the insights, I hope this feature could support my blog visitor to share my content. thanks :D

    ReplyDelete
  2. Another great post :)

    ReplyDelete
  3. thanks you sir. nice post

    ReplyDelete
  4. im using this for my blog

    ReplyDelete
  5. Thank For The Info
    http://locker4u.blogspot.com/

    ReplyDelete
  6. Great info !! thanks

    http://gifbucket.blogspot.com

    ReplyDelete
  7. Ok that is just cool the way you can manipulate the icons!

    Greg

    ReplyDelete