Rata-rata template sebuah blog tentunya sudah memasang tag h1 ini. Bagi
yang memakai title blog dengan huruf, ini tidak akan jadi masalah karena
otomatis tag h1 akan terdetek mesin crawl search engine.
Namun ini akan menjadi masalah ketika kita merubah title blog dengan
image atau gambar. Demi memperindah tampilan blog, maka banyak orang
merubah title blog yang tadinya hanya huruf sekarang diganti dengan
gambar atau image sesuai dengan selera kita. Biasanya berupa logo atau
apapun yang ingin kita jadikan sebagai ciri atau identitas blog kita.
Ini biasanya dilakukan dengan cara mengupload gambar pada tata letak
atau layout, kemudian pada bagian gadget Header kita bisa mengupload
gambar atau logo blog kita dengan memilih option "Instead of title and
description" agar titile dan deskripsi blog tidak menghalangi gambar
atau logo blog. Dengan melakukan hal tersebut tadi, maka tag h1 blog
Anda pasti tidak akan terdetek.
Ada cara termudah untuk mengatasi hal tersebut di atas, yaitu
menambahkan langsung tag h1 pada image atau logo blog pada edit HTML.
Silahkan cari kode di bawah berikut ini:
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' style='display: block'/>
</a>
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' style='display: block'/>
</a>
Kemudian tambahkan <h1> dan </h1> pada kode di atas, sehingga penampakannya akan seperti di bawah ini:
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<h1><img expr:alt='data:title' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' style='display: block'/></h1>
</a>
Cara diatas adalah bila template milik Anda belum menggunakan kode manipulasi title blog dengan gambar.
Dan bagi anda yang templatenya sudah menggunakan kode manipulasi title blog dengan gambar,berikut ini caranya:
1. Buatlah gambar yang sesuai dengan kehendak Anda untuk menggantikan logo pada header untuk background header-wrapper. Gambar tersebut harus sesuai dengan luas header-wrapper agar nantinya sesuai dengan template Anda. Kemudian tambahkan gambar dan kode "overflow:hidden" tersebut pada CSS header-wrapper sebagai backround pada edit HTML, dan penampakannya akan seperti di bawah ini:
#header-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimiBOgboYZ5S-Qn6qT-rfUWDpyIoDTM942Hd5uLur6AaJ3ITc_HFqqDA4d6oSax1vuWjWBsNfMvfSDBzacOzhe6-Iaqjy5JH-wQZ3ir4OZdHlluv6tvsN_ambaeQruAMG0ibdjI6EaUUM/s1600/header+kompidotcom.png)no-repeat;width:980px;margin:0 auto;overflow:hidden}
Kira-kira kode CSS header-wrapper-nya akan seperti itu. Kebetulan luas header-wrapper blog Kompi Ajaib adalah 980px X 90px.
2. Hilangkan atau remove image pada header blog. Masuk ke layout atau
tata letak, klik edit pada gadget header dan remove image. Hal ini
dilakukan agar logo blog tidak menjadi 2 dan saling bertindih dan
tentunya title blog akan menjadi teks sehingga akan terdetak h1 pada
homepage dan tidak akan terjadi multi tag h1 pada postpage.
3. Agar title blog yang sekarang menjadi teks tidak muncul dan
menghalangi gambar dari header-wrapper (point 1), maka headernya harus
disembunyikan. Sekarang masuk lagi pada Edit HTML, tambahkan kode
"visibility:hidden" tanpa tanda kutip pada kode CSS header. Sehingga
penampakannya akan seperti di bawah ini:
#header{float:left;width:500px;text-align:left;color:#333;margin:0;visibility:hidden}
#header{float:left;width:500px;text-align:left;color:#333;margin:0;visibility:hidden}
Nah sampai di sini saja yang harus Anda lakukan untuk memanipulasi title blog dengan gambar sehingga blog Anda tetap mempunyai gambar sebagai logo blog namun tetap terdetek tag h1 dan tidak terjadi multi tag h1 pada postingan.
Sumber Share this article :
Terima kasih telah membaca artikel tentang Cara Memanipulasi Title Blog Dengan Gambar Agar Terdetek H1 dan Anda juga bisa menemukan artikel Cara Memanipulasi Title Blog Dengan Gambar Agar Terdetek H1 ini dengan url https://jasaseodarmanto.blogspot.com/2013/07/cara-memanipulasi-title-blog-dengan.html.Silahkan mengcopy artikel Cara Memanipulasi Title Blog Dengan Gambar Agar Terdetek H1 ini jika memang bermanfaat bagi Anda, namun mohon kiranya untuk mencantumkan link kami sebagai sumbernya.
