Cara Menciptakan Arikel Terkait Di Tengah Postingan Blog
Kali ini aku akn memberika artikel wacana Cara Memasang artikel Terkait untuk dipasang di dalam/ ditengah Artikel postingan Blog. Sebelum menunjukkan tutorial nya aku juga akan menunjukkan perhiasan apa keuntungannya jikalau blog anda di pasang artikel terkait dalam atau tengah postingan blog.
- Pertama jikalau anda memasang artikel terkait dalam atau tengah postingan ini pastinya akan memudahkan pengunjung untuk mencari postingan lain yang sesuai dengan yang dicarinya, lantaran artikel tersebut eksklusif ada dalam artikel yang pertama di bacanya.
- Jika artikel anda pendek akan mengisi artikel lebih padat dan menghipnotis dalam seo blog anda
- Menurut aku sendiri ( Newbie Blog ) akan lebih memperindah tampilan postingan :)
Langsung saja aku 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 aba-aba <data:post.body/>
Jika telah anda temukan tinggal tempel aba-aba 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 aba-aba berikut di CSS untuk menciptakan 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
Sumber https://www.idsiteblog.com/
