Menyingkat Html Header Blogger Dan Mengganti Title Blog Dengan Gambar

Seperti kita ketahui bahwa aba-aba HTML header blogger mempunyai begitu banyak aba-aba untuk memunculkan title blog baik dengan teks maupun gambar. Dengan kode-kode tersebut kita dapat mengupload gambar atau logo blog dari tata letak. Namun bila kita memakai gambar sebagai title blog dengan ini, akan muncul problem gres ialah tidak terdetek tag h1 pada blog yang tentunya ini akan berdampak kurang baik terhadap seo blog itu sendiri.

Banyak yang menyarankan untuk mengatasi tidak terdeteknya h1 jawaban title blog yang memakai gambar yang diupload melalui tata letak untuk menambahkan tag h1 pribadi pada gambarnya melalui edit HTML. Namun bila blognya memakai manipulasi title tag menyerupai template-template Maskolis, maka akan muncul problem gres lagi ialah terdeteknya double h1 di postingan. Dan ini juga akan berakibat kurang baik terhadap seo blog.

Pada waktu yang kemudian aku sudah pernah membahas problem ini, silahkan Anda simak pada postingan-postingan berikut:

• Memanipulasi Title Blog Dengan Gambar Agar Terdetek H1
• Membuat Logo Blog Bisa Diklik Dan H1 Tetap Terdetek

Nah kali ini aku akan share sebuah trik untuk menyingkat HTML Header Blogger menjadi lebih simple dan juga dapat memakai gambar atau logo namun tetap terdetek h1 dan tidak akan menjadi double h1 di postingan. Sehingga mengganti title blog dengan gambar menjadi lebih gampang dan simple.

Sebagaimana kita ketahui bahwa header Blogger mempunyai begitu banyak aba-aba HTML menyerupai di bawah ini.

                  <b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
 <b:widget id='Header1' locked='true' title='Johny Ajaib (Header)' type='Header'>
 <b:includable id='title'>
   <b:if cond='data:blog.url == data:blog.homepageUrl'>
     <data:title/>
   <b:else/>
     <a expr:href='data:blog.homepageUrl'><data:title/></a>
   </b:if>
 </b:includable>
 <b:includable id='description'>
   <div class='descriptionwrapper'>
     <p class='description'><span><data:description/></span></p>
   </div>
 </b:includable>
 <b:includable id='main'>
   <b:if cond='data:useImage'>
     <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
       <!--
       Show image as background to text. You can't really calculate the width
       reliably in JS because margins are not taken into account by any of
       clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
       width if the user is using shrink to fit.
       This results in a margin-width's worth of pixels being cropped. If the
       user is not using shrink to fit then we expand the header.
       -->
       <b:if cond='data:mobile'>
           <div id='header-inner'>
             <div class='titlewrapper' style='background: transparent'>
           <b:if cond='data:blog.pageType != &quot;item&quot;'>
           <h1 class='title' style='background: transparent; border-width: 0px'>
             <b:include name='title'/>
           </h1>
 <b:else/>
           <p class='title' style='background: transparent; border-width: 0px'>
             <b:include name='title'/>
           </p>
 </b:if>
             </div>
             <b:include name='description'/>
           </div>
         <b:else/>
           <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
             <div class='titlewrapper' style='background: transparent'>
           <b:if cond='data:blog.pageType != &quot;item&quot;'>
           <h1 class='title' style='background: transparent; border-width: 0px'>
             <b:include name='title'/>
           </h1>
 <b:else/>
           <p class='title' style='background: transparent; border-width: 0px'>
             <b:include name='title'/>
           </p>
 </b:if>
             </div>
             <b:include name='description'/>
           </div>
         </b:if>
     <b:else/>
       <!--Show the image only-->
       <div id='header-inner'>
         <a expr:href='data:blog.homepageUrl' style='display: block'>
           <img expr:alt='data:title' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' style='display: block'/>
         </a>
         <!--Show the description-->
         <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
           <b:include name='description'/>
         </b:if>
       </div>
     </b:if>
   <b:else/>
     <!--No header image -->
     <div id='header-inner'>
       <div class='titlewrapper'>
         <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>
       <b:include name='description'/>
     </div>
   </b:if>
 </b:includable>
 </b:widget>
 </b:section>
 

Lumayan banyak kan aba-aba HTML di atas? 

Nah untuk menyingkatnya silahkan ganti aba-aba di atas seluruhnya dengan aba-aba 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>
 

Menjadi lebih singkat bukan? Tentunya ini akan mengurangi size HTML blog kita. Di sini juga aku menambahkan struktur schema.org pada headernya.

Nah bila Anda ingin memakai gambar atau logo sebagai title blog, silahkan ganti aba-aba <data:title/> ini (ada 2 buah) yang ada di bawah aba-aba <b:includable id='title'> ganti dua-duanya dengan aba-aba gambar logo blog Anda menjadi menyerupai 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>
 

Untuk height dan width silahkan sesuaikan dengan height dan weight gambar logo blog Anda dan untuk title-nya silahkan ganti dengan nama blog Anda.

Selesai....

Bagaimana? Praktis bukan? Selamat mencoba dan semoga bermanfaat.

UPDATE

Ternyata untuk mengganti title blog dengan gambar menyerupai di atas, menjadi error juga pada tag H1 homepage blog alasannya berupa gambar. Untuk mengatasinya semoga title blog dapat diganti dengan gambar logo blog silahkan simak pada postingan Perbaikan Logo Blog Pada Header Blog

Sumber https://www.kompiajaib.com/

Share this post