How to Add Widgets to your blog. ~ The Blog Doctor.

How to Add Widgets to your blog.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

UPDATE : Blogger has now replaced the "Add Page Element" link with the "Add Gadget" link. Clicking on this link will bring up the "Add a Gadget" popup window. All the original Blogger widgets are listed under the Basics subtab in this popup window.

Blogger widgets are now called as Blogger Gadgets. The rest are Google Gadgets which have now been integrated into the Blogger Layout----->Page Elements tab.

To add widgets/gadgets to your blog ...........

Login to your Dashboard and click on Layout under your Blog name. This brings up the Page Elements page under the Template tab.

A Page Element is the other name for a Widget in Beta Blogger. Page Element are contained within Sections. The four Sections of your Blog are : Header, RightSidebar, LeftSidebar, Main(Blog Posts) and Footer. Click on Add Page Element link in any Section of the Layout. This opens the Choose A New Page Element window. Here are listed the types of Page Elements :

  1. List. Add a list of your favorite books, movies, or anything you like.
  2. Link List. Add a collection of your favorite sites, blogs, or web pages.
  3. Picture. Add a picture from your computer or from somewhere else on the web.
  4. Text. Add some words to your blog - like a welcome message - with our rich text editor.
  5. HTML/Javascript. Add third-party functionality or other code to your blog. You can add any Javascript here. Javascript need not be written for beta blogger specifically. To search for Javascripts just Google for them and then copy paste here.
  6. Adsense. Display AdSense ads targeted to your blog.
  7. Feed. Add content from a site feed to your blog.
  8. Labels. Show all the labels of posts in your blog.
  9. Logo. Choose from a variety of Blogger logos to add to your page.
  10. Profile. Display information about yourself.
  11. Blog Archive. Display links to older posts.
  12. Page Header. Display your blog's title and description.

Choose the type of Page Element you want and enter the data you want it to carry. Then Save Changes and View Blog.

To Edit the Page Element after adding it click on the Edit link in that section in Page Elemnts tab.
This will open a window to give access to edit options of each Page Element. For example if you click on Edit in Blog Posts section you will see the following window :

Here you can choose whether to show your Labels below your posts and other options. In the same way you can access other Page Elements for editing. You can also rearrange Page elements from this page by drag-and-drop method. To do this click on the element you want to move hold the click, drag it to new position and drop it (release click) there. See image below :

You can also add third party Page Elements from other sites.
So if you're on another site and enounter a button that says [+Blogger] or [Add to Your Blog] click on such a button, you should be prompted to log in to Blogger (if you aren't already logged in) and then you can select one of your blogs. You'll also see the title, content and template for the new page element, which you can edit if you want. A logo and "more info" link may also be present to tell you more about where this page element comes from, who created it, and what it does.

By clicking the [Add Page Element] button on this screen, you will be adding code to your blog. So it's important to make sure you either trust the source of this code, or have reviewed it to make sure it's something you're willing to have on your blog.

Once you've added the page element, it will appear on the Template | Page Elements tab for your blog, where you can edit, move, or delete it, just like the other parts of your page.

Technorati Tags:,


Elaine said...

So glad I found this blog! I just created my beta blogger yesterday and still finding my way around. What sort of things can I use the java widget for? I know it's a third party, where do I find javascripts for blogger? Any help greatly appreciated.

skr said...


My Add Page Element is not there so now I can't even see the Choose a New Page Element.

Appreciate the help.



vin said...

Try refreshing the cache as shown in :
How to refresh cache

Anonymous said...

How can I add a picture to my title?

vin said...

Take a look at my archive links for October 2006. OR click on Blog Header in my Label Cloud in the right column bottom.

Unknown said...

How do I add music to a blog?

vin said...

Just click on music Label in my Label cloud at the bottom of the right column in this blog

The Geertsema's said...

when i try to add a picture this way (from my computer) it seems to get stuck in the 'configure image' stage. I get a yellow triangle with lines spinning around (forever) any ideas?

vin said...

Try refreshing the cache. See :

How to refresh your blog page

Use Firefox browser.

Soupdragon said...

Hi ~
You have such a bloody useful blog, first off!
Second, could you tell me how to add a "previous posts" widget to my Beta (now out of Beta) layout?
I've been round and round trying to find some way, and even tried cutting and pasting the old template's html into Beta, which if course didn't work.
I don't like the way you can add an archive menu, but lose your "previous 10 posts" section.

Any help would be bloody marvellous!

Cheers ~


vin said...

Take a look at :
How to list Previous Posts by Title

sheen said...

Couldn't find the information I was looking for. How do I display/set the date for my post instead of the one that appears by default?

vin said...

Login to dashboard----->Click Posts--->List of posts open------>Click Edit link beside post title----->Post opens in post editor----->Click post options link in bottom frame of post editor---->Bottom frame expands to show date---->change date and publish.

nicole said...

Hi and HELP!

First of all, love your blog!

Second, I have been driving myself crazy trying to figure out how to install the icons with links for the various bookmarking sites underneath each post, as you have done above.

Can you help, please?!


vin said...


Have a look at :

nicole said...

Wow, thanks for the quick response, vin!

I couldn't select the entire link. It extended past the table, and when trying to select it, I kept picking up other stuff. Would you mind pasting it again?

thanks, nicole

vin said...


Try opening this page in Internet explorer 6. OR click on social bookmarks in the label cloud in third column.

Natalie J said...

Great site - definitely will be using a lot!

I'm hoping you can help with something...

I can't for the life of me get my archives to show past post titles. I can't see the page elements or anything like that and my dashboard doesn't give me a "layout" link. Is this because my blog has a custom domain instead of being on blogspot? If that is the problem, do you know how would I create the archive accordingly?

vin said...


Seems like you have the classic template. Go to Template----->Customize design---->Upgrade Template. Custom Domains supports layouts. FTP blogs do not support them.

Dave said...

I also cant now see the add elements section on my edit page. I have tried refreshing the cashe but it is still the same. Any further ideas?
Thanks, Dave.

vin said...


Do you have Javascript enabled in browser? Also try a different browser like Firefox or Opera.

Dave said...

Hi Vin,
Thanks for that. I was using firefox, with javascripe enabled. I tried using iexplorer and there it was. Shame though as I prefer using firefox.
Great blog by the way I spend a lot of time here...

Sara said...

Hi, I added a weather to one of my page elements from Weather (125X125 size). However it isnt center in my column. Do you know How I would center it. (I am using the Rounders 4 Template).


vin said...


Click Layout link on Dashboard and then click Edit link in the widget and add :

<div style="text-align: center;">



Replace the CAPS with your code from the weather site.

Jeffrey said...

Hi Vin,
I tied adding this code for snow effect on my blog but i keep getting this message- the template could not be parsed as it is not well-formed.Please make sure all XML elements are closed properly.
XML error message: The content of elements must consist of well-formed character data or markup.

< script src=""
type="text/javascript" >

Vin said...


Where did you add the code? Try adding it in a Html Page Element.

Also see :

Where to Add Code in Template

TheMissingBoy said...

i'm new to this
and have no idea
what i'm doing wrong
and i'm still having trouble
reading through all this
what i'm trying to do and stuck with is trying to make page element - lists and i'm getting stuck with just the links and no images, what I want to do is make lists with images, of my fave bands, films, etc

Vin said...


What exactly do you want to do:

Images shown one on top of the other all the way down?

List of links to films?

List of film names?

Images of your bands shown in a column one on top of the other?

List of Images linked to other sites?

TheMissingBoy said...

Hi thanx for responding
so quickly :)
what i'm trying to do
is just lists of my fave things, books, films, etc with images in a coloumn going downwards
and with links visible when you put the cursor over them and can click into i've got the snapshot template, and my own header my blog:
any help is greatly appreaciated
as I don't have a clue ;p

Anonymous said...

Vin, you have a great blog going, although it is very large! My dashboard management of my blog won't allow me to drop and drag page elements around. This is driving me crazy. Can you help? I did as you said, above (way above), but, they always revert back to their old places. I am very frustrated with this. Please help. Plus, I think I need to update my blog to beta.

Vin said...


What is your blog address?

Anonymous said...

Thanks for the tips on widgets - good stuff. I will now subscribe to your blog - which I should have long ago on a previous visit...

Borsallane Cart said...

Hi Vin, this is my problem for a long time which I don't know how to figure it out cause I don't want to mess up my blog, when ever I add a page element on my footer it's not working it always says "we will not able to complete your request...." help pls because my side bar is almost crowded now...whats wrong? here is my blog:

thankyou so much

Vin said...


Try the method used here :

Add Page Element to Posts and Header

Borsallane Cart said...

can't find the footer there, I tried changing the header word in footer but it didnt work

Vin said...


Request the template designer to add in a Footer section.

Blessed and Broken said...

Help! Some time ago I must have deleted the "about me" widget. When I go to Add Page Element it tells me that Profile is already added. I have lost this widget! :) And I just cleared my cache.

Vin said...


What is the blog address? Is it a Team blog?

Linda Eggleton said...

Great source of info you have here....thanks!

For the life of me, I can't find anything about adding a slideshow to my blog. I've tried adding it via the "add page element" & then choosing the "add slideshow" button, and I then add the HTML code from photobucket...but it keeps telling me "feed could not load". Any idea why it won't load for me...I'm sure I'm probably doing something wrong, but I don't know what! LOL


Linda Eggleton said...

sorry If I am repeating myself....not sure if my last question went through?

Just wondering how to add a slideshow...keeps telling me that the feed could not load.


Vin said...


Have a look at :

New Slideshow widget for Bloggers.

Lo said...

Hi Vin,

Wow, your blog is so informative!!! I hope you can answer my question, or point me in the right direction.

I have a blog with two authors (myself and a friend) and I'm trying to get the profile page element to give us different titles, instead of just "Contributors". I've managed to duplicate the profile page element so there are two of them, each with its own title, "Author" and "Fact Checker", but it still lists both of us under each one. How do I get one profile page element per contributor?

Thank you!

Vin said...


In a Team blog you have to create your own profile widgets. See How to Create Second Profile for Blogs.

Toni-Ann said...

Hi Vin
I am having what appears to be a common problem, when in Layout mode I cannot 'Add Page Elements' nor can I edit existing page elements. I have cleared my cache and use IE 7.
When I change my template to a new one I can see 'add page element' but once i have edited and saved I cannot go back in and do more changes.
Any advice would be gratefully received.

Vin said...


Use Firefox browser. It is best suited for Blogging.

Also try enabling Javascript in browser settings.

Edr3nK0h said...

Hi Vin,

I'm intending to add "Calender" Widget into my blogspot. But i don't seems to find the way. Any advise? I saw that in friendsterblog and wordpress. But cant find any in blogspot.


Edr3nK0h said...

Hi Vin,

I'm intending to add "Calender" Widget into my blogspot. But i don't seems to find the way. Any advise? I saw that in friendsterblog and wordpress. But cant find any in blogspot.


Vin said...

Edren's - Daily Virtual Diary ® [E-DVD®],

You cannot add Wordpress widgets to Blogger. You can add Google Gadgets. You can also add Google Calendar for Bloggers.

Andy and Kimi said...

Despite trying several different templates, my sidebar keeps showing up at the bottom of my blog. In the layout screen, it shows them on the right side, but when I view my blog or open it, the sidebar is always at the bottom. Any suggestions?

Vin said...

Andy and Kimi,

It depends on what extra wide items you have added. See Why my sidebar keeps falling?

Liz said...

I've added a tracker to my blog but it doesn't seem to be working. I've added it as a page element in beta blogger and tried it in the template, but with no joy. Extreme tracker say its blogger thats changing it and creating errors, but I'm copying it letter for letter, so can't see the problem, is there anyway I can add it as an unchageable element?

What can I do to correct the code (though I'm useless at HTML)? It's often only a few lines that are incorrect.

Vin said...


I use Google Analytics since it is totally free for any amount of data.

Anonymous said...

Thanks for your very helpful blog! I am trying to make an expandable text element, much like the expandable post summary you describe in another post, but I can't figure out to do it. I basically want to have a single title like "About this blog" on the main page which you can then click on and get an expanded text that either comes up in another window, or ideally on the same page, where the posts usually go. For an example of what I am talking about you can go to and click on "What is strobist"


Vin said...


There are several methods to do what you propose :

1. Try adding spoilers in a Html page element.

2. Add a Html page element or a Link List page element and put in it the link to your profile page.

3. The strobist blog has created a profile post as described in How to Create a Second Profile for Bloggers? and then linked to that post.

Phonella said...

I've created a blog for my friend and she is happy with the look and I am now ready to transfer it over to her. It has a header widget (with image) 2 links widgets (with 10 or so links each) and an HTML widget that contains a google map. And a Label widget done in cloud form.

I selected out the html (expanded widgets) and pasted it over the existing layout-style html on her blogger account.

No errors, all the widgets transferred over BUT they're empty! I mean they exist but they have no content (except for the label one's cloud style).

Adding the html to the HTML widget is no big deal but having to enter all those links is (and as well having to reupload the header image).

Any suggestions, ideas?

Vin said...


Have a look at How to Keep Widgets and Change Layouts?

Phonella said...

Thanks for answering (although it didn't help :-)

Apparently you cannot transfer over links except by entering them into an HTML widget. Which is fine for me (I can do the html) but not fine for my friend when she wants to update them (doesn't know html).

She'll just have to enter them one at time through the links widget interface.

But this is a pretty stinky system, don't you think?

Anonymous said...

Vin, is it possible to edit the look of ONE particular widget? For instance, I have a link list and I'd like to customize the way the link looks, however, I do not want to alter the links in the other widgets. How can I set attributes (font, color, size...) of one widget without alterning the others?

Vin said...


Put this code in CSS part of template :

#LinkList1 {
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;

Check the widget type and ID Nmber in above code.

Kay said...

I have been trying to fix this for about 2 weeks ...please
I added the gadget Blog archieve but it is not showing my past links that I have made
here is my addy :

Vin said...


I can see them just below the See my Full Profile link. To show post titles go to Layout---->Page Elements tab and click Edit link in Blog Archives widget.

In popup window choose Hierarchy mode and save.

BTW your Main Page takes too long to load so go to Settings---->Formatting---->Show __ posts on Main Page and set it to 3/4 and save.

Kay said...

I did what you said to do and it still did not work

Vin said...


Right now you have only one post on the blog and I can see that link in the Blo Archives widget.

The rest are image links added below the post.

bonnie. said...

i have been trying to add the radio player to my blog and just can't work it out! the code is really long and i have no idea where to put it. i tried putting the url into the add a gadget > add your own > but that didn't work either. please help! just want some music on my profile easily! thanks

Vin said...


In the Add Gadget popup window scroll down in the Basic section and click Html/Javascript gadget. Paste the code from under Contents and save.

bonnie. said...

wow thankyou! very helpful, great blog!

Kaye said...

I may be in the wrong section. . . I have created a blinkie/ animated gif file that I have hosted at photobucket. I had no problem getting it on my blog, but when you click on it it takes you to photobucket. How can I change the HTML so that it goes to a different site. Everything I have tried so far (in the FAQ's) just disables the blinkie.

Vin said...


Create image link code and paste it in a Html gadget.

Eric Cole said...

I have been looking for a few days at how I can add my LinkedIn button. Nothing I have read so far works. Why is Blogger making it so difficult? LinkedIn provides a code for the link.

Vin said...

Eric Cole,

Paste the given code in a Html gadget.

Olela said...

Hello Vin, thanks for existing! LOL

Here's my (dummy...i know!) question: How do i add a chatbox to my blog? I signed up at Cbox and got the code i should copy in the layout of the page. But..well...i have no clue where to place it. I don't know anything about html LOL

Thanks for helping :)

Vin said...

Olela ,

Click Add Gadget link on Layout--->Page Elements tab. In popup window click HTML/Javascript gadget. Paste code under Contents and save.

Anonymous said...

Thanks, i realised what i have to do to put a javascript code in my blog

Ardeshir Dolat said...

Hi vin
Thanks for your great blog. My problem is slightly different to all the ones mentioned above. I cannot access my Add page elements. when I click on the lay out it shows the page with all the tabs for a split second and then shows a page where i can only edit the elements I already have. It does not allow me to add more gadgets. if I click on the backpage button i see the correct add elements page for a split second and again goes to the page I cannot add but edit my existing elements.


Vin said...

Ardeshir Dolat,

Modify the CSS code for wireframe layout editor as shown in CSS Tips and Tricks for Bloggers.

Ardeshir Dolat said...

Sorry Vin

Please delete my posts as I changed my template and that resolved the problem, albeit, I have a different looking blog now. I don't mind as a change was overdue. Cheers

JY said...

hello vin. im using blogger. and i cannot link my friends to my blog. i am not using the templates giving originally from the blogger. i've taken templates from other websites. i scroll down on the edit HTML until link +

i replace the url HERE with my friends webpage ann 'link' with my friends name but when i go on my blog i cant go on my friend's page. the status on firefox below when i scroll over the link writes the name of my blog and the name of my friend's :S help.

Vin said...


Have a look at How to Construct Blog Links?

♥ alicia bee said...

Isn't there a way for me to access these cool widgets and add-ons by using the older version of blogger?

When i "upgrade" my blogger, I can't put my old blog html code into the new one.

Vin said...

alicia bee,

You cannot put widgets in Classic templates unless you have the complete HTML code for the widget.

After upgrading put the Classic template sidebar code in a HTML gadget in sidebar.

Anonymous said...


i'm stuck to find the codes for cbox to add in my blog.

pls help.

Vin said...

Cupids Loves Bloody,

Try the Comments wall gadget from Google Friend Connect. Same method as for Events gadget.

Jude said...

where can I post the code for disabled right click?

Vin said...


Depends on what is the code? Mail it to me.

BlossomFlowerGirl said...

Thanks heaps Vin for your help. You really are a genius.

Shay - if you don't have the "Add a page element", click on customise and you'll see the dashboard. Click on 'Add a gadget' - under basics there are a number of things you can add. Click on HTML/Javascript to add a link to anoither sight. This is what I used to add a clock.
Hope this helps,
Cheers BlossomFlowerGirl.

s said...

Thank you! This posting was so much more helpful than some other ones that I read.

Anonymous said...

Wao!!! a great collection of most wanted widget/plugins for everyblogger. Thanks a ton :)

T.v Serials said...

Hi there!
I have just started blogging.
I am very impressed with you blog template.
can you guide how can I have a similar template.
I am not a very technical person and can not work too much on css or html.

Please guide.



Skip to top of post.

Search Blog Before Commenting


Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,


The Blog Doctor The Blog Doctor2 Blog Doctor Home


Tips On Blogger and Latest News.

Skip to top of post.