Cara Mengubah Tampilan Widget Related Post

Widget related post jika diartikan dalam bahasa indonesia artinya widget post terkait adalah salah satu dari jenis widget yang menampilkan beberapa judul posingan blog yang sudah dipublikasikan dengan tujuan untuk menarik minat pengunjung  untuk mengunjungi judul salah satu judul yang ditampikan.

Untuk widget related post sendiri biasanya sudah ada atau bawaan dari template, karena hampir semua template saat ini sudah menerapkannya. Dan untuk tampilan widget related post umumnya ada dua jenis tampilan Statis dan Grid.

Bagi anda yang belum faham mengenai tampilan Widget Related Post Statis dan Widget Related Post Grid berikut ini Admin sertakan contoh dari tampilan kedua widget tersebut:

Ini adalah contoh jenis tampilan Grid dimana judul postingan tersusun kotak-kotak sejajar dengan jumlah 2 baris dan 8 kolom judul postingan.

Dan ini adalah contoh tampilan Statis dimana judul postingan tampak vertikal ke bawah dengan jumlah 3 baris dan bisa lebih tergantung settingan jumlah post yang akan ditampilkan.

Bagi anda yang ingin mengubah tampilan Widget Related Post baik dari Statis ke tampilan Grid atau sebaliknya dari Grid ke tampilan Statis. berikut ini tutorialnya.

Buka halaman dasboard blogger kemudian pilih menu Edit HTML, gunakan fitur pencarian dengan mengaktifkannya terlebih dahulu menggunakan kombinasi tombol CTRL + F kemudian pada kolom pencarian gunakan kata kunci berdasarkan judul widget related post pada blog anda yang ingin dirubah tampilannya.

Setelah kode widget related post ditemukan, perhatikan disana pasti ada kode penyusun yang mirip dengan url sebuah halaman, url tersebutlah sebenarnya inti dari tampilan related post.

Screnshot Kode di atas adalah kode widget related post dengan tampilan Grid, untuk mengatur jumlah post yang ditampikan adalah dengan mengubah lebar dan tinggi widget itu sendiri maka secara otomatis judul widget yang ditampilkan akan mengikuti ruang yang tersedia kata kunci untuk mengubah ukuran widget adalah kode height

Screnshot Kode di atas adalah contoh widget dengan tampilan Statis, terlihat kodenya lebih ramping bila dibandingkan dengan kode widget grid dan hanya ada satu kode height untuk mengatur jumlah postingan berdasarkan ukuran tinggi tampilan widget.

Disini Admin mengubah tampilan Widget Related Post blog berbagi tutorial online bawaan template amp le grid bahas tutorial dari tampilan Grid menjadi Statis. Maka kode yang harus diganti adalah kode admin block seperti tampak pada gambar di atas milik Bahas Tutorial diganti dengan kode Widget Related Post milik Arlina Design. Untuk judul widget bisa diubah sesuka hati, misalnya Banyak dibaca dirubah menjadi postingan lainnya, atau mungkin anda meminati.

Hasil tampilannya seperti gambar berikut ini yang sebelumnya Grid menjadi tampilan statis dengan jumlah 3 judul postingan dan sedikit cuplikan teks dari postingan.

Bagi anda yang ingin mencoba mengganti tampilan widget related post bawaan template menjadi Grid atau Statis silahkan ikuti tutorial di atas dengan hanya menggati link source tampilan widget related post umumnya kodenya seperti berikut ini:

 
  https://rawcdn.githack.com/bahastutorial/ampbahastutorial/ce792bce89e292cf9c07cc35f5984af5b8ced7ae/realetedpostamp.html?

Atau dapat juga dengan cara menggati sebagian kode inti widget related post yang diawali dengan kode <amp-iframe dan ditutup dengan kode </amp-iframe>

 
  <amp-iframe frameborder='0' height='330' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' src='https://rawcdn.githack.com/bahastutorial/ampbahastutorial/ce792bce89e292cf9c07cc35f5984af5b8ced7ae/realetedpostamp.html?url=https://bahastutorial.com/' width='600'>
  <div aria-label='Random Post' overflow='' role='button' tabindex='0'>Banyak Dibaca</div>
  </amp-iframe>

atau jika ternyata kode related post bawaan template agan jauh berbeda dengan source kode yang akan digunakan, atau ketika diganti link source ampilan widget related post tampilannya menjadi berantakanm maka solusinya adalah dengan mengganti keseluruhan kode widget related post umumnya diawali dengan kode <b:if cond= dan ditutup dengan kode </b:if>

 
  <b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
  <!-- Seccion Random post Entry -->
  <amp-iframe frameborder='0' height='330' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' src='https://rawcdn.githack.com/bahastutorial/ampbahastutorial/ce792bce89e292cf9c07cc35f5984af5b8ced7ae/realetedpostamp.html?url=https://bahastutorial.com/' width='600'>
  <div aria-label='Random Post' overflow='' role='button' tabindex='0'>Banyak Dibaca</div>
  </amp-iframe>
  <!-- Fin Seccion -->
  </b:if>

Untuk pilihan style related post silahkan berkunjung ke postingan berikut ini Koleksi Kode Related Post Keren Suport Template AMP dan Non AMP SEO Friendly.