Custom View using Blogger Tag

Friday, June 30, 2006

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 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 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 , 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

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

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

<h3 class="side-title">Recent Posts</h3>
<!-- Recent Posts Content -->

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

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

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

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 ^^

Link Me ^^

Wednesday, June 28, 2006

Add me to your blogroll ^^

For those of you who read my blogs, and wanted to add a link to me, here you go :

Add me to your blogroll ^^ 120px x 20px (border 2px) size: 1.14 KB (1,175 bytes)

As for now, i only made one :P i'll add more variatons later on ;)
So stay tuned ^^

And feel free to grab the source below to add to your blog:

<a href="" target="_blank" title="Visit qureyoon @ Zlythern"><img src="" /></a>

Just copy and paste it to your blog, and voila, you're done ^^


[Update 2007-03-08]

Added some post that give zlythern a review ^^

- The Pisstaker - Daily Satire at its Best!

Thank you very much for the post
If any of you have post a review about zlythern, and haven't been added here, then drop me an email, or post a comment, i'll add it ASAP ;)

[Update 2006-06-29]
Added a new icon with a different size ^^

Add me to your blogroll ^^ 86px x 30px (border 2px) size: 1.20 KB (1,233 bytes)

<a href="" target="_blank" title="Visit qureyoon @ Zlythern"><img src="" /></a>

Sorting Hat

Tuesday, June 27, 2006

If you are a fan of J.K.Rowling then you must have read all the Potter's series right ? Yeah i know that's a stupid questions :P 'What a lame questions, and not such a big deal anyway right now' well maybe that's what you think :P

Anyway, if you trace back to the first series of Potter, maybe you'll remember the Sorting Hat ?
The one that sings :

Oh, you may not think I'm pretty,
But don't judge on what you see,
I'll eat myself if you can find
A smarter hat than me.

You can keep your bowlers black,
Your top hats sleek and tall,
For I'm the Hogwarts Sorting Hat
And I can cap them all.

There's nothing hidden in your head
The Sorting Hat can't see,
So try me on and I will tell you
Where you ought to be.
So put me on! Don't be afraid!
And don't get in a flap!
You're in safe hands
(though I have none)
For I'm a Thinking Cap!

Now if you ever wondered .... 'If the Sorting Hat was put on me? Which House I belong to?'
well, you might wanna try these : , maybe some of you already know it too :P well never mind, these are for those who still don't know ;)

So go and give it a try, mine is below (you can click on the image to find out which House you belong to) :

p.s: there is a test too, to see how addicted ... err.. how well you remembered the Potter's story ^^

The Polaroid-o-nizer™

Friday, June 23, 2006

Today i've found this cool site, do you know polaroid photo ? Well, if you happen to remember polaroid, and daydreaming, ooh, i wish my picture is polaroid, hm... then you've gotta visit The Polaroid-o-nizer for sure ;)

Yeah... maybe some photoshop users can say, 'what?! i can do that in CS2 in 1 minute!' , well not everyone has the skills to use CS2, or even know CS2 ;) well, i can use CS2 too in fact, but if there's some nice tools to automatically generate, everywhere, even when you're not at your PC, so .. why not ?! ;)

Now, here it is, a picture of me and my girlfriend after being Polaroid-o-nizer ^^ ain't it cute :)

Well, then go give it a try !

Happy Polaroid-o-nizer ^^

Opera 9 Final Release

Thursday, June 22, 2006

Opera 9
Opera 9 is finally out on the final release. This super browser is very FAST. And they've included a lot of great features.

So i'm gonna give a review myself :

  • One of my favourite one is the Mouse Gesture, this is one the most handiest feature i've ever seen and experienced in web browsing, the simple right click + left or right click + down or right click + up down, it was all very usefull, especially for those who are not keyboard shorcuts maniacs, they can do this simply by a click and a little bit movement of your mouse ! VERY VERY HANDY feature !

  • Another thing which is i like the most is the Feeds / Newsfeeds. You can click some RSS and Atom feeds you'd like to subscribe from a page you visit, and it will be automatically recognized by the browser. Later on you can manage the Feeds in the same way as you manage your email, you can search, you can mark it as read, and you can even forward by e-mail ;) And another thing, by default Opera will request the feeds every 3 hours while the browser is still running, and you can change the default value to anytime you like ;)

  • And last but not least, it's ACID 2 Compatible ;) so if your pages displayed correctly in Opera 9, then you don't have to worry how it looks like in other browsers ;)

Well, if you still need more, here's some of the best reviews, be sure to check 'em out ;) . It was a great review, and great comments too ;)

[Update 2006-06-24]: Added more review pages of Opera 9 :)

So, what are you waiting for ? Go give it Opera 9 a try !

Opera 9 - Your Web, Your Choice


Create Your Own Signature

Wednesday, June 21, 2006

If you're an active forum member, or even if you're new to the forum thing, you may notice that you can add your signature, so that everytime you post somethin, at the end of your post there will be your unique signature, a graphical signature, not some text signature. With some picture/graphical one then you can prevent spambots, and make 'em jobless ! yay ;) !

Well, now you can make your signature in an easy way, with an online signature maker !
This is Online SiGGY Maker has a lot of nice signatures, and there'll be even more, they are adding more and more, and still more ;) .

So why don't you give it a try here ;) and even make some animated .GIF from it ;) like mine


Monday, June 12, 2006

COLORSTROLOGY was written by Michele Bernhardt, created by Dann Gershon and Pantone, Inc.

Quoting from the authors:


here's mine, so, what are yours ? ;)

Introducing the New Face

Saturday, June 10, 2006

Yesterday, i had my hair cut, and i have a new look, and today i cut my blogs hair ? :p hehe jk :p today, i've changed the template on blogger, to mine :) and gave it a new look for you ;)

This was all part of my learning about CSS and JS and Layouting, etc. It was all inspired by Aditya, a rare smart boy you ever find ;) and in fact, my template code had his contribution on it ;) thanks alot Adit ;) you've been really helpfull.

And for the moment, i'm pretty satisfied for the new face i've had here ;) So for anybody who is wondering how the old one looks like, well it's on the left ;) i've get a hold of that template from searching on google :p maybe you would want to look it at the full size of the old template, here you go, you can click or right click to save as, here (size: 289k). And if you'd like to get a hold of the old template code then just drop me a message :)

Now i can be a little proud of having my own template eh :p
And i'm still on the process of making up the new face, hope it gets more good looking :)

[Update]: i've updated the blog's color, and position, in order to match my colorstrology a bit ;)

Lightbox JS v2.02

Thursday, June 01, 2006

Today i've try this cool javascript by Lokesh Dhakar called Lightbox JS v2.0

Quoting from the author :
Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.

So, time for a little demo about this lightbox thing, when the javascript is ready then you can click on the picture and wait for a sec as the picture is loading ;)

[Update 2006-06-30]: Moved the demo page to googlepages ^^ you can click here to see the demo ;)

About Me

My Photo
An ordinary, a bit 'geeky' guy, who enjoy blogging about all unique things across the internet world. Blogs about the blogosphere, scripts, fun, games, interesting stuffs, etc. Currently staying and working in Singapore.
View my complete profile