Menyingkat HTML Header Blogger Dan Mengganti Title Blog Dengan Gambar

Menyingkat HTML Header Blogger Dan Mengganti Title Blog Dengan Gambar

Bola Hero Gawai

Menyingkat HTML Header Blogger Dan Mengganti Title Blog Dengan Gambar

Menyingkat HTML Header Blogger
Seperti kita ketahui bahwa kode HTML header blogger memiliki begitu banyak kode untuk memunculkan title blog baik dengan teks maupun gambar. Dengan kode-kode tersebut kita bisa mengupload gambar atau logo blog dari tata letak. Namun jika kita menggunakan gambar sebagai title blog dengan ini, akan muncul masalah baru yaitu 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 akibat title blog yang menggunakan gambar yang diupload melalui tata letak untuk menambahkan tag h1 langsung pada gambarnya melalui edit HTML. Namun jika blognya menggunakan manipulasi title tag seperti template-template Maskolis, maka akan muncul masalah baru lagi yaitu terdeteknya double h1 di postingan. Dan ini juga akan berakibat kurang baik terhadap seo blog.

Pada waktu yang lalu saya sudah pernah membahas masalah ini, silahkan Anda simak pada postingan-postingan berikut:
Nah kali ini saya akan share sebuah trik untuk menyingkat HTML Header Blogger menjadi lebih simple dan juga bisa menggunakan gambar atau logo namun tetap terdetek h1 dan tidak akan menjadi double h1 di postingan. Sehingga mengganti title blog dengan gambar menjadi lebih mudah dan simple.

Sebagaimana kita ketahui bahwa header Blogger memiliki begitu banyak kode HTML seperti 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 kode HTML di atas? 

Nah untuk menyingkatnya silahkan ganti kode di atas seluruhnya dengan kode 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 != &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 saya menambahkan struktur schema.org pada headernya.

Nah jika Anda ingin menggunakan gambar atau logo sebagai title blog, silahkan ganti kode <data:title/> ini (ada 2 buah) yang ada di bawah kode <b:includable id='title'> ganti dua-duanya dengan kode gambar logo blog Anda menjadi seperti 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? Mudah bukan? Selamat mencoba dan semoga bermanfaat.

UPDATE
Ternyata untuk mengganti title blog dengan gambar seperti di atas, menjadi error juga pada tag H1 homepage blog karena berupa gambar. Untuk mengatasinya agar title blog bisa diganti dengan gambar logo blog silahkan simak pada postingan Perbaikan Logo Blog Pada Header Blog

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

46 Comments Add Comment

Kalau menggunakan cara di atas apakah merubah validasi html5 nya ...?

Balas

terima kasih infonya kang...
di amankan dulu hehehehehe :D :D

Balas

Selamat Malam Kang Adhy, wah malam apa pagi nih?
Artikel yang baru saya lihat nih Kang, simak lebih lanjut
Untuk lebih mengetahui tentangHeader dan tag 1
Terima kasih Kang Adhy bermanfaat tutorialnya :-bd

Balas
This comment has been removed by the author.

Untuk lebih memahami artikel header dengan gambar
Saya coba trik ini dan ijin belajar untuk pemahamanya Kang :)

Balas

sip kang ... ini valid HTML5 nggak yaaa

Balas

terima kasih kang adhy, sudah sy terapkan di gubuk saya yg lainnya dan bisa. makasi juga buat smua petunjuk ttg meta descriptionnya. perlahan tapi pasti error teratasi. hatur nuhun kang

Balas

Kalo disingkat, blognya masih valid HTML5 ga mas...???

Balas

Silahkan kang Saud :)

Balas

Tentu tidak mas, Kompi Ajaib menggunakan itu juga :)

Balas

Hehehehe iya kang :) Silahkan disimak dulu :)

Balas

Tentu saja valid HTML5 mas :D

Balas

Nah betul mas, alon-alon asal kelakon :)

Balas

Penyingkatan ini tidak mengganggu validasi HTML5 mas :)

Balas

saya mencoba ikut memahami nya kang adhy terima kasih sudah berbagi kang ..

Balas

Ternyata bisa di singkat juga ya kang,,,,
Ajaib nih tricknya bisa mengurangi size HTML blog juga :-d

Balas

pernah saya alami juga kang, pernah tambah gambar tapi malah gk ke detek H1 nya, heuheu.. rupanya ada triknya juga ya hehe

Balas

Bermanfaat sekali Kang Adhy tutorialnya, Ijin bookmark ya Kang. Makjeb anget nih.

Salam

Balas

wah postingan baru nih, ane ketinggalan :D

Balas

Mas adi maen singkat-singkatan, kayak sms aja :D

Balas

Betul kang, bagi yang tidak memakai pengaturan header di tata letak mending disingkat aja :)

Balas

Betul kang ada trik untuk mengatasi itu :)

Balas

Hehehehe silhkan mas Indra :)

Balas

Silahkan dicoba mas :)

Balas

Waduh bingung nih :o

Balas

terimakasih kang :) walaupun agak bingung juga hehe =D

Balas

Sip ini sebuah solusi mantapzzz ...
O .. y Maaf kang kalau kedepan'y akn banyak pertanyaan dari saya .. siap-siap saja hehe

Balas

Header template saya begini bagaimana kang? template ini karyanya dte yang sudah saya oprek

<header class='site-header' id='site-header' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
<b:section class='header inner' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='NGABIDIN WEB (Header)' type='Header'>
<b:includable id='main'>

<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</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'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</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:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' 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'>
<h1 class='title'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:include name='title'/>
<b:else/>
<data:blog.pageName/>
</b:if>
</h1>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='site-header-description'><data:description/></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'><data:title/></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
</header>

Balas

Jika bingung boleh ditanyain :)

Balas

Hehehe sama-sama :)

Balas

Waduuhh pertanyaan apa tuh kang :p

Balas

Kode di atas masih menggunakan kode untuk mengupload gambar dari tata letak

Balas

Mas tapi setelah saya cek perbandingan H1 serta H2 pada H1 di homepage terjadi eror dan keterangan yang saya dapatkan H1 yang disertai gambar bukan heading H1 mutlak, jadi saya mengeditnya dengan kode dari Mas Sugeng. (Saya check di SeoCheckup)

Balas

Hmmm... begitu ya?
Sepertinya SeoCheckup tidak bisa membaca gambar jadi h1 terdetek namun dianggap tidak memiliki konten.
Berarti jika ingin menggunakan gambar tetap harus memanipulasinya agar yang dideteknya text title blog namun yang tampilnya gambar/logo blog.
Makasih koreksinya nanti saya betulkan.

Balas

Malam Kang Adhy. Sy mw tanya cara diatas apakah bisa digunakan utk template bawaan blog simple? Bedanya dengan manipulasi h1 gambar header?
Terimahkasih atas pencerahannya

Balas

Bisa mas namun syaratnya harus memahami CSS templatenya.

Balas

Kang AdhY.... utk "URL Logo BloG" bisa menggunakan url nya PICASA web ?

Balas

Dicoba aja mas :)

Balas

kalau kompi males mah udah ngga perlu ini lagi ya kang...udah bawaan lahirnya udah begituh kan?

Balas

Makasih banyak Kang Adhy atas bantuannya, akhirnya logoku bisa di posting di web. Sukses selalu buat Kang Adhy.

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!

×
×
×