Home » » 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 & sharing Cara Menambahkan Gambar di Samping Judul Blog (Header)

Previous
« Prev Post

3 comments:

Comment Page:
  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

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox