Perbaikan Logo Blog Pada Header Blog

Beberapa waktu yang kemudian aku share sebuah trik untuk menyingkat arahan HTML header blog. Dan di situ juga aku share cara mengganti title blog dengan gambar atau logo blog.

Sebenarnya pada beberapa website yang menyediakan tool untuk mengecek seo blog ibarat Chkme, mengganti title blog dengan gambar ibarat itu tidak duduk masalah alasannya ialah 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 alasannya ialah tool-nya membaca tag H1 ini seolah tanpa konten/isi. Ternyata memang untuk tag H1 - H6 ini bergotong-royong harus diisi dengan teks bukan dengan gambar.

Untuk itu biar title blog ini dapat kondusif diganti dengan gambar pada script penyingkat arahan HTML header blog yang aku share beberapa waktu yang lalu, sekarang aku share trik manipulasi pemasangan gambar atau logo blog di header blog semoga tidak mengganggu tag H1 homepage blog.

Agar Anda tidak galau dengan bahasan postingan ini, silahkan simak dulu postingan sebelumnya pada link di bawah ini.

• Baca juga: Menyingkat HTML Header Blogger Dan Mengganti Title Blog Dengan Gambar

Pada postingan sebelumnya, untuk mengganti title blog dengan gambar kita mengganti arahan 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 arahan 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 alasannya ialah tag H1 berisi gambar, maka silahkan gunakan trik di bawah ini.

Silahkan tambahkan arahan di bawah ini sempurna di bawah arahan epilog header ibarat 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 ibarat di bawah ini:

 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
         <b:widget id='Header1' locked='true' title=' (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 != &quot;item&quot;'>
         <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 arahan CSS ibarat berikut ini untuk mengatur letak tampilan gambar logonya.

 .logo-blog{position:absolute;left:0;bottom:5px}

Untuk bottom:5px silahkan sesuaikan semoga logo berada di tengah-tengah tinggi kolom header semoga yummy dilihat dan rapih. Bisa juga diganti dengan top.

Kemudian tambahkan arahan position:relative pada arahan CSS #header-wrapper.

Agar teks title blog tidak ngintip keluar gambar apalagi jikalau Anda memakai logo blog dengan background transparant, Silahkan tambahkan juga arahan opacity:0 pada arahan CSS #header h1,#header p.

Selesai... Sekarang tag H1 blog Anda kondusif 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 dapat gunakan trik ini untuk logo blognya atau tunggu update postingannya besok.

Terima kasih untuk koreksi mas Giovani Aluha

Sumber https://www.kompiajaib.com/

Share this post