Bismillah.. pada kesempatan ini saya akan tulis tentang cara membuat related post atau related artikel atau sering juga di sebut postingan terkait, sekarang related post ini sudah banyak sekali ragamnya, ada yang memakai thumbail gambar dan juga masih banyak setyle yang lainnya.
 |
| Related Post Blogger |
pada postingan ini saya akan membahas cara membuat related post yang sederhana saja yaitu related post tanpa thumbail, oke sobat, untuk membuat related post yang semacam ini langkah pertama seperti biasa yaitu :
- Login ke Blogger
- Terus sobat masuk ke area Design blog/tata letak
- Lalu masuk ke tab Edit HTML
- Terus sobat centang Expand Widget Templates
- Setelah itu sobat cari tag </head>
- Untuk mempercepat pencarian tekan Ctrl+F dan masuka kode yang sobat cari
- Setelah ketemu tag </head> sobat copy kode di bawah dan masukan tepat di atas tag </head>
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px 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 : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;}
#related-posts a:hover {
color : #054474;
text-decoration : none;}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;}
#related-posts li :before
{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4OdwB1DvFPPxgqmwJmEGKwpttGmHz_CSY39Is41QRGVUJ9Txkdx3J1H_Yb-2pSSR0ZRgEczltFHA5MVgAWXEyr8xCbhWf0g-uYj9Q6rQ9ojuQ6XA_RpsrgnNVO-z4GqP22DJoc1zRoxU/s760/contoh-related-post.gif);}
#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>
Save template blog sobat , tidak juga tidak apa apa, langkah selanjutnya sobat cari tag/kode <data:post.body/> setelah ketemu sobat masukan kode di bawah ini di bawah tag <data:post.body/>.
Code Related Post
<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"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
Setelah selesai sobat klik save dan lihat hasilnya. oke sobat samapai disini dulu cara memasang related post pada blogger semoga berhasil, Good Luck Happy Blogging
