Cara Menambahkan Gambar di Samping Judul Blog (Header)

Cara Menambahkan Gambar di Samping Judul Blog (Header)

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:

Gambar di Samping Judul Blog

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://lh3.googleusercontent.com/-30q1p06sXC0/VisgyXhD6oI/AAAAAAAAL98/lZGHiU2kv84/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://lh3.googleusercontent.com/-30q1p06sXC0/VisgyXhD6oI/AAAAAAAAL98/lZGHiU2kv84/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://lh3.googleusercontent.com/-30q1p06sXC0/VisgyXhD6oI/AAAAAAAAL98/lZGHiU2kv84/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).*

Thanks for reading Cara Menambahkan Gambar di Samping Judul Blog (Header) | Labels: Desain Blog edit this post

8 komentar on Cara Menambahkan Gambar di Samping Judul Blog (Header)

  1. Permisi gan, mau tanya gimana caranya ketika nulis kode scrip dipostingan ada kotaknya kaya di postingan ini, semua kode ada kotaknya... semoga pertanyaan saya bisa difahami, terima kasih

    ReplyDelete
    Replies
    1. Silakan... kotak kode skrip ada di sini:
      http://www.contohblog.com/2014/01/membuat-kotak-kode-script.html

      Delete
  2. seep mas bro tutorialnya, saya menerapkannya di blog saya dan bisa.. alhamdulillah.. terimakasih

    ReplyDelete
  3. Gan,Kalo pasang banner seperti di blog ini misalnya Trading Saham Online gimana ya caranya?Terima kasih sebelumnya

    ReplyDelete
    Replies
    1. Begini caranya: http://www.contohblog.com/2015/11/cara-pasang-banner-iklan-samping-judul-blog-header-kanan.html

      Delete
  4. gan kalo pasang gambar , waktu share url ke medsos giman ya. (url halamn utama) help?

    ReplyDelete
  5. agar tidak berantakan ketika diakses lewat hp gimana pak? soalnya klo dilihat dari hp,gambarnya tidak bersebelahan lgi dengan title. mohon solusi secepatnya ya pak..

    ReplyDelete
    Replies
    1. ubah kode LEFT menjadi CENTER atau NONE

      Delete

Contact Form

Name

Email *

Message *