Blog Design Tutorial: Layout

Layout

1. Header
2. Posts
3. Sidebar
4. Bottom
5. Background

Choosing a layout can be a easy task, but for some, it could be a bit tricky. To get started, click on "Layout" on the left side of your screen to access your blog layout.

1.) Header (Your logo!)

Create a header or someone else to make a header for your page. I made mine myself using free clip art and fonts and using "Microsoft Powerpoint" to design it. Check out my list of Clip Art from various TPTers and creators.  Once you have your header, upload it your photo website.

You can also add a ribbon (like my red ribbon) with links to various pages of your blog by clicking "Add a Gadget ". Use the gadget "HTML/JavaScript" and use a HTML code and images for your link. (Don't worry, I will go into more details here later).

2.) Posts (what you write about)

I won't go into much detail here. You can click on "Blog Post" and choose the settings that you would like to see in the blog posting area. You can choose to show 1 post at a time or many at a time. You can add the date, how it was posted (ex. say "written by" or "typed by" instead of "posted by"). You can decided about the comments and social media. You then can arrange it to your linking.

You can add other gadgets and widgets below it such as "Other Posts you Like" widget. Simply click "Add a Gadget", input the HTML/JavaScript code. You can move it by clicking on the box and moving it under the "Blog Post" box.

3.) Sidebar

Here, you can customize what viewers will see. You can add your own gadgets. Bloggers has many pre-made gadgets such as "About Me" or "Follow by Email." Some gadgets and widgets you may have to create find online or create yourself. (Again, I will go more into detail here later).

4.) Bottom

If you choose to add gadgets and widgets at the bottom of your blog, you may do so. This is also the area where you would place a "Back to the Top" button, any disclaimers, or your sponsors. I used this area for a "Back to the Top" button. 

5.) Background

This can be tricky depending on what you want. If you want a simple one design background, you can add it by clicking on "Template" on the left side of the Layout menu and click "Customize". A new screen will load. Click on "Backgrounds" and "Background Image". You can upload your own image.

 

To make the 3 different page designs, I used 3 different sets of Digi-paper and used Microsoft Powerpoint to add the shadow effect. Once each page was ready, I made a design in Microsoft Paint (Yes, paint. I was not about spend hundreds of dollars on a Photoshop program). Depending on the Layout and widths of your blog, you may have to adjust the sizes of each paper.

 

Here's a basic layout of what mine looks like:

 

 

Here's the actual background:

 

Try different designs. It will be a trial and error with the backgrounds because of the layout you choose (aka where your sidebar(s) are located).

Once you have you layout completed, SAVE YOUR TEMPLATE! I cannot emphasize this enough. If you like you design save it so that you do not have to start from scratch. I advise saving each time to changes to your blog. Sometimes codes may not work and you'll have to delete it manually (as in go into the actual HTML code and deleted it). 

 

 

Here's the link to the Blog Design Tutorial Guide.

 

 

Class Dismissed!