Mengganti Judul Blog Dengan Logo Sendiri

Sudah sebulan sejak terakhir kali saya mengupadate blog ini, entah kenapa ternyata blog ini masih cukup ramai dikunjungi oleh para pembaca yang budiman. Ternyata banyak yang meminta saya membuat tutorial semacam ini, oleh karena itu saya membuat Tutorial tentang " Cara mengganti judul blog dengan logo sendiri ". Baiklah tanpa berlama - lama lagi langsung saja kita baca tutorial di bawah ini

Langkah Pertama / First Step

• Seperti biasa silahkan ke tata letak - edit html.
• Silahkan klik download template lengkap untuk menanggulangi kesalahan pada pengeditan template.

Langkah Kedua / Second Step

• Cari kode yang serupa / mirip kode yang berwarna biru di bawah ini yang biasanya terletak di atas kode header.

<div id='nama'>
 <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>

• Lalu cari kode css, Cth: nama dari kode html tersebut dengan menekan ctrl+F, maka akan keluar kotak.
• Ketikan #nama ( ingat tambahkan # di depan nama ).
• Maka anda akan menemukan kode yang mirip seperti di bawah ini. 

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

• Lalu tambahkan kode css berikut sehingga menjadi :

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

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

}

• Lalu save

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

Langkah Ketiga / Third Step

• Silahkan copy kode di bawah ini 

#hidd{
display:none;
}

• Letakkan kode tersebut tepat di atas kode ]]></b:skin>
• Lalu save.

Langkah Keempat / Fourth Step

• Cari kode seperti di bawah ini :

<div id='nama'>
 <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>

• Lalu masukkan kode html berikut hingga 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>

• Lalu save.

Keterangan :
Pemasangan kode merah di dalam kode biru bertujuan untuk membuat judul asli tidak terlihat, sehingga pada nantinya logo kita lah yang terlihat.

Jika anda tak mau bersusah payah mengganti judul blog dengan css anda bisa menggunakan cara mudah lainnya yang saya tuliskan di artikel ini, akan tetapi biasanya hasilnya tidak semaksimal dengan menggunakan kode CSS, dan saran saya terkhir adalah baca dan ikutilah semuanya, tidak usah anda pikir pusing - pusing karena itu akan mengacaukan kosenstrasi anda dalam membaca tutorial ini.