Membuat "Baca Juga" Dalam Postingan Blog,

Oleh Imam Khoiruddin

Kamis, 19 Agustus 2021

Bagikan :

Tweet

 

  Agar pembaca mudah menemukan artikel yang sejenis, alangkah baiknya kita berikan kemudahan, caranya bisa kita berikan botton pencarian di dalam artikel, Penasaran gimana Caranya Membuat "Baca Juga" Dalam Postingan Blog,  ikuti langkah berikut :

1. Wajib hukumnya kalau mau membuat ini adalah punya dan login ke akun blogger

2. Masuk ke Tema lalu Edit HTML, cari kode </head> atau &lt;/head&gt; kemudian letakkan kode dibawah ini diatas </head> atau &lt;/head&gt;

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

3. Selanjutnya adalah cari kode <data:post.body/> atau &lt;data:post.body/&gt; copykan kode berikut diatasnya;

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

4. Agar lebih menarik tampilannya bisa di sisipkan kode CSS berikut ini di atas kode </style> atau ]]></b:skin>

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

5. Jangan lupa Save Templatte.

Tag : Tutorial