How To Add / Display / Show a Adsense Widget Only on Blogger's Front / Home Page ?

By default Blogger displays a widget, no matter where the widget is located,  on all posts and pages. But sometimes, we only want to display it on front page of the site. If you take a look at my site Blogger Journey's homepage, at the right-side bar from the top, blow the search box there's a 300x250 adsense ad widget. Now take a look at the same position from this post you are reading, you do not see that ad at all. How can we do it? Short answer, we need to modify the template codes to add 2 lines of codes.

Brief: Blogger's Conditional Command b:if

If you know a little bit about programming languages, you probably know that almost all the languages have a set of commands similar to "if ...else...endif", blogger also has a set of this commands, format is highlighted in green as below:

<b:if cond='true'>
  run this command
<b:else/>
  run other commands
</b:if>

We can use this set of command to display adsense on blog's front page only !

b:if command for "front page only"

Here's the codes that we can use

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  run these commands
</b:if>

Basically, we add the first highlighted line to the begin of that Adsense widget codes, then add the the 2nd highlighted line to the end of that Adsense widget codes.

Let's do it now !

Assume you already have a widget for adsense and it's now showing at your blog's sidebar. If you do not have yet and want to add one, check my previous post How to Add Adsense Codes Manually into Blogger (blogspot) blog for details.

Step 1: Find out that Adsense widget's  ID

We need to know that adsense widget's ID. You can get it like this:

From the dashboard, click on Layout, then locate the adsense widget that you'd like to show for front page only, click on the Edit link for that widget. On the popup Widget Editing window, from the top address bar, move cursor to the very right (end of address), you will see something like "widgetId=HTML3". Then HTML3 is the Widget ID that you need to write down. (see screenshot in this post)

Step 2: In the template editor, Locate the codes for that Adsense Widget

From dashboard, click on Template->Edit HTML. In the popup editing window, at the top click on the down-arrow at right of "Jump to widget" tab, then choose the Widget ID that you got from Step 1. In my case, I click on teh widget ID "HTML3".

The cursor now jumps to the first line of the codes for that widget. See following screenshot.

If you see a black right-arrow at the left of the first line, click on it to make it expended. See the screenshot below for expended codes.

Step 3: Add the b:if command to the codes

Now look carefully at the codes in above screenshot.

Notice the red number 1 is pointing to the codes <b:includable id='main'>,
and the red number 2 is pointing to code </b:includable>.

We will need to add the b:if command inside the above pair of <b:includable> commands.

Once added, it looks like following screen - In the  two circles are the 2 lines of b:if codes that have been added.

Double check the codes to make sure they have been added to right place.

Click on the orange button "save template" at the top, you done !

Step 4: test

Go back to your blog, check the front page, then open a post. Do you see the difference at the sidebar?