October 31, 2013

Cara Membuat Related Post di Blog Blospot

October 31, 2013

membuat related post
Menambahkan daftar posting terkait (related posts) di bawah tiap posting blog tidak hanya menambah keren blog, tapi juga membantu meningkatkan pageviews. Posting terkait ini sangat bermanfaat bagi blogger sendiri dan user. Pengunjung dengan mudah menemukan topik-topik terkait atau artikel menarik lainnya di blog Anda.

UPDATE!
Gunakan yang ini, lebih OK:
Membuat Related Post yang Aman dari Sisipan Link

Posting terkait (related posts) menyajikan posting alternatif kepada pembaca dan "membujuk" mereka berlama-lama di blog Anda.

Ini dia cara membuat daftar posting terkait (related posts) di bawah tiap posting. Dari sekian banyak cara membuat posting terkait, ini salah satu yang aman, tanpa "injeksi" dan "penyusup" apa pun yang biasanya berisi link blog tertentu. Blog ini pun menggunakan kode Related Posts yang dimodifikasi dari Cool Word In.

Cara Membuat Related Posts di Blogspot

1. Dashboard → Template → Edit HTML.
2. Temukan kode [ctrl+F] </head>
3. Copy & 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://2.bp.blogspot.com/-EcBIblBtYTQ/TqALuRS_IzI/AAAAAAAAAx0/E-
vzWTTOgXs/s1600/bullet-list.gif") no-repeat 0 0px;
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 kode di bawah ini setelahnya atau di bawahnya. Jika ada lebih dari satu <data:post.body/>, gunakan yang kedua.

<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>

6. SAVE Template!

Jika Cara Membuat Related Post di Blog Blospot di atas gagal, CB sarankan menggunakan cara yang satu lagi, lebih OK!

Ini dia > Membuat Related Post yang Aman dari Sisipan Link

Good Luck!

Previous
« Prev Post
Author Image

Romeltea

Recommended Posts

Related Posts

Show comments
Hide comments

16 comments on Cara Membuat Related Post di Blog Blospot

  1. Keliling kesana-kemari semuanya pake nyisipin link-nya, sob.

    Trims, Sob. Sudah ane coba.

    ReplyDelete
    Replies
    1. Yang ini nggak ada kan...? good luck....

      Delete
  2. hai sob, thanks. iini yang aku cari, iji aku share yaa

    ReplyDelete
  3. ia ini ga ada link nya tapi kok ga ada tulisa related post dan yang muncul hnya nama / url post yang di buka saja ya , judul post yang laiin ga nonggol,, minta info nya makasih

    ReplyDelete
    Replies
    1. Silakan gunakan versi Related Post yang update

      Delete
  4. url backgroundnya tidak bisa dibuka??

    ReplyDelete
    Replies
    1. Sudah diganti. Silakan gunakan versi Related Post yang update seperti Related Posts yang digunakan CB

      Delete
  5. Mantab.. kawan iin memang beda. ini yang saya cari. Akhirnya nemu juga postingan related pos yang gak pake nyisipin link segala.

    ReplyDelete
  6. related post nya kalo pake nomor dimana gan,
    terus untuk menentukan berapa jumlah yang kita mau edit angka yang mana,

    ReplyDelete
  7. memang kalau ada link pembuat sript bikin risi, yang ini Ok saya pakai. kelebihanya loading tetap wuzzz...terimakasih kang CB

    ReplyDelete
  8. Kalo related post kayak blog ini gimana caranya euy? Tks

    ReplyDelete
    Replies
    1. http://www.contohblog.com/2015/01/Daftar-Isi-Sitemap-Blog-Tabulasi.html

      Delete
  9. related postnya di atas postingan kurang mantep gan, mendingan di bawah

    ReplyDelete
  10. update min, sekarang template susah ketemu, kasih tau di mana templatenya.

    ReplyDelete
    Replies
    1. Sekarang namanya Tema / Theme, bukan lagi template

      Delete

Contact Form

Name

Email *

Message *