Cara Menambahkan Gambar di Samping Judul Blog (Header)

Baca Juga

Cara Menambahkan atau Memasang Gambar/Logo di Samping Judul Blog (Header)

JIKA judul, nama, atau header blog (blog title) Anda memilih menggunakan huruf, Anda bisa memperindahnya dengan menambahkan gambar, logo, atau icon di samping judul blog tersebut. Demonya bisa dilihat di Fast & Furious Blogger Template.

Ini penampakannya:

LANGKAH PERTAMA
1. Siapkan dulu icon gambarnya. Ukurannya proporsional dengan tinggi judul header, misalnya 60x60 pixel.
2. Simpan di Picasa Web Album Anda
3. Ambil URL Link Gambarnya (Image Link URL)

LANGKAH KEDUA
1. Template > Edit HTML
2. Cari kode ini:

<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h1><data:title/></h1>
<b:else/>
<h1><a expr:href='data:blog.homepageUrl'><data:title/></a></h1>
</b:if>
</b:includable>

Tambahkan kode

<span style='float:left;'><img src='LINK URL GAMBAR'/></span>

Setelah kode

<h1><data:title/></h1>

Jadinya sepert ini:

<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h1><data:title/><span style='float:left;'><img src='LINK URL GAMBAR'/></span></h1>
<b:else/>
<h1><a expr:href='data:blog.homepageUrl'><data:title/></a></h1>
</b:if>
</b:includable>

JIKA template blog Anda menggunakan header blog dinamis, maka tambahkan pula di samping kode lainnya.

Misalnya seperti ini:

 <b:includable id='title'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <h1 class='title'><span style='float:left;margin-right:5px'><img alt='fast furious template' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyjQ1ksBow4kfkzqB0e8QiTMb2ISCtPzvdT04xNZC9V3KzJpO1IrnnZVadQP0-zivfMdQNoifjSFuFasXy5sVDyHZS3yibG3oJI-7RkkQ2iWX1_QJMVMqRmd6ul6AAt1Fh9WYRml36KjdZ/s176-Ic42/fast-furious.png'/></span>
        <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
          <span itemprop='name'><data:title/></span>
        </a>
      </h1>
      <b:else/>
      <h2 class='title'><span style='float:left;margin-right:5px'><img alt='fast furious template' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyjQ1ksBow4kfkzqB0e8QiTMb2ISCtPzvdT04xNZC9V3KzJpO1IrnnZVadQP0-zivfMdQNoifjSFuFasXy5sVDyHZS3yibG3oJI-7RkkQ2iWX1_QJMVMqRmd6ul6AAt1Fh9WYRml36KjdZ/s176-Ic42/fast-furious.png'/></span>
        <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
          <span itemprop='name'><data:title/></span>
        </a>
      </h2>
    </b:if>
    <b:else/>
    <h2 class='title'><span style='float:left;margin-right:5px'><img alt='fast furious template' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyjQ1ksBow4kfkzqB0e8QiTMb2ISCtPzvdT04xNZC9V3KzJpO1IrnnZVadQP0-zivfMdQNoifjSFuFasXy5sVDyHZS3yibG3oJI-7RkkQ2iWX1_QJMVMqRmd6ul6AAt1Fh9WYRml36KjdZ/s176-Ic42/fast-furious.png'/></span>
      <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
        <span itemprop='name'><data:title/></span>
      </a>
    </h2>
      </b:if>
</b:includable>

Cara Menambahkan Gambar di Samping Judul Blog (Header). Good luck and happy Blogging! (http://www.contohblog.com).*