How to Display Elements or widgets only on Home page, post page or Archive Pages in Blogger ~ Click To Learn

Finally i got it.. More details here http://www.bloggerbuster.com/2008/06/display-elements-only-on-home-item-or.html?showComment=1382681374860#c687204931282613245

How to Display Elements or widgets only on Home page, Post page or Archive Pages in Blogger. I will explain you, you can easily control page elements to display (or not) on certain types of pages in your Blogger blogs.

How the layout tags work

The <b:if> function tells Blogger we are setting conditions for the following section of content.

To control whether elements are displayed for a particular page type (ie: index, archive or item pages) we add thedata:blog.pageType tag to the b:if statement, and complete this by stating which type of page where we would like this content to be displayed.

After this tag, we add the code or content to be displayed. Then finally we close of the b:if conditional statement with a </b:if> tag.

Trust me, this is not as complicated as it sounds! Let me give you an example.

If I wanted to display a "Welcome to my blog" message only on the home page, I could use the following section of code:

<b:if cond='data:page.type == "index"'> Welcome to my blog! </b:if>

This code roughly translates as:

If this is the home page, display my "Welcome to my blog" message.
If this isn't the home page, don;t display anything here!

When we can translate the code into something more understandable, it becomes easier for us to use!

The three different page types

In the example above, I wanted to display my "Welcome" message on the home (or index) page.

In total, there are three page types for which you can use a similar statement:

index (the home page)
archives (to be displayed when readers view your archive pages)
item (the individual post page)

We can replace the "index" section in the above example with either "archives" or"item" instead if we prefer to display only on archive or item pages.

To clarify:

If I want to display my welcome message on archive pages, I would use this section of code:

<b:if cond='data:page.type == "archive"'> Welcome to my blog! </b:if>

If I want to display this only on item pages, I would use this code instead:

<b:if cond='data:page.type == "item"'> Welcome to my blog! </b:if>

In your own blogs, of course, you may not wish to use this function to display a welcome message! In place of "welcome to my blog", you can insert any type of HTML code you like, such as an image, a hyperlink, and even an entire widget as we will explore below.

You can also wrap existing template code inside the b:if statements: simply type the first line above the section of content, and type the closing </b:if> tag directly below.

How to display widgets on certain page types

When we come to look at how widgets can be displayed on certain page types, the method is slightly more complicated (but not much!).

We cannot wrap an entire widget section in the b:if tags:

Instead, we must check the "expand widget templates" box near the top of the screen, and place the b:if tags just inside the b:includable tags which appear in the expanded widget template code.

Here is a diagram which displays where to add the two b:if lines to make a widget display only on the home page (click on the image for a larger version):

To clarify:

Place the initial <b:if cond='data:blog.pageType == "index"> tag just after the opening<b:includable id='main'> tag.

Place the closing </b:if> tag just before the closing </b:includable> tag.

Note: if you paste the sections of conditional code in the wrong place, you will receive an error message and cannot save your modified template code.

The "if not" statement

Let's say I wanted to display my "Welcome to this blog" message on all page types except for post pages. It would be much easier to say "if this is not an item page, display my message" than to use two seperate statements for archive and index pages.

For this, we can use (what I call) the "if NOT" tags.

In the examples above, you will notice the page type statement contains two "equals" symbols before the page type, like this:

<b:if cond='data:page.type == &quot;item&quot;'>

The doubling of the equals symbols basically tells Blogger:

If this page IS this particular type of page, display the following code.

To tell Blogger to display a section if the page is NOT a particular page type (for example, if the page is NOT a post page), we can substitute the first equals sign with an apostrophe, like this:

<b:if cond='data:page.type != &quot;item&quot;'>

The closing </b:if> tag should remain the same.

To clarify:

In the examples above,

== "[page-type]" (with two equals signs)

This means "If this IS the specified page type, display the content"

!= "[page-type]" (with an exclamation mark followed by one equals sign)

This means "If this is NOT the specified page type, display the content.

Note: these examples are just a part of the complete <b:if> template tags; for the entire conditional page type function to work, you will need to use the complete tags, as referenced above.

i use this code for my blogger blog, to show my sliders in all pages include my home page also.......

Author

Hi, Its me Hafeez. A webdesigner, blogspot developer and UI/UX Designer. I am a certified Themeforest top Author and Front-End Developer. I'am business speaker, marketer, Blogger and Javascript Programmer.