Pada postingan kali ini, saya akan membahas tentang bagaimana cara memasang atau menambahkan gambar di depan judul postingan blog dengan gambar sendiri atau gambar-gambar yang lain. Baiklah sobat, tanpa berbicara panjang lebar lagi, langsung aja yuk liat contohnya berikut ini :
SEBELUM
SESUDAH
Nah, cara pemasangan gambar di depan postingan tersebut adalah dengan mengotak atik dan mengganti kode template yang sudah ada sebelumnya dengan kode yang sudah saya siapkan di bawah ini beserta penjelasan lengkapnya. Namun, sebelum kita lanjut, perlu saya ingatkan kepada sobat, bahwa kode template berbeda-beda khususnya pada kode tag judul postingan, dimana beberapa template ada yang menggunakan tag <h2 class='post-title entry-title'> dan ada pula yang menggunakan tag <h3 class='post-title entry-title'> sebagai title postingan.
Untuk itu, pada kesempatan kali ini saya akan menjelaskan penambahan kode dari kedua tag title di atas sehingga sobat bisa menerapkannya pada blog sobat. Berikut caranya :
- Login ke Blogger » Template » Edit HTML » Proceed dan jangan lupa centang "Expand Template Widget"
1. Menerapkan pada tag title <h2 class='post-title entry-title'>
- Cari kode seperti di bawah ini :
<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
- Jika sudah ketemu, tambahkan kode di bawah ini tepat di atas tag <h2 class='post-title entry-title'> :
<table><tr>
<td class='ssybyposttitle'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrlcL5bSHI9FMSOoFP3qfGQRYgYE3d8pMqxn7VebMUh8LqKMUhTa0dosiZ5v3eBDkWsNXfd2VN2qUxwW8Z-37j-NJt8DV0mYCWFdEm2TaQMf_y9PVT-Ej4Z44OGEutKo85v5x_J9Z_eg8L/s1600/headers.png'/>
</td>
<td>
- Keterangan :
URL yang saya beri tanda dengan warna Biru di atas adalah gambar yang akan ditempatkan di depan judul postingan blog. Silahkan sobat ganti dengan URL foto yang sudah sobat upload.
- Selanjutnya, masukkan kode di bawah ini tepat di bawah tag penutup </h2>
</td></tr></table>
<style>
h2.post-title {
margin: 0px !important;
}
</style>
- Jika semuanya sudah digabungkan, maka hasilnya akan jadi seperti ini :
<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<table><tr>
<td class='ssybyposttitle'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrlcL5bSHI9FMSOoFP3qfGQRYgYE3d8pMqxn7VebMUh8LqKMUhTa0dosiZ5v3eBDkWsNXfd2VN2qUxwW8Z-37j-NJt8DV0mYCWFdEm2TaQMf_y9PVT-Ej4Z44OGEutKo85v5x_J9Z_eg8L/s1600/headers.png'/>
</td>
<td>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</td></tr></table>
<style>
h2.post-title {
margin: 0px !important;
}
</style>
</b:if>
- Simpan template dan lihat hasilnya.
2. Menerapkan pada tag title <h3 class='post-title entry-title'>
- Cari kode seperti ini :
<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
- Jika sudah dapat, tambahkan kode di bawah ini di atas tag <h3 class='post-title entry-title'> :
<table><tr>
<td class='ssybyposttitle'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrlcL5bSHI9FMSOoFP3qfGQRYgYE3d8pMqxn7VebMUh8LqKMUhTa0dosiZ5v3eBDkWsNXfd2VN2qUxwW8Z-37j-NJt8DV0mYCWFdEm2TaQMf_y9PVT-Ej4Z44OGEutKo85v5x_J9Z_eg8L/s1600/headers.png'/>
</td>
<td>
- Keterangan : URL yang berwarna Biru ganti dengan URL foto yang sudah sobat upload sebelumnya.
- Selanjutnya, masukkan kode di bawah ini tepat di bawah tag penutup </h3>
</td></tr></table>
<style>
h3.post-title {
margin: 0px !important;
}
</style>
- Jika digabung, maka hasilnya akan jadi seperti ini :
<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<table><tr>
<td class='ssybyposttitle'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrlcL5bSHI9FMSOoFP3qfGQRYgYE3d8pMqxn7VebMUh8LqKMUhTa0dosiZ5v3eBDkWsNXfd2VN2qUxwW8Z-37j-NJt8DV0mYCWFdEm2TaQMf_y9PVT-Ej4Z44OGEutKo85v5x_J9Z_eg8L/s1600/headers.png'/>
</td>
<td>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</td></tr></table>
<style>
h3.post-title {
margin: 0px !important;
}
</style>
</b:if>
- Save template.
Semoga bermanfaat & salam bloggers...!!!
Artikel Terkait Blog Design ,it
- Cara Membuat Template Blog / Website Valid HTML5
- Cara Memasang Feedburner Counter Reader [FeedCount] Pada Blog
- Cara Mendaftarkan Blog / Website di Google Feedburner
- Cara Mudah Membuat Semua Link Terbuka Pada Tab Baru [Open New Tab Terget]
- Cinemagraphs, Aliran Fotografi Animasi
- Top 10 [Ten] Widgets For Blogger
- Text Efek Keyboard Dengan CSS3 Pada Blog
- Cara Membuat Peringatan Saat Blog Dalam Perbaikan
- Cara Mengganti Warna Text Selection Pada Blog
- CSS Buttons With Transitional Hover Untuk Blogger
- Floating Social Bookmark Vertical Untuk Blogger
- 5 Efek Foto Menggunakan jQuery & CSS pada Blog
- Redirect Halaman Error 404 [Page Not Found] Ke Homepage
- Cara Membuat Tombol Keren [Cool Button] untuk Blogger
- Cara Membuat Mega Menu Drop Down Menu For Blogger
- Cara Menambahkan Gambar di Depan Judul Postingan Blog
- Costumize / Modifikasi Label Blogspot Dengan CSS
- Cara Mengganti Bullet List Pada Postingan Agar Lebih Menarik
- Cara Menampilkan Widget Pada Halaman Tertentu Blogspot
- Cara Menyembunyikan Widget Pada Halaman Blogspot
No comments:
Post a Comment