Stylish Social Bookmarking Widget for bloggers with Hover Effects

Social bookmarking sites are the greatest catalyst, which determine the growth of a blog.Your blog won’t grow if you just have an account in these sites.you need some friends(readers) to favor your blog post.most of your readers may be having accounts on these sites, but sometimes or in most case, they forget to do so.When they remember about it, they may feel laziness on entering the site-submitting your URL-reviewing it, Oh !As many of your friends forgets, your blog goes down ..down.. down..!So, what you can do inorder to make your site easy to submit to these social bookmarking sites???

It’s simple !! just add a social bookmarking widget to your blog ; It must be attractive, noticeable and targeted.Before presenting it to you, let me thank bloganol for sharing such a nice widget with me and you.This widget is really cool ! At 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?

Here is a screenshot of the widget ;-


Step 1

To install this widget just go to your blogger dashboard – Goto Edit HTML Section-Click on Expand Widget Templates and search for the following code.

<p><data:post.body /></p>

Now add the code just beneath (below) it ;-

<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/bookmark16×16/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/bookmark16×16/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/bookmark16×16/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/bookmark16×16/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/bookmark16×16/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/bookmark16×16/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/bookmark16×16/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/bookmark16×16/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/bookmark16×16/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/bookmark16×16/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/bookmark16×16/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/bookmark16×16/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/bookmark16×16/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/bookmark16×16/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/bookmark16×16/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/bookmark16×16/blinklist.png’/></a>

&lt
;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/bookmark16×16/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/bookmark16×16/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/bookmark16×16/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/bookmark16×16/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/bookmark16×16/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/bookmark16×16/feedmelinks.png’/></a>

Second Step

Now, add this code between the and section of your template

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

Now , you’re done.So Share and Enjoy and increase your blog’s traffic, statics and rankings

thanks to : bloganol




I think you all are familier with me. hmm... You may be or not, let me tell. I'm Rajeel, a teen blogger from India who loves computers, sports, internet and all other kind of tech stuffs. I love to call myself as the 'TeeN GeeK'

9 Responses to “Stylish Social Bookmarking Widget for bloggers with Hover Effects”

  1. Chris Slemp says:

    Rajeel, can you add one for MSDN Social? Here’s the syntax: social.msdn.microsoft.com/en-us/action/create/s/E/?

  2. Deineshd says:

    Thanks for link love.

  3. Nikhil says:

    HiI have just made this gadget (http://www.clearspring.com/widgets/493610e7e9d4b910/-) and looking for some help regarding publishing it to some good gadget directories. Kindly help.Have already posted it on google gadgets. Here is a link that might help: http://tips.appuonline.com/index.html#bseThanks

  4. Admin says:

    @Chris Slemp Sure, But you have to give an image of it like the other ones.I don’t have an image of it.

  5. p@r@noid says:

    Thanx for this mate, this is very handy, do share ius about digg n su badge, that will be very helpful.

  6. Buy EverCleanse says:

    Rajeel,Thanks for the great write up and the markup / code. Well done! I’m anxious to try this out. One question…suppose you wanted to allow users to submit to more than one at a time. Have you thought at all about that and how to the actual mechanics would work? Just a thought. I hate submitting individually to all the bookmarking / social accounts I have.

  7. Rajeel says:

    Me too hate submitting them individually, But in my knowledge there is no other way.But, I had seen various sites which will submit your article for every social bookmarking sites.But you have to pay them $10-$30 monthely.

  8. INDIAN STOCK MARKET TIPS says:

    Very informative piece of information.

    Regards

    Indian Stock Market Tips

  9. TechGyo says:

    Hey, I’m wondering which plugin you are using here for social bookmarking??

    “If you like this post then consider sharing it with others. ”

    The icons below that line
    TechGyo´s last blog ..How To Make Cool Manga Avatar For Your Profile ? My ComLuv Profile

Leave a Reply

CommentLuv Enabled
© 2010 Labofweb.com. All rights reserved.
Designed By Labofweb.com.

WP SlimStat