Friday, February 25, 2011

How to Add Stylish Bookmark for Blogger

This is cool social bookmark widget.your visitors
can easy to share your post. try this.

1. Log it to your blogger and go to Design >> Edit HTML

2. First,download the present template as a backup.

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

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

5.Paste below code ,before  ]]></b:skin>  tag.

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

6. Now find this tag also   </head>

7. After found it paste below code ,before </head> tag.

<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;, 12- 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>

8. Now find again this tag <data:post.body/>

9. After found  it paste below code, after <data:post.body/> tag.

<ul class='sharebox' id='sharebox'>
<li><img 
alt='Share this' 
src='http://lh3.ggpht.com/_gQTW6AzEt50/TAN-IItrhcI/AAAAAAAAAKg/6Ofb7QQmW5E/s400/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/_gQTW6AzEt50/TANwPDNFTqI/AAAAAAAAAJA/_iTBPexiQUc/s400/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/_gQTW6AzEt50/TANwXH99KHI/AAAAAAAAAJY/1MhNYohLgKw/s400/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://lh3.ggpht.com/_gQTW6AzEt50/TANwLsiJKaI/AAAAAAAAAI4/W-8Giiq1jdo/s400/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://lh3.ggpht.com/_gQTW6AzEt50/TANwaKO3III/AAAAAAAAAJg/1GGHLlMnMVI/s400/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/_gQTW6AzEt50/TANwUrLlzcI/AAAAAAAAAJQ/4IumvWuAy3k/s400/reddit_48.png'/></a></li>
<li><a
 expr:href='&quot; http://www.mixx.com/submit?page_url=&quot; + 
data:post.url + &quot;&amp;title=&quot; + data:post.title' 
target='_blank'><img alt='Sumbit to Mixx' 
src='http://lh5.ggpht.com/_gQTW6AzEt50/TANwRvsfp4I/AAAAAAAAAJI/GnhXzIG0Yus/s400/mixx_48.png'/></a></li>
<li><a
 expr:href='&quot;http://twitter.com/home/?status=Chk Out-&quot;
 + data:post.title + &quot; &quot; + data:post.url' 
target='_blank'><img alt='Sumbit to Twitter' 
src='http://lh4.ggpht.com/_gQTW6AzEt50/TAN0zpbiOBI/AAAAAAAAAKQ/ZrUXz3uWKIU/s400/twitter_boxed_48.png'/></a></li>
<li><a
 expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + 
data:post.url + &quot;&amp;title=&quot; + data:post.title' 
target='_blank'><img alt='Sumbit to Furl' 
src='http://lh5.ggpht.com/_gQTW6AzEt50/TAN0r1U2u1I/AAAAAAAAAJ4/sROtJssSojA/s400/furl_48.png'/></a></li>
<li><a
 
expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot;
 + data:post.url + &quot;&amp;title=&quot; + 
data:post.title' target='_blank'><img alt='Sumbit to Design Float'
 
src='http://lh4.ggpht.com/_gQTW6AzEt50/TAN0owol6GI/AAAAAAAAAJw/BkW7TAqnDcQ/s400/designfloat_48.png'/></a></li>
<li><a
 
expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=&quot;
 + data:post.url + &quot;&amp;title=&quot; + 
data:post.title' target='_blank'><img alt='Sumbit to Blinklist' 
src='http://lh3.ggpht.com/_gQTW6AzEt50/TAN0mEMPlOI/AAAAAAAAAJo/-8XBeBFn-B0/s400/blinklist_48.png'/></a></li>
<li><a
 expr:href='&quot;http://buzz.yahoo.com/article/&quot; + 
data:post.url' target='_blank'><img alt='Sumbit to Yahoo Buzz' 
src='http://lh5.ggpht.com/_gQTW6AzEt50/TAN02Tt0lCI/AAAAAAAAAKY/DJQhWo-EVQI/s400/yahoo_48.png'/></a></li>
<li><a
 
expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=&quot;
 + data:post.url + &quot;&amp;title=&quot; + 
data:post.title' target='_blank'><img alt='Sumbit to Google 
Bookmarks' 
src='http://lh6.ggpht.com/_gQTW6AzEt50/TAN0uapFtxI/AAAAAAAAAKA/XSceCbQg5gU/s400/google_48.png'/></a></li>
</ul>

10. Now click preview and click save template. you are done.

4 comments:

  1. Too helpful. You are G R E A T! Proud to be your friend.

    ReplyDelete
  2. It works! Thank Q very much sir! :D

    ReplyDelete
  3. great frnd follow me at http://thehackerclub.blogspot.com

    ReplyDelete
  4. It Helps Me alot.thanks
    Watch Online Latest Hollywood movies And Much More...
    At
    http://hitfilms4u.blogspot.com

    ReplyDelete