Cara Mengganti Judul Di Blog Dengan Gambar / Logo

Gambar adalah benda buatan manusia , biasanya berbentuk dua dimensi , yang mempunyai kemiripan dengan sesuatu benda, atau makhluk hidup. Banyak jenis - jenis gambar diantara lain seperti : Foto, lukisan, sketsa, dll. Lalu apa hubungannya gambar dengan blog?, banyak hubungannya, salah satunya adalah memperindah blog anda. Untuk memperindah blog anda juga bisa memasang sebuah gambar / foto bisa di pasang di judul blog, dan bahkan kita bisa mengganti judul di blog dengan gambar / foto / logo. Tujuannya adalah agar blog anda terlihat lebih keren dan profesional, dan pemasangan ini cocok untuk jenis blog pribadi maupun non pribadi yang bertujuan bisnis . Bagaimana caranya?, silahkan ikuti penjelasan saya.

Langkah Pertama / First Step

Login terlebih dahulu jika anda belum login di www.blogger.com, dan
setelah login silahkan masuk ke halaman tata letak / layout. Anda akan berada pada element halaman / element page.

Langkah Kedua / Second Step

Ketika pada element page, silahkan klik edit pada judul.

Keterangan 

Judul blog adalah judul blog anda.

Deskripsi blog adalah deskripsi atau gambaran dari blog anda.
Gambar dari komputer adalah gambar yang akan di ambil dari komputer anda.
Gambar dari web adalah gambar yang akan di ambil dari web jika belum tahu silahkan klik cara mengambil gambar dari web
Penempatan di balik judul dan keterangan adalah penempatan gambar / logo / foto di belakang tulisan atau judul.
Penempatan selain judul dan keterangan adalah penempatan gambar / logo / foto di depan judul, jadi gambar tersebut akan menutupi judul sehingga judul sebenarnya akan menghilang dan digantikan oleh gambar.
Susut agar Sesuai adalah menyusutkan gambar sehingga sesuai ketentuan judul. Biasanya kesesuain tersebut ditentukan oleh template blog anda.

Langkah Ketiga / Third Step

Pada langkah ketiga ini saya hanya akan menjelaskan sedikit tentang gambar. Pada kenyataannya pada masing - masing template ada ukuran lebar maximum untuk sebuah gambar yang nantinya akan di masukkan ke dalam judul. Jadi jika anda membuat logo / foto / gambar maka harus di sesuaikan dengan ukuran yang telah ditentukan oleh template.



ATAU BISA DENGAN CARA ENE

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.

selamat mencoba