Cara Membuat Related Post di Blog Blospot

Cara Membuat Related Post di Blog Blospot -Pagi ini saya akan membagikan script untuk membuat related post / artikel terkait. Akhirnya menemukan juga tutorial ini, karena banyak tutorial yang lain javascript-nya disisipkan sebuah link. jadi yang ini sama sekali tidak ada link yang disisipkan.

Cara Membuat Related Post/ Artikel Terkait


Cara Membuat Related Post di Blospot
1. Dashboard → Template → Edit HTML.
2. Temukan kode [ctrl+F] </head>
3. Paste kode di bawah ini sebelum kode </head>
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 10px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 15px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 10px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://www.dogphilosophy.net/graphics/sample1.jpg") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
<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>


4. Sekarang Temukan kode [gunakan: Ctrl+F] <data:post.body/>
5. Paste the kode di bawah ini setelahnya. Jika ada lebih dari satu <data:post.body/>, gunakan yang kedua.

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<h2>Other Recommended Posts on <b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><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=10&quot;' type='text/javascript'/></b:if></b:loop> </h2>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div></b:if>


6.Simpan template
 


Source : http://contohblognih.blogspot.com/

36 Responses to "Cara Membuat Related Post di Blog Blospot"

  1. Saya pernah menerapkan tutor ini bro, tanpa sengaja saya menghapus kode bagian "data post body".

    Akibat nya blog saya tulisan nya hilang

    BalasHapus
  2. keren gan , nyantumin link sumber, brarti agan salah satu blogger yang bermatabat haha
    slam knal sob

    BalasHapus
  3. @didi wirawan, lain kali kali hati2 bro. .
    @ilham efendi, ya gag ada salahnya juga cantumkan sumbernya kan gan hhe. salam kenal jg gan. Trima ksh atas kunjungnya ya

    BalasHapus
  4. Iya mas @lek miend
    @fadly rifai silahkan sob. .

    BalasHapus
  5. saya pealjari dulu yaa sob, thanks sob sudah berbagi ilmu
    :D

    BalasHapus
  6. panjang sekali ya sob ijin nyimak sambil belajar deh :)

    BalasHapus
    Balasan
    1. iya sob panjang, karena tidak dibuat ke file js

      Hapus
  7. udah diterapin ke blog ane gan

    http://deanara16.blogspot.com/

    BalasHapus
  8. simple dan ringan loading ya mas

    BalasHapus
    Balasan
    1. iya leony, mempermudah melihat artikel lainnya jg kok..

      Hapus
  9. ini related post perlabel pa bukan ya sob????
    ane mau coba klo realated post perlabel...

    BalasHapus
    Balasan
    1. iya mas, ini related post per label, silahkan dicoba

      Hapus
  10. Simple banget ya, pasti loadingnya sangat ringan :)

    BalasHapus
    Balasan
    1. mudah2an begitu sob, tergantung kualitas jaringan juga nih

      Hapus
  11. wah bagus ini, simpel tapi menarik, trims tutorialnya sob

    BalasHapus
  12. Boleh juga ni di coba gan. Keep blogging.

    BalasHapus
  13. kunjungan pertama, nice artikell perlu dicoba nih pasang releted post di blog saya.

    BalasHapus
  14. ijin nyimak mas
    soalnya pada blog saya sudah ada
    heheehehe

    BalasHapus
  15. jadi lebih keren ya mas kalau blog kita ada related post nya :)

    BalasHapus
    Balasan
    1. ya biar keren juga bisa hehe, lebih tepatnya untuk faktor pendukung aja buat para pembaca..

      Hapus
  16. Kelihat lebih lengkap
    Dan emang terbilang penting ya mas..widget ini :)

    BalasHapus
  17. pembaca jadi tau ya mas kalau juga ada artikel lain yang masih berhubungan melalui related post.. :)

    BalasHapus
    Balasan
    1. iya mas biar pembaca bisa baca yg lainnya juga,

      Hapus
  18. wah...udah lama cari yang beginian

    BalasHapus
    Balasan
    1. semoga membantu ya mas, kalo ini emang yang bener dicari

      Hapus

Disarankan sobat berkomentar menggunakan OpenID