Wednesday, 10 April 2013

How to Create your own Countdown Widget with Background Image (EASY AND FREE!)





Not too long ago, I received TERRIBLE service from Widgetbox and decided to create a code for a Widgetbox like Countdown Widget. The good thing about this is that it's FREE for all!

Here is the all important code and how to edit it:


<center><table border="0" cellpadding="0" cellspacing="0"><tr><td background="BACKGROUND IMAGE URL HERE"valign="bottom" width="200" height="300">CODE FROM MY COUNTDOWN HERE</td></tr></table></center>

Looks pretty simple right? And it kind of is!


The first step is deciding on an image width. This probably depends on which section of your Blogger Widget Sidebar you would like to place your countdown in when it's finished. If you head on into your Blogger Template Design section, click on "Adjust Widths" and you will be able to see how wide in pixels your side bar/s is/are. I suggest making it about 10 pixels smaller then this width, if you want to fill the area with a small border.

Next, edit your image width and height to make it the size you require. Then upload it to a photosharing site, such as Google Plus, Flickr, Photobucket etc, or a filesharing site such as Fileden. From there you will be able to right-click the image and "copy image URL". Paste this information in the above code where it says "BACKGROUND IMAGE URL HERE, keep it within the inverted commas. Change the "width" and "height" figures above in yellow, to the actual width and height of your image.

The next thing you need to do is head on over to Mycountdown or Time and Date to create the countdown section of the widget.

The most important part here is the width of your countdown... DON"T MAKE IT WIDER THAN YOUR IMAGE!

These are very versatile websites and the counter is free! You can change the date time and timezone of your counter, making it useable worldwide! As well as, making your event name, changing the text and background colour and the most useful thing of all, making your countdown transparent, to place over your image! You can certainly keep a solid background, but I find transparent much more appealing.

After you have created your countdown, click one of the "refresh" buttons, just to make sure all your changes are reflected in the code field at the bottom of the screen. Copy the entire code and paste it in the above code where it says "code for my countdown here".

Then you are done!

Simply copy your code and head on over to your Blog's Layout. Click "add a gadget". The past your code in the "content" area and save!

I am sure your countdown is perfect, but if you have any questions, contact me.

I have also created a "Get Widget" Icon if you want to share your creation, I will not cover that in a post though, so if you need it, just mail me a request.

Until next time folks,

No comments :

Post a Comment

Facebook Twitter Google + RSS Feed Email Me