Membuat Logo Blog Dapat Diklik Dan H1 Tetap Terdetek

Sebelumnya saya sudah membahas wacana memanipulas title blog dengan gambar semoga terdetek h1 beberapa waktu yang lalu. Dan memang benar adanya, blog kita mempunyai 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 menciptakan title blog yang diwakili dengan gambar logo tidak sanggup di klik untuk menuju homepage, sehingga pengunjung yang akan beralih ke halaman utama harus mengklik hidangan "home" pada hidangan yang ada.

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

Karena alasan di atas lah hasilnya saya kutak-katik lagi bab headernya semoga logo yang menggantikan title blog sanggup diklik namun tag h1 untuk title blog tetap terdetek h1. Dan hasilnya kini logo blog Kompi Ajaib sanggup 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 menciptakan daerah gres yang saling bertindihan dengan header, namun alasannya ialah headernya disembunyikan sehingga yang tampak hanyalah gambarnya saja. Nah kini kita bikin dulu daerah gres untuk gambarnya dan disimpan di bawah header. Misalnya kita kasih nama header-logo. Kita bikin CSS sama HTML-nya ibarat di bawah ini:

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

dan HTML-nya ibarat 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 teladan ibarat 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 ibarat 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 menggunakan trik menanipulasi title blog dengan gambar semoga terdetek h1 yang saya posting sebelumnya, jikalau ingin menggunakan trik ini silahkan hapus gambar logonya pada arahan CSS #header-wrapper ibarat teladan di bawah ini:

Kode CSS #header-wrapper sebelumnya dengan menggunakan trik menanipulasi title blog dengan gambar semoga 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 sehabis menggunakan trik ini:

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

Nah sebagai citra untuk menciptakan logo blog sanggup diklik dan tetap terdetek h1 ini kira-kira ibarat itu adanya. Karena setiap template kadang kodenya berbeda-beda silahkan sesuaikan saja kode-kodenya semoga sesuai dengan blog Anda.

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

Sumber https://www.kompiajaib.com/

Share this post