Home » Tech » Stylish Social Bookmarking Widget for bloggers with Hover Effects

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 sitesubmitting your URLreviewing 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

About Rajeel

I'm Rajeel, a teen blogger from India who loves computers, sports, internet and all other kind of tech stuffs. This blog thing is one of my favourite hobby and the one that eats up much of my time. But Really, I'm loving it :) Find me in G+

12 comments

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

  2. Thanks for link love.

  3. 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. @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. Thanx for this mate, this is very handy, do share ius about digg n su badge, that will be very helpful.

  6. 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. 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

    Very informative piece of information.

    Regards

    Indian Stock Market Tips

  9. 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 ? =-.

  10. This article is in fact a pleasant one it assists new web people, who are wishing for blogging.

  11. Ahaa, its pleasant conversation on the topic of this post here at this blog, I have read all that, so now me also commenting at this place.

  12. Search a Single Website: If you want to track new entries on a specific
    site, you can use the ‘site:’ operator. This tactic is ‘borrowing’
    others articles – syndication. And the 10th dumbest thing NOT to do with Google Ad –
    Sense is to let the other nine things stop you from running an
    honest site that.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Scroll To Top