Cara Membuat Header Blog dengan Gambar dan Terdeteksi H1

Cara Membuat Header Blog dengan Gambar dan Terdeteksi H1 � Maksud saya bukan gambar yang akan terdetek H1 tetapi sebenarnya text judul blog itulah yang akan terdetek H1. Mengoptimalkan H1 harus benar-benar diperhatikan, untuk halaman depan (homepage) wajib header ber H1, sementara pada bagian postingan penuh dan halaman static menggunakan H2.

Seperti itulah maksud dari tutorial saya kali ini. Oh iya, gambar yang saya maksud adalah yang menggantikan penampilan judul blog/nama blog, yang awalnya itu adalah berupa text, namun akan diganti menjadi gambar agar terlihat sedikit bergaya. Bagi yang tertarik menerapkan cara ini, ikuti langkahnya sebagai berikut.

Cara membuat header blog dengan gambar dan terdeteksi H1

1. Kopi css dibawah ini dan letakkan di atas </style>

#header-left { padding:0; margin:0; width:32%; float:left;position:relative;display:block}
#header-inner {visibility:hidden}
.logo {position:absolute;left:0;top:25px;z-index:999}

2. Temukan kode <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> lalu ciutkan (seperti gambar berikut), kemudian hapus seluruh kode tersebut sampai ke </ b:section> dang anti dengan kode di bawah ini.

<div id='header-left'>
<div class='logo'>
<a href='http://www.bungfrangki.com' title='BUNG FRANGKI BLOG'><img alt='BUNG FRANGKI BLOG' height='66' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY2JyR03CukdRA3cP6r8f0MOcyOAw_hptDbkzZGkqXh8jUaLZE4hCCjhyPXfiw6L-JxnxromH4jRwIp6yXt3G7MA8muIzSIj6UNniIkJsfpRn99JfEBXEaWzgiDG81uybw4enECH0LCXE/s1600/bungfrangki.png' width='280'/></a>
</div>
                 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
                   <b:widget id='Header1' locked='true' title='BUNG FRANGKI BLOG (Header)' type='Header'>

                     <b:includable id='main'>

    <div id='header-inner'>
      <div class='titlewrapper'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
        <h1 class='title'>
<b:include name='title'/>
        </h1>
<b:else/>
        <p class='title'>
          <b:include name='title'/>
        </p>
</b:if></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'><data:title/></a>
  </b:if>
</b:includable>
                   </b:widget>
                 </b:section>
</div>

Cara diatas adalah contoh yang diterapkan di Bungfrangki.com, sesuaikan dengan kode template anda.
Ganti url gambar https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY2JyR03CukdRA3cP6r8f0MOcyOAw_hptDbkzZGkqXh8jUaLZE4hCCjhyPXfiw6L-JxnxromH4jRwIp6yXt3G7MA8muIzSIj6UNniIkJsfpRn99JfEBXEaWzgiDG81uybw4enECH0LCXE/s1600/bungfrangki.png dengan url gambar blog anda.

3. Setelah semuanya rampung diperbaharui, simpan template.

Semoga cara ini berhasil diterapkan pada blog anda, selamat mencoba.

Cara Membuat Header Blog dengan Gambar dan Terdeteksi H1 2016-07-16T22:15:00-07:00 Rating: 4.5 Diposkan Oleh: Alwinto