Add super fading effect social bookmark buttons below all blogger post.

Hi friends now add super fading effect bookmarking buttons below all blog post easily.

PREVIEW:-

Follow simple and easy step to adding this fading style widget in your blogger ---->>>>
* First go to your blogger Dashboard.

* Now click in design tab and edit HTML.

* Click in small box to expand your blogger Template.

* Now find this code ]]</b:skin> by CTRL+F key.

* Copy below code and paste before ]]</b:skin>

/* SOCIAL ICONS - by www.bloger9.com */
.social { list-style:none; margin:20px auto; }
.social li { display:inline; float:left; background-repeat:no-repeat; }
.social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
.social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999;
text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);
-moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
li.delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRfAaZzMxxtbL_nS06OrRulZZzDeqaFy3m7InAx86JW9wxCnUuobRS3tpeLzbysz85cYwjTpXwn42kinkNP0dqFrljxyV75zxPEDHIrKIUI6OG2A2OMskfmYY9x7jT9GDtP-DUWa97Hyt_/s1600/delicious.png")
; }
li.digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPMIYCfyWYEEeLbsTiniXAc17FARxs_eRIdPytH5VKm19zzj6zGgq3RrJTZibhBRsmsXvEBYvpSVU6TiyNtc04VR_e7Y2aQFBgc7jNdtfaUmmToXxRgQPfPLLAqgOHeOhvMcgmqhTsxhUS/s1600/digg.png"); }
li.facebook {background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Qs6wJJSNpG1qthJi10RjhJs27Y4b2Ez3BdnNAsQGsejW_SH-SLhE-NJia30qQgs6xccG8Tp5Je2MvPfGY_CP72sGjpyGULQgYfV_LezVc9Kns7Crg7QstyNIMpFok0EpEt1Qr9B0eLHh/s1600/facebook.png"); }
li.flickr {background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV4-bjO2r3DaJM1ENFya0RyzK31Ntk6hc5OBgJJ9nrAr8BwdO45b58ytezZ1kgEo84t96RYWp1Ci7xVbUGf-mwhvlM1PqxjIF_V2u8E0YJbyoUcyy53yCa6EfvtI7DLOJHXytEYEpnkv3i/s1600/flickr.png"); }
li.linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKxQlXG4-WxeVPESKEWdZTDh4KJkI46Ah9oft9CxFD8cjHKb82jrXen2_oc9mxt6IA-Sxf3Iq5HK88zQSi373pGhgx8p3Xst0BJZjpMaAVX8faynIH0Fg5xSHM1wZhc7GXDmUTPr1OjEWI/s1600/linkedin.png"); }
li.reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6H8nNg1kcIyeaXIKJ9Eeu9gMSSbO-VWAx9Pg8un2OA7PWxKWqjMYLV7hgJjzOSjwqJaxlTrS1BMaFUQA4LSxsQJxk2Q7aj30h8UPBgqNYNwGk9G6YedTw4CdluOuMo36EFo4ohuBWl7F6/s1600/reddit.png"); }
li.rss { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3xc6XUuP_7gikXzZnpvM15N-pNBxvpQPaTNLZvguoa2GtTNN1uEP9pVR_SQTSAiCDBLEQ_G0wX-9gN-sB2PGg2_dgA61KiRPla6DYNriinqI5vgY7HLz9bijXa6vrihAWj1Gt8m_T2dj7/s1600/rss.png"); }
li.twitter {background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfL376fGSgavyzlvy5LY2Sv9HPMHv5-zjS4NgTnJbb8AEWoBxTiqBFQmpcpmeKsWus8Kiojes1IwBLETT2bGCdNYSfI03UKXPOaeZrHyQxqgOdSbTCe7SPZ-6ZiWtXOhVNK_Lw5F9lXZJe/s1600/twitter.png");}
.social {margin: 10px auto 10px; display:block; padding: 3px 0 1px 0px; overflow: hidden; }
.social .social_button {float: left; display: inline; overflow: hidden; height:22px;  margin: 0 5px 0 5px;}
.social .social_button a img { border: 0; padding: 0; }
.social strong { font-size: 11px; float: left; margin:2px 0 0 0; color:#555;}
.clear{clear:both;}
.bulletnumber{border:none !important;padding:0;}

.post_social_bookmark
{
background:url("http://www.wpmods.com/wp-content/themes/wpmods.com/images/share.gif") no-repeat scroll left top #F9FAEB;
border-bottom:1px solid #CBD66D;
border-top:1px solid #AAAAAA;
float:left;
padding:40px 10px 10px !important;
width:570px;
margin-top:5px;
}

* Again find </head> by CTRL+F key now.

* And copy below code and paste before </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

<script type='text/JavaScript'>
$(document).ready(function()
{
 // Hide all the tooltips
 $("#jquery li").each(function() {
  $("a strong", this).css("opacity", "0");
 });
 
 $("#jquery li").hover(function() { // Mouse over
  $(this)
   .stop().fadeTo(500, 1)
   .siblings().stop().fadeTo(500, 0.2);
   
  $("a strong", this)
   .stop()
   .animate({
    opacity: 1,
    top: "-10px"
   }, 300);
  
 }, function() { // Mouse out
  $(this)
   .stop().fadeTo(500, 1)
   .siblings().stop().fadeTo(500, 1);
   
  $("a strong", this)
   .stop()
   .animate({
    opacity: 0,
    top: "-1px"
   }, 300);
 });
 
});
</script>

* Now again find this code <data:post.body/> by CTRL+F key easily.

* Copy below code and paste after <data:post.body/>

<div class='post_social_bookmark'>
<ul class='social' id='jquery'>
<li class='delicious' style='opacity: 1;'><a href='http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow'' target='_blank'><strong style='opacity:0; top: -1px;'>Delicious</strong></a></li>
<li class='digg' style='opacity: 1;'><a href=' http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><strong style='opacity:0;'>Digg</strong></a></li>
<li class='facebook' style='opacity: 1;'><a href=' http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><strong style='opacity:0;'>Facebook</strong></a></li>
<li class='flickr' style='opacity: 1;'><a href='http://www.flickr.com/'><strong style='opacity:0;'>Flickr</strong></a></li>

<li class='linkedin' style='opacity: 1;'><a href='http://www.linkedin.com/'><strong style='opacity:0;'>LinkedIn</strong></a>
</li>
<li class='reddit' style='opacity: 1;'><a href=' http://www.reddit.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><strong style='opacity:0;'>Reddit</strong></a></li>
<li class='rss' style='opacity: 1;'><a href='YOUR FEEDBURNER URL HERE'><strong style='opacity:0;'>RSS</strong></a></li>
<li class='twitter' style='opacity: 1;'><a href=' http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><strong style='opacity:0;'>Twitter</strong></a></li>
</ul>
</div>

Note:- Remove highlighted Text in above code with your own Feedburner URL ok.

* Now click to save your blogger Template. and now you are done.