Membuat Related Post Di Bawah Postingan

Membuat Related Post Di Bawah Postingan

Salah satu sarana untuk menyarankan supaya pengunjung membaca postingan kita yang lainnya yakni dengan Membuat Related Post Di Bawah Postingan. Ada banyak macam related post atau artikel terkait baik yang beserta thumbnailnya maupun tidak dengan thumbnailnya. Namun khususnya aku lebih menentukan related post yang tanpa thumbnail sebab dengan related post menyerupai ini memuat cukup banyak related post, sehingga menunjukkan lebih banyak alternatif kepada pengunjung blog kita.

Untuk demo Membuat Related Post Di Bawah Postingan, silahkan Anda lihat di kepingan bawah postingan ini. 

Cara Membuat Related Post Di Bawah Postingan silahkan simak langkah-langkahnya di bawah ini:

1. Login ke blog anda.
2. Masuk sajian Layout >> Edit HTML >> Centang kotak 'Expand Widgets Template' >> Cari arahan ini <data:post.body/> (gunakan CTRL + F di keyboard untuk memudahkan pencarian).

3. Letakkan script berikut ini di bawah arahan <data:post.body/> tadi.

 
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div class='similiar'>
 <h3>Baca Juga Artikel Terkait Lainnya:</h3>
 
 <div style='overflow: auto;border: 1px #000000 solid; background-color:#414141; margin: 0px auto; padding: 5px; height: 200px;width: 98%;text-align: left;'>
 <div class='widget-content'>
 <div id='data2007'/><br/><br/>
 <script type='text/javascript'>
 
 var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
 var maxNumberOfPostsPerLabel = 4;
 var maxNumberOfLabels = 10;
 
 maxNumberOfPostsPerLabel = 20;
 maxNumberOfLabels = 3;
 
 
 function listEntries10(json) {
 var ul = document.createElement(&#39;ul&#39;);
 var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
 json.feed.entry.length : maxNumberOfPostsPerLabel;
 for (var i = 0; i &lt; maxPosts; i++) {
 var entry = json.feed.entry[i];
 var alturl;
 
 for (var k = 0; k &lt; entry.link.length; k++) {
 if (entry.link[k].rel == &#39;alternate&#39;) {
 alturl = entry.link[k].href;
 break;
 }
 }
 var li = document.createElement(&#39;li&#39;);
 var a = document.createElement(&#39;a&#39;);
 a.href = alturl;
 
 if(a.href!=location.href) {
 var txt = document.createTextNode(entry.title.$t);
 a.appendChild(txt);
 li.appendChild(a);
 ul.appendChild(li);
 }
 }
 for (var l = 0; l &lt; json.feed.link.length; l++) {
 if (json.feed.link[l].rel == &#39;alternate&#39;) {
 var raw = json.feed.link[l].href;
 var label = raw.substr(homeUrl3.length+13);
 var k;
 for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
 var txt = document.createTextNode(label);
 var h = document.createElement(&#39;b&#39;);
 h.appendChild(txt);
 var div1 = document.createElement(&#39;div&#39;);
 div1.appendChild(h);
 div1.appendChild(ul);
 document.getElementById(&#39;data2007&#39;).appendChild(div1);
 }
 }
 }
 function search10(query, label) {
 
 var script = document.createElement(&#39;script&#39;);
 script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
 + label +
 &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
 script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
 document.documentElement.firstChild.appendChild(script);
 }
 
 var labelArray = new Array();
 var numLabel = 0;
 
 <b:loop values='data:posts' var='post'>
 <b:loop values='data:post.labels' var='label'>
 textLabel = &quot;<data:label.name/>&quot;;
 
 var test = 0;
 for (var i = 0; i &lt; labelArray.length; i++)
 if (labelArray[i] == textLabel) test = 1;
 if (test == 0) {
 labelArray.push(textLabel);
 var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
 labelArray.length : maxNumberOfLabels;
 if (numLabel &lt; maxLabels) {
 search10(homeUrl3, textLabel);
 numLabel++;
 }
 }
 </b:loop>
 </b:loop>
 </script>
 </div>
 </div>
 
 </div>
 </b:if><br/>
 

Anda dapat mengganti goresan pena 'Baca Juga Artikel Terkait Lainnya' dengan kalimat lain contohnya 'posting terkait', 'artikel terkait', dll. 

#414141 untuk warna background kotaknya, silahkan sesuaikan dengan warna template Anda. Jika memerlukan arahan warna silahkan pilih di sini.

20 pertanda banyaknya jumlah postingan per lebelnya.

4. Simpan template. Selesai.

Demikian postingan Membuat Related Post Di Bawah Postingan kali ini mudah-mudahan bermanfaat.

Sumber https://www.kompiajaib.com/

Share this post