Membuat Related Post di Dalam Postingan

Sebelumnya Ngonline06 telah berbagi cara membuat related post yang super ringan, maka kali ini akan berbagi cara membuat related post di dalam postingan. Tepatnya, di tengah postingan. Tutorial ini adalah milik bungfrangki.COM.

Pilihan seseorang untuk memasang widget related post di tengah postingan biasanya dilakukan untuk tampil beda atau bahkan jemu dengan tampilan related post yang melulu di bawah postingan. Jika itu yang anda alami, maka segeralah melanjutkan untuk membaca tutorial ini.

Cara Membuat Related Post di Dalam Postingan

OK, tidak pakai lama berikut akan dijelaskan tata cara membuat related post di dalam postingan. Lakukan dengan teliti dan perhatikan dengan baik-baik petunjuknya. Jika perlu dibackup terlebih dahulu template sahabat sebelum melakukan otak-atik.

#Langkah Pertama

Letakkan kode berikut tepat di atas kode </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>');}
Advertisement
//]]>
</script>
</b:if>

#Langkah Kedua

Selanjutnya, silahkan cari kode <data:post.body/> pada template sahabat. Maka akan ada banyak kode seperti itu. Pilih yang kedua. Selanjutnya, hapus kode tersebut dan ganti dengan kode berikut 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

Untuk mempercantik penampilan widget related post-nya, silahkan pasang kode CSS berikut ini, tepatnya di atas kode ]]></b:skin>

/* Related Post di dalam postingan */
.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}

SIMPAN

Tralala sekarang sahabat telah memiliki related post yang berada di tengah postingan secara otomatis. Semoga bermanfaat dan sukses selalu.