Cara membuat artikel terkait atau related post di bawah postingan blog

Advertisemen

Cara membuat artikel terkait atau related post di bawah postingan blog.

Artikel ini saya tujukan untuk berbagi pengetahuan tentang bagaimana membuat blog yang bagus dan menarik meskipun blog nya gratisan.

Khususnya buat anda yang baru di dunia blogging

Selain itu,saya membuat artikel ini agar saya tidak lupa dalam membuat artikel terkait atau related post di bawah postingan blog, karena saya termasuk orang yang suka lupa maka saya menuliskannya di blog ini.agar nantinya bisa saya buat lagi di blog saya yang lainnya.

Saya akan memberikan dulu screenshot atau gambarannya apa yang dimaksud dengan artikel terkait atau related post di bawah postingan,

berikut gambarnya :

Seperti itulah yang dimaksud dengan artikel terkait atau related post yang berada di bawah postingan blog.
Untuk membuat artikel terkait seperti itu, terlebih dahulu anda harus mengkategorikan artikel atau postingan anda seperti contoh gambar di bawah ini :

Sekarang kita mulai saja,

Silahkan masuk ke dasbor blog anda dulu dan klik Rancangan - Edit HTML - dan jangan lupa beri tanda centang Expand template widget.

seperti gambar-gambar di bawah ini :

Untuk berjaga-jaga Copy Keseluruhan kode html anda ke notepad, supaya kalau terjadi kesalahan pengkodean anda bisa mengembalikan kode html semula.

Gunakan CTRL+F di keyboard anda untuk memudahkan pencarian,cari kode dibawah ini :

<data:post.body/></b:if>

atau bila tidak ada,cari kode ini :

<data:post.body/>

Bila telah ditemukan,

copy dan paste kode ini dibawah kode tadi, yang <data:post.body/></b:if>.

Berikut kodenya :

<b:if cond='data:blog.pageType == "item"'>
    <br/>
    <br/>
    <H2>Related Post:</H2>
    <div class='rbbox'>
    <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
    <div id='albri'/>
    <script type='text/javascript'>
    var homeUrl3 = "<data:blog.homepageUrl/>";
    var maxNumberOfPostsPerLabel = 4;
    var maxNumberOfLabels = 10;
    maxNumberOfPostsPerLabel = 9999;
    maxNumberOfLabels = 3;
    function listEntries10(json) {
    var ul = document.createElement('ul');
    var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
    json.feed.entry.length : maxNumberOfPostsPerLabel;
    for (var i = 0; i < maxPosts; i++) {
    var entry = json.feed.entry[i];
    var alturl;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    alturl = entry.link[k].href;
    break;
    }
    }
    var li = document.createElement('li');
    var a = document.createElement('a');
    a.href = alturl;
    if(a.href!=location.href) {
    var txt = document.createTextNode(entry.title.$t);
    a.appendChild(txt);
    li.appendChild(a);
    ul.appendChild(li);
    }
    }
    for (var l = 0; l < json.feed.link.length; l++) {
    if (json.feed.link[l].rel == 'alternate') {
    var raw = json.feed.link[l].href;
    var label = raw.substr(homeUrl3.length+13);
    var k;
    for (k=0; k<20; k++) label = label.replace("%20", " ");
    var txt = document.createTextNode(label);
    var h = document.createElement('b');
    h.appendChild(txt);
    var div1 = document.createElement('div');
    div1.appendChild(h);
    div1.appendChild(ul);
    document.getElementById('albri').appendChild(div1);
    }
    }
    }
    function search10(query, label) {
    var script = document.createElement('script');
    script.setAttribute('src', query + 'feeds/posts/default/-/'
    + label +
    '?alt=json-in-script&callback=listEntries10');
    script.setAttribute('type', 'text/javascript');
    document.documentElement.firstChild.appendChild(script);
    }
    var labelArray = new Array();
    var numLabel = 0;
    <b:loop values='data:posts' var='post'>
    <b:loop values='data:post.labels' var='label'>
    textLabel = "<data:label.name/>";
    var test = 0;
    for (var i = 0; i < labelArray.length; i++)
    if (labelArray[i] == textLabel) test = 1;
    if (test == 0) {
    labelArray.push(textLabel);
    var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
    labelArray.length : maxNumberOfLabels;
    if (numLabel < maxLabels) {
    search10(homeUrl3, textLabel);
    numLabel++;
    }
    }
    </b:loop>
    </b:loop>
    </script>
    </div>
    <script type="text/javascript">RelPost();</script>
    </div>
    </b:if>

Ingat !!!

simpan kode tersebut dibawah kode <data:post.body/></b:if>.

seperti gambar di bawah ini :

Tulisan yang saya warnai merah ( Related post ) bisa anda ganti menjadi Artikel terkait, Baca Juga atau di biarkan juga tidak apa-apa.

Setelah itu cari kode ]]></b:skin>
dan copy kode CSS dibawah ini :

.rbbox{
border: 1px solid rgb(192, 192, 192);
padding: 5px;
background-color: #f0f0f0;
-moz-border-radius:5px;
margin:5px;
}

.rbbox:hover{
background-color: rgb(255, 255, 255);
}

Lalu pastekan kode tersebut, di atas kode ]]></b:skin>.
seperti gambar di bawah ini :

Selesai dan jangan lupa save template,
kemudian lihat dan cek,
apakah artikel terkait atau related post telah terpasang di blog anda.
Selamat mencoba.

Demikian artikel singkat Tentang Cara membuat artikel terkait atau related post di bawah postingan blog.
Semoga bermanfaat.

Advertisemen