Cara Membuat Related Posts yang Aman dari Sisipan Link
January 26, 2014
Cara menampilkan, memasang, atau membuat Related Posts (Posting Terkait, Tulisan Terkait) Simple & Fast Loading yang aman dari sisipan link.
BANYAK blogger memberikan tips cara membuat Related Posts (artikel terkait/posting terakit), namun menyisipkan link blog mereka ke dalamnya yang susah dideteksi.
Berikut ini CB Blogger berbagi kode untuk membuat Related Posts yang bebas sisipan atau injeksi link. Aman dan nyaman deh pokoknya!
Contohnya seperti gambar ilustrasi posting ini.
Baca juga: Cara Membuat Related Post plus Gambar Thumbnail
2. Temukan (tekan aja CTRL+F) kode ]]></b:skin>
3. Copas kode berikut ini di atasnya:
4. Temukan kode </head>
5. Copas kode berikut ini di atasnya:
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!).
Lebih mudah dan tepatnnya, letakkan saja di bawah kode "Social Share" (kode untuk sharing post ke Facebook dll.).
8. Save!
Itu dia cara membuat related posts yang aman dari sisipan link. Cara membuat posting terkait lainnya ada di Indeks Related Posts.
Good Luck and Happy Blogging...!!! (http://www.contohblog.com).*
BANYAK blogger memberikan tips cara membuat Related Posts (artikel terkait/posting terakit), namun menyisipkan link blog mereka ke dalamnya yang susah dideteksi.
Berikut ini CB Blogger berbagi kode untuk membuat Related Posts yang bebas sisipan atau injeksi link. Aman dan nyaman deh pokoknya!
Contohnya seperti gambar ilustrasi posting ini.
Related Posts merupakan salah satu widget wajib yang berfungsi untuk "menawarkan" posting lain kepada pengunjung sehingga (diharapkan) pengunjung menemukan posting dengan topik terkait, dan tentu akan lebih lama membuka blog kita --bagus buat pageviews.
Baca juga: Cara Membuat Related Post plus Gambar Thumbnail
Ini dia Cara Membuat Related Posts yang Aman dari Sisipan Link
1. Klik "Template" > Klik "Edit HTML"2. Temukan (tekan aja CTRL+F) kode ]]></b:skin>
3. Copas kode berikut ini di atasnya:
#related-posts{float:left;width:100%;border-bottom:0px solid #888;border-top:0px 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:12px Verdana}
#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}
#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:12px Verdana}
#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="Related Posts";
</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>
var relatedpoststitle="Related Posts";
</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!).
Lebih mudah dan tepatnnya, letakkan saja di bawah kode "Social Share" (kode untuk sharing post ke Facebook dll.).
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=8"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=6;
removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");
</script>
</div><div class='clear'/>
</b:if>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=8"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=6;
removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");
</script>
</div><div class='clear'/>
</b:if>
8. Save!
Itu dia cara membuat related posts yang aman dari sisipan link. Cara membuat posting terkait lainnya ada di Indeks Related Posts.
Good Luck and Happy Blogging...!!! (http://www.contohblog.com).*
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
Ane masang kok dobel ya? yang pake tumbnail ada juga dibawahnya. pengennya yang text biasa aja mas cb. cara hapus yang pake tumbnail gimana?
ReplyDeletecari kode related post with thumbnail-nya, hapus!
Deletebackground:none
ReplyDeleteGanti dengan: url(http://2.bp.blogspot.com/-EcBIblBtYTQ/TqALuRS_IzI/AAAAAAAAAx0/E-vzWTTOgXs/s1600/bullet-list.gif) no-repeat 0 10px;
cara merubah huruf dan iklannya biar jatuh kesamping gimana caranya mas
ReplyDeleteterima kasih banyak...tipsnya telah diterapkan dan berhasil....
ReplyDeleteSiiiiippp... Good luck!
Deleteane gak berhasil gan kenapa ya? padahal tutorialnya saya ikuti dengan benar
ReplyDeleteItu derita loh...! Wkwkwkw.... JK! Coba lagi, mungkin ada langkah yang gak pas...
Deletemungkin template nya pakai post footer 1 2 3 dst.
Deletecoba di intip dulu css dan hmtl nya
thanks gan,.. berhasil
ReplyDeleteoke, berhasil lagi, tapi cara ganti font judul "Related Posts"nya gimana ya?
ReplyDeleteganti "Oswald" di kode no. 3 baris ke-3
Deletegak ada muncul apa2 ya disave gak ada yang eror
ReplyDeletecoba lagi, atau bisa jadi memang gak ada posting terkaitnya yang se-label
DeletePenutupan DIV dan BIF pasti ada yang terhapus tuh mas.
DeleteUdah persis ane bikin seperti contoh diatas mas, tapi kok gk nongol ya?
ReplyDeleteini blog ane:
http://www.itoru.web.id
maaf mas script disable adblock nya kayaknya mengganggu banget padahal di mozilla gak ada adblock yang aktif setiap saya mengunjungi blog mas reload2 terus jadinya ,,, kadan sering disable adblocknya muncul,,, makash sebelumnya
ReplyDeletesama gan padahal ga pake extension apa" jadi ane ubah cssnya jadi display:none :P
DeleteTerima kasih, Gan. Ane berhasil, lebih simple dan bisa responsive.
ReplyDeletekalo buat Olshop gimana ya? dibuat jadi related product gitu, yg tampil cuma thumbnail dengan/atau tanpa titile?
ReplyDeleteSila baca:
Deletehttp://www.contohblog.com/2015/10/membuat-related-post-plus-gambar-bawah-posting-blog.html
Gan, ane udh berhasil. tapi supaya gak jadi warna merah daftar relatedpostnya saat ke sorot mouse gimana ya?
ReplyDeletehapus kode #related-posts a:hover{color:#c00;text-decoration:none}
Deletemaksudnya di sisip link gimana sie mas???
ReplyDeletesiip makasi gan
ReplyDeleteterima kasih gan.
ReplyDeletemas sebelumnya saya ucapkan terimakasih, relatod postnya berhasil dipasang,
ReplyDeletecman ane ada sedikit pertanyaan.
1. bagaimana cara mengganti nomor urut bulet nya dengan angka, 1,2,3, dll
2. bagaimana caranya menampilkan jumlah related postnya jadi 8 atau 10 posting, soalnya kan yg sekarang itu related post yg ditampilkan hanya 6 posting
Makasih banyak kang Cibi :*
ReplyDeleteSaya pakai tema agan. Setingan tema itu menggunakan related post dengan gambar. Bagaimana caranya agar hanya muncul Judul Artikel saja? Makasih
ReplyDeletebehasil gan,,,
ReplyDeleteane modif dikit.
kalo mau ditaruh diatas atau bawah postingan... tinggal copy kode scriptnya di atas atau bawah kode
Terima kasih bos,artikel terkaitnya simple dan cantik..
ReplyDeleteTerima kasih mas..berhasil,
ReplyDeletetapi punya kok relposnya tidak begitu nyambung , mungkin salah label
tapi joss..pokoknya