Sunday, September 25, 2016

How to change the appearance of the blog header

How to change the appearance of the blog header


The steps to change the appearance of the blog header are, as follows :
The first step,

let us know, how the size of the header before we create an image that will be added in it, this is done, for the size of the image were really fit with the size of the header, so the picture will looking good and fit.
and, to know the size of a blog header, please follow the steps below:

  • Login to blogger.
  • Click  Layout ( desain ) >> Edit HTML.
In your homepage, find the Code : # header-wrapper
the code usually written something like this :

# Header-wrapper {
background: transparent url (http://lingua-mysite.blogspot.com/images/flash/bg.jpg) no-repeat scroll 0 0;
border-bottom: 1px solid # A6A6A6;
height: 90px;
margin-bottom:-13px;
width: 936px;
}

 

In the listing above, we got the value of the header width = 936 px and height = 90 px, So, the width and height are the size of the header we need to determine the size of the image that we will create. and now we can specify the size of the image should we made is, 936 x 90 px.

The second step,
After knowing the size of the header, it is time to create a good picture, and  try to draw the theme of the image is matches with the theme of the blog, you can create images using Photoshop, or other.

The third step,
when you finish drawing, upload images to your hosting,  and get the Url link of the image, to be placed on your homepage.

The fourth step,
Change the codes on your homepage for the image appears as an imageheader,


Login to blogger   >>   and then click desain    >>    Edit HTML >>

check (tick) , the box of expand template widget.
Then, find the codes, # header-wrapper,

the complete codes are, as below :

# Header-wrapper {
background: transparent url (
http://lingua-mysite.blogspot.com/images/flash/bg.jpg) no-repeat scroll 0 0;
border-bottom: 1px solid # A6A6A6;
height: 90px;
margin-bottom:-13px;
width: 936px;

}
In the listing above , change the  green codes and blink, with the url of the image.

If the  background codes arent found in your the listing.
Add background code, as in the listing above.
After that, click Save template, and see the results.
note:
beckup and save the template, before changing or adding the HMTL code listing,


- to your blogging success -

Go to link Download

1 comment:

  1. Hello everyone, Are you looking for a professional crypto trader, forex and binary manager who will help you trade and manager your account with good and massive amount of profit in return. you can contact TD Ameritrade for your investment plan, for he helped me earned 8,500usd with little investment funds. TD Ameritrade you're the best trader I can recommend for anyone who wants to invest and trade with a genuine trader, he also helps in recovery of loss funds..you can contact him on his Email: tdameritrade077@gmail.com
    Via whatsapp: (+12166263236)

    I advice you shouldn't hesitate. He's great.

    ReplyDelete