Membuat Logo Blog Bisa Diklik Dan H1 Tetap Terdetek

Membuat Logo Blog Bisa Diklik Dan H1 Tetap Terdetek

Bola Hero Gawai

Membuat Logo Blog Bisa Diklik Dan H1 Tetap Terdetek

Logo Blog Bisa Diklik
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....

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

45 Comments Add Comment

ini dia, akhirnya di keluarin juga :D

Balas

iya silahkan mas...hhehehe....

Balas

sudah saya terapkan mas, mohon koreksinya siapa tau ada yg salah, hehe

Balas

wach makin keren ajha blognya nie om...

Balas

SIpp....mas sudah betul...agar ga penasaran coba cek di Chkme untuk tag h1-nya.

Balas

Thanks gann :D

Kunjung balik : http://bloggerjava.net

Balas

Ah biaa aja mas Imron, masil jauh dari sempurna hehehe...btw makasih atas apresiasinya...

Balas

wah bagus nih, izin coba ya mas kompi, namun harus tunggu beberapa hari lagi, karena dalam beberapa hari ini liat kode koding terus, rasa mual dan ingin muntah wkwkwkwkwkwkwk..... pusing buaget.. hehehehe

Balas

Hehehe...iya memang seperti itu kalau kelamaan lihat kodi...hehhehe

Balas

Keren nih , langsung comot aja :D

Balas

mata terasa berkunang2 mas kompi, namun setelah saya liat hasil perubahannya, terasa lega dan bisa senyum dikit heehehhe... oya mas kompi, spt dalam perbincangan mas rosianto, dan saya ada sedikit tanggapan, bagaimana menurut mas kompi? apakah pendapat saya benar?

Balas

Ya memang harus seperti itu mas...setidaknya kita berusaha untuk menghargai karya orang lain. Dan akan lebih berkualitas lagi jika itu hasil dari pikiran kita sendiri... memang butuh waktu untuk prosesnya tapi jika kita terus belajar dan pantang menyerah pasti suatu saat kita bisa...

Balas

Awas salah comot ya...tar bau xixixi...

Balas

wah, bnyk belajar ni dar imas Adhy sama Kompas Riau, terimakasih masukannya buat 2 blogger Ajaib ini, hhehehe

Balas

ijin praktek Om.....aku pakai di blog saya yang lain. mksh triknya Om

Balas

Silahkan mbak untuk pembelajaran...hehehe...

Balas

mator sembah nuwon mas....!

selama saya manipulasi img tag h1 saya ngak mikirin soal ini, padahal waktu itu saya juga tanyaknya di mas adhy di blognya maskolis.

Balas

Iya mas...saya juga baru nyadar kemarin hehehe....

Balas

Aduuuuuuuuuuuuuuh bingung dari tadi gak berhasil teruss....

Rasanya mau hidup, karna bingungnya.

Balas

Terus dicoba aja mas...hehehe pasti bisa...

Balas

Kalau infonya dari kang ismet ama mas Adhy..pasti top markotop langsung saya Praktekin...

Balas

Berhasil dan setelah saya cek blog saya masih tetep valid html5 ,valid css3 ,dan scor seo masih tetep 100% ,thanks Mas adhy thanks kang Ismet

Balas

Sip mas hehehehe...

Balas

Wah lumayan dan patut dicoba nih mas,,,

Balas

Iya mas silahkan dicoba saja...

Balas

dishare juga rahasianya... nice tuts sob :-bd

Balas

Maaf mau nanya blogku eror=14 warning=5 gimana agar valid html5

Tolong dicek dbunggul-site.blogspot.com

Balas

out topik mas, coba ke forum aja, semoga cepat mendapatkan jawaban dari mas kompi

Balas

Iya kang hehehe siapa tahu bisa bermanfaat untuk orang lain...

Balas

sip om sukses saya terapin ke blog saya, kalo cek di chkme h1 nya good berarti sukses kan om?
terimakasih buat tutornya dah, saya selalu puas nih setiap baca tutor dari om kompi haha :D

Balas

Siip mas...berarti sudah sukses hehehe...

Balas

kalo pake cara ini ukuran header ga bisa diatur ya om?
misalnya saya mau atur tinggi header gitu, udah tak coba ga berubah.

Balas

Tentu saja bisa atur tingginya pd header-wrapper-nya (pembungkus header), jika tidak coba buat dulu #header-wrapper dengan height (tinggi) sesuai keinginan kita. Sebab jika mengaturnya pada #header akan percuma karena headernya disembunyikan.

Balas

oke om sudah bisa :D
jadi kesimpulannya kalo atur ukuran header di #header yg kita tambahin kode position:absolute dan visibility:hidden jadi ga berfungsi ya om?
okeoke sip deh :D

Balas

wah.... !! wah wah .. ane baru selesei Benahin img di header dengan "memanipulasi title blog dengan gambar agar terdetek h1"

, Ga taunya ada masalah yang timbul , edeh.. !! :D

Balas

Hehehe...seperti itulah asyiknya ngebog mas...selalu ada tantangan dengan kodi...biar tambah kenal gitu...

Balas

Bang kalu mengatur logo di kompi wide gimana caranya

Balas

Mantap.. ini yang saya cari dari dulu.. thanks broo..
kunjungannya di http://hertzer-zone.blogspot.com/

Balas

Sama-sama mas :D

Balas

hebat gan ADHY anda menjawab comment, tumben saya lihat blog admin menjawab sampai sebanyak ini, hehehehe......
tak coba dulu ya master.....

Balas

Iya mas, itu karena kewajiban sebagai admin blog :D sekiranya bisa pasti saya jawab :D

Balas

Wkwkwkwk ane biasanya berjam jam coding tahan ajah.... :D Tapi kalau hasilnya tidak memuaskan baru bosen ane... Wkwkwkwk tapi terus berusaha.

Balas

Sampean lihat ajah errornya itu apa, terus dibenerin deh... :D Hehehehe

Balas

Thnks ya sudah work di tkp saya,, kalau nambahin tulisan admin di komentar gmna caranya mas??

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×