Sunday 2 September 2012

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.
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.

No comments: