Customizing your Blog

In the Old (Classic) Blogger, to customize (add stuff, change color or rearrange, etc.) your blog, you will have to get into the template editor, and to have some familiarity with HTML, and probably a bit of CSS (Cascading Style Sheet). With the New Blogger, you may get away with a little or no knowledge of HTML using the "Add a Page Element" and drag-and-drop in the Layout. To get to the Layout, you just click on "Layout" (circled in red) in the bottom right side of the section of the list of blogs in the Dashboard. See screenshot below (click to enlarge):



If you see "Template" instead of Layout, that means you are still using an old classic template, and to get the Layout, you will have to migrate to the New Blogger template by clicking "Template", then "Customize Design" and select a suitable template.

On clicking "Layout" you will get a pop-up window with 12 choices - List, Link List, Picture, Text, HTML/Javascript, AdSense, Feed, Labels, Logo, Profile, Blog Archive and Page Header. Some like the Page Header, Blog Archive and the Profile may have already been added to the blog. See screenshot below (click to enlarge):



We will start with what I think will be the most commonly used first:

Link List Page Element

This is at the top right of the screenshot above, and is usually added to the sidebar. To add this, click on "Add to blog" and a pop-up will appear with various fields for you to fill in. Full description on how to add a Link List is given here: How to add a Link List to the sidebar (click "BACK" button to get back to this page).

HTML/Javascript Page Element

This is another commonly used widget. You use to add HTML or Javascript for AdSense ads, referral buttons, searchbar, visitor counters, guest books, shout box, etc. that you can get from various Websites. You generate the scripts in those sites, copy, click on "Add to Blog", paste the script into the opened window, then click "Save to blog". Once you have done that, you will see a new Page Element titled "HTML/Javascript at the top of the section (usually the sidebar). You can preview it by clicking "Preview" at the top of the Layout: . If satisfied, just click "Save". If not, you can move your cursor over the HTML/Javascsript Page Element and the cursor will change to a cross. You can drag and drop the Page Element into whatever position you fancy, preview, and if satisfied, click "Save".

Note that you can put more than 1 HTML tags or Javascript in the Page Element. You can also add in some text like at the top of the post of this blog. In that Page Element, I have added the script for the Google searchbar, the HTML hyperlink (CONTENT) and some short text on how to navigate the site.

If you want a hit (visitor) counter to track visitors to you blog, I recomment statcounter, from which you can gather lots of statistics about your visitors like from where they originate, their IP addresses, the operating system (Windows, Linux, etc.) and the screen resolution they are using, the keywords/phrases they used to find your blog, etc. In the case of a visitor counter, the more likely place one would place it would be at the bottom of the page, in which case to add the script, you will click "Add a Page Element" in the section for the footer.

Labels Page Element

You may add a list of labels (tags or categories) that you have applied to your posts. There is nothing much to do here. The title Lables is already added for you. Just click "Add to blog" in the Labels section, and the list of labels will be added to the section where you click "Add a Page Element (usually in the sidebar section). If you like the list to be under a different title, (for example Categories), replace that with Categories in the title field before you click "Add to blog". This is a useful list which can help your visitors find topics they are interested in, and should be added.

Picture Page Element

You may want to add some pictures to your sidebar, or to the Header. (for adding image to the Header, refer to Adding an image to your New Blogger blog Header where details of how to add clickable pictures and unclickable pictures in the Header are given).

To add pictures to the sidebar, in the section for Picture (second on the left) click "Add to blog" and this pop-up (Configure image) will appear:



If you have the picture stored in your computer click "Choose" and select the relevant picture. If you have a picture already hosted on the Web, tick the "From the Web" radio button and type or paste the picture URL. The "Shrink to fit is ticked by default. If you want the picture to appear in its actual size, then untick this radio button, but you must make sure the width of the picture do not exceed the width of the sidebar. If you want a title and/or caption for the picture, type it in the relevant field. Click "Save changes" and the picture will appear at the top of the sidebar section in the Layout. As described above, if this is not the position you want, drag and drop this Picture Page Element to the position you want, preview, then save if satisfied. This will produce a non-clickable picture in the sidebar.

If you want a clickable picture, refer to the bottom half of this post: How to put a clickable picture in the sidebar.

List Page Element

This List Page Element is the first left item in the "Choose a Page Element" pop-up. It just allow you to add a list of items, for example a list of books. The list is not clickable. For an example, have a look at this blog Good Health Information. The list of books is near the bottom of the left sidebar, just above the Profile.

Text Page Element

This Page Element is the second right Page Element in the "Choose a Page Element" pop-up. It just allow you to add some text to the sidebar or to any section (header, above the post, etc.). For an example, see Good Health Information. The text is some quotation on Health at the bottom of the right sidebar. Although it says "TEXT", you can include limited HTML tags such as hyperlinks like what you can see at the top of the posts in this blog Earning Online. You will see a hyperlink Text Link Ads which is a referral link. The "Configure Text" pop-up is almost like your post editor with icons to make text bold, italic, change color, and a hyperlink icon

Feed Page Element

This Page Element is the fourth right in the "Choose a Page Element" pop-up. This allow you to add Atom or RSS (Really Simple Syndication) feed to your blog. For an example, see Computer and Internet Articles. You will find the RSS feed for the blog Blogger Tips and Tricks. You can see it near the bottom of the right sidebar, just above the Profile. The feed URL I added was http://blogger-tricks.blogspot.com/rss.xml

Logo Page Element

This probably will be one of the least used Page Element. All it does is to add a Blogger logo to your blog. For an example, look at this blog: Blogger Articles. The Blogger logo is right at the bottom of the right sidebar, just below the Profile (About Me). You have a choice of logos (see screenshot below):

AdSense Page Element

This Page Element is the third right in the "Choose a Page Element" pop-up. With this Page Element, you can add Google AdSense ads to your blog without having to log into your AdSense account. Although I have an AdSense account, I never use this Page Element because it allow me to only add ads, and give me limited flexibility and choice. I can't add referral text or buttons, or Google searchbar. Futher, for the ads color, I only have 9 choices, blend the ads or eight other ready color pallette. In AdSense account, I can generate scripts for ads, add and edit color palattes, add referral buttons and Google searchbar like those you see in this blog. You can actually apply for an AdSense account via this Page Element, and AdSense will serve PSA (Public Service Ads) until your application is approved. If you are interested in applying for an AdSense account, it is my hope that you will apply by clicking on the AdSense text referral at the top of the right sidebar that reads "Generate revenue from your website. Google AdSense".

You can also get help on adding Adsense products from Generating Revenue from your Website. In particular, for generating ads and search boxes and blending their colors to the colors of your site (recommended by AdSense), refer to

Generating script for your AdSense for Content ads

Blending the colors of your AdSense ads to the colors of your site

Generating script for your Google search box

Blending color of your Google search box to the colors of your site