blog mbokne ancok: Add jQuery Social Bookmarks icons after every posts[cool one]

Wednesday, 7 October 2009

Add jQuery Social Bookmarks icons after every posts[cool one]

Step 1:login to your Dashboad.click Layout then edit HTML and tick Expand Widget.
Before starting you nay like to see (DEMO),scrool till end to see effect.
Step2:Press cntrl+F Search for ]]></b:skin>
Step 3.Copy the below code and paste it just before(above) ]]></b:skin>

/* SocialBookmark
*/

#sharebox{
height:48px;
width:400px;
margin:0;
padding:5px 0;
}

ul.sharebox { margin:0px; padding:0px; list-style:none; position:relative; display:block;}
ul.sharebox li { float:left; margin:0 0 0 0px; padding:0px; position:absolute;}
ul.sharebox li a { margin:0 0 0 -24px; display:block;}
ul.sharebox li a:hover { margin:0 0 0 -8px; }
ul.sharebox li img { border:none;}

Step 4:press cntrl+F and search </head>
Step 5:paste the below code just before(above) </head>

<script src=' http://myfundoo.fileave.com/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
(function($){
$.fn.sharebox = function(){
var element = this;

$(element).find("li").each(function(i){
$(this).css("z-index", 10- i);
if (i>0)
$(this).css("left", i * 24 100);
});

}
})(jQuery);
</script>
<script type='text/javascript'>
$(document).ready(function(){
$("#sharebox").sharebox();
});
</script>

Step6:Again press cntrl+F and serach for <p><data:post.body/></p> or <data:post.body/> and paste the following code just after(below) it.

<li><a expr:href='" http://digg.com/submit?url="   data:post.url   "&title="   data:post.title' target='_blank'><img alt='Sumbit to Digg' src='http://lh5.ggpht.com/_dfnTVAxeWMI/Smktud4qk8I/AAAAAAAABmk/z5vZVjTmD7k/s800/digg_48.png'/></a></li>

<li><a expr:href='" http://www.stumbleupon.com/submit?url="   data:post.url   "&title="   data:post.title' target='_blank'><img alt='Sumbit to StumbleUpon' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SmkuLCBTubI/AAAAAAAABm4/KwVHDJnT-EQ/s800/sumbleupon_48.png'/></a></li>

<li><a expr:href='"http://del.icio.us/post?url="   data:post.url   "&title="   data:post.title' target='_blank'><img alt='Sumbit to Delicious' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SmktubnHpoI/AAAAAAAABmg/b31Po_kEbnc/s800/delicious_48.png'/></a></li>

<li><a expr:href='" http://technorati.com/faves?add="   data:post.url   "&title="   data:post.title' target='_blank'><img alt='Sumbit to Technorati' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SmkuK1y0_cI/AAAAAAAABm0/C8EExNM-xjE/s800/technorati_48.png'/></a></li>

<li><a expr:href='" http://www.reddit.com/submit?url="   data:post.url   "&title="   data:post.title' target='_blank'><img alt='Sumbit to Reddit' src='http://lh3.ggpht.com/_dfnTVAxeWMI/Smkturrni-I/AAAAAAAABmw/AbGticB0wAs/s800/reddit_48.png'/></a></li>

</ul>

Step7:Click save template and it will look like this.