Cara Memasang Gambar Artikel Diatas Postingan Secara Otomatis

Beberapa pengguna template Kompi Flexible yang terbaru banyak yang menanyakan cara memasang gambar artikel diatas postingan.

Daftar isi

Baca Juga

Beberapa pengguna template Kompi Flexible yang terbaru banyak yang menanyakan cara memasang gambar artikel diatas postingan. Dan blog saya ini menggunakan template yang versi 8 atau terbaru. Jika teman-teman blogger ada yang menggunakan template dari Kang Adhy ini, pasti akan tahu setiap perubahan update yang terjadi. Mulai dari versi pertama hingga versi kedelapan ini. Setiap perubahan yang dilakukan membuat template ini memiliki performa yang lebih baik.

Nah pada artikel ini, saya membahas yang berhubungan dengan template Kompi Flexible. yaitu beberapa perubahan yang terjadi pada template ini. Namun tidak semuanya, hanya satu perubahan saja yang saya bahas. Selebihnya terserah pada pemilik masing-masing template ini.

Salah satu perubahan yang terjadi adalah penempatan gambar artikel. Mulai dari versi pertama hingga versi kedelapan ini, posisi gambar artikel selalu berubah. Di versi kedelapan ini, gambar artikel sudah tidak berada diatas postingan secara otomatis karena ada perubahan pada kode template yang terpasang sebelumnya. Gambar artikel yang secara otomatis berada diatas postingan adalah gambar pertama, sedangkan gambar kedua dan seterusnya, tetap berada ditempatnya.

Contoh Demo Gambar Artikel Diatas Postingan

Dibawah ini ada 2 artikel blog yang sama-sama menggunakan template Kompi Flexible v8.6. Di kedua artikel blog ini, memiliki perbedaan pada posisi gambar artikelnya. Untuk demo 1, masih menggunakan kode template yang belum saya edit. Sehingga untuk tampilan gambar artikelnya tidak otomatis berada diatas postingan. Sedangkan untuk demo 2, sudah saya edit sehingga tampilan gambarnya ada diatas postingan.

Demo 1 Demo 2

Jika pengguna template Kompi Flexible menginginkan gambar artikel seperti pada demo 2, sebenarnya sangat mudah sekali dan tidak perlu mencari panduan kemana-mana. Kalaupun mencari panduannya di google, besar kemungkinan tidak sama, namun tidak ada salahnya juga mencoba utak atik sendiri. Tapi sebelum mencari panduannya, seperti yang saya sampaikan diatas, kode template ini mengalami beberapa perubahan. Dan salah satu perubahan itu ada pada posisi letak gambar artikel.

Artikel dalam blog saya ini menggunakan gambar artikel yang otomatis selalu berada diatas postingan, untuk gambar pertama. Bagaimana caranya? Untuk membuat gambar artikel selalu berada diatas postingan sebenarnya sudah ada pada template Kompi Flexible versi 6. Jika teman-teman ingin menerapkan tampilan gambar artikel seperti versi 6 ke versi 8, cukup mencari dan menempatkan kode tersebut kedalam kode template versi 8.

Cara Memasang Gambar Artikel Diatas Postingan Secara Otomatis

Bahkan untuk beberapa perubahan yang ingin dilakukan seperti mengganti kolom komentar disqus ke komentar blogger, juga bisa diterapkan pada template versi 8. Namun untuk mengganti kode tersebut, harus meneysuaikan dengan kode yang ada di versi 8, karena versi yang 8 ini memiliki kode ajaib, seperti yang buat Kompi Ajaib :)

Bagaimana cara mengganti gambar artikel di kompi flexible berada diatas postingan secara otomatis? Caranya adalah dengan mengambil kode gambar yang ada pada versi 6 dan meletakkannya kedalam kode template versi 8. Berikut caranya:
Kode Gambar Artikel Pertama. Didalam versi 6 ada kode seperti ini:

<div class='thumb-post'>
<b:if cond='data:blog.postImageUrl'>
<img expr:alt='data:blog.pageName' expr:src='data:blog.postImageUrl' expr:title='data:blog.pageName' height='300' width='600'/>
<b:else/>
<img expr:alt='data:post.title' expr:title='data:post.title' height='300' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoXAkaXxmaLmTKhYXZ-To7lGqw41lY5ZyAWKnkPNRjLs5GZRk9NrpySYXxoW8tc5lyxsP3Z0ZT2nXHl91JgcAXwVz-uOGioLbhgdH4248X-uwd7d0M-slVKXOV-umfN90FwrhR6mGoZG4/s600/no-thumbnail.jpg' width='600'/>
...
</b:if>
</div>

Kode diatas bisa digunakan semua atau sebagian. Jika hanya menggunakan sebagian, kode yang diambil seperti berikut:

<div class='thumb-post'>
<b:if cond='data:blog.postImageUrl'>
<img expr:alt='data:blog.pageName' expr:src='data:blog.postImageUrl' expr:title='data:blog.pageName' height='300' width='600'/>
</b:if>
</div>

Lalu cari kode <b:includable id='main' var='top'> dan salin kode diatas, terserah pilih yang mana, dibagian kode <b:includable id='main' var='top'> seperti dibawah ini:

Kode dibawah adalah kode yang ada didalam template versi 8, hanya bagian teratas yang saya tampilkan karena kodenya terlaku banyak. Perhatikan baik-baik kodenya:

            <b:includable id='main' var='top'>  
    <!-- posts -->
    <div class='blog-posts hfeed'>
      <b:include data='top' name='status-message'/>
      <data:defaultAdStart/>
      <b:loop index='x' values='data:posts' var='post'>
        <div class='post-outer'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='posts' name='breadcrumb'/>      
</b:if>
...

Selanjutnya masukkan kode gambar diantara kode <div class='post-outer'> atau dibawah kode <b:include data='posts' name='breadcrumb'/> sehingga hasilnya seperti berikut:

            <b:includable id='main' var='top'>  
    <!-- posts -->
    <div class='blog-posts hfeed'>
      <b:include data='top' name='status-message'/>
      <data:defaultAdStart/>
      <b:loop index='x' values='data:posts' var='post'>
        <div class='post-outer'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='posts' name='breadcrumb'/>      
<div class='thumb-post'>
<b:if cond='data:blog.postImageUrl'>
<img expr:alt='data:blog.pageName' expr:src='data:blog.postImageUrl' expr:title='data:blog.pageName' height='300' width='600'/>
  </b:if>
  </div>
</b:if>
...

Sekarang Simpan kode templatenya dan lihat hasilnya di halaman artikel blog. Jika berhasil, hasilnya terlihat seperti berikut:

Meskipun sudah berhasil tampil diatas postingan, namun untuk tampilan gambarnya tidak otomatis menyesuaikan dengan lebar postingan. Agar tampilannya sesuai, ganti tinggi dan lebar gambar yang ada di kode <img expr:alt='data:blog.pageName' expr:src='data:blog.postImageUrl' expr:title='data:blog.pageName' height='300' width='600'/> height='300' width='600' menjadi height='376.88' width='100%'. Sehingga menjadi seperti berikut:

            <b:includable id='main' var='top'>  
    <!-- posts -->
    <div class='blog-posts hfeed'>
      <b:include data='top' name='status-message'/>
      <data:defaultAdStart/>
      <b:loop index='x' values='data:posts' var='post'>
        <div class='post-outer'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='posts' name='breadcrumb'/>      
<div class='thumb-post'>
<b:if cond='data:blog.postImageUrl'>
<img expr:alt='data:blog.pageName' expr:src='data:blog.postImageUrl' expr:title='data:blog.pageName' height='300' width='600'/>
  </b:if>
  </div>
</b:if>
...

Selanjutnya tambahkan kode CSS berikut ini diantara kode .post-body

.thumb-post{width:100%;height:auto;margin:0 auto;padding:0;position:relative}
.thumb-post img{width:100%;height:376.88px;margin:0;display:block;}
@media screen and (max-width:800px){
.thumb-post img{height:200px}}

Terakhir tambahkan kode script ini document.querySelectorAll(&quot;.separator,.tr-caption-container&quot;)[0].style.display= &quot;none&quot;; diatas kode ini:

function insertAfter(tbh,tgt) {
  var prt = tgt.parentNode;
  if (prt.lastChild == tgt) {prt.appendChild(tbh);}
  else {prt.insertBefore(tbh,tgt.nextSibling);}}
  var tgt = document.getElementById("tgtPost");
  var midAd1 = document.getElementById("middleAds1");
  var midAd2 = document.getElementById("middleAds2");
  var showAd1 = tgt.getElementsByTagName("br");
  var showAd2 = tgt.getElementsByTagName("p");
  if (showAd1.length > 0) {insertAfter(midAd1,showAd1[2]);}
  if (showAd2.length > 0) {insertAfter(midAd1,showAd2[2]);}
  if (showAd1.length > 0) {insertAfter(midAd2,showAd1[6]);}
  if (showAd2.length > 0) {insertAfter(midAd2,showAd2[6]);};

Simpan template. Dan hasilnya bisa Anda bandingan pada Demo 1 dan Demo 2 diatas.

Agak panjang memang jika membaca artikel panduan ini. Namun jika dilakukan secara pelan-pelan, sebenarnya sangat mudah dan cepat untuk menggantinya. Dan pastikan untuk tetap teliti dalam mengganti kode templatenya.

Apa Ada Cara Lain Memasang Gambar Diatas Postingan?
Ada, dan lebih mudah yaitu dengan memasang langsung gambar artikel saat membuat artikel blog. Ketika membuat artikel, sebelum paragrap pertama, pasang saja gambar artikelnya terlebih dulu. Maka secara otomatis gambar berada diatas postingan.

Semoga bermanfaat buat yang bertanya via email. Dan jangan baper jika tidak berhasil, karena bila mengikuti sesuai panduan diatas, saya yakin hasilnya akan sama dengan yang saya terapkan pada contoh Demo 2 diatas.