We have been moved to http://www.bloganol.com/

People like to bookmark your blog posts to different social bookmarking sites if they find something interesting content and find the easy bookmarking widget installed in your blog.None of your readers will visit digg or reddit to bookmark your blog there.They will bookmark only when they find social bookmarking widget installed in your blog post footer or other easy place.They will be more interested if they find something interesting with the social bookmarking widget.

This social bookmarking widget is with the opacity effect will really make bookmarking interesting.It means first the image of the widget is seen dim and when the users hover mouse pointer over the image, the image seems brighter.Isn't it interesting?So if you are interested to install this social bookmarking widget with opacity effect follow the simple steps below.I would also like to thank Smartbloggerz who has saved my time by providing me the raw script and images.


Tutorial

From the blogger dashboard after you sign in into blogger Goto Edit Html Section.Check Expand Widget Templates and search for the following code.
<p><data:post.body /></p>

Now replace the above code with the following block of codes.

<p><data:post.body /></p>
<!-- Widget By www.bloganol.com & www.smartbloggerz.com BEGIN -->
<b>Share and Enjoy!</b><br/>
<a class='bookmark' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Digg' border='0' src='http://s306.photobucket.com/albums/nn241/deineshd/bookmark16x16/digg.png'/></a>

<a class='bookmark' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Stumble This' border='0' src='http://s306.photobucket.com/albums/nn241/deineshd/bookmark16x16/stumbleupon.png'/></a>

<a class='bookmark' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add to Del.icio.us'><img alt='Del.icio.us' border='0' src='http://s306.photobucket.com/albums/nn241/deineshd/bookmark16x16/delicious.png'/></a>

<a class='bookmark' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Mixx It'><img alt='Mixx' border='0' src='http://s306.photobucket.com/albums/nn241/deineshd/bookmark16x16/mixx.png'/></a>

<a class='bookmark' expr:href='&quot;http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;t= &quot; + data:post.title' target='_blank' title='Add to Furl'><img alt='Furl' border='0' src='http://s306.photobucket.com/albums/nn241/deineshd/bookmark16x16/furl.png'/></a>

<a class='bookmark' expr:href='&quot; http://www.propeller.com/submit/?U=&quot; + data:post.url + &quot;&amp;T= &quot; + data:post.title' target='_blank' title='Propeller'><img alt='Propeller' border='0' src='http://s306.photobucket.com/albums/nn241/deineshd/bookmark16x16/propeller.gif'/></a>

<a class='bookmark' expr:href='&quot;http://www.simpy.com/simpy/LinkAdd.do?href= &quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add to Simpy'><img alt='Simpy' border='0' src='http://s306.photobucket.com/albums/nn241/deineshd/bookmark16x16/simpy.png'/></a>

<a class='bookmark' expr:href='&quot;https://favorites.live.com/quickadd.aspx?marklet=1&amp;url= &quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Live'><img alt='Live' border='0' src='http://s306.photobucket.com/albums/nn241/deineshd/bookmark16x16/live.png'/></a>

<a class='bookmark' expr:href='&quot;http://twitthis.com/twit?url= &quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Twitthis'><img alt='Twitthis' border='0' src='http://s306.photobucket.com/albums/nn241/deineshd/bookmark16x16/twitter.png'/></a>

<a class='bookmark' expr:href='&quot;http://slashdot.org/bookmark.pl?url= &quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Slashdot'><img alt='Add To Slashdot' border='0' src='http://s306.photobucket.com/albums/nn241/deineshd/bookmark16x16/slashdot.png'/></a>

<a class='bookmark' expr:href='&quot;http://www.spurl.net/spurl.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add to Spurl'><img alt='Spurl' border='0' src='http://s306.photobucket.com/albums/nn241/deineshd/bookmark16x16/spurl.png'/></a>

<a class='bookmark' expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Bookmark To Google'><img alt='Google' border='0' src='http://s306.photobucket.com/albums/nn241/deineshd/bookmark16x16/googlebookmark.png'/></a>

<a class='bookmark' expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?u= &quot; + data:post.url + &quot;&amp;=&quot; + data:post.title' target='_blank' title='Add to Yahoo web'><img alt='Yahoo' border='0' src='http://s306.photobucket.com/albums/nn241/deineshd/bookmark16x16/yahoo.gif'/></a>

<a class='bookmark' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title= &quot; + data:post.title' target='_blank' title='Add to Reddit'><img alt='Reddit' border='0' src='http://s306.photobucket.com/albums/nn241/deineshd/bookmark16x16/reddit.png'/></a>

<a class='bookmark' expr:href='&quot;http://technorati.com/faves?add= &quot; + data:post.url' target='_blank' title='Add to Technorati'><img alt='Technorati' border='0' src='http://s306.photobucket.com/albums/nn241/deineshd/bookmark16x16/technorati.png'/></a>

<a class='bookmark' 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' title='Add to Blinklist'><img alt='Blinklist' border='0' src='http://s306.photobucket.com/albums/nn241/deineshd/bookmark16x16/blinklist.png'/></a>

<a class='bookmark' expr:href='&quot;http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp; url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add to Blogmarks'><img alt='Blogmarks' border='0' src='http://s306.photobucket.com/albums/nn241/deineshd/bookmark16x16/blogospherenews.gif'/></a>

<a class='bookmark' expr:href='&quot;http://smarking.com/editbookmark/?url=&quot; + data:post.url' target='_blank' title='Add to Smarkings'><img alt='Smarkings' border='0' src='http://s306.photobucket.com/albums/nn241/deineshd/bookmark16x16/smarking.png'/></a>

<a class='bookmark' expr:href='&quot;http://ma.gnolia.com/bookmarklet/add?url=&quot; + data:post.url + &quot; &amp;title=&quot; + data:post.title' target='_blank' title='Add to Ma.gnolia'><img alt='Ma.gnolia' border='0' src='http://s306.photobucket.com/albums/nn241/deineshd/bookmark16x16/magnolia.png'/></a>

<a class='bookmark' expr:href='&quot;http://www.sphere.com/search?q=sphereit:&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='SphereIt'><img alt='SphereIt' border='0' src='http://s306.photobucket.com/albums/nn241/deineshd/bookmark16x16/sphere.png'/></a>

<a class='bookmark' expr:href='&quot;http://sphinn.com/submit.php?url=&quot; + data:post.url + &quot; &amp;title=&quot; + data:post.title' target='_blank' title='Sphinn'><img alt='Sphinn' border='0' src='http://s306.photobucket.com/albums/nn241/deineshd/bookmark16x16/sphinn.png'/></a>

<a class='bookmark' expr:href='&quot;http://feedmelinks.com/categorize?from=toolbar&amp; op=submit&amp;name=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to Feedmelinks'><img alt='Feedmelinks' border='0' src='http://s306.photobucket.com/albums/nn241/deineshd/bookmark16x16/feedmelinks.png'/></a>
<!-- Widget By www.bloganol.com & www.smartbloggerz.com END -->

Now in second step paste the following style code between <head> and </head> section in your Template.


<style type="text/css">

.bookmark img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
}

.bookmark:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}

.bookmark img{
border: 0px solid #ccc;
}
</style>


After you complete the above steps save your template.Then you're done.

comments

15 Responses to "Social bookmarking widget with opacity effect for blogger"
JJ Sobey said...
November 22, 2008 at 5:25 PM

This is really cool! I just wish it included code for Facebook. :(


Karthik said...
November 22, 2008 at 10:26 PM

thanx... Deinesh


indungg said...
November 22, 2008 at 11:00 PM

Is this tutorial can make Slow loading page",.
This tutorial looks nice,..but why "the code html' show long,...
hiihihihi,..sorry bad english,..
I'm just indonesian ordinary people.
Success for you, deinesh!


Deinesh said...
November 23, 2008 at 1:23 AM

@JJ Sobey

You said you like it if it has got bookmarking for facebook.he code for facebook goes below.

Code for Facebook

<a class='bookmark' expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' target='_blank' title='Share on Facebook'><img alt='Facebook' border='0' src='http://i306.photobucket.com/albums/nn241/deineshd/bookmark%20widget/facebook.png'/></a>


Typhoon said...
November 26, 2008 at 1:59 AM

Woh Nice! Thanks for including my name.


Rajeelkp said...
November 29, 2008 at 5:49 AM

Hi,
I really liked this post.

Can i post about this hack on my blog , with giving credits to you?Can I?


Deinesh said...
November 29, 2008 at 7:55 AM

@Rajeelkp

Yes.


Rajeelkp said...
November 29, 2008 at 11:13 AM

But, how can i post HTML code on a post


Deinesh said...
November 29, 2008 at 11:40 PM

@Rajeelkp
You have to paste these codes inside your blog Template at Edit HTML Page.


Rajeelkp said...
November 30, 2008 at 9:24 PM

not that,

I added this to my blog.
Now i want to post about this widget and when i posted, the HTML codes worked as the widget and i can't post the HTML codes.

So, plz tell me a way to post the HTML codes as TEXT on blog posts.


Deinesh said...
December 1, 2008 at 12:41 AM

@Rajeelkp

I understand.You mean to say that you want to make a post about this widget and the HTML codes worked as the widget.To show the codes only you have to encode the HTML for for that visit http://www.centricle.com/tools/html-entities/ and encode the code and paste to your blog post.


Karthik said...
December 1, 2008 at 9:25 PM

hai deinesh... i want to change my template sidebar and post size. how to chang that. my template is revolution churh blogger template.i want to chang look like yor size. please help me....


rajeelkp said...
December 2, 2008 at 10:29 AM

Hey deinesh,

I had posted about it.Follow the link on my name to find the post and you MUST comment on it.will you??


Penny Williams said...
March 17, 2009 at 3:35 PM

I spent hours trying to get social bookmarking on my posts today and every instruction I found referenced a script/code not in my template. This one works. Thank you so much!


Anonymous said...
May 18, 2009 at 8:15 AM

Thank you so much. I tried another widget and it made my homepage load too slow. Your widget is perfect. Thanks!!!


Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!