Sabtu, 14 Maret 2015

Cara Mengganti Header Blog

Baca dulu!!??
Ketika saya pertama kali bikin ini blog saya mau masang header. Dan ketika aku pasang terus kegedaan dan kemudain mau saya ganti malah bingung tempatnya..kirain tempat gantinya di template terus gak ada dan kemudian anda bisa baca disini.

1.Pertama kalian buka blogger.com kemudian klik tanda yang berada di tulisan Lihat Blog
2.Masuk atau login ke dashboard blogger sobat > tata letak Header   kemudian klik edit

3.Akan muncul tampilan seperti dibawah ini

cara menganti header blog
Add caption
-klik browse jika gambar header sudah disiapin di komputer
-klik from the web jika gambar header sobat berada di hosting penyimpanan gambar seperti di photobucket sobat bisa mengisi kotaknya dengan alamat url gambar yang akan dipakai.Usahakan memakai gambar header yang ukuranya sesuai dengan rancangan template blog sobat.

4.Klik save jika gambar sudah muncul di kotak tsb.

5.Kembali ke dashboard lagi klik template >edit HTML

6.Cari kode #header-wrapper kiraa-kira kodenya seperti dibawah ini

#header-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihR3URzq6XYw0eamyD-ln6xynfnMrimJ9UAG82qWeNSuIHdcHQkYhIQy9Iw4FhKe-bLCby49lSnrlzsHuVCmLFmS9QHRRHDFyfG8W7iO4uKPfirkyCnHK_LCwCEstbURS8YJ_8QvWf2Q/s1600/loggo+inzoom.png)no-repeat;width:960;margin:0px auto 0px;height:88px;padding:20px 0px 20px 0px;overflow:hidden;padding:2px;border:1px solid white;}
#header{float:left;width:500px;text-align:left;color:#333;margin:0;visibility:hidden}
#header-inner{background-position:center;margin-left:auto;margin-right:auto}
#header{margin:0;border:0 solid #cccccc;color:#666666;float:left;width:49%;overflow:hidden;}
#header h1{color:#FFFFFF;text-shadow:0px 1px 0px #000;margin:0 5px 0;padding:0px 0px 0px 0px;font-family:'Oswald',Arial,Helvetica,Sans-serif;font-weight:bold;font-size:32px;line-height:32px;}
#header .description{padding-left:7px;color:#FFFFFF;text-shadow:0px 1px 0px #000;line-height:14px;font-size:14px;padding-top:0px;margin-top:10px;font-family:Arial,Helvetica,Sans-serif;}
#header h1 a,#header h1 a:visited{color:#FFFFFF;text-decoration:none}
#header h2{padding-left:5px;color:blue;font:14px Arial,Helvetica,Sans-serif}
#header2{float:right;width:49%;margin-right:0px;padding-right:0px;overflow:hidden;}
#header2 .widget{padding:0px 0px 0px 0px;float:right}

dimana width adalah lebar gambar dan height adalah tinggi gambar sobat bisa otak atik ukuran tersebut untuk menyesuaikan lebar dan tingginya

7. Untuk menyembunyikan gambar ,agar tidak menghalangi judul blog yang berupa tulisan sobat bisa menambahkan kode berikut ini

#header{float:left;width:500px;text-align:left;color:#333;margin:0;visibility:hidden}

 atau sobat bisa cek susunan kodenya diatas yang saya blog warna orange  kode tersebut berfungsi menyembunyikan header blog ,agar tidak tumpang tindih dengan title dan descripsi blog.

8.Lihat pratinjau dan klo berhasil klik simpan template.

Untuk pengecekan gambar header pemasangannya sudah benar apa belum sobat bisa cek dichkme.com
Jika disitu tidak terdeteck multiple tag h1 berarti pemasangan gambar header sobat sudah berhasil.

Tidak ada komentar:

Posting Komentar