Cara Menciptakan Related Post Muncul Di Dalam Postingan

Sebelumnya Portal Blogspot pernah menulis perihal Panduan Membuat Artikel di Blogger, nah kali ini akan membuatkan sedikit perihal cara menciptakan related post sanggup muncul dalam postingan. Tepatnya untuk letak related post tersebut berada pada tengah postingan. Dengan adanya artikel terkait di tengah-tengah postingan sanggup menciptakan pageviews blog semakin bertambah dan juga mempermudah pengunjung untuk menjelajahi isi konten blog sebanyak mungkin.

Dengan memasang artikel terkait didalam postingan, alasannya supaya tampilan blog berbeda dari yang lain. Sebab kebanyakan blog menampilkan artikel terkait sehabis artikel blog. Tutorial ini aku dapatkan diblog milik bung frangki.

Related post atau artikel terkait ini walaupun diletakkan didalam artikel fungsinya masih sama yakni menampilkan artikel yang berkaitan dengan label yang sama. Untuk pemasangannya simak dibawah ini.

Cara Membuat Related Post Muncul di Dalam Postingan

Sebelum kalian memasukkan beberapa aba-aba yang ada dibawah ini, alangkah baiknya membackup terlebih dahulu template milik anda.

#Langkah Pertama, Buka template anda lalu letakkan aba-aba javascript dibawah ini sempurna diatas aba-aba </head>

<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>

#Langkah Kedua Cari aba-aba <data:post.body/> pilih yang kedua lalu hapus dan ganti dengan aba-aba dibawah ini.

<div expr:id='"post1" + data:post.id'/>
<div class='post-terkait'>
<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=3"' 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' class='artbody' itemprop='articleBody description'><data:post.body/></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>

#Langkah Ketiga Biar tampilan related post didalam postingan terlihat makin menarik, copy aba-aba CSS dibawah ini dan letakkan sempurna diatas kode </style> atau ]]></b:skin>

/* Related Post di dalam postingan by Bung Frangki */
.post-terkait {position:relative;background:#fff;padding:0;margin:10px 15px 0 0;float:left;width:165px;border:1px solid #1b71bc}
.post-terkait h4{background:#1b71bc !important;padding:5px 0 !important;margin:0;text-align:center !important;font-size:15px !important;font-weight:400;text-transform:uppercase;color:#fff !important}
.post-terkait ul {margin:0;padding:0}
.post-terkait ul li {list-style:none !important;padding:7px 0;margin:0 7px;border-bottom:2px dotted #ddd;line-height:1.4em !important;text-align:left !important}
.post-terkait ul li:last-child{border:none !important}
.post-terkait a {color:#1b71bc;font-size:13px !important}
.post-terkait a:hover {text-decoration:underline}

#Langkah Terakhir
Simpan template kalian dan lihat dipostingan apakah sudah sesuai dengan keinginan.

Demikian cara menciptakan artikel terkait muncul di dalam postingan, semoga dengan adanya tutorial ini sanggup menciptakan pengunjung semakin betah berlama-lama diblog anda.

Sumber: https://mamankdzgn.blogspot.com//search?q=membuat-related-pos-dalam-postingan