Actually all blog layouts were designed by using the ideal of section.. If you understand the HTML and Java codes you will be able to easily find out how many sections you have for your blog. But for most of us we don't know and do not want to know, why not just focusing on content but spending so many time on coding?
So here I share with you the common layout for the Blogger blogs and the simple ways to make your blog clean and neat.
Common layout for blog: 5 sections
Blog layout is commonly divided into at least 5 sections: Header, top menu bar, post area, widget bar, footer.
1. The header section. The header section includes the name of the site, description for the site, probably background picture for header, or a banner.
In my site, "The header section" is what you can see at the top of the site, as in following screenshot:
2. Top tab menu bar section: Some people call this "tab bar", some call this "top menu bar", they are basically the same thing.
In my site, the "top tab menu bar" is as in following screenshot:
3. Post area section: that's referring the main part of the site that contains all the posts.
4. Widget bar section: Refers to the side bar that contains all the widgets.
In my site, that the right side widget bar area.
5. Footer section: The bottom part of the blog, which usually contains more information of the company and copyright notification etc.
In my case, it's the following dark green footer area:
What should we do for above 5 sections
What should we do for above 5 sections to make the blog clean and neat? The answer is simple: set background color for them !
Among all those 5 sections, Header and top menu bar are the most important 2 sections. Once you set up the background color for these 2 sections, your blog will immediately stand out !
How to add background colors for the 5 sections
Add background color is easy. Here's the examples for the blogs on Blogger.com, on how to add background colors for the above 5 sections:
1. Add background color for the Header Section in Blogger.com:
You can simply just add one-line code to the blog template to make it happen, please see my previous post:
How To Set / Change Blog Header / Title Background Color for Blogger.com
2. Add background color for the Top Menu Bar Section in Blogger.com:
You can simply just add one-line code to the blog template to make it happen, please see my previous post:
How to change the background color for top tab menu bar in Blogger
3. Add background color for the Main Post Section in Blogger.com:
Most of case, you don't need to change the background color for the Main Post Section, because by default, the background color for this section is White, which is clean and neat enough.
4. Add background color for the Widget Bar Section (left or right) in Blogger.com:
You can simply just add a few lines of codes to the CSS file of the template to make it happen, please see my previous post:
How to Add/ Change Background Color for Right (left) Side Widget Bar in Blogger
5. Add background color for the Footer Section at the bottom of the Blogger.com:
Most cases you don't need to change anything, because by default, the footer section come with a dark background color which is perfectly clean and neat.
Summany:
By adding background colors for the above 5 sections, your blog layout will immediately stand out, and looks much better than before, I believe. If you still don't satisfy, please let me know.
It's Your Turn
How do you design and customize the layout of your blog? How do you make the blog clean and neat? Share your experience and insights in the comments box below.
No comments
Post a Comment