Complete Guide to Creating a Blog Website Layout

Complete Guide to Creating a Blog Website Layout

Now we only need a background under ours navigation. It's big semi-transparent rectangle, but for a background we will cut out just a small piece of it. Once again, copy this layer to a new document and select just small rectangle (even 1 by 1 pixels could be). Then save it as a nav.PNG. I've made it bigger for you to see.
The whole div should be 940 pixels in width following our design. We can make fixed height but if we will want to change the text we will also have to change that div. Here's html for our navigation:

And complete CSS for that piece of code:

And we're done with header.

Step 22 - a bit of JavaScript / contact form

We will make our contact form as a rollover div. That's why I included jquery in template. We will use it so the animation will be a matter of few lines of code. First of all, let's change a link of contact in navigation, make it like this:

As you can see we just added a class to achieve onlick action. Then in the header section below jquery implementation add this piece of JavaScript code:

For those who don't know what it means I am just describing: When the document is ready hide a div with id contactform and if someone clicks link with class rockandroll then slide contactform div. In the brackets is speed of sliding. Here's html, add this and we can head to tests:

We will craft contact form now, that was just check if this work. It actually does. the same way we can make 'about me' box but I will go easy way and will just send visitor to the footer. I have prepared some simple background on the side. Check by yourselves how everything looks in source files. I have included there mock-up of contact form (it is not working and don't sends any e-mails).

Step 23 - the content

I have changed my mind and disabled that big white layer which was our base. Think it looks better, but you can cut it te way you want with or without this layer. If you would like to use my finished template with white background then it's a matter of one image to change.
Alright, firstly we need a paper background. Hide unneeded layers. Cut out a big rectangle and do the same mirror trick as we made with very first header background. Name it bg2.jpg. Now update your css 'html' declaration, all should looks like this:

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13

Create Dot Grid Art in 1 Click

Turn any photo into a dot grid artwork with these Photoshop actions. You'll get great results with dots that change size. They get larger in brighter areas and smaller in darker areas. Free download available.

2 comments on “Complete Guide to Creating a Blog Website Layout”

  1. Dzięki za tutka. Muszę przyznać że fajnie wygląda ale przy 8 latach doświadczenia wszystko można zrobić :)


    Czemu mnie nie dziwi że w komentarzach pojawia się flame ? ;d

Leave a Reply

Your email address will not be published.