Tutorial Membuat First Image Di atas Postingan Blogger - Kang Iyan

Tutorial Membuat First Image Di atas Postingan Blogger

Membuat First Image atau gambar pertama pada blogger diatas judul postingan pasti akan membuat blog kamu menjadi bagus tapi untuk cara penerapannya pasti sangat susah, kenapa saya bilang susah? dikarenakan setiap Template pasti berbeda kode nya tidak mungkin sama walaupun sama pastinya pembuatnya juga sama jadi ngak merubah banyak kode.

Tutorial Membuat First Image Di atas Postingan Blogger

Untuk penerapan nya sendiri agak susah tapi tenang saja karena saya akan menjelaskan secara rinci jadi ngak bakal tambah pusing buat kamu.

Tutorial Membuat First Image

Masuk dulu ke blog kamu, bila sudah kamu klik Thema > Edit HTML lalu cari kode seperti pada Tutorial dibawah ini.

Pertama coba kamu cari kode seperti ini

<div class='post hentry' expr:id='data:post.id' itemscope='' itemtype='http://schema.org/BlogPosting'>

Tapi bila tidak ketemu kamu cari saja kode ini nanti dibawahnya akan terlihat seperti ini

<b:includable id='post' var='post'>

nanti akan terdapat kode 'post hentry' dibawahnya dan kamu copy kode berikut dan pastekan tepat dibawah kode 'post hentry' tersebut

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='coverImage'>
   <b:if cond='data:post.firstImageUrl'>
      <img class='firstimage' expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
   <b:else/>
      <img class='firstimage' expr:alt='data:post.title' src='http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s70/picture_not_available.png'/>
   </b:if>
</div>
</b:if>

Sekarang kita pasang CSS nya agar tampilannya menjadi berubah dan tepat berada diatas judul postingan blogger nantinya, taruh kodenya di atas </style> atau </b:skin>

.post img.firstimage{width:100%;height:auto;max-width:100%}
.post-body .separator:nth-child(1){display:none}

Agar tampilan menjadi muncul kita akan menambahkan Javascript untuk menampilkan First Image tersebut, taruh kodenya diatas </body>

<script type='text/javascript'>
//<![CDATA[
$(function(){$(".separator:first").remove(),$(".post-body > img:first").remove()});
//]]>
</script>


Sekarang coba kamu simpan Template dan lihat hasilnya, dan jika masih belum dimenggerti kamu bisa bertanya di kolom komentar.

Artikel Terkait

Tutorial Membuat First Image Di atas Postingan Blogger
4/ 5
Oleh

Komentar Ada Dibawah

  1. kalau untuk sebaliknya gimana ya?

    jadi saya punya permasalahan gini: dari templatenya, udah otomatis first image itu nangkring sendiri di atas postingan. tapi jeleknya, posisi gambar aslinya jadi nggak ada gambarnya.

    misal awalnya gambarnya saya taruh habis paragraf kedua, gambar yang jelasin tentang paragraf yg bersangkutan. dengan template ini, gambar itu jadi di atas judul, sementara yg habis paragraf 2 itu hilang. kan jadi nggak nyambung. apalagi gambar di atas judul itu juga kepotong.

    ada solusi gak untuk memunculkan kembali gambar itu di posisi semula? setidaknya gambarnya jadi 2: di atas dan di paragraf 2.

    ReplyDelete