March 26, 2015

Cara Membuat Related Posts di Bawah Posting Blog ala Maskolis

March 26, 2015

Tips cara menampilkan, memasang, atau membuat Related Posts (Posting Terkait, Tulisan Terkait) di Bawah Posting Blog yang aman dari sisipan link & Fast Loading!

Related Posts di Bawah Posting Blog

RELATED Posts merupakan internal link dan navigasi menu blog yang biasa ada di bawah tiap posting blog.

Disarankan menggunakan widget related post berupa daftar judul saja, tanpa thumbnail image (gambar) dan ringkasan, agar Fast Loading.

Daftar judul posting, ada yang juga yang plus thumbnail image dan ringkasan, sangat baik untuk blog agar pengunjung tertarik membuka tulisan lainnya di blog kita.

Banyak sekali tips dan kode untuk membuat Related Posts. Namun, banyak pula blogger yang menyisipkan link ke dalamnya sebagai upaya mendapatkan backlink atau semacam credit link.

Berikut ini CB berbagi tip dan kode membuat Related Posts yang bebas dari sisipan atau injeksi link. CB ambil dan modif kode ini dari template karya Masklolis dan sudah dipasangkan di hampir semua template hasil modifikasi CB.

Tahapan Membuat Related Posts 

1. Klik "Template" > Klik "Edit HTML"
2. Temukan atau Cari (CTRL+F) kode ]]></b:skin>
3. Copy & Paste kode berikut ini di atas kode ]]></b:skin> tadi.

#related-posts{float:left;width:100%;border-top:2px solid #88daed;margin:5px 0 10px;padding:15px 0 10px}
#related-posts .widget h2,#related-posts h3{font:18px Oswald;color:#000;text-transform:none;margin:0 0 10px;padding:0}
#related-posts a{color:#0973CF;font:13px Arial}
#related-posts li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5KZht0qo2gEVUG6WUsY35xGiPPmT4bz90AboT6y0qnS9OX4uD_YcovaGaLkAXNuigYr__iAHQpWSbfGV5fuAwTR0AY9AgwH1lFMiVAB6AcaTC3sjCWuqLAPcCNI-YpnTAjl_RF4-vN2c/s1600/bullet-list.gif) no-repeat 0 10px;text-indent:0;line-height:1.3em;border-bottom:1px dotted #ccc;margin:0;padding:3px 0 8px 12px}
#related-posts a:hover{color:#c00;text-decoration:none}
#related-posts .widget{margin:0;padding:0}
#related-posts ul{list-style:none;margin:0;padding:0}

4. Temukan kode </head>
5. Copas kode berikut ini di atasnya:

<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<relatedUrls.length;b++){if(relatedUrls[b]==a){relatedUrls.splice(b,1);relatedTitles.splice(b,1)}}var c=Math.floor((relatedTitles.length-1)*Math.random());var b=0;if(relatedTitles.length>1){document.write("<h3>"+relatedpoststitle+"</h3>")}document.write("<ul>");while(b<relatedTitles.length&&b<20&&b<maxresults){document.write('<li><a href="'+relatedUrls[c]+'">'+relatedTitles[c]+"</a></li>");if(c<relatedTitles.length-1){c++}else{c=0}b++}document.write("</ul>");relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length)};
//]]>
</script>

NB: Tulisan "Related Posts" yang berwarna merah bisa Anda ganti dengan kata-kata lainnya, misalnya "Tulisan Terkait" atau "Posting Terkait".

6. Temukan kode <data:post.body/>

7. Copas kode berikut ini di bawahnya. Jika ditemukan lebih dari satu kode <data:post.body/>, maka pilih yang kedua atau yang ketiga (keep trying!).

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=8&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=6;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div><div class='clear'/>
</b:if>

8. Save Template!

Kini Related Posts sudah muncul di bawah setiap postingan blog Anda. Dijamin aman dari sisipan link!

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

5 comments on Cara Membuat Related Posts di Bawah Posting Blog ala Maskolis

  1. bos...kok kode ]]> kode kok di punyaku.....sering saya ubek2 kok gak ketemu?.....
    mohon pencerahannya

    ReplyDelete
  2. trimakasih mas akhirnya jadi juga, cari sana sini browsing google baru nemu. klo mau di tambahin script gambarnya gimna to

    ReplyDelete
  3. Oke banget...trims banyak.
    bagaimana di+kan image...bos

    ReplyDelete
  4. Mas ane mau nanya, cara pasang iklan kaya ente(diatas related post) itu gimana ? jenis ads-nya apa ?

    Thanks mas

    ReplyDelete
    Replies
    1. Itu namanya Iklan Konten Yang Sesuai (Match Content). Tersedia di akun AdSense pilihan Google sendiri

      Delete

Contact Form

Name

Email *

Message *