Sunday, February 24, 2008

Blogger Blogskin

So...the templates that Blogger offers are finally boring you, huh? You have designed a spectacular blogskin and then you look at the maze of HTML and begin to feel dizzy. The next thing you know, you've fainted.

At least that's how I felt. Blogger seems to like intimidating it's users into not using their own blogskins. Pfft. But we can always change that. *Evil cackle*

[By the way, I'm assuming that you, the reader, knows how to code div layouts already. If not...tag me and I'll write a tutorial on coding div's.]

So. First thing you do is go to open Blogger. At your dashboard, click the 'Layout' link of whatever blog you want to code. Then you'll see a funny looking page with a bunch of boxes. Yes, Blogger's boring like that. Click "Edit HTML".



Don't faint. Just close your eyes and scroll down. Click 'Revert to Classic Template'.



Next, code your layout like you would to any div layout. [I am not saying you can't use iFrames or Image-mapping. I'm just saying to start out with div. ]

When you're done all that and you try to paste it into that HTML section in your blog template, it doesn't work. *Shock* What do you do now?

Smack WZ on the head.

No of course not! You read on.

So, I'd like to explain why it doesn't work. Because normally, if you are to make a website, you'd put all your contents in the contents place. However, on a blog, you're actually writing all your blog entries in Blogger which just posts everything for you. (Like I'm doing right now) So...duh, there will be a special code there that'll code for different things. For instance, the date, time and your actual blog contents. (Sorry peeps, I haven't figured out a code for the title yet)

Of course, this is when WZ share all those codes with you.

Put all the codes for your blog between <blogger> and </blogger> tags. Code for contents (your actual blog entry): <$BlogItemBody$> Code for date (the day you published your entry): <blogdateheader><$BlogDateHeaderDate$></blogdateheader> Code for time (the time when you posted your entry): <$BlogItemDateTime$>

Here is an example of what my blog coding looks like:

<blogger><$BlogItemBody$><p><div align="right">Scribbled by,<br /><br /><i><span style="color: #7e7461;">WZ</i></span> @ <span style="color:#7e7461;"><$BlogItemDateTime$></span> on <span style="color:#7e7461;"><blogdateheader><$BlogDateHeaderDate$></blogdateheader></span></div align><p></blogger>

Got that part? Now...put all that coding you just did into the div for contents. Then, copy and paste all of your HTML into that big box on the template page of your blog. (There are three, rounded beige boxes at the top of your blog and one is labelled 'Template')

Save your new layout and look at it. All looks fine, eh? Except for this ugly bar at the top of your blog page that just kills the look of everything. So...another secret. Yay!

Put the following code into your CSS between style tags

#navbar-iframe {height:0px;visibility:hidden;display:none;}

Now you can have pretty blogskins! =)

[Please remember to credit]