A beautiful blog design is what bloggers will want to have in their blog. When choosing a blog design, a template which used lots of graphic or images will result in slow loading. So how do we choose or make beautiful design with less graphics and retain the ‘beauty status’ at the same time? We [...]

A beautiful blog design is what bloggers will want to have in their blog. When choosing a blog design, a template which used lots of graphic or images will result in slow loading. So how do we choose or make beautiful design with less graphics and retain the ‘beauty status’ at the same time? We can do it  with little CSS coding and the graphic (image) we create and use.

For example, if you head over to http://sushiandrobots.com you will see the background image wide and huge. But actually it is only a small image size of 108×108.

Let’s take a look at this CSS code below. The is the CSS background (repeat) Property. The background-repeat property sets if/how a background image will be repeated.

The background-repeat property is supported in all major browsers.

Note: No versions of Internet Explorer (including IE8) support the property value “inherit”.

The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element’s top left corner.

By default, a background-image is repeated both vertically and horizontally.

Property Values

Value	Description
repeat	The background image will be repeated both vertically and horizontally. This is default
repeat-x	The background image will be repeated only horizontally
repeat-y	The background image will be repeated only vertically
no-repeat	The background-image will not be repeated
inherit	Specifies that the setting of the background-repeat property should be inherited from the parent element

Example usage:
background-image: url(images/winchester-walls-2.jpg);
background-repeat: x;
or
background-repeat: y;

The NAVIGATION MENU BAR

The horizontal navigation menu has become a mainstay in Web design. It is safe to say that nowadays most websites use some form of horizontal navigation to facilitate content browsing. There are, however, many styles of horizontal navigation in modern Web design. Some offer usability advantages for certain types of websites, while others are aesthetically better.

Let’s start off with a usability tip that applies to any navigation bar. When a user visits a new website, one of their primary points of focus will be the navigation bar. If that element has been well designed, the user will look to it first for help with their task. Almost every website has certain sections that are “expected” by users, such as “About us,” “Services,” “Products,” and “Contact us.”

There are variety of techniques and best practices to improve the usability of horizontal navigation bars. Here is one http://www.husdal.com . The navigation menu at husdal.com does not use any image, it is simply css code that does the magic here.
Example Usage:
background-color: #DDDDDD;
border: 1px dashed #EBEBEB;

The Header Banner

The header is likely the first thing a new visitor sees on a blog, so it is the first impression — but why is a blog header so much more important, or at least different, than the header of a basic website?

Your blog’s header banner give the first impression, “I’m different from the others”. A blog header Header Banner tells the audience what your blog is and it reflect on everything else in your blog page. Therefore having a great header banner is very important.

In header too, there are varieties of style and functions and it varies from blog to blog depending on the design layout. Here is an example- http://www.travisjmorgan.com/blog/. In this blog the header banner sits like a beautiful queen and her beauties are reflected on all sides which make the blog a good looking one.

If you enjoyed this post, please share!