Cara Membuat Artikel Terkait di Bawah Postingan Blog

|
Cara Membuat Artikel Terkait di Bawah Postingan Blog - Artikel Terkait atau Related Posts merupakan sebuah widget artikel terkait yang berfungsi menampilkan sejumlah judul artikel yang berkaitan dengan artikel yang sedang dibaca sesuai dengan label baik itu berbentuk link, thumbnail ataupun link saja dan terletak di bawah postingan blog. Maka dengan begitu widget ini akan menarik minat para pembaca di blog anda yang sedang membaca salah satu artikel untuk membuka atau meng-klik salah satu judul artikel di dalam artikel terkait.
Ada banyak bentuk widget artikel terkait di internet, ada yang disertai gambar maupun tanpa gambar, icon yang terletak di samping judul dan sebagainya. Dalam hal ini saya akan share sebuah related posts/artikel terkait tanpa gambar ataupun icon disamping judul dengan tujuan ketika pembaca mengakses salah satu artikel di blog anda, menjadi tidak akan terasa lama atau memberatkan loading halaman blog. Karena keberadaan gambar ataupun icon merupakan salah satu penyebab beratnya loading halaman blog ketika diakses. Berikut contoh penampakan artikel terkait atau related posts yang akan saya share kepada sobat semua.

Cara Membuat Artikel Terkait di Bawah Postingan Blog
Related Posts


Bagaimana sobat? Apakah anda berminat? Jika anda berminat silahkan anda simak langkah-langkahnya.

Cara Membuat Artikel Terkait atau Related Posts di Bawah Postingan Blog

1. Silahkan login ke akun blogger anda.
2. Pada menu blogger atau dashboard, pilih menu Template atau Tema.

Cara Membuat Artikel Terkait di Bawah Postingan Blog

3. Klik Backup/Cadangkan yang terletak di sebelah kanan atas untuk membackup semua kode template blog, hal ini dilakukan untuk berjaga-jaga jika terjadi kesalahan saat anda melakukan edit template.

Cara Membuat Artikel Terkait di Bawah Postingan Blog

4. Klik Download Tema, setelah selesai silahkan klik Tutup.

Cara Membuat Artikel Terkait di Bawah Postingan Blog

5. Selanjutnya klik Edit HTML.

Cara Membuat Artikel Terkait di Bawah Postingan Blog

6. Cari kode </head>, gunakan Ctrl+F pada keyboard untuk mempermudah pencarian.
7. Jika sudah ketemu, copy-paste kode dibawah ini tepat diatas kode </head>.

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;}}}}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];}}
relatedTitles = tmp2;
relatedUrls = tmp;}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;}
i++;}
document.write('</ul>');}
//]]>
</script>
Script atau kode diatas fungsinya untuk mengatur Artikel Terkait kita agar nanti setiap artikelnya masuk dalam Unordered List ( ul ) jadi nanti kita bisa mengeditnya dengan mudah melalui css.
8. Kemudian cari kode <data:post.body/>, jangan lupa untuk menggunakan Ctrl+F untuk mempermudah pencarian.
9. Copy-paste kode berikut ini tepat dibawah kode <data:post.body/>.

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<h4>Artikel Terkait</h4>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
Catatan :
- Tulisan 5 warna merah adalah jumlah link judul yang akan ditampilkan, kalian bisa menggantinya dengan jumlah yang anda inginkan.
- Setiap template biasanya memiliki dua sampai empat buah kode <data:post.body/>.
- Silahkan anda mencoba meletakkan kode diatas, dimulai dari kode <data:post.body/> yang pertama sampai kode <data:post.body/> ke empat. Pada kode template blog saya terletak pada kode <data:post.body/> yang kedua.
- Jika kebetulan anda pernah memasang tombol like and share seperti yang pernahkan saya bagikan pada artikel yang berjudul Memasang Tombol Like Share di Bawah Postingan Blog, silahkan anda letakkan kode diatas dibawah kode tombol like share yang pernah anda pasang dahulu.
10. Jika sudah berhasil dan muncul ditempat yang anda inginkan, silahkan anda klik Save Template atau Tema.

Dengan memasang artikel terkait di bawah postingan blog, maka akan menarik minat pembaca blog anda untuk membuka salah satu judul artikel yang berada di dalam artikel terkait serta menambah page view blog.
Demikian artikel tentang bagaimana cara membuat artikel terkait di bawah postingan blog. Semoga bisa bermanfaat. "Happy Blogging"

Related Posts :

Silahkan klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG

3 komentar:

Anonymous said...

Setelah mencuba berkali-kali dengan mengikuti panduan daripada pelbagai blog, akhirnya di sini cubaan sudah berhasil. Alhamdulillah, terima kasih banyak atas panduan yang diberikan.

Anonymous said...

Saya ingin bertanya, bagaimana menampilkan snippet di bawah tajuk post artikel terkait? Mohon bantuan

Harmansyah said...

@Ummu Naufal, Nanti saya buatkan artikelnya mba

Post a Comment

...... Terima kasih telah berkunjung, silahkan berkomentar dengan baik sopan sesuai dengan tema konten dan tidak mengandung unsur Sara ......