Custom View using Blogger Tag

Blogger provided Blogger Template Tag, which is a list of tags used in the template, to provide what you see in the browser.

Now, i will explain a little bit about these tags :

• <MainPage></MainPage>
• <ArchivePage></ArchivePage>
• <ItemPage></ItemPage>
• <MainOrArchivePage></MainOrArchivePage>

These tags, are defined by Blogger as the Conditional Tags. These tags can give us more flexibility to control what output that we wanted on the Main Page, Archive Page or Item Page.

Main Page is the front page of your blog, in these case, it's the first page to load when you entered some blogspot url,

• for example: if you entered http://qureyoon.blogspot.com/ then the page that loads, and you see is called the Main Page.

Archive Page is the page contains all of your blog's archive (this of course if you have activated archiving). Now the Archive Page is one big chunk of some HTML page that listed all of your posts in the specific period of your archive.

• For example: this URL http://qureyoon.blogspot.com/2006_06_01_qureyoon_archive.html is the Archive Page, it usually begins with the year and month of your archive, and ended with archive.html note the bold and italic text ;)

Item Page are the specific page of your posts, each posts you have created are saved by Blogger in one HTML file, which in this case are your Item Page.

• For example: the URL is somethin' like this http://qureyoon.blogspot.com/2006/06/link-me.html , the Item Page is inside a sub folder, beginning with a year then a month then your post page, with unique name depending or your title.

So, what i'm trying to explain here is that you can make some customization of your page, you can have a different view in each page ! For more clear this is some preview of what i've done using conditional tags. (click for larger image)

• Main Page sample


• 
  Archive Page sample


• Item Page sample

Now on the main page, i wanted all the left sidebar to show all of the content, while on the archive page i only wanted to show a search box with selection of recent post and archive, and on the item page, i only wanted to display recent and archive without the search box.

So how do i achive this ? Well, this is where the conditional tags goes in use ^^
For example, notice that the search box appeared in both the Main Page and the Archive Page right ? So in order to make the search box appeared in both page, you have to put it inside the <MainOrArchivePage></MainOrArchivePage> which mean that it'll appear in both Main and Archive Page ^^

If you only wanted somethin appeared only on the Main Page, as in my example the rest of the left sidebar only appear in the Main Page, so put all the rest of your sidebar content inside the tag <MainPage></MainPage> so that it won't appear in the Archive and Item Page.

Now if there is somethin you want to put only on the Archive Page you put it inside the <ArchivePage></ArchivePage> tag.

And as you may figure it out by now, the <ItemPage></ItemPage> tag is used to filter the content you wanted to show only on the Item Page ;)

To put it simple, lemme show you some portion of the code

<MainOrArchivePage>
   <!-- This is where i put my search box -->
</MainOrArchivePage>

<MainPage>
   <h3 class="side-title">Latest Updated Posts</h3>
   <div id="latest">
       <!-- Latest Updated Post Content -->
   </div>
 
   <h3 class="side-title">Recent Posts</h3>
   <p>
       <!-- Recent Posts Content -->
   </p>
</MainPage>

<MainOrArchivePage>
   <h3 class="side-title">Archives</h3>
   <p>
       <!-- Archives -->
   </p>
</MainOrArchivePage>
<ArchivePage>
   <ul id="blogArchives">
       <Blogger>
           <BlogItemTitle>
               <li><a href="<$BlogItemPermalinkURL$>"><$BlogItemTitle$></a></li>
           </BlogItemTitle>
       </Blogger>
   </ul>
   <br /><br />
   <a href="<$BlogURL$>">Back to <$BlogTitle$>'s Main Page</a>
</ArchivePage>
<MainPage>
   <h3 class="side-title">Friend's Blogs</h3>
   <ul>
       <!-- your ads, or somethin goes here -->
   </ul>

   <h3 class="side-title">Syndicate</h3>
   <ul>
       <!-- your syndicate thing -->
   </ul>
</MainPage>
<ItemPage>
   <h3 class="side-title">Select Another Recent Posts</h3>
   <p>
       <ul>
           <BloggerPreviousItems>
               <li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
           </BloggerPreviousItems>
       </ul>
   </p>

   <h3 class="side-title">Select Archives</h3>
   <p>
       <ul>
           <!-- list of archives here -->
       </ul>
   </p>
   <br />
   <a href="<$BlogURL$>">Back to <$BlogTitle$>'s Main Page</a>
</ItemPage>

You may see the variations of conditional tags that i used to control how the view would be ^^ Well you may view source my page to learn it ^^

Last but not least, nothing will come to your knowledge if you don't practice it ;)
So, go and experiment on those tags ^^

Tags: Conditional Tags, Blogger Tag