Skip to main content

follow us


www.azid.web.id - Cara Membuat Related Post Seperti Iklan Matched Content Ala pehawe.info Lebih Responsive. Pada kesempatan sebelumnya saya sudah share tentang membuat related post bergerak, dan kali ini saya akan share kembali membuat related post seperti iklan matched content atau konten yang sesuai. Script ini merupakan related post iklan matched content yang tampilannya tidak standart akan tetapi sudah dirubah tampilannya menjadi thumbnail dengan gambar diatas dan deskripsi di bawah pada versi dekstop dan thumbnail dengan deskripsi disamping.

Script ini saya dapatkan dari template yang digunakan oleh pehawe.info dimana template tersebut adalah template kompiflexible AMP versi 3.00 milik kompiajaib.com namun related post sudah diubah sendiri oleh pemilik blog pehawe.info. Related post ini sangat mirip dengan iklan matched content oleh karena itu saya menyebutnya pada judul postingan dengan title "cara membuat related post seperti iklan matched content". Namun script yang digunakan oleh pehawe.info memiliki kekurangan yaitu kurang responsive pada ukuran layar diantara 800px-1000px sehingga terlihat kurang rapi. Jadi jika sobat pengguna tablet atau pengguna notebook dengan ukuran 10 inci akan melihat related post yang digunakan oleh pehawe.info berbentuk thumbnail gambar dengan satu kolom.

Baca Juga: cara mudah diapprove google adsense terbaru kurang dari satu hari

Untuk mengatasi hal tersebut akhirnya saya sedikit memodifikasi scriptnya dengan mengubah tampilan pada 900px menjadi 2 kolom dengan lebar 49% dan tampilan 414px menjadi 1 kolom dengan lebar 100% dan tampilan diatas 900px menjadi 3 kolom. Dengan memodifikasi hal tersebut tentunya tampilan tidak akan lagi menjadi berantakan.

Baiklah jika sobat ingin membuat related post seperti iklan matched content sobat bisa mengikuti langkah - langkah dibawah ini

Pertama, sobat harus masuk dulu ke blogger dan pilih menu tema setelah itu klik edit HTML.
Kedua, untuk langkah kedua ini sobat bisa melihat tutorial membuat related post bergerak (klik link disini), karena penjelasannya ada disitu.
Ketiga, untuk scriptnya bisa copas disini. Jadi pada tutorial related bergerak hiraukan scriptnya dan copas script untuk related post seperti iklan matched content dibawah ini

Baca Juga: Template gratis kompiajaib non AMP kecepatan 100%

Untuk blog Non AMP



<b:includable id='relatedpost' var='post'>
<b:if cond='data:post.labels'>
 <b:loop index='x' values='data:post.labels' var='label'>
   <b:if cond='data:x==0'>
<iframe expr:src='&quot;https://cdn.staticaly.com/gh/Azidzainuri/kode-azid/a5d104ca/related-post-5.html?protocol=http&amp;url=https://www.azid.web.id&amp;label=&quot; + data:label.name' frameborder='0' height='482' id='rp-amp' layout='fixed-height' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' width='100%'>
<div aria-label='Related Posts' overflow='' role='button' tabindex='0'>Related Posts</div>
  </iframe>
   </b:if>
 </b:loop>
</b:if>
<div class='clear'/>
</b:includable>


Untuk Blog AMP



<b:includable id='relatedpost' var='post'>
<b:if cond='data:post.labels'>
 <b:loop index='x' values='data:post.labels' var='label'>
   <b:if cond='data:x==0'>
<amp-iframe expr:src='&quot;https://cdn.staticaly.com/gh/Azidzainuri/kode-azid/a5d104ca/related-post-5.html?protocol=http&amp;url=https://www.azid.web.id&amp;label=&quot; + data:label.name' frameborder='0' height='485' layout='fixed-height' sandbox='allow-scripts allow-same-origin allow-modals allow-popups'>
</amp-iframe>
   </b:if>
 </b:loop>
</b:if>
<div class='clear'/>
</b:includable>


Ketiga, jika dirasa sudah mengikuti tutorial dengan benar. Sobat bisa Save Template dan lihat hasilnya.


Demikianlah Cara Membuat Related Post Seperti Iklan Matched Content Ala pehawe.info Lebih Responsive. Semoga bermanfaat. Amin
PERHATIAN!: setiap link template pada blog ini di direct 5 -7 kali jadi harap bersabar.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar