How to set blog header text and blog header banner side by side

How to set blog header text and blog header banner side by side-Bloggers use various techniques to decorate their blog headers. Some use blog header text only and others use blog header banner but some of the bloggers use both blog header text and blog header banner. Those using these both, use either the blog header banner first(in left side) and then blog header banner(in the right side) or vice versa i.e. the blog header text first(in left side) and then blog header text(in the right side). In both the conditions, the blog header appears beautiful if set properly. Here I will discuss how we can set these is an excellent way.

Resize your blog header text and blog header banner before upload

Before you upload your blog header text and blog header banner in a way that their width is exactly equal and the length of both can fit in side your page size. Here note that individual length of the blog header text and blog header banner may be different but their total length must fit within the page.

Setting the blog header text and blog header banner using the blogger template designer and adding a small HTML

This a very easy setting and we can easily do it using the blogger template designer and adding a small HTML code there. Following is a simple procedure to do it-
1.    Login to your blogger Dashboard using your blogger ID and password.
2.    Click template.
3.    Click customize.
4.    Click Advanced.
5.    Click Add CSS
6.    The following screen will appear


You will need to add the following CSS code here in the empty box.

#header-inner {
background-position: right !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: left;
clear: both;
margin-left: 20px;
}

If you want to place your text on the left and banner on the right, this code is perfect but if you want your banner image on the left ant text on the right then follow the above process replacing right with left and replacing left with right.  

You can set new left margin by changing 20px to any other figure.

Now Click on the “Apply to Blog” button in the top right hand corner to apply the template changes to your blog and then click’ Back to blogger’ to return back to blogger.

Now click ‘view blog’ to check your blog header image and if you have correctly followed the procedure your new blog header it will appear with the new settings applied.

To learn more about Safety Precautions, Measures While Editing a Template click this link
If you are interested to learn more about How to set custom Robots Header Tags of a Blog lick this link



Reactions:

2 comments:

  1. Contemporary Home Furniture for Your lovable Home

    Furniture is among the most fundamental objects in all homes. An individual takes great interest in planning as well as designing all parts of their home for it to truly reflect their standard of living.

    Choice of home furniture is n’t a simple task and is among the overwhelming challenges you must face. Therefore, be careful ahead of buying anything for your home. The days are past when house furniture happened to be crafted from wood only and the present day furniture is crafted from wood, glass, steel, leather, plastic, granite with the list tending to be never-ending. With many options at your disposal, you can pick diverse themes for all parts of your home to make it appear distinctive and special.
    http://www.mobelindia.com
    http://www.mobelhomestore.com

    ReplyDelete
  2. Beginner and expert architects alike - you may most likely be sufficiently talented of any one or the majority of the methods in making a Web page and outlining them.
    Vindues tekster design

    ReplyDelete