Inserting a logo above blog page, may be more interesting if the position is in line with the blog title. And if the column header just one column only, means the logo will not be in a position parallel with the blog title. The way that the logo can be installed earlier in parallel with the blog title is to cut the width of the header part and add new columns. With the blog header has two columns.
To create a new column on the blog header follow the following three steps :
1. Changing the width of the header
Header wide in the following example is 768px. Because the field will be the size of 160px with the first step is to change the header width 608px.
#header {
float: left;
width: 768px; ---------------------> 786px – 160px = 608px
padding-bottom: 8px;
background: #000000;
clear: right;
background-repeat: no-repeat;
padding-left: 0px;
height: 71px;
}
Hasilnya akan jadi seperti ini
#header {
float: left;
width: 608px;
padding-bottom: 8px;
background: #000000;
clear: right;
background-repeat: no-repeat;
padding-left: 0px;
height: 71px;
}
2. Create a new column format
The next step is to create a new position in the fields below to be knowledgeable in use. copy the header that we have change in the first step, and then paste exactly underneath the exchange position and its width. And do not forget to provide the field with another name, for example with the name headerpojok.
#header { ----------------------------> headerpojok
float: left;------------------------------> right
width: 608px;-------------------------> 160px
padding-bottom: 8px;
background: #000000;
clear: right;
background-repeat: no-repeat;
padding-left: 0px;
height: 71px;
}
Hasilnya akan jadi seperti ini
#headerpojok {
float: right;
width: 160px;
padding-bottom: 8px;
background: #000000;
clear: right;
background-repeat: no-repeat;
padding-left: 0px;
height: 71px;
}
3. Making a tag body
Because we will create a new column on the right header, then the next step is to place the tags after the tag header headerpojok located on the body. How the header tags look like this
<div id='header''>
. . . .
. . . .
</b:section'>
</div'>
Then place the following tag after the tag-and-cover over the header
<div id='headerpojok''>
<b:section class='sidebar' id='headerpojok' preferred='yes''>
</b:section'>
</div'>
After that save and see the page elements will appear in the fields that we have created. Install and start with the logo or the other.
To create a new column on the blog header follow the following three steps :
1. Changing the width of the header
Header wide in the following example is 768px. Because the field will be the size of 160px with the first step is to change the header width 608px.
#header {
float: left;
width: 768px; ---------------------> 786px – 160px = 608px
padding-bottom: 8px;
background: #000000;
clear: right;
background-repeat: no-repeat;
padding-left: 0px;
height: 71px;
}
Hasilnya akan jadi seperti ini
#header {
float: left;
width: 608px;
padding-bottom: 8px;
background: #000000;
clear: right;
background-repeat: no-repeat;
padding-left: 0px;
height: 71px;
}
2. Create a new column format
The next step is to create a new position in the fields below to be knowledgeable in use. copy the header that we have change in the first step, and then paste exactly underneath the exchange position and its width. And do not forget to provide the field with another name, for example with the name headerpojok.
#header { ----------------------------> headerpojok
float: left;------------------------------> right
width: 608px;-------------------------> 160px
padding-bottom: 8px;
background: #000000;
clear: right;
background-repeat: no-repeat;
padding-left: 0px;
height: 71px;
}
Hasilnya akan jadi seperti ini
#headerpojok {
float: right;
width: 160px;
padding-bottom: 8px;
background: #000000;
clear: right;
background-repeat: no-repeat;
padding-left: 0px;
height: 71px;
}
3. Making a tag body
Because we will create a new column on the right header, then the next step is to place the tags after the tag header headerpojok located on the body. How the header tags look like this
<div id='header''>
. . . .
. . . .
</b:section'>
</div'>
Then place the following tag after the tag-and-cover over the header
<div id='headerpojok''>
<b:section class='sidebar' id='headerpojok' preferred='yes''>
</b:section'>
</div'>
After that save and see the page elements will appear in the fields that we have created. Install and start with the logo or the other.
0 Comments:
Post a Comment