Cara Membuat Baca Juga Otomatis di Dalam Postingan

Cara Membuat Baca Juga Otomatis di Dalam Postingan - Menghubungkan satu artikel dengan artikel lainnya akan membuat pembaca artikel menjadi tertarik untuk berlama-lama mampir di blog kita dengan membaca artikel lain yang di sodorkan. Sesuai dengan judul kali ini saya akan membagikan kepada teman-teman cara membuat Baca Juga Otomatis di Dalam Postingan dengan mudah dan cepat.
Cara Membuat Baca Juga Otomatis di Dalam Postingan
Cara Membuat Baca Juga Otomatis di Dalam Postingan

Sekarang ini sudah banyak penyedia jasa template yang menaruh fitur ini di dalam templatenya jadi kita tak harus memasukan sendiri kode ini, namun buat kalian yang geratisan dan suka custom atau utak atik template blog mengkobinasikannya tentu akan lebih menarik. Berikut adalah langkah langkah membuatnya : 

Silakan buka halaman dasbor BLOGGER > PILIH THEMA > EDIT HTML , dan Pastekan kode CSS dibawah ini tepat sebelum </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}

Setelah itu kita berpindah ke bagian HTML template teman-teman, silakan cari kode <data:post.body> , lalu ganti kode tersebut dengan kode dibawah ini.
<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>

Kemudian lanjut pasang kode dibawah ini tepat sebelum </head> atau juga bisa dipasang sebelum </body> 
<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>

Oke langkah Terahir adalah Save Template Teman-Teman dan cek hasilnya. Semogga Berhasil.

13 comments for "Cara Membuat Baca Juga Otomatis di Dalam Postingan"

  1. Ini suport di semua tema premium gk gan

    ReplyDelete
    Replies
    1. untuk thema preimum support kok , keculi sudah ada fiturnya di template agan harus di replace dulu dan mungkin hasil beda karena numpuk css nya.

      Delete
    2. Ok gan ntar dicoba dlu. Jdi biar gk repot cara manual lagi kan hehe

      Delete
  2. Fitur ini wajib banget sih dipasang di setiap blog karena bisa membuat pengunjung semakin tertarik membaca artikel kita yang lainnya hehehe

    ReplyDelete
    Replies
    1. silakan bisa dicoba , terimakasih sudah mampir semoga bermanfaat

      Delete
  3. mantap gan..btw templatenya linkmagz yak
    keren

    ReplyDelete
  4. Nice info nya bg, bisa dicoba ni, izin copas kodenya ya

    ReplyDelete
  5. Info yang bermanfaat.
    Terimah kasih

    ReplyDelete

Post a Comment