Membuat Logo Blog Bisa Diklik Dan H1 Tetap Terdetek

Sebelumnya saya sudah membahas tentang memanipulas title blog dengan gambar agar 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 bisa di klik untuk menuju homepage, sehingga pengunjung yang akan beralih ke halaman utama harus mengklik menu "home" pada menu yang ada.

Namun sebagaian orang ketika 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 agar logo blog bisa diklik untuk menuju ke halaman homepage.

Karena alasan di atas lah akhirnya saya kutak-katik lagi bagian headernya agar logo yang menggantikan title blog bisa diklik namun tag h1 untuk title blog tetap terdetek h1. Dan akhirnya sekarang logo blog Kompi Ajaib bisa 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 tempat baru yang saling bertindihan dengan header, namun karena headernya disembunyikan sehingga yang tampak hanyalah gambarnya saja. Nah sekarang kita bikin dulu tempat baru untuk gambarnya dan disimpan di bawah header. Misalnya kita kasih nama header-logo. Kita bikin CSS sama HTML-nya seperti di bawah ini:

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

dan HTML-nya 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 position:absolute dan visibility:hidden pada #header sehingga penampakannya sebagai contoh 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 penampakannya 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. Jika gambarnya kurang kiri silahkan tambahkan margin-left:-10px (misalnya) pada kode CSS #header-logo.

Nah bagi yang sudah memakai trik menanipulasi title blog dengan gambar agar terdetek h1 yang saya posting sebelumnya, jika ingin menggunakan trik ini silahkan hapus gambar logonya pada kode CSS #header-wrapper seperti contoh di bawah ini:

Kode CSS #header-wrapper sebelumnya dengan menggunakan trik menanipulasi title blog dengan gambar agar 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 bisa diklik dan tetap terdetek h1 ini kira-kira seperti itu adanya. Karena setiap template kadang kodenya berbeda-beda silahkan sesuaikan saja kode-kodenya agar sesuai dengan blog Anda.

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