Contoh Related Posts blog ini |
ujungkelingking - Cara Membuat Related Post Tanpa Link Sumber
Hampir semua tutorial tentang cara membuat related post atau artikel terkait yang saya datangi pada akhirnya tetap memunculkan link sumber pemilik blog.
Link ini disisipkan atau mungkin dimodifikasi sehingga tidak tampak oleh mata awam seperti saya ini.
Namun, berbekal petunjuk dari mbah Google akhirnya saya bisa menemukan cara membuat related post tanpa link sumber.
Bagi yang blognya sudah terpampang 'fitur' ini tentu artikel ini sudah basi alias tidak lagi diperlukan. Namun semoga ini bisa menjadi solusi bagi yang masih kebingungan.
Bagi yang blognya sudah terpampang 'fitur' ini tentu artikel ini sudah basi alias tidak lagi diperlukan. Namun semoga ini bisa menjadi solusi bagi yang masih kebingungan.
Berikut adalah caranya:
1. Dari dashboard blog Anda, masuk ke menu 'Template', lalu pilih 'Edit HTML'
2. Cari kode </head>, Anda bisa menggunakan bantuan tombol Ctrl+F
3. Pastekan kode berikut di atas kode </head>
2. Cari kode </head>, Anda bisa menggunakan bantuan tombol Ctrl+F
3. Pastekan kode berikut di atas 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://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>');
}
//]]>
</script>
4. Cari kode <data:post.body/>, Anda bisa menggunakan bantuan tombol Ctrl+F
5. Pastekan kode berikut di bawah kode <data:post.body/>. Jika ada lebih dari satu, pilih yang kedua. Anda bisa melihatnya dari urutan baris dari nomor yang ada di sebelah kiri.
<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<h2>Other Recommended Posts on <b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/></b:if></b:loop> </h2>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div></b:if>
6. Simpan template
Anda juga bisa melakukan sedikit modifikasi di sini:
Anda juga bisa melakukan sedikit modifikasi di sini:
- Yang berwarna merah bisa diganti dengan jenis huruf yang Anda sukai
- Yang berwarna biru adalah ukuran huruf pada judul "Related Post" dan artikel yang ada di bawahnya
- Yang berwarna hijau adalah judul yang bisa Anda ganti, misalnya "Artikel Terkait" atau "Artikel Menarik Lainnya", dsb.
- Yang berwarna jingga adalah banyaknya artikel terkait yang akan muncul dalam postingan tersebut
Demikian, semoga berguna.
Saya ambilnya dari sini: http://contohblognih.blogspot.com/2013/10/cara-membuat-related-post-di-blog.html
Written by: Pri Enamsatutujuh
UJUNGKELINGKING, at Tuesday, January 28, 2014