Google Translate Widget with Flags for Blogger

Google translation for your blog is now made easy with the use of flags. Add a Google Translator widget with mini flags to Blogger.

With the help of Google Translate and by adding flags to it, this widget in HTML, allows your visitors to translate your site and blog in their own languages.

Features:

• Translate widget with mini Flags for Blogger
• Coded in HTML, no JavaScript used so that it can also be viewed with Lynx based browsers which are unable to load script files.
• This Widget can translate any language to readers preferred language that are supported by Google Translate.
• I have included 10 languages in this widget. They are: Chinese(Simplified), Portuguese, English, French, Italian, German, Japanese, Korean, Russian and Spanish.
• Available for both English and Non-English blogs.
• Animation effects for modern browsers. (New)

Tested on a French language blog.

Demo

How to add this widget! Just click any one of the "Add to Blogger" Button.

Translator Widget with Mini Flags for English blogs

Translator Widget with Mini Flags for Non English blogs

Let me know if it helped you or if you have any problems or bugs with it.

[Read More...]

Christmas Countdown Widget for Blogger

Christmas is pretty near and we have already started our count down. This widget does what the name suggests. It will display the number of days, hours minutes and second left till Christmas. When it reaches the target date, it will display a Greeting Message

Demo

You can see a demo of this Widget on my Sidebar. If you need a bigger demo, here it is:
Wish you all a very Happy Christmas!

How to Add the Widget

If you want the code to use it elsewhere, then here it is :

<div id="bp_count_down_div"></div>
<script language="JavaScript">
var bp_date_target = new Date("December 25, 2011 00:00:00");
var bp_date_now = new Date();
var bp_count_down_complete_message = "Wish you all a very Happy Christmas";
if (bp_date_now >= bp_date_target) {
 document.getElementById("bp_count_down_div").innerHTML = bp_count_down_complete_message;
} else {
 bp_time_difference = Math.floor(((bp_date_target - bp_date_now).valueOf()) / 1000);
 display_time_difference(bp_time_difference);
}
function display_time_difference(bp_time_difference) {
 if (bp_time_difference <= 0) {
 document.getElementById("bp_count_down_div").innerHTML = bp_count_down_complete_message;
 return;
 }
 bp_count_down_message = bp_format_seconds(bp_time_difference, 86400, 100000) + " Days " + bp_format_seconds(bp_time_difference, 3600, 24) + " Hours " + bp_format_seconds(bp_time_difference, 60, 60) + " Minutes " + bp_format_seconds(bp_time_difference, 1, 60) + " Seconds for Christmas";
 document.getElementById("bp_count_down_div").innerHTML = bp_count_down_message;
 setTimeout("display_time_difference(" + (bp_time_difference - 1) + ")", 1000);
}
function bp_format_seconds(secs, num1, num2) {
 num = ((Math.floor(secs / num1)) % num2).toString();
 if (num.length < 2) s = "0" + num;
 return "" + num + "";
}
</script>

The widget makes use of some simple JavaScript methods which displays the count down based on the User’s System Time. You can customize the Widget by Editing the Widget Content. If you liked the count down, do share it with your friends and please let us know if you have any suggestions for improving the widget.

[Read More...]

50 Great Widgets For Your Blog

Widgets are a handy, easy and simple way to add some flare to your blog. Whether you’d like to display the number of currently online visitors to your site or simply the weather report for Los Angeles, you can do it with widgets. We’ve assembled a list of 50 useful or simply cool widgets for your pleasure. And remember, the first rule of widgetizing your blog is – don’t overdo it!

MyBlogLog’s Recent Readers – this widget can easily be called a hit amongst blog owners; its popularity even managed to convince Yahoo into buying MyBlogLog. The widget lets you see the avatars of recent visitors to your blog, provided they’re also members of MyBlogLog.

Mashable – get the latest social networking news from this very site.

Flickr Flash Photo Stream Badge – display images from your Flickr profile with a handy Flash photo stream.

Preview Anywhere – see a live preview of outgoing links in a small popup which activates on mouseover. Some find this annoying, while others might find it useful.

Twitter Badge – if your life is so interesting that everyone must know what you’re up to all the time, then a Twitter badge is the ideal counterpart to your blog. It’ll proudly displays your recent tweets.

Digg News – display the latest Digg links on your blog. Themeable and fully customizable.

FEEDJIT – real time traffic data directly in your blog’s sidebar.

LineBuzz – inline comments for your blog. Very handy for blogs with frequent lively discussions.

Flixn – display a stream directly from your webcam, so your blog visitors can always see what you’re up to.

3Jam – lets your visitors send messages to your mobile phone, without them knowing your phone number.

Jaxtr – with Jaxtr, your visitors can actually call you to your mobile phone; again, your number stays private.

LinkedInABox – show off your LinkedIn profile. Perfect for personal blogs.

Box Widget – enable visitors to use box.net’s online storage directly on your web site.

Price of gas – displaying gas prices on your blog might seem unnecessary to some, but it’s cool if you have a traffic/travel related blog.

iBegin Weather Widget – Display weather information in your sidebar. Just like with Price of Gas, works great with travel-related blogs.

ClockLink – display time in various time zones with these nifty Flash clocks.

Film Loops – display the latest loops from your FilmLoops account.

Daily Painters – display paintings from famous painters on your blog.

WhoLinked – show your visitors which sites have recently linked to your web site. Works with all major blog platforms.

Criteo AutoRoll – displays links to blogs similar to your blog.

Bitty Browser – embed a cute, fully functional mini web browser to your blog.

Leafletter – create a mini website and embed it into your blog.

WikiSeek – search Wikipedia with this simple widget.

FeedCount – show off the number of visitors to your blog with this handy little button.

Technorati Link Count – display the number of links your website has from one of the biggest blog authorities – Technorati.

MyPageRank – another good way to show how “big” your blog is is to show off your Google PageRank.

CheckPageRank – in addition to showing your PageRank, this widget also shows your Alexa ranking.

BlinkxIt – embed a link to related videos directly into your website.

Skype button – display your Skype online/offline status on your blog.

RockYou Horoscope – not something I would personally use, but some people are into horoscope. Hell, most people are into horoscope. Anyway, this widget shows horoscope (doh!) and does it in a nicely designed colorful box.

del.icio.us Tagometer – display how many times have del.icio.us users saved your page.

del.icio.us Linkrolls – this badge shows your latest bookmarks from del.icio.us.

Timelines – need to create a timeline? Seek no further. This widget makes it really easy.

PollDaddy – PollDaddy lets you create beautiful polls in no time, and display them at your blog.

Vizu – another poll-making widget, compatible with all major blog platforms.

AnswerTips – display definitions from Answers.com for various terms on your blog. The definitions are shown in bubbles which are activated on doubleclick.

AnswerBoxes – give your visitors a chance to enter a term themselves, and get a definition from Answers.com

Now Playing – if you got to share your current playlist contents with the world, Sigamp will do the trick. Works with most popular music players, including Foobar, Winamp, iTunes and others.

BuzzBoost – display headlines from your RSS feed on any website.

LibraryThing – show off the latest books you’ve been reading.

Plaxo Address Book – let your most faithful visitors access their address books direclty from your site.

AuctionAds – a widget that displays auctioned items on eBay, and gives you a percentage of the price paid when sometimes buys an item.

aStore – similar to AuctionAds, only for Amazon. Create a mini-store on your site and receive profit when someone buys an item through your store.

Plazes – show your current location on a Plazes map.

Stockalicious – track your portfolio with this widget, and share it with others. Let everyone know how much money you’ve lost.

Yahoo! For Good – create a charity badge and ask for donations for a worthy cause.

Giftspace – your friends never know what to buy you for birthday? Let them know what you really want with this nifty widget.

MixMap – see where are the visitors to your MySpace profile from on a map.

Google Map Widget – display a searchable Google Map on your website.

Google Video Search – add a video search form and selected videos to your web site.

Odeo player – display an Odeo player for and podcast right there in your sidebar.

[Read More...]

How to make a blogger template : how blogspot widget work?

In previous posts ,you known the meaning of Blogger data tags ,now in this post ,we will see how blogspot widget ,the most important widget in blogger work .
Blogpost widget is the widget that show the process and show the blog post .
It contain many 'includable' inside ,this structure you can get from the post on widget.
Now let't see how it work

In a template , Blogpost widget start with this line
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

The id can be vary in different template ,but the type="Blog" is required
In this widget ,there are some 'includable' :

• <b:includable id='main' var='top'> : main includable ,this includable will take the main task for processing data and show the result to user computer
•  <b:includable id='nextprev'>: this includable will add the link 'next page' ,'prev pag' at the bottom ofhomepage ,archive page ,and add the link 'next post','previous post' at the bottom of single post .
• <b:includable id='mobile-nextprev'> this includable do the same task to nextprev includable above ,but this includable will work if you browse the blog in mobile .
• <b:includable id='post' var='post'> this includable will process the data of each post ,it will show post title,post body ,date .... if you are reading a single post ,and show post summary if you are inhomepage or archive page
• <b:includable id='mobile-index-post' var='post'> like 'post' includable above ,but it work on mobile
• <b:includable id='postQuickEdit' var='post'> this includable will add an small pencil at the end of post ,that allow blog owner can edit the post easily ,click on this pencil ,blog owner will be redirected to post editing window ,don't need to back to dashboard ,and search for post which he want to edit from post list.
• <b:includable id='shareButtons' var='post'> this includable will show a list of share buttons at the end of post
• <b:includable id='comments' var='post'> show all comments of each post .
• <b:includable id='commentDeleteIcon' var='comment'> add a recycle bin symbol next to the comment ,allow blog owner delete unwanted comment .
• <b:includable id='comment-form' var='post'> show the comment form bellow the post ,allow reader to write their comment .
• <b:includable id='backlinks' var='post'> show the backlinks to a post .
• <b:includable id='backlinkDeleteIcon' var='backlink'> show the recycle bin icon next t'o the backlink
• <b:includable id='feedLinks'> and <b:includable id='feedLinksBody' var='links'> :show the feed links to blog and to each post .
• <b:includable id='status-message'> show the status message ,like this ' show all post under label xyz '

Blogpost work as diagram bellow

1,When Blogpost widget start working
2,It start a loop statement to looping through all post 
3,If the post counting number i smaller than the number of post ,it will call the post includable for showing post data (post title ,post body ,author ,labels...)
4a,4b,4c In the post includable ,if the current page is a single post ,it also call other includables such as post edit icon ,comment ,comment form ... ,but if current page is homepage or an archive page ,these includable will not be called .
5,Go to the next post and back to the check point at step 3
6,In case of finish looping through all posts ,back to the main includable 
7,Call next prev includable (or feedlinks,backlinks...if necessary) ,add the link to next and previous post to the end of page .
8,Finish

In these includable ,beside data tags ,we can add HTML ,javascript to make it display as we want .
Combine this post with previous post on data tags,widget structure ,looping and conditional statement ,you will get a big picture on how a template work when reading the code .
Hope this post helpful to you.

This is a guest post by Nhamngahanh. If you want to see post more, check here.

[Read More...]