Cara membuat Baca Juga di Blog secara Otomatis

Jumpa lagi dengan ana dalam tutorial blog untuk sahabat semua dimana saja berada. Pada kesempatan kali ini ana mamu berbagi tips ulangan yaitu tentang membuat kolom Baca Juga di tengah postingan artikel blog sahabat semuanya.

Untuk bisa mendapatkan tampilan terbaik pada Kolom Baca Juga ada baiknya jumlah artikel yang kita buat harus diatas 400 kata agar hasilnya menarik dan tidak mengganggu penampilan blog tersebut, sehingga artikel kolom Baca Juga jadi tidak menggangu dan membuat artikel yang kita tulis berantakan hasilnya.

Untuk mempersingkat waktu yuk kita mulai bersama tutorialnya di bawah ini, ikuti dan sambil dipraktekkan agar bisa langsung nampak hasilnya.

Pertama sahabat masuk ke mode html pada blog sahabat semua untuk tahap ini ana anggap sahabat sudah paham. dan letakkan kode dibawah ini tepat sebelum kode </head>

&lt;!-- baca juga head --&gt;
&lt;b:if cond=&#039;data:blog.pageType == &amp;quot;item&amp;quot;&#039;&gt;
&lt;script type=&#039;text/javascript&#039;&gt;
//&lt;![CDATA[
var relatedSimply = new Array(); var relatedSimplyNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i &lt; json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k &lt; entry.link.length; k++) { if (entry.link[k].rel == &#039;alternate&#039;) {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i &lt; relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedSimply[i];}} relatedSimply = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j &lt; a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedSimply.length - 1) * Math.random()); var i = 0; document.write(&#039;&lt;ul&gt;&#039;); while (i &lt; relatedSimply.length &amp;&amp; i &lt; 20) { document.write(&#039;&lt;li&gt;&lt;a href=&quot;&#039; + relatedUrls[r] + &#039;&quot;&gt;&#039; + relatedSimply[r] + &#039;&lt;/a&gt;&lt;/li&gt;&#039;); if (r &lt; relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write(&#039;&lt;/ul&gt;&#039;);}
//]]&gt;
&lt;/script&gt;
&lt;/b:if&gt;
&lt;!--end bacajuga1--&gt;

Kedua memasang CSS dibawah ini sebelum Kode ]]></b:skin> atau </style>

/*baca juga 2 css*/
/* Related Post Style 1 */
.related-simplify{position:relative;padding:0;margin:15px auto;width:100%;}
.related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}
.related-simplify ul li:nth-child(odd){background:#fefefe}
.related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.related-simplify ul li:before{content:&#039;f138&#039;;font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}
.related-simplify ul li:hover:before{content:&#039;f138&#039;;font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#0383d9;text-decoration:underline}
.related-simplify ul li:nth-child(n+4) {display:none;}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}
/*end baca juga 2*/

Ketiga silahkan cari Kode <data:post.body/> pilihyang kedua ya lalu ganti dengan Kode dibawah ini.

&lt;!-- baca juga 3 --&gt;
&lt;div expr:id=&#039;&amp;quot;post1&amp;quot; + data:post.id&#039;/&gt;
&lt;div class=&#039;related-simplify&#039;&gt;
&lt;b:if cond=&#039;data:post.labels&#039;&gt;
&lt;b:loop values=&#039;data:post.labels&#039; var=&#039;label&#039;&gt;
&lt;b:if cond=&#039;data:blog.pageType == &amp;quot;item&amp;quot;&#039;&gt;
&lt;script expr:src=&#039;&amp;quot;/feeds/posts/default/-/&amp;quot; + data:label.name + &amp;quot;?alt=json-in-script&amp;amp;callback=related_results_labels&amp;amp;max-results=3&amp;quot;&#039; type=&#039;text/javascript&#039;/&gt;
&lt;/b:if&gt;
&lt;/b:loop&gt;
&lt;/b:if&gt;
&lt;a href=&#039;https://www.moshareid.com&#039;&gt;&lt;h4&gt;Baca Juga&lt;/h4&gt;&lt;/a&gt;
&lt;script type=&#039;text/javascript&#039;&gt;
removeRelatedDuplicates();
printRelatedLabels();
&lt;/script&gt;
&lt;/div&gt;
&lt;div expr:id=&#039;&amp;quot;post2&amp;quot; + data:post.id&#039;&gt;&lt;p&gt;&lt;data:post.body/&gt;&lt;/p&gt;&lt;/div&gt;
&lt;script type=&#039;text/javascript&#039;&gt;
var obj0=document.getElementById(&amp;quot;post1&lt;data:post.id/&gt;&amp;quot;);
var obj1=document.getElementById(&amp;quot;post2&lt;data:post.id/&gt;&amp;quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&amp;quot;&amp;lt;br&amp;gt;&amp;quot;);
if(r&amp;gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
&lt;/script&gt;
&lt;!-- end baca juga 3 --&gt;

Keempat terakhir silahkan Simpan Template dan lihat Hasilnya. Pastikan di Blog sahabat sudah terpasang Font Awesome agar icon bisa muncul.

Demikian tutorial cara membuat link Baca Juga di dalam postingan blog secara otomatis. Semoga artikel ini bermanfaat untuk sahaba setia dimana saja berada. Salam sukses selalu dan terus berkarya untuk kemajuan blogger semua.