Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

May 15, 2007

Digg This Story

Blog Widgets, Gadgets and Add-ons (I)

In this series, we shall list the free, popular, and interesting web widgets and gadgets that you can consider adding to your Blog. Widgets are elements that extract the services or content from other sites. Some of these widgets are useful, providing your readers with news, information, and reference tips. Others may be just fun and games which make your Blog a little more interesting and promote interaction among your readers. Because there are so many applications, developers and sites, this article will be split into parts and we shall update them now and then.

Many of the sites offer easy to install HTML or JavaScript codes. All you need to do is to copy the code and place them into your layout. For instance, if you want a widget to appear in your sidebar, login to your Dashboard, go to Template -> Page Elements and click “Add a Page Element” at the sidebar. Select “HTML/JavaScript”. Paste the code generated by the service provider and save. Every time you create a new page element, it appears at the top of all the other elements. If you want it somewhere near the bottom of the sidebar, just left-click that “Page Element”, drag and drop to the place you want. Click “Save” at the top right hand corner of the page to save the new layout.

A note of caution when adding widgets. While you may be tempted to have as many widgets as you can lay your hands on, having too many may clutter the Blog and cause slower page downloads. Also, since many of them work on JavaScripts, readers who configure their Firefox or IE browsers to block scripts may not see these features. For these reasons, we have added only a couple of widgets to let you have an idea, but have not included all the widgets listed in this article. Take your time to pick those that truly complement your Blog contents.

Google Gadgets

Take a look at the directory of widgets at Google Gadgets and you will instantly know what widgets are all about.

Blog Widgets, Gadgets and Add-ons

Many of the applications are created by different developers and users. There is no registration required at your end. When you have chosen one, click “Add to your webpage” and you will be asked to customize the title, width, height and border of the gadget. If the width of your sidebar is e.g., 150 px, you may want to set the gadget width to something less than that. It is alright to have a larger width, but readers will have to scroll to view the gadget in its entirety. When you are satisfied, click “Get the Code”. Copy the code and paste it into your “Page Element” described above.

Widgetbox

If you think Google Gadgets are great, you would love the directory of web widgets at Widgetbox. They provide ready installation codes for TypePad, WordPress, Blogger, MySpace and most other blogs, sidebars or websites.

Blog Widgets, Gadgets and Add-ons

Register for a free account. Search for the widgets that you like. Determine the display settings and click “Get Widget”. You can either “Get Widget Code” and paste it into your Blog layout as described above, or let them do it for you by clicking “Add to Blogger”. We prefer the first method.

If you have several widgets, you can also “Make a New Panel” under “My Widgets” and add these widgets into your panel. The advantage is that when you “Install”, you will have one code generated for the panel rather than several codes.

Snipperoo

In a similar fashion, Snipperoo has a directory of widgets that you can use. You can pick several widgets, arrange them into a panel, and the site will generate one code for you to place on your Blog. We think that configuration was much easier previously. With their new interface and a scheme to pay you for putting the widgets in your Blog, we would rather stick with Widgetbox.

Blog Widgets, Gadgets and Add-ons

In any event, if you want to have a look, register for a free account. Once you are logged in, begin by creating a “New Panel”. To the left, you will see “Get Widgets”. Add the ones you like into your Panel. Drag and drop to arrange them in the desired positions. Click “Publish” to update and generate a code.

AddThis

This is a useful service. The widget allows readers to easily bookmark your Blog, or subscribe to your feeds. It supports many feed reader as well as social bookmarking services. The design looks neat and saves up a lot of space.

Register at their AddThis site. You can either have a Bookmarking widget

AddThis Social Bookmark Button

or Feed widget

AddThis Feed Button

If you are prompted to enter your Feed URL, you could use your Blog URL with “/atom.xml” or “/rss.xml” after it. In this Blog, you will see that the Bookmarking widget has been inserted into the template such that it automatically appears after every post. To do this, go to Template -> Edit HTML and click the “Expand Widget Templates” checkbox.

Blog Widgets, Gadgets and Add-ons

Next, look for this line: -

<div class='post-footer'>


Paste the generated Bookmarking widget code either just before or just after that. You can preview the Blog to see the difference in the position of the widget. Should you want the widget to appear on the left or right, you can align it by adding the following alignment tags to the widget code:-

<div align='right'>WIDGET CODE</div>


Lilypie

If you have a baby, child, or are expecting one, the tickers you find at Lilypie will be nice inclusions in your Blog.

Blog Widgets, Gadgets and Add-ons

You don't need to register to use the service. Simply choose the background, select marker and input personalized text to create a ticker code. Paste the HTML code into your Page Element.

TickerFactory

This is another tracker that you can add to your Blog. Visit their TickerFactory site and choose something that you would like to track. The popular ones are weight loss progress, baby's age and anniversary countdowns. No registration is required.

Blog Widgets, Gadgets and Add-ons

Customize the ruler and ticker slider designs, copy the HTML code and paste it into your Page Element.

AuctionAds

Blog Widgets, Gadgets and Add-ons

Sign up for an account at AuctionAds to display an eBay auction widget. The displays are related to the key words you assigned. According to their FAQ, their ads are compatible with AdSense and other ad systems. In short, you can have both AuctionAds and AdSense ads in your Blog. You get a commission when someone buys an item from eBay and it is an additional way to earn some revenue through your Blog.

This article continues at Blog Widgets, Gadgets and Add-ons (II). You may also consider having a chatbox, shoutbox or message board on your Blog.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

27 comments:

Ivan said...

You liked the old interface better - I wish you'd told us! I think you'll find the new UI works a lot better, even if it has got a bit more, umm, designed. Just to pick up how we differ from Widgetbox - you can use Snipperoo to collect and store our own choice of code widgets from anywhere - they don't have to be in our gallery. In fact, we don't have a gallery - we sort of think people like to make their own selection of widgets. Once you've added whatever codes you use to Snipperoo you'll find it's very simple to add and remove and reorder your widgets as often as you like. And when you decide to rejig your Adsense or your MyBlogLog - just add another version to your account and give it a go.
Anyway, thanks for giving us a review and watch this space.

The GateKeeper said...

Hi there, Ms. Jen. I'm studying your post on how to add another column. Wow! There's a lot to learn. I guess I'll get to it. In the meantime how does one get the background of her blog to stay stationary? Thanks for all this cool info.

bizwhiz said...

Hi Gatekeeper

Add this line will do:-

body {
background-attachment: fixed;

For more details on positioning of your background image, you may look at the article "Background Image for Blogger Template".

meleah rebeccah said...

I love you! and this blog! and THANK YOU for doing all of this for US!

Naomi said...

This was an interesting post. I've heard that a lot of widgets can make your blog slow to load. I had a problem with my blog recently but it seems ok at the moment. I have a couple of question please as you seem really into all this. I'm just not technical at all! How do you set the time on a blog? Some of my readers remark that I post at odd times of the day an night! It's not that it's the fact that the settings aren't right. I'm in England so would have to set it to that zone. The other thing I would like to ask is I've been blogging for a couple of years now. Is there a limit to the number of posts that a Blogger blog can hold or can you just keep posting on and on and on! Would really appreciate your help and advice. Thanks very much. NAOMI

bizwhiz said...

Hi Naomi

Setting for the time can be found at Settings -> Formatting. Choose the time zone that is applicable to you.

There is a limit for posts and pictures, etc. Perhaps you can refer to their guidelines :-
http://help.blogger.com/bin/answer.py?answer=42348

Hope that helps.

Naomi said...

Thanks a lot Bizwhiz. Appreciate your help. NAOMI

Kahshe Cottager said...

I found your blog just by chance. I am just an average computer user with no idea of how HTML works. I have followed your steps on how to make some changes to the appearance of my blog and I found your information easy to follow. I will be back to explore other tips and hopefully continue to improve my blog. You make it so much easier to do than the FAQ/Help feature on Blogger

Thanks!!!!

Naomi said...

P.S. I've given you a mention on my blog BizWhiz.

http://diaryfromengland.blogspot.com/2007/05/diary-from-england-time-settings.html

HEALTH -SCANER said...

hi friend

your blog is very beutiful and informatic.
keep it up.

http://scanerindia.blogspot.com

Anonymous said...

Dear bizwhiz,

How do I put all the social bookmarking icons like bookmark, delicious, stumble upon, and the like in one line in my blog. Can you please help me.

Zen Rao

bizwhiz said...

Hi Zen Rao

We use the addthis.com service which allows for easy bookmarking. Maybe when we want to have a row of icons in future, we shall write something on that.

bizwhiz said...

Just a follow-up to Zen Rao's query, we have given you the social bookmarking links code in our article on Social Bookmarking Links in Blogger.

Telling It Like It Is said...

Hi Bizwhiz, I've tried using auctionads on my site, along with adsense, but the very next day the auctionads don't show up. Is there something I'm doing wrong? Or, can we not use both adsense and auctionads at the same time?

I also find if I fill up my right columns with even just adsense (so anyone scrolling down my page will see them) they don't show up. Is there maybe something in my template coding that prevents me from having a certain amount?

bizwhiz said...

Hi Telling It Like It Is

At times, AuctionAds does take a long time to retrieve the info. According to them, their services are not in conflict with Google AdSense and you can have both.

You are aware that you can only display 3 AdUnits in a page. Even if you place many AdSense widgets, only 3 will be shown. You may have a look at their Terms.

Anonymous said...

Dear bizwhiz,

I having Lilypie widget after my Header, how do i position Lilypie to center. please help.

thanks
Carine

bizwhiz said...

Hi Carine

You can add these to the CODE given to you by their site.

<div align="center">CODE</div>

Anonymous said...

Hi bizwhiz,

I got it, thanks alot.

Carine

Roberto said...

Hi Bizwhiz,

Happy New Year and a hearty cheers to your helpful blogs!

My question concerns the possibility of turning my book reviews which I display on my right sidebar into an expandable type post in order to free up some space on my home page. Is this possible and do I do it with a side bar widget? Thanks again for the help you have always been.

Best regards,
RR

Anonymous said...

Hi bizwhiz,

How do i align my Lilypie widget below my background header?

please help. thanks.

Carine

Gioperation said...

I appreciate the help...I gave you a little shout...I like what you did with the double column...where can I find that? can you also come take a look at my blog and tell what you think and if you would change everything...Not only do I want to post blogs that help people get better and become better people, share a little about me...and if possible make a few dollars...ok I need to make a lot of dollars...but you understand...let me know and maybe we can link up.

Jeannie said...

You helped me out once again in showing how to place a 'share this' link in my post footer. Thank you!

De Achterhoek Blogger said...

Maybe of post but like to ask anyway. How do I keep my widgets when changing my layout?

Anonymous said...

great information about the auction ads.your suggestions helped me a lot to develop my blog.Hope you keep up the good work

MAHANEESH said...

Wow one of the nice blog i found is yours which has all information i want. Can you include about creating a theme for blogger too.

cardallya said...

Hi your article really helped me.. keg it. i have used some of ur triks on my blog latestsmscollection.blogspot.com and i can see the improvements

lauran said...

According to my opinion this is really very nice and informative post. This post really provide me lot of useful and good information.
-----------------
lauran
Social Bookmarking