Membuat Related Posts Manual Langsung Pada Editor Entri

SPOTROID - Related Posts. Related post atau artikel terkait yang berhubungan dengan halaman postingan yang sedang dibaca biasanya berdasarkan label yang telah disesuaikan dan juga ada yang menggunakannya yang versi default.

Postingan artikel terkait yang biasanya sobat jumpai pada blog ataupun website tetangga kita semuanya sudah dilengkapi dengan relatet / recent post seperti yang ada di Blogger.

Kita sering menemukan recent post (related post) yang dipasang blogmaster biasanya di 3 lokasi berbeda. Sebagian dari mereka ada yang memasangnya dibagian bawah artikel, ada pula yang meletakkan post terkait dibagian sidebar, dan sebagian lainnya ada yang pasang di tengah-tengah artikel (strategis).

Related post terbagi dalam dua kategori, diantaranya:
  1. Related - Default
  2. Related - Label

Related - Default: adalah related post yang dipasang sesuai dengan bawaannya tanpa menentukan atau merubah element tertentu pada dasarnya.

Related - Label: adalah related post yang dibuat per-label atau telah ditentukan dengan label-label tertentu saja, sehingga nanti artikel terkait yang munculpun sesuai dengan label yang ditetapkan sebelumnya.

Kali ini spot akan menjelaskan bagaimana caranya membuat post terkait secara manual dalam artikel. Hal ini memang sedikit merepotkan sih, karena setiap kali menulis dan menerbitkan artikel baru harus menambahkan kode related post-nya secara manual dalam artikel tersebut.

Dan parahnya lagi bagi sobat yang sudah lama menggunakan blognya itu mendingan nggak usah pakek cara ini deh, gak bakal sobat bisa sabar dalam memasukkan satu persatu kode related post pada setiap artikel yang ada, benar-benar capek banget sob gak bakal sanggup.

Namun, untu sobat yang baru bermigrasi menggunakan teplate AMP, ya mau gak mau harus menggunakan cara manual ini agar dapat menggunakan post terkait di tengah-tengah artikel postingan.


Karena khusus template valid AMP tidak di izinkan menggunakan kode script lain diluar yang telah ditetapkan oleh www.ampproject.org (AMP Devoloper).


Jadi spot sarankan cara yang sopt bagikan ini hanya untuk pengguna baru yang masih belum banyak menulis artikel. Bagi pengguna lama mendingan pakek related post yang sudah ada sebelumnya, yang otomatis telah sobat masukkan dalam XML template Blogger (Non AMP).

Tapi kalau memaksa kehendak ya silahkan saja pakai cara ini asalkan sabar, tekun, dan rajin menggantinya satu/satu. Menurut spot sendiri cara manual ini membuat kita empunya blog lebih leluasa dalam menentukan posisi related post pada setiap artikel blog.

Dan pastinya related post yang dibuat manual ini tidak akan mempengaruhi atau merusak elemen lain yang ada dalam artikel seperti kode tertentu, tabel dan gambar yang dibagikan kepada pengguna.

Indahnya lagi related post yang spot buat ini bisa ditempatkan iklan adsense yang akan muncul diantara bagian post terkait yang muncul. Misalkan iklan adsensenya bisa sobat letakkan di atas atau di bawah akhir related.

Untuk ukuran iklan dalam post terkait tengah-tengah artikel sobat pakai ukuran iklan adsense tetap saja agar tidak merusak desain, iklan yang muncul nanti sobat buat dengan ukuran 320px (L) dan 50px (T) dengan posisi rata tengah menggunakan tag pembukan dan penutup CENTER di awal dan di akhir kode iklan biar posisi iklannya bisa di tengah-tengah.

Menurut sobat gimana...?
Apakah menarik relatet post yang dipasang otomatis atau lebih menarik related post yang dipasang secara manual? Menurut spot pribadi yang artikel terkait (related post) manual lebih keren meskipun sedikit merepotkan, namun hasilnya itu lohh jauh lebih memuaskan.

Bukankah begitu sob...? :D

Oya menariknya lagi apabila artikel yang sobat tulis memang cukuplah panjang bisa 3 sampai 4 kali lipat pajang artikel biasanya, sobat bisa meletakkan 2 atau 3 related post manual ini dalam satu artikel yang memang benar-benar sangat panjang.

Seperti artikel yang sedanga sobat baca ini, memang sih tidak sepanjang yang sobat bayangkan namun telah jauh melewati standar minimal persyaratan panjang dari sebuah artikel postingan blog. Dan di artikel ini spot menggunakan 2 related post sekaligus, 1 diparuh atas postingan dan satunya lagi spot letakkan diparuh bawah postingan ini.

Kode Script dan Cara Buat Post Terkait Manual Dalam Postingan Blogspot


  1. Pertama seperti biasanya sobat login ke Blogger dengan akun yang sobat gunakan.

    Selengkapnya: Panduan cara buat Blogger terlengkap dari pertama hingga selesai.
  2. Langsung saja sobat buat artikel baru seperti biasanya, klik "Entri" yang ada di dasbor blog.
  3. Pastikan posisinya pada HTML Compose, masukkan judul artikel (kolom judul) dan kemudian tulis artikel seperti biasanya (area editor / kolom di bawahnya).
  4. Artikel yang disarankan itu minimal 500 kata dan maksimal terserah, buatlah seperti yang dianjurkan dan bikin jadi beberapa paragraf.
  5. Jika artikelnya sudah selesai diketik/dibuat, langkah selanjutnya adalah menempatkan kode script untuk related post nya, tempatkan ditengah-tengah artikel antara paragraf. Kode related post sudah spot sediakan di bawah.
  6. Apabila semuanya sudah beres tinggal klik "Publikasikan" dan selesai deh.

Kode Script Related Posts dan Style Css


Copy dan pastekan style Css berikut sebelum kode penutup </style> atau ]]></b:skin> di template blog sobat. Kode ini akan menyusun dan merapikan tampilan related post jadi lebih menarik.
/* STYLE RELATED POSTS RESPONSIVE DALAM ARTIKEL */
#arter{max-width:450px;width:100%;margin:0;padding:0;border:1px solid orangered;border-radius:6px;text-align:left;}
#arter h6{background:orangered;border-top-left-radius:5px;border-top-right-radius:5px;color:#ddd;font-family:arial;text-align:center;padding:2px 5px;}
.arter ol{margin:5px 5px 0 10px;padding:0;}
.arter ol li a:link{color:orangered;}
.arter ol li a:hover{color:green;}
.arter ol li a:active{color:orangered;}
.arter ol li a:visited{color:orangered;}

Kemudian kode berikut sobat salin dan tempelkan diantara paragraf artikel blog yang sobat buat. Letakkan kira-kira ditengah artikel postingan, dan lakukan setiap kali sobat selesai menulis artikel sebelum sobat "Publikasikan".
<center><div id="arter"><div class="arter"><h3>Artikel terkait</h3><center> Kode Iklan Disini </center><script style="text/javascript" src="https://cdn.rawgit.com/adigrup/javascript/516b36ed/javascript-sitemap-blogger.js"></script><ul><script src="/feeds/posts/default/-/LabelSobat?orderby=published&amp;alt=json-in-script&amp;callback=startpost&amp;max-results=5"></script></ul></div></div></center>

Perhatian

Artikel terkait = bisa sobat ganti dengan: Related Posts, Recent Post, Jangan Lewatkan, Baca Juga, atau terserah sobat mau pakai kata-kata apa yang menurut sobat menarik.

Kode Iklan Disini = ganti tulisan ini dengan kode iklan sobat, baik itu iklan Google Adsense atau iklan mandiri lain dari advertiser.

LabelSobat = silahkan sobat ganti dengan nama label sobat.

5 = ini untuk menentukan banyaknya artikel terkait yang akan muncul, bisa sobat ganti sesuai yang diinginkan, lebih baik untuk menggunakan antara 3, 5 atau 7 saja.

Kode di atas dapat sobat gunakan dengan atau tanpa iklan, jika tanpa iklan sobat hapus saja kode <center> dan </center> yang ada di sebelum dan sesudah teks "KODE IKLAN DISINI".

Hasilnya nanti kurang lebih bisa sobat lihat disini.


Salam sukses...
BLOG: Awak Blang Awe

YUK IKUTAN BERPARTISIPASI
Anda suka dengan artikel di atas? Bagikan!
Dengan 1x Anda membagikan artikel blog ini, artinya Anda telah ikut serta dalam menunjang berkembangnya blog "Spot Teknologi Android". Sekecil apapun usaha partisipasi Anda sangat berarti bagi blog ini, terimakasih.