Website Templates

Here are some templates I have designed (click for preview):






Don't like it?? I don't care! :P

Using GeSHi to Publish Codes in Blogger

Since publishing codes in your posts in Blogger is such a big pain in the a** for me, I'd like to share this blog post that I just recently found (though, it's an old post based on the date) to those who also have the same problem as I have.

I use GeSHi to publish codes in blogger. Here's a brief background about GeSHi taken from its website:

GeSHi started as an idea to create a generic syntax highlighter for the phpBB forum system, but has been generalized. GeSHi aims to be a simple but powerful highlighting class, with the following goals:

• Support for a wide range of popular languages
• Easy to add a new language for highlighting
• Highly customisable output formats

First step is to go to the demo page of GeSHi and enter the necessary data.

Open any text editor then copy the style by viewing the source code after hitting highlight. Then, save the file as a CSS stylesheet (e.g. geshi.css). Store the file in any server that you have access on and which you can call publicly. I have a free web host wherein I stored the file.

Edit your HTML code in blogger by going to Layout and Edit HTML. At the bottom of the template styles, just add this line

<link rel="stylesheet" type="text/css" href="/path/to/style.css" />

After that, view the source code of the demo again and copy the code where it contains the "codebox" (as I would call it). It usually starts with the code: "<div class="php" style...". And voila! You have a clean publishing of codes in your post.

Update: Currently using the method found here.

Horizontal Menus with Images Using CSS

I have been working on website templates for quite some time now and I guess a technique that I commonly use is worth sharing.

If you would like to use images for your menus, here's a good technique I found from CSS Play (although I can't find the specific link that directs to the technique). I have tested it on Firefox and IE6+ and seems to work perfectly. Anyways, here's how I use it. In my templates I use this html code:

GeSHi © 2004-2007 Nigel McNie, 2007-2008 Benny Baumann, 2008 Milian Wolff

1. <div id="menu">
2.    <ul>
3.       <li><a class="link1" href="#">Home</a></li>
4.       <li><a class="link2" href="#">About Us</a></li>
5.       <li><a class="link3" href="#">Services</a></li>
6.       <li><a class="link4" href="#">Projects</a></li>
7.       <li><a class="link5" href="#">Contact Us</a></li>
8.    </ul>
9. </div>

And this is the CSS code:

GeSHi © 2004-2007 Nigel McNie, 2007-2008 Benny Baumann, 2008 Milian Wolff

1. #menu { width: 800px; margin: auto; }
2.  
3. #menu ul {
4.    list-style: none;
5.    padding: 0;
6.    margin: 0;
7. }
8.  
9. #menu li {
10.    display: block;
11.    float: left;
12. }
13.  
14. #menu a {
15.    display: block;
16.    height: 0;
17.    width: 160px;
18.    padding-top: 40px;
19.    overflow: hidden;
20. }
21.  
22. .link1 { background: url('images/home.gif') no-repeat; }
23.  
24. .link2 { background: url('images/about.gif') no-repeat; }
25.  
26. .link3 { background: url('images/services.gif') no-repeat; }
27.  
28. .link4 { background: url('images/projects.gif') no-repeat; }
29.  
30. .link5 { background: url('images/contact.gif') no-repeat; }

Quite long eh? Anyways, it's pretty self-explanatory I guess. If not, I think trying it and experimenting with each line would be best to know how it works.