Membuat Related Post Di Dalam Postingan
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 usang berikut akan dijelaskan tata cara menciptakan related post di dalam postingan. Lakukan dengan teliti dan perhatikan dengan baik-baik petunjuknya. Jika perlu dibackup terlebih dahulu template sahabat sebelum melaksanakan otak-atik.
#Langkah Pertama
Letakkan arahan berikut sempurna di atas arahan </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 arahan <data:post.body/> pada template sahabat. Maka akan ada banyak arahan ibarat itu. Pilih yang kedua. Selanjutnya, hapus arahan tersebut dan ganti dengan arahan 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 arahan CSS berikut ini, tepatnya di atas arahan ]]></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 kini sahabat telah mempunyai related post yang berada di tengah postingan secara otomatis. Semoga bermanfaat dan sukses selalu. Sumber https://www.blog.pustakamadrasah.web.id/