-->






Cara membuat Related post di bawah postingan blogger

Related Post adalah alat untuk menampilakn judul postingan yang lain yang masih ada hubungan nya dengan judul / postingan yang saat ini sedang di buka/masih dalam kategori/label yang sama.
Related post bisa di sebut juga dengan artikel terkait dengan fungsi untuk mengelompokan postingan-postingan yang masih 1 label.

fungsi yang lain dari Related Post Adalah memudahkan untuk pengunjung blog supaya lebih cepat mempelajari apa yang lagi di cari pada suatu blog, 

Cara membuat related post
1. Buka blog anda
2. ke dashboard
3. pilih template
4. lalu klik edit HTML
5. copy kode di bawah ini dan letahkan 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>


6. copy kode di atas lalu letahkan ke HTLM tepat di atas kode </head>
7. lalu klik prantinjau dulu setelah tidak ada masalah kembali klik edit HTML 
8. Lalu copy lagi kode di bawah ini 

<br/> <br/> <b:if cond='data:blog.pageType == "item"'> 
<div id="related-posts"> 
<font face='Arial' size='3'> <b> Related Posts: </ b> </ font> <font color='#FFFFFF'> <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"'> 
<expr skrip : src = '"/ feeds/posts/default/- /" + Data: "? Alt = json-in-script & callback = related_results_labels & max-results = 5" label.name + ' type = 'text / javascript' /> </ b: if> </ b: lingkaran> </ font> 
<script type='text/javascript'> removeRelatedDuplicates (); printRelatedLabels (); 
</ script> 
</ div> </ b: if>

9. copy kode di atas dan letahkan di HTML tepat di bawah kode < data: post.body />
keterangan : 
kode < data: post.body /> ada 3 buah dan pilih kode yang ke 3
10. lalu klik pratinjau dulu dan lihat hasilnya jika tidak ada masalah pada HTML template anda baru silahkan klik simpan
11. selesai 
dan silahkan cek hasil kerja anda dengan cara membuka salah satu postingan anda jika sudah muncul deretan alamat postingan anda yang lain nya di bawah tulisan Related Post artinya pembuatan related post sudah benar.

Demikianlah panduan Blogger wonogiri tentang cara membuat related post di bawah postingan 
Komentar

Tampilkan

No comments:

Post a Comment

sejarah

+