Read First

You are free to make use of the content I have placed here for your personal use. Redistribution and alteration in any form are absolutely not allowed. Please respect the effort I have exerted to just set up all these. If caught not abiding by this rule, I would have no choice but to spam your email and your blog. :D

Preview

This is a preview of the layout that's almost the same to what you'll be making with this maker.

Go here to view the working sample page.

Easy Steps

Please open your notepad first before proceeding. Opening your photo/graphic editing software (Photoshop / Paintshop Pro / MS Paint) is also suggested. Let's keep things hassle-free. :D

1. Prepare or create your header image

You can create your own header image using photoshop, or whatever photo/graphic editing software you use. Please make sure that the banner you'll be using is 571 X 256 pixels. I've created a header image maker that you can use to create a header image for your blog. Please do not use the header image maker for other personal purposes. Also, the header image maker should be viewed in Mozilla Firefox Browser or any other web browser that's not Internet Explorer. If your IE allows .png transparency, then it is okay.

After you have created your header image, please upload it to your own server / other freehosting servers (photobucket, imageshack, etc.).

Paste the directlink / url of the uploaded header image here for the meantime.

Paste here!

2. Choose a background

BG Color
#000000
#827f7f
#d00a0a
#d0880a
#7ed00a
#d0b60a
#0a96d0
#d00a50
#a40ad0

Choose one and save it in your computer. Upload it to your own server afterwards. Paste the directlink / url of the uploaded bg image here for the meantime.

Paste here!

3. Edit the codes

<html> <head> <title>Your Site Title Here</title>  <style type="text/css"> body { ont-family: Verdana; font-size: 13px; color: black; background-color: #COLOR; background-image: url('BG.PNG'); overflow-x: hidden; text-align: justify; } a:link, a:visited, a:active { text-decoration: none; color: #d11d1d; font-weight: bold; font-size: 13px; } a:hover { color: #e69412; } i, em, s { font-family: Georgia; color: #0b7db8; font-size: 14px; } b, u, strong { font-family: Verdana; color: #a1a60a; } h1 { font-family: Trebuchet MS; font-size: 25px; color: #f10754; text-align: justify; background-color: white; } h2 { font-family: Trebuchet MS; font-size: 15px; color: black; text-align: justify; letter-spacing: 3px; } table, tr, td { font-family: Verdana; font-size: 13px; color: black; text-align: justify; background-color: #e5eff2; } textarea, input, select { background-color: #f5f9fc; font-family: Verdana; font-size: 13px; color: black; border: 1px solid black; } .image { border: 5px solid white; } .contentbox { border: 15px solid white; width: 571px; } .navbox { padding: 10px; background-color: #d5dfe1; } </style> <script> function changeNavigation(id) {document.getElementById('box').innerHTML=document.getElementById(id).innerHTML} </script> </head> <body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0> <center> <br><br> <div class="contentbox"> <table width="571" cellpadding="0" cellspacing="0"> <tr width="571" height="256"><img src="HEADER.JPG/HEADER.PNG" border="0" title="Your Site Title Here"></tr> </table> <table width="571" cellpadding="0" cellspacing="0"> <tr> <td valign="top" width="331" style="padding-left: 10px; padding-right: 10px;">  <div id="box"> <h1>Home</h1> Lorem ipsum dolor sit amet, <i>consectetuer adipiscing elit</i>. Pellentesque feugiat nibh ac lorem. <a href="#link">Quisque</a> pellentesque, purus sit amet pharetra rhoncus, quam ipsum condimentum augue, quis pretium elit est at dui. Aenean justo. Integer nunc ante, sagittis quis, iaculis eget, auctor sed, nibh. Duis vel felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce dignissim pede et urna. Duis placerat. Morbi semper auctor pede. Fusce facilisis bibendum lacus. Vestibulum purus. Vivamus erat eros, vulputate sed, gravida in, mollis quis, dui. Donec aliquet auctor orci. Nam mauris nibh, rutrum vel, <b>adipiscing ac</b>, adipiscing dignissim, quam. Maecenas et metus a mauris suscipit vulputate. Cras cursus. <br><br> <a href="#link">Fusce ligula turpis</a>, lobortis at, dignissim sit amet,Integer ipsum risus, porta sit amet, facilisis quis, placerat non, ante. Praesent at mi. Phasellus bibendum. Sed sem lectus, venenatis vel, rhoncus vel, blandit id, purus. Aliquam mauris pede, lobortis eget, scelerisque interdum, e<b>gestas fermentum, nis</b>i. Aenean fringilla, orci sit amet mattis pulvinar,<i> ante mauris accumsan nibh</i>, a tristique sem massa sit amet urna. Fusce ipsum. Nullam eget augue non est iaculis pretium. Duis ornare pellentesque libero. Phasellus dapibus turpis sed mi vulputate pellentesque. Sed id risus at velit volutpat posuere. Nunc pede. Fusce justo. <br><br> </div>   <div id="aboutme" style="display:none;"> <h1>About Me</h1> <img src="http://i279.photobucket.com/albums/kk132/esilencemyspace/layoutmaker/photo.png" class="image" align="left"> Lorem ipsum dolor sit amet, <i>consectetuer adipiscing elit</i>. Pellentesque feugiat nibh ac lorem. <a href="#link">Quisque</a> pellentesque, purus sit amet pharetra rhoncus, quam ipsum condimentum augue, quis pretium elit est at dui. Aenean justo. Integer nunc ante, sagittis quis, iaculis eget, auctor sed, nibh. Duis vel felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce dignissim pede et urna. Duis placerat. Morbi semper auctor pede. Fusce facilisis bibendum lacus. Vestibulum purus. Vivamus erat eros, vulputate sed, gravida in, mollis quis, dui. Donec aliquet auctor orci. Nam mauris nibh, rutrum vel, <b>adipiscing ac</b>, adipiscing dignissim, quam. Maecenas et metus a mauris suscipit vulputate. Cras cursus. <br><br> <a href="#link">Fusce ligula turpis</a>, lobortis at, dignissim sit amet,Integer ipsum risus, porta sit amet, facilisis quis, placerat non, ante. Praesent at mi. Phasellus bibendum. Sed sem lectus, venenatis vel, rhoncus vel, blandit id, purus. Aliquam mauris pede, lobortis eget, scelerisque interdum, e<b>gestas fermentum, nis</b>i. Aenean fringilla, orci sit amet mattis pulvinar,<i> ante mauris accumsan nibh</i>, a tristique sem massa sit amet urna. Fusce ipsum. Nullam eget augue non est iaculis pretium. Duis ornare pellentesque libero. Phasellus dapibus turpis sed mi vulputate pellentesque. Sed id risus at velit volutpat posuere. Nunc pede. Fusce justo. <br><br> </div>   <div id="site" style="display:none;"> <h1>The Blog / Website</h1> Lorem ipsum dolor sit amet, <i>consectetuer adipiscing elit</i>. Pellentesque feugiat nibh ac lorem. <a href="#link">Quisque</a> pellentesque, purus sit amet pharetra rhoncus, quam ipsum condimentum augue, quis pretium elit est at dui. Aenean justo. Integer nunc ante, sagittis quis, iaculis eget, auctor sed, nibh. Duis vel felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce dignissim pede et urna. Duis placerat. Morbi semper auctor pede. Fusce facilisis bibendum lacus. Vestibulum purus. Vivamus erat eros, vulputate sed, gravida in, mollis quis, dui. Donec aliquet auctor orci. Nam mauris nibh, rutrum vel, <b>adipiscing ac</b>, adipiscing dignissim, quam. Maecenas et metus a mauris suscipit vulputate. Cras cursus. <br><br> <a href="#link">Fusce ligula turpis</a>, lobortis at, dignissim sit amet,Integer ipsum risus, porta sit amet, facilisis quis, placerat non, ante. Praesent at mi. Phasellus bibendum. Sed sem lectus, venenatis vel, rhoncus vel, blandit id, purus. Aliquam mauris pede, lobortis eget, scelerisque interdum, e<b>gestas fermentum, nis</b>i. Aenean fringilla, orci sit amet mattis pulvinar,<i> ante mauris accumsan nibh</i>, a tristique sem massa sit amet urna. Fusce ipsum. Nullam eget augue non est iaculis pretium. Duis ornare pellentesque libero. Phasellus dapibus turpis sed mi vulputate pellentesque. Sed id risus at velit volutpat posuere. Nunc pede. Fusce justo. <br><br> </div>   <div id="links" style="display:none;"> <h1>Exits</h1> <h2>Friends</h2> <ul> <li> <a href="#linkhere">Link Here</a> <li> <a href="#linkhere">Link Here</a> <li> <a href="#linkhere">Link Here</a> <li> <a href="#linkhere">Link Here</a> <li> <a href="#linkhere">Link Here</a> <li> <a href="#linkhere">Link Here</a> </ul> <h2>Credits</h2>  <ul> <li> <a href="http://eerie-silence.net/layoutmaker" target=_blank>Eerie Silence Layout Maker</a> <li> <a href="http://eerie-silence.net" target=_blank>Eerie-Silence.Net</a> <li> <a href="http://bahaghari.org" target=_blank>Bahaghari.Org</a> </ul> <br><br> </div>   <div id="etc" style="display:none;"> <h1>Etcetera</h1> Lorem ipsum dolor sit amet, <i>consectetuer adipiscing elit</i>. Pellentesque feugiat nibh ac lorem. <a href="#link">Quisque</a> pellentesque, purus sit amet pharetra rhoncus, quam ipsum condimentum augue, quis pretium elit est at dui. Aenean justo. Integer nunc ante, sagittis quis, iaculis eget, auctor sed, nibh. Duis vel felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce dignissim pede et urna. Duis placerat. Morbi semper auctor pede. Fusce facilisis bibendum lacus. Vestibulum purus. Vivamus erat eros, vulputate sed, gravida in, mollis quis, dui. Donec aliquet auctor orci. Nam mauris nibh, rutrum vel, <b>adipiscing ac</b>, adipiscing dignissim, quam. Maecenas et metus a mauris suscipit vulputate. Cras cursus. <h1>Form</h1> Name: <input> <br><br> Email: <input> <br><br> Website: <input> <br><br> <br><br> Lorem ipsum dolor sit amet, <i>consectetuer adipiscing elit</i>. Pellentesque feugiat nibh ac lorem. <br><br> </div>  </td> <td valign="top" width="140" align="right" class="navbox"> <h2>Welcome</h2> Welcome message here Welcome message here Welcome message here Welcome message here Welcome message here <h2>Navigation</h2> <a href="#">Home</a> <br> <a href="#" onClick="document.getElementById('box').innerHTML=document.getElementById('aboutme').innerHTML">About Me</a> <br> <a href="#" onClick="document.getElementById('box').innerHTML=document.getElementById('site').innerHTML">The Blog</a> <br> <a href="#" onClick="document.getElementById('box').innerHTML=document.getElementById('links').innerHTML">Exits</a> <br> <a href="#" onClick="document.getElementById('box').innerHTML=document.getElementById('etc').innerHTML">Etcetera</a> <br> <br> <h2>Layout By:</h2> <center> <a href="http://eerie-silence.net" target=_blank><img src="http://img.photobucket.com/albums/v134/kaila91/but2.jpg" border="0"></a> </center> <br><br> </td> </tr> </table> </div> <br><br> </center> </body> </html>

You can either edit your codes here, or use notepad instead. This type of layout is mostly used in blogspot blogs (please refer to 2+ pages in 1 file tutorial). If you do not want to apply that trick/code, copy the codes here then. This one's more simplified than the one shown above because it's 1 file = 1 page.

Replace:

#COLOR (background-color) -> hex color code of your background (same color of bg.png) [ex: #000000]
BG.PNG -> valid URL of your uploaded BG.PNG [ex: http://blabla.com/bg.png]
HEADER.JPG/HEADER.PNG -> valid URL of your uploaded header image [ex: http://blabla.com/headerimage.jpg]

If you want, you can change other codes too. Go here to view the java-enabled hex color chart. :)

4. Save as an .html file

After you're done with editing, you must save it of course. :D

Please send an email to staring.is.rude[at]gmail.com if you've successfully made your blog layout using this layout maker. I would love to see your work. :D