Cara Membuat Kotak "Baca Juga" di Postingan Blog

Cara Membuat Kotak "Baca Juga" di Postingan Blog

Cara Membuat Kotak "Baca Juga" di Postingan Blog | Halo sobat, kembali lagi dengan admin GudangTutorial yang selalu update postingan baru. Pada postingan kali ini, admin akan membagikan sebuah tutorial untuk membuat kotak "Baca Juga" di postingan blog.

Apa gunanya kotak "Baca Juga" ini? Ini untuk mempermudah pembaca saja. Selain itu, blog juga terlihat lebih elegan. Apakah sobat ingin mencoba membuat juga? Jika sobat ingin membuat kotak "Baca Juga", simak cara membuatnya di bawah ini.


Cara Membuat Kotak "Baca Juga" di Blog:

Tutorial yang admin buat ini khusus untuk pengguna Blogger. Jika sobat menggunakan Blogger, maka harus meletakkan kode-kode berikut tepat di atas </head>.

Tapi, sebelum memasang kode tersebut, lebih baik sobat backup dulu template sobat. Apa tujuannya? Tujuannya untuk mencegah hal yg tidak diinginkan. Seperti error, tinggal di impor aja.

Letakkan kode ini di atas </head>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 selanjutnya...
Cari kode <data:post.body/>
Kalau sudah ketemu, hapus kode dan ganti dengan kode berikut.

<div expr:id='&quot;post1&quot; + 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 == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Baca Juga</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='&quot;post2&quot; + data:post.id' class='artbody' itemprop='articleBody description'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/3);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

Selanjutnya, simpan template.
Jangan lupa tinggalkan komentar kalau berhasil. Jangan lupa share juga ya sobat. Semoga bermanfaat.

Share this :