How To Add jQuery Social Bookmarks icons

In this tutorial I will show how to use JQuery to make a beautiful Social Bookmarks Icons. Social Bookmark is kept in Website or Blog to help visitors or readers to bookmark a page easily. This bookmark will increase traffic to your site. First of all you need to add JQuery to Blogger or Website.

Steps To Add jQuery Social Bookmarks

1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see]]></b:skin> tag:
4.Copy below code and paste it just beforethe ]]></b:skin> tag.

/* SosialBookmark
*/

#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;}



5.Scroll down to where you see </head> tag:


6.Copy below code and paste it just before the </head> tag.

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

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

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

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



7.Scroll down to where you see <p><data:post.body/></p> .


8.Copy below code and paste it just after the <p><data:post.body/></p> .

<ul class='sharebox' id='sharebox'>

<li><img alt='Share this' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SmkuLMrwEhI/AAAAAAAABm8/SF6x9UfvEJA/s800/sharethis.png'/></li>

<li><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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>



9.Click on "Save Templates" and now you are done.

No Comment Yet Post a Comment

Leave a Comment