Membuat Related Post di Bawah Postingan

Apa yang dimaksud dengan Related Post? Related Post adalah Artikel yang saling berhubungan, bila sebelumnya ipitoon membahas cara membuat related post dengan thumbnail sekarang ipitoon akan membahas cara membuat related post berbentuk artikel seperti terlihat pada gambar di bawah ini.



Untuk mendapatkan related post anda dapat mengikuti langkah-langkah pembuatannya :

1. Cari kode ini </head>

2. Copy kode di bawah ini dan letakan sebelum kode di atas (</head>)

    <style>

    #related-posts {
    float : left;
    width : 540px;
    margin-top:20px;
    margin-left : 5px;
    margin-bottom:20px;
    font : 11px 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 : 20px;
    font-weight : normal;
    margin : 5px 7px 0;
    padding : 0 0 5px;
    }
    #related-posts a {
    color : #054474;
    font-size : 11px;
    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>');
    }
    //]]>
</div></b:if>

3. Cari kode di bawah ini

<p><data:post.body/></p>

4. Copy kode dibawah ini dan letakan di bawah kode diatas.

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<h2>Related 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&gt

5. Klik Save Template dan lihat hasilnya.

Sobat Blogger bisa mengubah kode warna Pink di atas (Related Posts) dengan kalimat yang sobat sukai.
Sedangkan Angka 10 adalah jumlah maksimal untuk related Post yang di tampilkan. Sobat blogger juga bisa mengubahnya sesukanya misalkan 5 atau 8.

Jika bermanfaat silakan tulis komentarnya ya dan kunjungi terus blog tutorial ipitoon

9 Responses to "Membuat Related Post di Bawah Postingan"

asep canda said...

mantap ceu triknya

Peluang Bisnis | Ricky said...

Tutorial yang bermanfaat mba, terimakasih ya infonya..Saya ambil :)

salam,

fida salma said...

bermanfaat sekali anda

RifkyPanzer™ said...

oke coba ah

insanitis37 said...

maaf teh, punten pisan, maksad teh bikin link "poskan komentar" di handapeun posting..
kan template abdi mah pami bade komen teh kedah click angka jumlah komentar anu disamping judul blog.anu sanes blogger mah kadang bingung kedah click nu mana pami bade ngalebetkeun komen...
pami teu kaabotan waler nya teh, hehehehe
Maaf ngerepotin :-)

samosirson said...

Thanz a lot with your tutorial. very easy to learn. thanz... muahhh...muahhhh...muahhh (saking bahagianya....hiks...hiks)

usi2506 said...

nice posting, and absoltely important for the newb, thanks.

FaceLeakz said...

aku bingung.

deni prianto said...

ijin coba :)