4 new interesting blogger Widgets

1. Sexy Social Bookmarking widget for Blogger
It is the interesting blogger social bookmarking widget created by cssreflex.Like other social bookmarking widgets it consists of a different bookmarking icons of different sites.But it has got some features than older bookmarking widgets.It is sexy and in this widget the half part of images are hidden and when we hover the image the whole image is seen.this is the feature of this sexy bookmarking widget.Learn more


2. Linkwithin related posts widget with photo thumbnails
It is the greatest related posts widget for blogger.The installation of this widget is really very easy.After you install the widget in your blog three related post will be automatically shown below each posts with photo thumbnails.Install it in your blog


3. Top Authors Widget For Blogger / Blogspot
This widget is only for multiple author blogs.The top authors widget displays the list of top authors together with the number of posts each of them have made.This statistics is based on the latest 5000 posts on the blog.Learn more

4. Most Viewed Post Widget for Blogger
This widget shows the top 10 most viewed posts of your blog in the sidebar with the number of views made.learn more

Social bookmarking widget with opacity effect for blogger

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.

Statistics widget for blogger

Statistics is a widget that shows the total no of posts and comments in your blog.The credits of this widget goes to Assess My Blog.This widget is featured here on the request of our reader Sherry.

To show your blog statistics in your blog sidebar,copy the following code and paste it in your blog by Adding a new gadget -> HTML/JavaScript.

<script style="text/javascript">

function numberOfPosts(json) {
document.write('Total Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}

function numberOfComments(json) {
document.write('Total Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}

</script>

<ul><li><script src="http://yourblog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></li>

<li><script src="http://yourblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></li></ul>

<noscript><a href="http://assessmyblog.blogspot.com/" target="_blank">Widgets for Blogger</a> | <a href="http://www.bloganol.com" target="_blank">Bloganol</a></noscript>

In the above code change yourblog with your blog name and Save the code and see the wiget working.

Customize and Add Top commentators widget on your Blog

Top commentators widget shows your most commentator or Top commentators in your blog's sidebar.This widget encourages users to comment on your blog.This widget is originally created by Amanda of Bloggerbuster.Once you put this widget in your blog the top commentators will be automatically shown with the no of comments they posted.

To add the Top commentators widget on your blog enter the valid data in the form.After you enter the data click customize then click Add to blog >> to add the widget in your blog.


In the above form in the filed of " Filter your name " enter your name so that your name will not be shown in list as you are the blogger.

You can also Add the Top Commentators creator on your blog.For that Copy the following code and paste it in your new post Edit Html part.

<iframe src="http://bloganolutilities.googlepages.com/Topcommentatorswidget.html" style="width: 100%; height: 250px;" frameborder="0"></iframe>

This code is Tested with IE6/7 and Firefox and thw sripts work fine.If you got nay problem write to us.

Chat with your visitors with Yahoo Pingbox

Yahoo pingbox is a Widget that lets you Embed yahoo Messenger in your blog and helps you to Chat with your Visitors Privately when you are signed into yahoo Messenger.

It is very easy to Embed yahoo Pingbox into your blog.Fir this first Sign in into yahoo Pingbox and Create a new Pingbox.While creating a new Pingbox customize the Pingbox by selecting the Theme,Text and font Color,etc.You can see the Preview at right.


After you Customize the Widget Click Next Button.Then Copy the Code and Paste it in your blog by Adding a new gadget and Html/javascript.After you complete these steps you can see the widget working.

Page Popularity and Top popular pages widget for Blogger

You might have tired of wordpress link popularity plugin which shows the popularity of the page in terms of Percent.

So we have brought you the widget that shows Popularity of the specific post in Terms of Star Rating .So you might thing it as the Post rating widget.More stars means the page is more popular and less star means the page is less popular.This code is developed by Foxrecord.

To setup this page popularity widget below each post in Blogger Search for the code <p><data:post.body/></p> and Paste the Following code just after it.

<img expr:src='"http://foxrecord.appspot.com/rating?url=" + data:post.url + "&amp;title=" + data:post.title' /><noscript><a href="http://www.bloganol.com" title="bloganol">Code from Bloganol</a></noscript>

Further more it has also got Top popular Pages widget related on Page Popularity.For that Copy the following code and Paste it in your blog.

<script src="http://foxrecord.com/scripts/gettop.js" type="text/javascript"></script><noscript><a href="http://www.bloganol.com" title="bloganol">Code from Bloganol</a></noscript><br/><center>Powered by <a style="background: url(http://foxrecord.com/img/fox_icon16x16.gif) left no-repeat; padding-left: 20px;" href="http://foxrecord.com">FoxRecord</a></center>

Reactions : A new feature from Blogger draft

Yesterday after a long time I visited blogger in draft blog and came to know the new feature of Blogger.The new feature is that now Blogger is Embedded with their own Reactions widget or hack.

All the blogger users can access this service.To enable Blogger Reactions in your blog log in to http://draft.blogger.com/ and go to your Layouts page. From there, click the “Edit” link for the Blog Posts gadget and then check the “Reactions” checkbox. You can edit the Reactions buttons by clicking "Edit" or clicking the buttons themselves as shown in the Image below.

You can customize the position of reactions within the post by dragging in the arrange items box.You can customize the skin of the Reactions according to your blog Theme.Here are some snapshots of the reactions widget.

Show Twitter updates Widget for blogger

Showing off your twitter Updates in your blog is really very easy.You just need is to copy the following code and Paste it to your blog.To add this code in your blog Sign in to blogger -> Goto Edit Html page -> Add a new Gadget -> HTML/JavaScript -> paste your code there and click Save.

<div id="twitter_div">
<ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/deineshd">follow me on Twitter</a>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/deineshd.json?callback=twitterCallback2&count=5" type="text/javascript">
</script>

In the above code replace deineshd with your twitter username before you save the code.After you save the code you're done.

Free Google Language Translator Widget

Google Translator widget helps to translate your blog language into different other langauges.Using Google Translator widget users can translate your blog in different 24 languages.To put this widget in your blog Copy the following Code and Paste it to your blog.



Preview:



Code

<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&w=160&h=60&title=&border=&output=js"></script>

Preview

Code

<a href="javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=auto|ar&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=auto|ar&tbb=1&ie='+e;};">Arabic</a>
<a href="javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=auto|bg&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=auto|bg&tbb=1&ie='+e;};">Bulgarian</a>
<a href="javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=auto|zh-CN&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=auto|zh-CN&tbb=1&ie='+e;};">Chinese(Simplified)</a>
<a href="javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=auto|zh-TW&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=auto|zh-TW&tbb=1&ie='+e;};">Chinese(Traditional)</a>
<a href="javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=auto|hr&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=auto|hr&tbb=1&ie='+e;};">Croatian</a>
<a href="javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=auto|cs&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=auto|cs&tbb=1&ie='+e;};">Czech</a>
<a href="javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=auto|da&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=auto|da&tbb=1&ie='+e;};">Danish</a>
<a href="javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=auto|nl&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=auto|nl&tbb=1&ie='+e;};">Dutch</a>
<a href="javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=auto|en&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=auto|en&tbb=1&ie='+e;};">English</a>
<a href="javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=auto|fi&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=auto|fi&tbb=1&ie='+e;};">Finnish</a>
<a href="javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=auto|fr&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=auto|fr&tbb=1&ie='+e;};">French</a>
<a href="javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=auto|de&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=auto|de&tbb=1&ie='+e;};">German</a>
<a href="javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=auto|el&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=auto|el&tbb=1&ie='+e;};">Greek</a>
<a href="javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=auto|hi&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=auto|hi&tbb=1&ie='+e;};">Hindi</a>
<a href="javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=auto|it&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=auto|it&tbb=1&ie='+e;};">Italian</a>
<a href="javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=auto|ja&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=auto|ja&tbb=1&ie='+e;};">Japanese</a>
<a href="javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=auto|ko&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=auto|ko&tbb=1&ie='+e;};">Korean</a>
<a href="javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=auto|no&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=auto|no&tbb=1&ie='+e;};">Norwegian</a>
<a href="javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=auto|pl&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=auto|pl&tbb=1&ie='+e;};">Polish</a>
<a href="javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=auto|pt&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=auto|pt&tbb=1&ie='+e;};">Portuguese</a>
<a href="javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=auto|ro&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=auto|ro&tbb=1&ie='+e;};">Romanian</a>
<a href="javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=auto|ru&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=auto|ru&tbb=1&ie='+e;};">Russian</a>
<a href="javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=auto|es&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=auto|es&tbb=1&ie='+e;};">Spanish</a>
<a href="javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=auto|sv&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=auto|sv&tbb=1&ie='+e;};">Swedish</a>
<a href="http://bloganol.blogspot.com/2008/07/free-google-translator-widget.html" target="_blank">Get one</a>

Add dogpile web search engine to your blog

Dogpile is a search engine where the the users can access the best results from dogpile including the leading search engines like Google, Yahoo!, Ask.com and others.You can read more about dogpile at about dogpile page.



Dogpile search engines are provided in 2 sizes mini and large.You can choose mini or large that fits to your blog but before you put the search box in your blog copy the following code and paste it to your blog code between <head> and </head> Tags. This code submits your page in 'UTF-8' format to dogpile.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

large Banner Style



Code:

<!-- Search Dogpile -->
<form method="get" action="http://www.dogpile.com/dogpile/ws/redir/rfcp=Other/rfcid=999915/_iceUrlFlag=11?_IceUrl=true" style="margin:0;">
<input type="hidden" name="qcat" value="web"/>
<input type="hidden" name="_IceUrl" value="true" />
<table width="468" style='background-image:url(http://ttl60m.wsoo.infospace.com.edgesuite.net/dogpile/ws/pics/ext_form_banner_bg.gif/_iceUrlFlag=15?_IceUrl=true); background-repeat: repeat-x;' cellpadding="0" cellspacing="0" border="0">
  <tr>
      <td>
          <img height="48" width="130" alt="Dogpile" class="image" src='http://ttl60m.wsoo.infospace.com.edgesuite.net/dogpile/ws/pics/ext_form_banner_logo.gif/_iceUrlFlag=15?_IceUrl=true'/>
      </td>
      <td>
          <input type="text" name="qkw" value="" style="width:300px;"/>
      </td>
      <td>
          <input type="image" name="submit" value="Search" title="Go Fetch!" src='http://ttl60m.wsoo.infospace.com.edgesuite.net/dogpile/ws/pics/goFetchBtn.gif/_iceUrlFlag=15?_IceUrl=true' style="display:block;margin-right:4px;"/>
      </td>
  </tr>
</table>
</form>
<noscript>Search widget by <a href="http://bloganol.blogspot.com">Bloganol</a></noscript>

Mini Sidebar Style



Code:

<!-- Search Dogpile -->
<form method="get" action="http://www.dogpile.com/dogpile/ws/redir/rfcp=Other/rfcid=999915/_iceUrlFlag=11?_IceUrl=true" style="margin: 0;">
<input type="hidden" name="qcat" value="web"/>
<input type="hidden" name="_IceUrl" value="true" />
<table width="150" height="117" background='http://ttl60m.wsoo.infospace.com.edgesuite.net/dogpile/ws/pics/ext_form_sidebar.gif/_iceUrlFlag=15?_IceUrl=true'>
    <tr>
        <td style="text-align:center;vertical-align:top;padding-top:8px;height:30px;">
            <input type="text" name="qkw" value="" style="width:126px;"/>
        </td>
    </tr>
    <tr>
        <td style="text-align:center;vertical-align:top;">
            <input type="image" name="submit" value="Search" title="Go Fetch!" src='http://ttl60m.wsoo.infospace.com.edgesuite.net/dogpile/ws/pics/btn_fetch.gif/_iceUrlFlag=15?_IceUrl=true'/>
        </td>
    </tr>
</table>
</form>
<noscript>Search widget by <a href="http://bloganol.blogspot.com">Bloganol</a></noscript>

Free world visitors map widget

This world visitors map widget is latest in the line of Visit Widget site tracking widgets.This widget is provided for you by widgetbox.You may have already tried feedjit world visitors map widget.It is more advanced than fedjit world visitors map widget.

This widget is provided for you in 7 colors ie in Blue,Aqua,Green,Yellow,pink red and Black.That means you can use any color among provided that matches your blog color.Besides this you can choose default Map in the widget.You can use Europe,Asia... as a default map in your widget.The best thing about this widget is you can get this widget at any size that matches your sidebar size.

Onething i forgot to say that the advanced nature of this widget requires an additional step for it to function correctly. Please see this forum post http://forums.widgetbox.com/viewtopic.php?pid=1092

Visit World Visitors Map Widget Creator Page

Showyourself Widget

In short ShowYourself is a simple to make, easy, free and fun utility to help establish your identity across the web. Have a Flickr account and a Facebook and AIM? Combine all your profiles on the web into one attractive widget that you can put on your blog, your myspace or anywhere on the web.This widget is created by dustin Bachrach.

To setup this widget goto showyourself widget creator page.Provide your username of different sites in the widget form , Get the widget code and paste it to to your blog. I hope you will enjoy using this,

Download Youtube Video in Mp4 and FLV format

Till now we have written two posts about downloading youtube videos : How to Download Youtube Video? and Download Youtube Video Widget for Blogger . But now we are bringing you the widget by which you can download youtube video in both FLV and MP4 format.

This great widget is created by technojuice. By using this widget you can download your favourite Youtube video in MP4 format . You dont need to use any converter to convert your video into your I pod playable format ie mp4 format.

This widget is just the upgraded form of the old widget . In the old widget after you paste your video url you were given only one download link in FLV format . But now after you paste your video url and click download you will be given two download links in FLV and MP4 format.just see the snapshot in left.

To download youtube video in Mp4 format paste your youtube video link in the following widget and Click download Download.




Or if you like to put this wdget in your blog then visit this link , Copy the widget Code and Paste it to your blog.

Create Table of Contents in Blogger

"Create table of contents in blogger" searching in Google is Easy but good result wont come until anyone complete the hack to create table of contents.Now this hack is completed by beautifulbeta.Beautifulbeta is a blog that provides you different blogger hacks,blogging tips,SEO tips and many other thi9ngs to help promote your blog.Now lets come to the point.

Table of contents helps you and others to find your blog posts easy and Faster. Besides this there are different others advantages of Creating Table of Contents . After you complete this hack on your blog you and others can view and hide table of contents in just a mouse click.You can sort post by date and title.Now let's start creating this hack.


Goto blogger Edithtml Page and look for <b:section> with id=main.This section hold blog posts . Change that line of code as follows.

<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>

Add the following CSS code to the Head section of your Template.This code is for the style of your Table of Contents. You can change this code according to your need.

<style type="text/css">
#toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:500px;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ffd595;
color: #000000;
padding-left: 5px;
width:250px;
}
.toc-header-col2 {
width:75px;
}.toc-header-col3 {
width:125px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
font-size:80%;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:80%;
text-decoration:underline;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:70%;
}
</style>

Save your Template and goto your blog Page Elements Tab . Now add a new Html and Paste the following code leaving the Title Blank.
<div id="toc"></div>

Now do the Final step . Again add a new Html and paste the Following Code.Set the title as "Table of Contents"

<div id="toclink"><a href="javascript:showToc();">Show TOC</a><br/><br/></div>
<script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script>
<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

Change Yourblog with your own Blog name and Enjoy Table of Contents.

Add color Picker widget to your blog

Its not always adobe photoshop best to pick the Color. Now the dynamicdrive brings you the new widget named color picker Widget.By installing this widget in your blog you can pick colors without leaving your blog. You are also provided with a demo Page . So before installing this widget please visit the Demo Page .This widget extends it with the following user friendly features:

• Ability to display the Color Picker either inline on the page, or as a floating widget, activated by clicking on a "control".
• An arbitrary control can be defined and associated with the target form element, so clicking on it activates the Color Picker while optionally painting the control's background with the selected color in real time.
• Easily customizable- Each Color Picker is simply defined as an empty DIV on the page, surrounded by additional content of your choice.
• Multiple instances of YUI Color Picker supported, so two groups of FORM elements on the page can each have its own Color Picker, instead of one shared by all FORM elements, for example.

You can setup this widget on your blog by following this two steps:

First of all Copy the Following Code and Paste it to the head section of your blog.

<!-- YUI Dependencies --> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/utilities/utilities.js" ></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/slider/slider-min.js" ></script> 

<!-- Color Picker source files for CSS and JavaScript --> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/colorpicker/assets/skins/sam/colorpicker.css"> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/colorpicker/colorpicker-min.js" ></script>

<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex11/ddcolorpicker/windowfiles/dhtmlwindow.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.dynamicdrive.com/dynamicindex11/ddcolorpicker/windowfiles/dhtmlwindow.css" />

<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex11/ddcolorpicker/ddcolorpicker.js">

/***********************************************
* Color PIcker Widget (YUI Based)- By Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Requires: YUI Color Picker and DHTML Window Widget
***********************************************/

</script>


<style type="text/css">

* html .yui-picker-bg{ /*Requires CSS. Do not edit/ remove*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://yui.yahooapis.com/2.5.1/build/colorpicker/assets/skins/sam/picker_mask.png',sizingMethod='scale');
}

/*Style used in demos below. Edit if desired*/

.colorpreview{ /*CSS for sample Preview Control*/
border: 1px solid black;
padding: 1px 10px;
cursor: hand;
cursor: pointer;
}

form div{
margin-bottom: 5px;
}

</style>

Now Paste the following code in your blog by adding a new page Element.

<h2>Example 1: Floating Color Picker</h2>

<form>

<p>Select a Color:</p>

<div>Rectangle control, preview on: <input type="text" id="field1" size="20" /> <span id="control1" class="colorpreview"> </span></div>

<div>Text link control, preview off: <input type="text" id="field2" size="20" /> <a id="control2" class="nopreview" href="#">[Select Color]</a></div>

<div>No control, instead set focus on field: <input type="text" id="field3" size="20" /></div>

</form>

<!--HTML for Color Picker. Should contain two unique IDs-->

<div id="ddcolorpicker">
Please choose a color:
<div id="colorpicker" style="position:relative; height:205px"></div>
<a href="http://www.dynamicdrive.com/dynamicindex11/ddcolorpicker/" style="margin-left:5px; font-size:90%">DD Color Picker Widget</a>
</div>


<script type="text/javascript">

ddcolorpicker.init({
colorcontainer: ['ddcolorpicker', 'colorpicker'], //id of widget DIV, id of inner color picker DIV
displaymode: 'float', //'float' or 'inline'
floatattributes: ['DD Color Picker Widget', 'width=390px,height=250px,resize=1,scrolling=1,center=1'], //'float' window attributes
fields: ['field1:control1', 'field2:control2', 'field3'] //[fieldAid[:optionalcontrolAid], fieldBid[:optionalcontrolBid], etc]
})

</script>


<hr style="margin-top: 100px" />

<h2>Example 2: Inline Color Picker (always visible)</h2>


<form>

<p>Select a Color:</p>

<div>Rectangle control, preview on: <input type="text" id="field1alt" size="20" /> <span id="control1alt" class="colorpreview"> </span></div>

<div>Text link control, preview off: <input type="text" id="field2alt" size="20" /> <a id="control2alt" class="nopreview" href="#">[Select Color]</a></div>

<div>No control: <input type="text" id="field3alt" size="20" /></div>

</form>

<!--HTML for Color Picker. Should contain two unique IDs-->

<div id="ddcolorpickeralt">
<div style="color:white; background:black; width: 400px; margin:1em 0; padding: 3px">Set focus on form field, then choose a color:</div>
<div id="colorpickeralt" style="position:relative; height:205px"></div>
</div>


<script type="text/javascript">

ddcolorpicker.init({
colorcontainer: ['ddcolorpickeralt', 'colorpickeralt'],
displaymode: 'inline',
floatattributes: ['DD Color Picker Widget', 'width=390px,height=250px,resize=1,scrolling=1,center=1'],
fields: ['field1alt:control1alt', 'field2alt:control2alt', 'field3alt']
})

</script>

If you got any problem or Widget don't work then please leave a comment.

Add paypal Donation widget on your blog

Have you ever seen Paypal donation box on other blogs . If yes then you must be wondering to put this donation on your blog but unable to create this box to put on your blog. If no then see here. This Paypal donation box was created by the online Quest . But the widget was not complete . There needs some modification on this widget . Therefore bloganol modifies this widget and brings you this widget.

But there are some requirements of this widget . You must need a paypal account. Do you have it ? Yes.Thats good .If not signup to paypal and its free.But the paypal account must be verified either by entering your card number or Bank Account.

Now the time comes to setup paypal donation widget in your blog . Just copy the Following Code and paste it to your blog by adding a new page Element.

Code:

<!-- The-Online-Quest Pay Pal Donation Form Code Start -->

<center>
<table width="143" cellspacing="0" cellpadding="0" style="border: 1px solid #000000; padding: 5px;">
<tr>
<td>
<p align="center"><b>Please Donate To My Blog</b>
</p></td>
</tr>
<tr>
<td width="145">
<form action="https://www.paypal.com/row/cgi-bin/webscr" name="_xclick" method="post">
<input value="Thanks for Your Donations - Blog/Website Title" name="item_name" type="hidden"/>
<input value="Your paypal email" name="business" type="hidden"/>
<p style="margin-top: 0; margin-bottom: 0">
<input value="_xclick" name="cmd" type="hidden"/>
<!-- input type="hidden" name="amount" value="1.00" -->
<b>Amount</b> <p style="margin-top: 0; margin-bottom: 0"> <select name="Amount" size="1">
<option selected value="1.00"/>1.00
<option value="2.00"/>2.00
<option value="3.00"/>3.00
<option value="4.00"/>4.00
<option value="5.00"/>5.00
<option value="10.00"/>10.00
<option value="15.00"/>15.00
<option value="20.00"/>20.00
<option value="25.00"/>25.00
<option value="30.00"/>30.00
<option value="35.00"/>35.00
<option value="40.00"/>40.00
<option value="45.00"/>45.00
<option value="50.00"/>50.00
<option value="100.00"/>100.00
<option value="200.00"/>200.00
<option value="300.00"/>300.00
<option value="400.00"/>400.00
<option value="500.00"/>500.00
<option value="1000.00"/>1000.00
</select>
<p style="margin-top: 0; margin-bottom: 0"><b>Currency</b> <select name="currency_code" size="1">
<option value="AUD"/>Australian Dollar
<option selected value="USD"/>USD
<option value="GBP"/>British Pound
<option value="CAD"/>Canadian Dollars
<option value="CZK"/>Czech Koruna
<option value="DKK"/>Danish Kroner
<option value="EUR"/>EUR
<option value="HKD"/>Hong Kong Dollars
<option value="HUF"/>Hungarian Forint
<option value="JPY"/>Japanese YEN
<option value="NZD"/>New Zealand Dollars
<option value="NOK"/>Norwegian Kroner
<option value="PLN"/>Polisg Zlotych
<option value="SGD"/>Singapore Dollars
<option value="SEK"/>Swedish Kronor
<option value="CHF"/>Swiss Francs
</select>
</p>
<p style="margin-top: 0; margin-bottom: 0" align="center">
<input border="0" alt="Make payments with PayPal - it's fast, free and secure!" width="60" src="http://www.blogpulp.com/imagehost/images/5971708800.gif" name="submit" height="30" type="image"/>
</p>
</p></p></form>
</td></tr>
<tr>
<td>
<p align="right"><b><font face="Arial" size="1">
<a href="http://djyano.blogspot.com/2008/04/put-paypal-donation-code-to-your.html" target="_blank"> The-Online-Quest</a> 

<a href="http://bloganol.blogspot.com/2008/05/add-paypal-donation-widget-on-your-blog.html">
Bloganol</a></font></b>
</p></td>
</tr>
</table>
</center>

<!-- End of The-Online-Quest Pay Pal Donation Form Code -->
<center>
<a href="http://bloganol.blogspot.com/2008/05/add-paypal-donation-widget-on-your-blog.html">
Add this Box to my Blog</a></center>

In this widget we have modified a little and you should also modify it a little. In the above code you have to edit some code for your use.

Change Your Paypal Email with your own Paypal account email . For Example my paypal Email is deineshd@gmail.com so i have to change it to deineshd@gmail.com.

Another is Change Blog/website Title with your own Blog/Website Title. For example my Blog title is Bloganol therefore i should change it to Bloganol.

I hope you understand my words . If not then leave a comment.

Remember Asking donation is not bad . Our John Brother also asks donation via his blog and also shows income earned by taking donation in his monthly income.

Surfer's screen type Detection Tool

It is the tool that detects your surfer's screen's height , width and color depth and displays it . To setup this widget in your blog just come the following code and paste it into your blog by adding a new page element.

<table border="0">
<tr>
<td><form method="POST" name="t">
<table border="0">
<tr>
<td valign="top" width="150"
bgcolor="#efefef"><strong>Your screen's width:</strong></td>
<td><input type="text" size="20"
name="t1" value="not supported"></td>
</tr>
<tr>
<td valign="top" width="150"
bgcolor="#efefef"><strong>Your screen's height:</strong></td>
<td><input type="text" size="20"
name="t2" value="not supported"></td>
</tr>
<tr>
<td valign="top" width="150"
bgcolor="#efefef"><strong>Your screen's color Depth:</strong></td>
<td><input type="text" size="20"
name="t3" value="not supported"></td>
</tr>
<tr>
<td valign="top" width="150"
bgcolor="#efefef"><strong>Your screen's pixel Depth:
</strong></td>
<td><input type="text" size="20"
name="t4" value="not supported"></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
<p align="left">
<script>
<!--

/*
Surfer's Screen Type Detection Script- © Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and TOS, visit dynamicdrive.com
*/

function show(){
if (document.all||document.getElementById||document.layers){
document.t.t1.value=screen.width
document.t.t2.value=screen.height
document.t.t3.value=screen.colorDepth
document.t.t4.value=screen.pixelDepth
}
}
show()
//-->
</script>

Check Pagerank widget

Now the Pagerank is seem to be updated this week . Some blogs increase their pagerank and some blogs decreased their Pagerank . Pagerank is calculated according to blog popularity , backliniks and other various factors.Those blogs which struggle a lot , collect backlinks increase its backlink just increased their Pagerank and Those blog which loses its popularity,backlinks just decreased their Pagerank.If you also want to check your Pagerank Use the following widget to calculate your Pagerank.


If you want to Put this widget in your blog then Copy the following Code and Paste it in your blog.

<table align="center" cellspacing="1" cellpadding="5" border="0" bgcolor="#C0C0C0"><br /><tr style="color:#FFFFFF;"><td><span style="font-size: 11px; font-family: Verdana;"><b>Check Page Rank of any web site pages instantly:</b></span></td></tr><br /><form action="http://www.prchecker.info/check_page_rank.php" method="post" target="_blank"><br /><tr bgcolor="#FFFFFF"><td><input type="hidden" name="action" value="docheck"><br /><input type="text" value="http://" name="urlo" size="30" maxlength="300"> <br /><input type="submit" name="do_it_now" value=" Check PR "><br /></td></tr></form><tr bgcolor="#FFFFFF"><td><br /><span style="font-size: 9px; font-family: Verdana;"> powered by<br /><a target="_blank" href="http://www.prchecker.info/">Page Rank Checker</a> <br />and Promoted by <a target="_blank" href="http://www.bloganol.blogspot.com"><br />Bloganol</a></span></td></tr></table>

How can I Create Add this to my Blog button in Blogger?

Although the real title of this Post is “How do I create new widgets for other people to add to their layouts?” But I changed it into “How can I Create Add this to my Blog button in Blogger?” .There
is not so big reason for changing the post title. The original title of this hack is different from our thinking. People searched for this hack when they see “Add this to my Blog “Button in other Blogs and find it Interesting. Without going its history let’s come to the Point.

You can place this Widget or button anywhere in your Blog i.e. within posts or in your sidebar. For this First design a widget, put it in your Blog and start spreading your widget. When someone clicks in the button they will be taken to the Blogger layout page where they can add your widget.

Now look at the Example Below that provides a single button “ Links to Bloganol “ That helps others to add a widget to their layout that links to Bloganol.

<form method="POST" action="http://www.blogger.com/add-widget" target="_blank">
<input type="hidden" name="widget.title" value="BloganolWidget">

<input type="hidden" name="widget.content"
value="<a href='http://www.bloganol.blogspot.com'>Bloganol</a>'/>

<input type="hidden" name="widget.template" value="&lt;data:content/&gt;"/>

<input type="hidden" name="infoUrl" value="http://bloganol.blogspot.com"/>

<input type="hidden" name="logoUrl" value="http://www.blogger.com/img/icon_logo32.gif"/>

<input type="submit" name="go" value="Link to Bloganol"/>

</form>

Important Parts of the Form.

• form action="http://www.blogger.com/add-widget" - (Required) Your form must submit its information to this URL in order for it to be handled properly by Blogger. Blogger recommend using the POST method to submit, but GET also works, if you don't have too much data in your widget.
• widget.title - (Optional) The title you specify will display in the user's Page Elements tab when they edit their layout. It will also be shown as part of the default widget template. The title can be up to 100 characters long, and may contain well-formed HTML.
• widget.content - (Required) This is the actual content of your widget, which will be displayed on the user's Blog. It can include almost any well-formed code that you want, except for and tags. Note, however, that you will need to escape the code, as in the example above (e.g. becomes <a>).
• widget.template - (Optional) This should follow the widget tag guidelines. You can also use any of the globally available data tags. If no template is specified, it uses as a default.
• infoURL - (Optional) You can use this to specify a page on your site that describes your widget or gives other information about it. It will be used as a "more info" link on the setup page people see when adding your widget.
• logoURL - (Optional) You can add an image URL here, and the image will be displayed next to the "more info" link. It should be thumbnail sized (i.e. less than 100x100 pixels).

I hope you will enjoy using this.

Share With Madkast

Madkast is a social bookmarking tool which helps you to share your blog content to different social bookmarking sites . It can be also said as a social bookmarking widget.Besides Submitting to different social networking sites you can send the blog content to your friend's Email or Mobile. It is free and is also Easy to setup . Just enter your Email Id and get the Code and paste it in your blog.Look at the Snapshot Below.