Membuat Logo Blog Bisa Diklik Dan H1 Tetap Terdetek - Memang benar adanya, blog kita memiliki title blog yang di wakili dengan gambar logo dan tag H1 yang notabene menjadi salah satu syarat untuk menaikan nilai SEO blog tetap terdetek, seperti contoh blog saya ini menggunakan logo gambar pada judul blog. Sebagian para blogger mereka memasang logo gambar pada judul blog dengan memanipulasi dengan trik itu membuat title blog yang diwakilik dengan gambar logo tidak bisa diklik untuk menuju ke homepage, sehingga pengunjung yang akan beralih ke halaman utama harus mengklik menu "HOME" pada menu yang ada.
Namun sebagian orang ketike berada dihalaman postingan dan ingin menuju ke halaman utama lebih senang meng-klik title blog dari pada "home" yang ada di menu (sebenarnya termasuk saya juga hehehe...). Dan kemarin saya dapat masukan melalui tutorial blog KompiAjaib yang dishare Adhy Suryadi agar logo blog bisa diklik untuk menuju ke halaman homepage.
Karena alasan di atas lah saya kotak-katik lagi bagian headernya agar logo yang mengantikan title blog bisa diklik namun tag H1 untuk title blog tetap terdetek h1. dan akhirnya sekarang logo Blog Alvin Warasi bisa diklik dan tag H1-nya tetap terdetek.
Nah bagi yang tertarik untuk mencoba triknya, silahkan ikuti tutorial di bawah ini.
Sebenarnya ini hanya menambahkan gambar dengan membuat tempat baru yang saling bertindihan dengan header, namun karena headernya disembunyikan sehingga yang tampak hanyalah gambarnya saja. Nah sekarang kita buat dulu tempat baru untuk gambarnya dan di simpan di bawah header. Misalnya kita kasi nama
header-logo. Kita bikin CSS sama HTML-nya seperti dibawah ini;
#header-logo{z-index:100;float:left;position:absolute;margin:0}
dan HTML-ya seperti ini;
<div id='header-logo'>
<a href='/' title='Homepage'>
<img alt='logo' height='40' src='URL LOGO' title='Homepage' width='185'/>
</a>
</div>
Tambahkan juga
posisition:absolute dan
visibility:hidden pada
#header sehingga penampakannya seperti di bawah ini;
#header{float:left;position:absolute;width:300px;text-align:left;color:#333;margin:0;visibility:hidden}
Nah untuk menempatkan kode HTML-nya silahkan cari kode di bawah ini dan simpan kode HTML-nya di bawahnya.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TITLE BLOG ANDA (Header)' type='Header'>
<b:includable id='main'>
....................................................................................
</b:includable>
</b:widget>
</b:section>
Sehingga penampakan akan seperti di bawah ini:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TITLE BLOG ANDA (Header)' type='Header'>
<b:includable id='main'>
....................................................................................
</b:includable>
</b:widget>
</b:section>
<div id='header-logo'>
<a href='/' title='Homepage'>
<img alt='logo' height='40' src='URL LOGO' title='Homepage' width='185'/>
</a>
</div>
Untuk angka yang berwarna
merah silahkan sesuaikan dengan tinggi dan lebar gambarnya. Silahkan lakukan preview untuk melihat pemasangannya sudah betul atau tidak, maka selesailah sudah membuat logo blog bisa diklik dan h1 tetap terdetek
Selamat mencoba, semoga bermanfaat..
Blogger
Google+
Facebook
Twitter