Membuat Logo Blog Bisa Diklik Dan H1 Tetap Terdetek

Sebelumnya saya sudah membahas ihwal memanipulas title blog dengan gambar biar terdetek h1 beberapa waktu yang lalu. Dan memang benar adanya, blog kita memiliki title blog yang diwakili dengan gambar logo dan tag h1 yang notabene menjadi salah satu syarat untuk menaikan nilai SEO blog tetap terdetek.

Namun dengan memanipulasi dengan trik itu membuat title blog yang diwakili dengan gambar logo tidak mampu di klik untuk menuju homepage, sehingga pengunjung yang akan beralih ke halaman utama harus mengklik menu "home" pada menu yang ada.

Namun sebagaian orang dikala berada di halaman postingan dan ingin menuju ke halaman utama lebih senang meng-klik title blog daripada "Home" yang ada di menu (sebenarnya termasuk saya juga hehehe...). Dan kemarin saya dapat masukan dari Kang Ismet biar logo blog mampu diklik untuk menuju ke halaman homepage.

Karena alasan di atas lah kesudahannya saya kutak-katik lagi adegan headernya biar logo yang menggantikan title blog mampu diklik namun tag h1 untuk title blog tetap terdetek h1. Dan kesudahannya sekarang logo blog Kompi Ajaib mampu diklik dan tag h1-nya tetap terdetek.

Nah bagi yang tertarik untuk mencoba triknya, silahkan ikuti langkah-langkahnya di bawah ini. 

Sebenarnya ini hanya menambahkan gambar dengan membuat daerah gres yang saling bertindihan dengan header, namun sebab headernya disembunyikan sehingga yang tampak hanyalah gambarnya saja. Nah sekarang kita bikin dulu daerah gres untuk gambarnya dan disimpan di bawah header. Misalnya kita kasih nama header-logo. Kita bikin CSS sama HTML-nya menyerupai di bawah ini:

 #header-logo{z-index:100;float:left;position:absolute;margin:0} 

dan HTML-nya menyerupai 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 position:absolute dan visibility:hidden pada #header sehingga penampakannya sebagai pola menyerupai di bawah ini:

 #header{float:left;position:absolute;width:300px;text-align:left;color:#333;margin:0;visibility:hidden} 

Nah untuk menempatkan arahan HTML-nya silahkan cari arahan di bawah ini dan simpan arahan 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 penampakannya akan menyerupai 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. Jika gambarnya kurang kiri silahkan tambahkan margin-left:-10px (misalnya) pada arahan CSS #header-logo.

Nah bagi yang sudah memakai trik menanipulasi title blog dengan gambar biar terdetek h1 yang saya posting sebelumnya, kalau ingin menggunakan trik ini silahkan hapus gambar logonya pada arahan CSS #header-wrapper menyerupai pola di bawah ini:

Kode CSS #header-wrapper sebelumnya dengan menggunakan trik menanipulasi title blog dengan gambar biar terdetek h1:

 #header-wrapper{background:url(URL GAMBAR LOGO ANDA)no-repeat;width:970px;height:40px;margin:0 auto;overflow:hidden} 

Kode CSS #header-wrapper setelah menggunakan trik ini:

 #header-wrapper{background:none;width:970px;height:40px;margin:0 auto} 

Nah sebagai gambaran untuk membuat logo blog mampu diklik dan tetap terdetek h1 ini kira-kira menyerupai itu adanya. Karena setiap template kadang kodenya berbeda-beda silahkan sesuaikan saja kode-kodenya biar sesuai dengan blog Anda.

Semoga dapat dimengerti dan bermanfaat, selamat berkarya....