Autis World

Malam sobat blogger,postingan saya kali ini atas permintaan teman saya yang ingin mengganti nama blognya dengan Gambar/Logo costum yang telah dia buat sendiri.Saya pikir bagus juga sih,menjadi suatu identitas tersendiri untuk blog kita apabila kita mempunyai gambar/logo costum.hehe
Oke laahh,,langsung aja kita langsung ke tutorialnya..
Ada beberapa langkah yang harus kita lewati untuk dapan mengganti nama blog dengan gambar/logo sendiri.

Langkah Pertama :

Masuk ke akun kita masing-masing.
Pilih Rancangan >> Edit HTML.
Klik Download Template Lengkap untuk menghindari sesuatu yang tidak kita inginkan apabila gagal dalam melakukan trik ini.
Cari kode yang mirip dengan kode dibawah ini.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nama blog (Header)' type='Header'/>
</b:section>
</div>

Masukkan kode HTML berikut sehingga menjadi

<div id='nama'>

<div id='hidd'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Judul blog (Header)' type='Header'/>
</b:section>
</div>
</div>

(lihat kode yang berwarna merah) Pemasangan kode yang berwana merah didalam kode yang berwarna biru,itu bertujuan agar judul asli tidak terlihat,sehingga hanya gambar/logo kita yang terlihat.

Lalu cari CSS nya,Seperti : header-wrapper (cari dengan CTRL+F untuk mempermudah),tambahkan # didepan header-wrapper,contoh : #header-wrapper (ketikkan pada kolom pencarian.
Maka akan keluar kode CSS seperti dibawah ini.

#header-wrapper {
width:950px;
height:150px;
float:left;
}

Lalu tambahkan kode background:url(alamat url gambar/ logo yang ingin anda masukkan) no-repeat;padding:20px 20px 0 0 sehingga menjadi sebagai berikut .

#nama {
width:450px;
height:150px;
float:left;

background:url(alamat url gambar/ logo yang ingin anda masukkan) no-repeat;padding:20px 20px 0 0
}

NB : Kode yang harus anda temukan tidaklah harus sama mirip seperti width 950px, height 150px, karena di setiap blog mempunyai ukuran masing - masing yang tentunya berbeda - beda.

Langkah Kedua :

Cari kode ]]></b:skin> (untuk mempercepat pencarian gunakan CTRL+F)
Copy/paste kode berikut ini tepat diatas kode ]]></b:skin>.

#hidd{
display:none;
}

Klik Pratinjau (untuk memastikan sebelum kita save)
Apabila judul sudah terganti dengan gambar,klik save.

Saran saya terkhir adalah baca dan ikutilah semuanya, tidak usah anda pikir pusing - pusing karena itu akan mengacaukan kosenstrasi anda dalam membaca tutorial ini.
Semoga berhasil ya sobat blogger..
Saatnya berkunjung ketetangga sebelah..hehehe