Wednesday, March 25, 2015

How to put AdSense ads in Blogger blog

Once you have an approved AdSense account, there are 2 ways to add AdSense ads in your blog

Method 1: Direct via Blogger Adsense gadget

Sign into
Dashboard > Layout > Add a gadget > Add an AdSense gadget

Blogger Adsense gadget

Then in Layout, drag the newly added AdSense gadget to wherever you want and SAVE.

Method 2: Indirect via AdSense codes

Sign into and click MY ADS at the top left, then +New ad unit, then select the ad unit you want.
After selecting the ad unit, at the bottom, click SAVE AND GET CODE

Now go to
Dashboard > Layout > Add a gadget > HTML/Javascript gadget
Paste the AdSense code into the gadget
Drag the gadget to where you want and save.

Tuesday, March 24, 2015

How to change email address for Blogger login (New GUI)

Let's say, you want to change the email address for a blog from email A to email B. For this task, it is best to use 2 different browsers
Browser A for email A
Browser B for email B

First, in browser A sign into using email A to get to the Dashboard of the blog
Dashboard > Settings > Basic
Scroll to the bottom to the PERMISSIONS section, type in email B then click INVITE AUTHORS

Blogger permissions section to add blog author

Second, in browser B, sign into email B and look for the invitation email, click on the link to accept invitation, then in BLOGGER, accept invitation.

Third, go back to browser A, to
Dashboard > Settings > Basic
then in the PERMISSIONS section, you will see email B added as Author.
Click the down arrow and make email B as ADMIN

Now if you wish, you can go back to browser B
Dashboard > Settings > Basic
and in the PERMISSION section, make sure you have email B as admin, then if you wish, you can remove email A

Monday, March 16, 2015

Embed Youtube video direct via Share to Blogger tab

Test embedding direct from Youtube via Share > Blogger rather than copy-pasting into the post editor in the HTML mode This video was originally intended for a post in the Robotics for Children blog titled Command motor turn in 41 languages.

However, I noticed that the width of the Youtube video was automatically changed such that it slightly overlap to the right sidebar.

Sunday, March 15, 2015

How to embed Youtube video to Blogger

In the COMPOSE mode of Blogger post editor there is a video upload icon video upload icon which you can click to upload video. However, we have found that to be messy and if you want videos in your blog, it is far better to upload them to Youtube then embed into your blog.

After you have successfully uploaded a video to, then below the video click SHARE > EMBED to get the embed code. The code will look something like this (you don't need to understand the code in order to use it):

<iframe width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>

Then if you want to embed the video into a blog post, then click the orange pencil icon to open the post editor. Note that you have to be in the HTML mode. Note also the width of the video above is 560px and this may be wider than your blog post column width. To change, click the SHOW MORE below, select CUSTOM SIZE

Youtube embed video custom size

Click in width field and type a number suitable for your blog post column width then click in the HEIGHT field. The height will automatically be added such that the aspect ration is maintain so video wouldn't be distorted.

If you want to embed the video in the sidebar, go to Dashboard > Layout > Add a gadget > Add a HTML/Javascript gadget, paste the code into the field and save. Note: if you don't know the sidebar width, go to
Dashboard > Layout > Template Designer > Adjust width
and you can see the sidebar width there (also total width - sidebar width = blog post column width)

Thursday, March 12, 2015

What is source code? What do they do?

Source codes are codes written to do something. There are many types of source code for various purposes. In the case of the Internet and if your are using a blogging platform like for your blog, the source codes are meant to be read and interpreted by browsers (Google Chrome, Firefox, Internet Explorer, etc.) and instruct them to display what the coder want the browser to display on your computer screen.

Below is an example of a small section of the source code used to display what you see now on your screen. Do you need to understand what all those "gibberish" means? Not exactly, it is meant for browsers and browsers are not human (coders/programmers are also "not human" but they need to understand how to write the source codes for the browsers)

Although you don't need to be an expert on source code, it will be good for you as a blogger to know a bit about HTML (which is one of the source codes for the Internet). For example, you want to put in your blog post a link for your visitors to click to take them to elsewhere such as to my Blogger for Dummies blog.

The source code for the above link is as follows;
<a href="">Blogger for Dummies</a>

And if I want the link to open in a new tab/window, all I need to do is to add an attribute target="_blank" or target="new" like this
<a href=" target="_blank">Blogger for Dummies</a> blog

Note that to do the above in your blog post, you will have to do it in the post editor in HTML mode.

And if you are interested in displaying advertisements like AdSense ads, what you have to is to sign into, get the codes for the ads from their dashboard then go to
Dashboard > Layout > Add a gadget > Add a HTML/Javascript gadget
and paste their codes there.

Example of source code used to display this blog on your computer screen

<!DOCTYPE html>
<html class='v2' dir='ltr' xmlns='' xmlns:b='' xmlns:data='' xmlns:expr=''>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<meta content='width=1100' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<script type="text/javascript">(function() { var b=window,f="chrome",g="tick",k="jstiming";(function(){function d(a){this.t={};this.tick=function(a,d,c){var e=void 0!=c?c:(new Date).getTime();this.t[a]=[e,d];if(void 0==c)try{b.console.timeStamp("CSI/"+a)}catch(h){}};this[g]("start",null,a)}var a;b.performance&&(a=b.performance.timing);var n=a?new d(a.responseStart):new d;b.jstiming={Timer:d,load:n};if(a){var c=a.navigationStart,h=a.responseStart;0<c&&h>=c&&(b[k].srt=h-c)}if(a){var e=b[k].load;0<c&&h>=c&&(e[g]("_wtsrt",void 0,c),e[g]("wtsrt_","_wtsrt",h),e[g]("tbsd_","wtsrt_"))}try{a=null,
b[f]&&b[f].csi&&(a=Math.floor(b[f].csi().pageT),e&&0<c&&(e[g]("_tbnd",void 0,b[f].csi().startE),e[g]("tbnd_","_tbnd",c))),null==a&&b.gtbExternal&&(a=b.gtbExternal.pageT()),null==a&&b.external&&(a=b.external.pageT,e&&0<c&&(e[g]("_tbnd",void 0,b.external.startE),e[g]("tbnd_","_tbnd",c))),a&&(b[k].pt=a)}catch(p){}})();b.tickAboveFold=function(d){var a=0;if(d.offsetParent){do a+=d.offsetTop;while(d=d.offsetParent)}d=a;750>=d&&b[k].load[g]("aft")};var l=!1;function m(){l||(l=!0,b[k].load[g]("firstScrollTime"))}b.addEventListener?b.addEventListener("scroll",m,!1):b.attachEvent("onscroll",m);

Wednesday, March 04, 2015

Blogs, posts, web addresses, permalinks, archives,

We often come across bloggers just starting to create blogs, publish posts, etc, but are confused over the terminologies. Google/Blogger has created a good Guide for Beginners which should be a good starting guide to refer to. Whatever, I think it is a good idea to sort out the confusions over terminology. It will be a long winded explanation below but it may help if you refer to the examples (illustrations) below.

At any point in the explanations below and you want actual examples to deepen your understanding, refer to examples. Best if you are very new, just initially concentrate on publishing new posts then try to digest the rest of this business of blogging.

First the blog and its web address (URL). Each time you create a blog, it will have its own unique web address (URL). For more info about web address, refer to How to get blog or post URL (address), and a blog webpage (URL) may look something like For example, the web address of this particular blog is and there is another example Robotics for Children below.

Whenever you publish a new post, the posts itself will have its own web address (permalink), something like After you have created a blog, it will be listed in your Dashboard (what you see when you log into You can create more than one blog for each Blogger account and each blog will be listed in the Dashboard in a list of all your blogs.

After creating a blog, the next task will be to publish a post. This you do by clicking on the CREATE NEW POST pencil icon Blogger create new post pencil icon or if you are in a Dashboard of a specific blog, the plain NEW POST icon Blogger create new post pencil icon.

Clicking on them will open a post editor where you can type your text, upload photos, etc. When you have finished editing your new post, clicking the PUBLISH icon Blogger publish icon.

Once you click PUBLISH, Blogger will assign it its own web address (permalink, see explanation below):

This post will be displayed in 3 places,
1. its own web address (
2. in the homepage together with other posts if you have created them (the default maximum number of individual posts displayed in the homepage is 7 but can be changed by you the author). Once the maximum is reached, publishing another new post will get this new post displayed at the top of the homepage while the oldest will be pushed off and will only be displayed in its own webpage (permalink) as well as in the archive.
3. in the archives as explained in (2). If you have added the Archive gadget in the sidebar, there will be listed all other published posts. In the current month, each post published in that month will be listed individually in the archive gadget together with other posts published in that month. Older posts in later months will not be listed individually but there will be listed individual months, and when you click on that month it will go to the webpage where all posts published in that month will be listed.

Illustration (example)

BLOG ADDRESS (url): For example, there is this blog Robotics for Children which unique web address is

Then this is an example of a post: LEGO Wedo GUI (something that helps us talk with computer which has its own web address (permalink) and viewable on its own webpage (permalink), but as of today (4th March 2015), it is currently the latest post, so it sits at the top of the homepage Robotics for Children below which are other posts which you can see when you scroll down.

When new posts are published later, you will see a different post at the top of the homepage). However, if subsequently new posts had been published, it will then be pushed further down the homepage till it reaches the bottom. Any further new post published will push this post off the homepage but it is still viewable at its own web address and also in the archive for the month of March 2015 together with all other posts published in the same month.

Tuesday, March 03, 2015

Gathering posts of a category under a Page tab with Page gadget

You may want to gather all of your posts with a particular label (category) into a page and have a tab in a horizontal menu bar below the blog title for visitors to click on to get to that page. The way to do it is to first label your posts with various labels. You will need the links for the various labels (categories) so first go to LAYOUT and add a LABEL gadget to the sidebar. Click on VIEW BLOG to display your blog with the sidebar.

Then go to

Dashboard > Layout > Add a gadget > Add a Page gadget (Note: The HOME tab is automatically already added for you)

Add a Page gadget

You will get a pop up window "Configure Page List". For a proper horizontal menu bar, I would suggest you delete the title "Pages". Then click ADD EXTERNAL LINK (see screenshot below):

Page gadget, Add external link

In the new pop up window, to Add a New Page, Web Address, type in the title (name) of a particular label (cagetory) you want to add. Then go to your blog, right-click on the listed label (category) in the sidebar, select COPY LINK to copy the web address (url) into the clipboard, go back to the pop up window, right-click in the field for Web Address (URL) and paste.

Blogger page gadget Add new page as Web Address

Continue doing one by one for all the label (category) pages you want to add, then click SAVE.

Sunday, March 01, 2015

How to get blog or post URL (address)

You may want to give something to your friends to enable them to come view your blog, or you may be asking for help at help forums and requested to give the blog or post URL (web address)

The URL or in layman's term, web address of a webpage is that string starting with http:// or https:// which you see at the top of a browser in what is referred to as the ADDRESS BAR (see screenshot below, URL underlined in red):

webpage address bar

So to get the web address, just highlight it in the address bar, right-click and select copy to copy to the clipboard.

Other ways to get the blog or post address is to go to your blog Dashboard. For the blog address, right-click on the VIEW BLOG tab and select COPY LINK ADDRESS to copy to clipboard:

get blog address from view blog in dashboard

To get the post URL (address, also called permalink), if the list of all posts is not already displayed in the Dashboard, click POSTS in the left sidebar (you can also only list unpublished drafts by clicking DRAFT or only published posts by clicking PUBLISHED. See screenshot below):

Dashboard list posts tabs

When the list of posts get displayed, right-click on the VIEW tab of that posts and select COPY LINK to copy to clipboard (see screenshot below):

Dashboard copy post address from list of posts

Create Table of Content with Link List gadget

I have a previous post on how to Easily make HTML sitemap/table of content using javascript. With this script, the TOC is automatically created and once set up, new posts will be added to the TOC without needing you to update manually. Unfortunately, that script created/hosted by Abu Farhan will cause malware warning and if nothing had change since, your blog may end up locked for hosting malware.

A Table of Content (TOC) listing all individual posts can also be MANUALLY created using the Blogger Link List gadget. Go to Layout > Add a gadget > Add a Link List gadget
(see pitfalls to avoid)

Blogger Link List gadget

On clicking to add Link List, you will get a Configure Link List window:

configure Link List window

So now all you need to do is to enter the New Site Name [which is the title of the post] and the New Site URL [which is the address/URL of the post. Do this one by one. I would suggest that you start with the oldest post first so that when you need to update the TOC with a new post, it can be easily added to the top of the Table of Content.

(IMPORTANT: http:// has already been added to New Site URL (underlined with red line below:). If your link already have the http:// in front, make sure to delete that http:// before you add your link, otherwise it would end up as htto://http:// and your link will be broken)

Blogger enter hyperlink url window

MAKE SURE EACH TIME A POST IS ADDED TO CLICK [ADD LINK] Blogger configure link list ADD LINK. When ADD LINK is clicked, you will see it listed as shown below:

Repeat the above till you have added all the posts that you want added to this "Table of Content" and REMEMBER TO SAVE when finished.

Now each time you publish a new post, you will then need to go to LAYOUT, edit the LINK LIST GADGET and add in the new post into your "Table of Content".

I have used this method to add a Table of Content for this Robotics for Children blog and for now you would see it at the top of the second right side bar.

Pitfalls to avoid

1. Remember not to have 2 http:// in your hyperlink, example http:// which will become broken link.
2. After adding each post title and url, remember to click ADD LINK
3. Remember to click SAVE when you finish.

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics