Cara Membuat Related Post di Blog - Artikel Terkait

Oleh: - Update Terakhir:
Cara Membuat Related Post di Blog

Dalam posting artikel berikut ini menunjukkan bagaimana Cara Membuat Related Post Versi Loading Cepat. Biasanya artikel terkait ini ditambahkan di bawah postingan artikel blog. Fungsi dari Related Post ini merupakan salah satu teknik untuk menambah pageview halaman, sesuai dengan posting artikel yang terkait dengan label secara otomatis.

Versi Related Post ini bisa dibilang cepat karena memakai script yang kecil sedangkan cara membuat artikel terkait ini hanya memerlukan waktu beberapa menit saja. Related Post Versi ini cukup bagus untuk ditambahkan karena loadingnya yang cepat, dan tampilannya pun cukup baik.

Related Post Versi Cepat ini hanya menampilkan judulnya saja. Tentu saja tampilannya dapat sedikit di modifikasi sesuai keinginan, seperti Merubah namanya jadi “Related Post”, “Baca Juga Artikel Dibawah ini” dan lain sebagainya.

Berikut adalah Langkah-langkah Cara Membuat Artikel Terkait di Blog:
1. Login Ke Blogger.
2. Klik Template, Backup template terlebih dahulu, untuk jaga2,
atau langkah berikut bisa di uji coba menggunakan Blog percobaan yang lain.
3. Klik Edit HTML.
4. Klik Kiri 1 x Dimana saja dalam kotak template.
5. Klik Ctrl+F (Supaya mempercepat pencarian kode), dan cari kode berikut ]]></b:skin> atau </style>. Masukan kode tersebut dalam kotak pencarian, kemudian enter untuk mencari.
6. Masukan Kode berikut diatas ]]></b:skin> atau </style> di bagian head.

/* Related Post Cepat
--------------------------------- */
#related-postsku{float:left;width:100%;margin-top:5px;margin-left:0px;font-size:13px;font-family:Arial,serif;margin-bottom:0px;}
#related-postsku a{text-decoration:none;}
#related-postsku a:hover{text-decoration:none;}
#related-postsku ul{border:medium none;margin:10px 0px 10px 0px;padding:0;}
#related-postsku ul li{display:block;background:url("https://lh3.googleusercontent.com/-6iznc81V_pQ/UcmgB6yKU3I/AAAAAAAABWc/NhxmD6789YU/s25/rss.png") no-repeat 0 0;margin:0;padding-top:0;padding-right:0;padding-bottom:1px;padding-left:30px;margin-bottom:5px;line-height:2em;border-bottom:1px dotted #cccccc;}

Warna Oranye adalah link gambar rss dan sebaiknya diganti sesuai keinginan.
Anda bisa merubah kode diatas untuk dimodifikasi kalo sudah mengenal.

7. Cari kode berikut </head>
8. Masukan Kode berikut diatas </head>

JQuery

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js' type='text/javascript'/>

Catatan: Jika sudah menggunakan JQuery versi lain, maka lewati langkah ini.

9. Kemudian masukan Kode berikut diatas </head>

Javascript

<!-- Artikel Terkait Start Bro-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>
</b:if>
<!-- Artikel Terkait End Bro-->

10. Cari kode berikut <div class='post-footer'>
Kode tersebut mungkin ada 2, pertama untuk versi mobile,
kedua untuk versi web (biasanya yang kedua).

11. Masukan Kode berikut diatas <div class='post-footer'> yang kedua (versi web).

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-postsku'>
<font style='font-size:19px;color:#CC333B;font-family:Arial;'><b>Artikel Terkait: </b>
</font><font color='#fff'><b:loop values='data:post.labels' var='label'><data:label.name/>
<b:if cond='data:label.isLast != &quot;true&quot;'/><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
</b:if></b:loop></font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
</b:if>

Kira-kira tampilannya seperti ini
…Kodenya…
<div class='post-footer'>

Keterangan Cara Membuat Related Post Versi Loading Cepat:
Artikel Terkait berwarna pink: dapat Diganti namanya sesuai keinginan, berikut warna ungu untuk kode warnanya dan biru untuk besar hurufnya
Text berwarna hijau dapat dirubah angkanya untuk jumlah tampilan artikel.

12. Save Template, dan lihat hasilnya.

Demikian Cara Membuat Related Post Versi Loading Cepat di bawah postingan artikel, mudah-mudahan bisa bermanfaat.

Comments on “Cara Membuat Related Post di Blog

  1. dniellsoft

    hatur nuhun kang, script masih work

    Reply
  2. sepenggal info

    thanks gan, scriptnya working dan sudah ane terapkan 🙂

    Reply
  3. Rio

    Ilmu dan info yang sangat bermanfaat mas, sudah saya coba terapkan ke blog saya dan berhasil !!

    Jadi semakin semangat buat belajar otak-atik blog.

    Reply
  4. Anrio

    Terima kasih atas info dan ilmunya mas, sudah saya terapkan di blog saya dan berhasil.

    Jadi lebih semangat buat ngeblog dan otak-atik blog

    Reply
  5. blogger jogja online

    makasih banget mas, membantu buat bikin related post di blog saya

    Reply
  6. Rauhun Isnaini

    Terima kasih mas, tutornya sangat membantu.

    Reply
  7. hoerul

    ini yang saya cari.. template saya tidak ada relatesd pst nya,, terimakasih bermanfaat sekali

    Reply
  8. Dua Rupa

    Script related post update terbaru buat yang gak berhasil…

    Reply
  9. Ryan Mantab

    thnaks gann.. mantab deh artikelnya.

    Reply
  10. Dwicahyo Saputro

    makasih banget gan tutorialnya… sangat membantu

    Reply
  11. obat kuat alat bantu sex

    makasih bgt
    sangat membantu sekali
    🙂

    Reply
  12. info menarik

    thank infonya bro

    Reply
  13. cara

    timakasih infonya bro
    :-bd

    Reply
  14. Kesuburan Wanita

    Sangat bermanfaat dan penting untuk semuanya,thanks Kesuburan Wanita

    Reply
  15. sukasuka seo

    thank gan sudah berhasil, kalau nggak percaya bisa mampir di blog saya :-bd

    Reply
  16. serba-inform

    Mantap :-bd

    Sangat Bermanfaat
    Terima Kasih lol

    Reply
  17. Anime For Indo

    makasih gan…..

    Reply
  18. Fathoni Muhammad

    gan. berhasil nih. makash infonya
    mampir2 gan ke blog ane
    http://silumanpisces.blogspot.com

    Reply
  19. sj reload

    keyen juragan,,worked..
    mampir juga ke blog ane ya gan,,
    dkarea.blogspot.com

    mkasih.

    Reply
  20. share info

    mantab gan thanks yah,,,,

    Reply
  21. Muslim Gaul

    Alhamdulillah udah bisa. Awalnya sempat tidak bisa karena di letakkan di (div class='post-footer'). Tapi setelah di coba di (data:post.body/) ternyata bisa. Jazakallah akhi… kunjungi http://bloggermuslimgaul.blogspot.com/

    Reply
  22. dadan ramdani

    mantap, udah saya pasang di blog ana

    Reply
  23. Wansa Ramadhan

    tengkyu tutorialnya gan, ada cara laen gak ya yg lebih sederhana? :-bd

    Reply
  24. Juri Rakyat

    :-bd Nice di tunggu kun balik,y son di Juri Rakyat

    Reply
  25. Rumput Kebar Papua

    makasih gan infonya,meluncur segera ke TKP

    Reply
  26. fyaa

    ini punya inyong kok gak working ya gan ????? =(

    Reply
  27. b-edukasiku

    Keren sobat saya praktekkan dulu yah !

    Reply
  28. Cara Ririn

    wah terimakasih banyak sob atas informasinya. saya jadi tahu nich. Thanks ya atas share nya 🙂

    Reply
  29. Rahasia Bukan

    ma kasih gan, akan saya coba..

    Reply
  30. Blogination

    terpasang sempurna gan .

    Reply
  31. Dimas Dali

    Alhamdulillah, terima kasih om artikelnya, salam kenal…

    Reply
  32. hengki kristianto

    Terimakasih sudah share gan, artikel yang sangat membantu newbie seperti saya

    Reply
  33. kiqky

    tanks gan, artikel nya sangat bermanfaat……

    Reply
  34. Rahmat Rizki

    Sipp nih berhasil, tpi bisa gak menggunakan scroll, terima kasih

    Reply
  35. rizqi suvenir

    Kok gak nampak gan?
    mohon pencerahannya?

    Reply
  36. Tips n Trik Komputer

    mantab gan,ane coba work

    Reply
  37. Fadjar Noegraha

    Mantap gan, sudah saya coba dan berhasil

    Reply
  38. cara membuat blog

    Keren gan, saya mau coba dulu..
    terimakasih sudah share, salam kenal

    Reply
  39. Sharing is Amazing!

    asik banget mas bro. tapi ane pengen berdasarkan label gimana?

    Reply
  40. Anonim

    @ angga Indriya >> pas langkah no berapa bingungnya?

    Reply
  41. Angga Indriya

    Masih bingung nih gan ??? lum bisa jg…

    Reply
  42. Anonim

    @ Basyiri Rahmanto >> Insya Alloh, mudah-mudahan nanti dibuat tutorialnya dalam waktu dekat… berhubung msh sibuk…

    Reply
  43. Basyiri Rahmanto

    klo pingin buat related post kayak punya agan caranya gimana,,tolong dibantu….

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *