Mengganti Nama Blog dengan Gambar/Logo

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