Cara Mengatur HEADER Blog

Lama Udah Gak Posting Ni ane mau posting cara mengedit header dari blog sebelah yang taadi pagi saya browsing langsung aja pada intinya sebagai berikut :


Untuk Mengatur Header dan Description (jika ada), pada posisi Tengah tengah blog yang kita kelola adalah dengan cara ;

1. ketahui Nama Dari tamplatemu
2. masuk ke Tamplate->EditHTML
3. conteng Widget Expands nya
4. Cari dan tambahkan code code diwah ini.

Minima Tamplate

Pada kasus Minima Headernya sudah ada ditengah jika kita ingin mengatur posisinya ke Kiri atau Kanan kita bisa lakukan langkah berikut ini ; cari Kode dibawah dan anda Bisa ganti menjadi Right,centre dan Left untuk menentukan posisi Headernya.

#header {
text-align: left;
Lalu cari kode dibawah ini gantikan posisi margin left dengan code merah dibawah ;

#header-inner {
background-position: center;
margin-left: 100px;
margin-right: auto;
}

Untuk Posisi ke kanan selain ganti kode diatas dengan RIGHT juga ganti kode Auto dengan code merah dibawah ini ;
margin-left: auto;
margin-right: 0px;

Denim Template

Pada Denim Headernya ada Dikiri jika ingin membuatnya di tengah ikuti langkah berikut ini ;

Cari code dibawah ini dan tambah kan dengan yang berwarna merah

h1.title {
text-align: center;
Jika ada Description dari Header Pada blogmu maka ikuti cara dibawah ini ;

#header .description {
text-align: center;
Tambahkan code warna merah diatas pada Header Description kamu. Jgn lupa meletakannya dibawah Header Description.

Jika dalam header kamu ada gambar dan juga ingin di tengahkan posisinya maka cari code * Header * ini dan letakan code dibawah ini tepat dibawah *header* tadi.

Similarly, if you want the image to be closer to the right, insert a determined left margin instead of leaving it “auto”, like this:-
margin-left: 200px;


The image can also be on the far right of the Header if you set the right margin to 0px:-

margin-left: auto;
margin-right: 0px;

Rounders Template
The Title and Description are automatically aligned to the left. You can have the Header Title in the center by adding this code (shown in red):-
#header h1 {
text-align: center;

For the Description to be in the center, you can insert the alignment code here:-
#header .description {
text-align: center;

Should you want a particular position for the Title and Description, you can also set left margins instead, for e.g.,:-
#header h1 {
margin-left: 200px;


The uploaded image in the Header is aligned to the left. You can have the image in the center by adding this under /* Blog Header */
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}


To move the picture towards the right, change the “auto” in the left margin to a fixed value like this:-
margin-left: 200px;


You can have the image on the right by setting the right margin to 0px:-
margin-left: auto;
margin-right: 0px;


Herbert and Jellyfish Templates

Both the Title and Description are by default on the left. If you want to shift them to the center of the Header, add this code (shown in red) to shift the Title:-
h1 {
text-align: center;


and the Description:-
.description {
text-align: center;



When you upload the image using the Google feature, the image appears on the left of the Header. To move the image to the center, add this code anywhere in the Head portion immediately below a } sign:-
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}


Shift the picture towards the right by changing the “auto” in the left margin to a fixed number like this:-
margin-left: 400px;


You can also have the image on the far right by setting the right margin to 0px:-
margin-left: auto;
margin-right: 0px;


Harbor Template

The Header Title and Description are somewhere on the left. If you'd like, move the Title to the center by adding this alignment code (shown in red):-
.Header h1 {
text-align: center;

Or move the Description to the center with this code:-
.Header .description {
text-align: center;

People use Harbor templates for the background design. We don't think you would want to upload any further pictures into the Header. Supposing you want to, the uploaded Header picture is towards the left. To have it in the center, you may have to adjust the left margins with this entire code inserted after /* Headings */
#header-inner {
background-position: center;
margin-left: 90px;
margin-right: auto;
}


Change the left margin width and preview the template to see if the picture is where you want it to be.

Scribe Template

The Title and Description are on the left. If you want them in the center of the Header, locate this part in the template and insert the alignment code (shown in red):-
.Header {
text-align: center;

You can change the “center” to “right” if you want the text aligned on the right.

An image uploaded into the Header appears on the left. To get it to the center of the Scribe Header, insert this other code (shown in red):-
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
.Header {
text-align: center;
}


You would notice that there is a margin surrounding the picture so that the picture is aligned to the rest of the contents. You may have a situation like this, where your intention is to have the picture occupy the entire top part of the template.



It is a matter of playing with the margin settings. In this case, for instance, we want the image at the top and aligned to the left and we changed the margin settings to this:-
#header-inner {
background-position: center;
margin-left: -50px;
margin-top: -35px;
}


You can use negative numbers (e.g., -50px). Try changing the values one at a time. Preview the blog to see if the image is where you want it to be before saving the template. The Header image can look neat and aligned like this:-



This article continues at Header Image and Title Alignment (II) which includes the steps to re-align the Header Title, Description and background images for the Dots, No. 897, No. 565, Thisaway, Moto, Snapshot, TicTac, Tekka, Sand Dollar and Simple II templates.




Sumber : http://technocompku.blogspot.com
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati

2 Responses to this post

Leave a comment