Ditulis oleh: Ditulis pada: 3/15/2014
Beberapa waktu yang lalu saya share sebuah trik untuk menyingkat kode HTML header blog. Dan di situ juga saya share cara mengganti title blog dengan gambar atau logo blog.
Sebenarnya pada beberapa website yang menyediakan tool untuk mengecek seo blog seperti Chkme, mengganti title blog dengan gambar seperti itu tidak masalah karena tag H1 homepage tetap terdetek dengan isi konten tag H1 berupa gambar/logo blog.
Namun ternyata isi konten tag H1 yang berupa gambar ini bermasalah karena tool-nya membaca tag H1 ini seolah tanpa konten/isi. Ternyata memang untuk tag H1 - H6 ini sebenarnya harus diisi dengan teks bukan dengan gambar.
Untuk itu biar title blog ini bisa aman diganti dengan gambar pada script penyingkat kode HTML header blog yang saya share beberapa waktu yang lalu, kini saya share trik manipulasi pemasangan gambar atau logo blog di header blog agar tidak mengganggu tag H1 homepage blog.
Agar Anda tidak bingung dengan bahasan postingan ini, silahkan simak dulu postingan sebelumnya pada link di bawah ini.
Pada postingan sebelumnya, untuk mengganti title blog dengan gambar kita mengganti kode berikut:
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'><span itemprop='name'><data:title/></span></a>
</b:if>
</b:includable>
Dan diganti dengan kode di bawah ini:
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<img alt='title-blog' height='60' src='URL LOGO BLOG' title='Kompi Ajaib' width='260'/>
<b:else/>
<a expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'><span itemprop='name'><img alt='title-blog' expr:title='data:title' height='60' src='URL LOGO BLOG' title='Kompi Ajaib' width='260'/></span></a>
</b:if>
</b:includable>
Karena cara di atas ternyata menyebabkan error pada beberapa tool seo checker karena tag H1 berisi gambar, maka silahkan gunakan trik di bawah ini.
Silahkan tambahkan kode di bawah ini tepat di bawah kode penutup header seperti ini
</b:section>
<div class='logo-blog'>
<a href='/' title='Homepage'><img alt='logo blog' height='90' src='URL LOGO BLOG' title='Homepage' width='212'/></a>
</div>
Sehingga penampakan secara keseluruhan akan tampak seperti di bawah ini:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='KOMPI AJAIB (Header)' type='Header'>
<b:includable id='main'>
<div id='header-inner'>
<div class='titlewrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title'>
<b:include name='title'/>
</p>
</b:if>
</div>
</div>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'><span itemprop='name'><data:title/></span></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
<div class='logo-blog'>
<a href='/' title='Homepage'><img alt='logo blog' height='90' src='URL LOGO BLOG' title='Homepage' width='212'/></a>
</div>
Silahkan sesuaikan tinggi dan lebarnya sesuai dengan tinggi dan lebar gambar.
Setelah itu tambahkan kode CSS seperti berikut ini untuk mengatur letak tampilan gambar logonya.
.logo-blog{position:absolute;left:0;bottom:5px}
Untuk bottom:5px silahkan sesuaikan agar logo berada di tengah-tengah tinggi kolom header agar enak dilihat dan rapih. Bisa juga diganti dengan top.
Kemudian tambahkan kode
position:relative pada kode CSS #header-wrapper.
Agar teks title blog tidak ngintip keluar gambar apalagi jika Anda menggunakan logo blog dengan background transparant, Silahkan tambahkan juga kode
opacity:0 pada kode CSS #header h1,#header p.
Selesai... Sekarang tag H1 blog Anda aman dan title blog Anda berganti dengan logo blog buatan Anda. Untuk demonya silahkan lihat dan cek untuk tag H1 homepage template Kompi Males di http://seositecheckup.com/
Dan untuk pengguna template Kompi Males, Anda bisa gunakan trik ini untuk logo blognya atau tunggu update postingannya besok.
Terima kasih untuk koreksi mas Giovani Aluha