Kali ini saya akn memberika artikel tentang Cara Memasang artikel Terkait untuk dipasang di dalam/ ditengah Artikel postingan Blog. Sebelum memberikan tutorial nya saya juga akan memberikan tambahan apa manfaatnya jika blog anda di pasang artikel terkait dalam atau tengah postingan blog.
- Pertama jika anda memasang artikel terkait dalam atau tengah postingan ini pastinya akan memudahkan pengunjung untuk mencari postingan lain yang sesuai dengan yang dicarinya, sebab artikel tersebut langsung ada dalam artikel yang pertama di bacanya.
- Jika artikel anda pendek akan mengisi artikel lebih padat dan mempengaruhi dalam seo blog anda
- Menurut saya sendiri ( Newbie Blog ) akan lebih memperindah tampilan postingan :)
Langsung saja saya memberikan Cara Membuat Arikel Terkait Di Tengah Postingan Blog simak dan copas saja apa yang anda perlukan dari script dibawah ini :
Masuk ke blogger lanjut tema lanjut Edit HTML cari kode <data:post.body/>
Jika telah anda temukan tinggal tempel kode berikut dibawah nya.
*******************************
<!--Start - prefix code -->
<b:if cond='data:blog.pageType == "item"'>
<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>
</b:if>
<br/>
Judul : <span itemprop='itemreviewed'><b><data:post.title/></b></span><br/>
link : <a expr:href='data:post.url'><data:post.title/></a><br/>
<div expr:id='"post1" + data:post.id'/>
<div class='related-post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<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>
</b:if>
<h4>Baca juga</h4>
<script type='text/javascript'>removeRelatedDuplicates();printRelatedLabels();</script>
</div>
<div expr:id='"post2" + data:post.id'><br/></div>
<script type='text/javascript'>
var obj0=document.getElementById("post1<data:post.id/>");var obj1=document.getElementById("post2<data:post.id/>");var s=obj1.innerHTML;var t=s.substr(0,s.length/3);var r=t.lastIndexOf("<br>");if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>
<h1><data:blog.pageName/></h1>
<!--End - prefix code -->
Seteh itu lanjut pasang kode berikut di CSS untuk membuat tampilan rapih nya
.related-post {
margin:15px 0px 0px;
border:1px solid #e5e5e5;
padding:10px;
background:#f6f6f6;
}
.related-post h4 {
font-size:14px;
margin:0 0 .5em;
text-transform:uppercase;
}
.related-post-style-2 {
margin:0 0 0 0 !important;
padding:0 0 0 0 !important;
list-style:none;
}
.related-post-style-2 li {
margin:0 0 0 0;
padding:0 0 0 0;
}
.related-post-style-2 li {
padding:5px 0 !important;
border-top:1px solid #eee;
overflow:hidden;
}
.related-post-style-2 li:first-child {border-top:none}
.related-post-style-2 .related-post-item-thumbnail {
width:40px;
height:40px;
max-width:none;
max-height:none;
background:#fff;
border: 1px solid #e5e5e5;
padding:6px;
float:left;
margin:2px 8px 0 0;
}
.related-post-style-2 .related-post-item-title {
font:bold 14px Arial, sans-serif;
}
.related-post-style-2 .related-post-item-summary {
display:block;
overflow:hidden;
font-size:11px;
}
.related-post-style-2 .related-post-item-more {}
Terimakasih selamat mencoba
Advertisement
