Cara Membuat Baca Juga Secara Otomatis di Tengah Postingan Blog

Cara Membuat Baca Juga Secara Otomatis di Tengah Postingan Blog - Halo sobat.. Pada kesempatan kali saya akan memberikan tutorial tentang bagaimana cara menampilkan artikel terkait atau baca juga di tengah postingan blog secara otomatis. Artikel terkait yang berada di setiap postingan blog akan membuat pengunjung blog dengan mudah berselancar tanpa harus mencari artikel dengan label yang sama satu persatu.

Cara membuat artikel terkait di tengah postingan blog
Cara membuat artikel terkait di tengah postingan blog


Untuk skrip yang akan saya gunakan dibawah ini merupakan skrip artikel milik igniel.com. Tanpa berlama-lama lagi mari kita mulai tutorialnya.


Membuat Baca Juga di Tengah Postingan Artikel


1. Silahkan masuk ke darboard blogger terlebih dahulu.

2. Pilih Tema.

Pilih Tema
Pilih Tema


3. Pilih Edit HTML.

Pilih Edit HTML
Pilih Edit HTML


4. Tekan Ctrl + F lalu tulis <data:post.body/> selanjutnya tekan Enter.

Cari code <data:post.body/>
Cari code <data:post.body/>

Catatan : biasanya terdapat lebih dari satu kode <data:post.body/> , oleh karena itu silahkan coba satu persatu. 

5. Salin skrip di bawah ini dan letakkan di bawah kode <data:post.body/>.


<b:if cond='data:view.isPost'>
  <script> //<![CDATA[
    var jumlah = 4;
    eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('c a=["\\e\\d\\s\\Q\\f\\C","\\d\\s\\f\\h\\W","\\B\\d\\d\\I","\\V\\f","\\f\\k\\f\\e\\d","\\e\\k\\s\\S","\\h\\d\\e","\\r\\e\\f\\d\\h\\s\\r\\f\\d","\\C\\h\\d\\B","\\h\\r\\s\\I\\F\\U","\\B\\e\\F\\F\\h","\\m\\O\\e\\l","\\T\\h\\k\\f\\d","\\m\\e\\k\\l\\m\\r\\K\\C\\h\\d\\B\\P\\w","\\w\\K\\f\\k\\f\\e\\d\\P\\w","\\w\\l","\\m\\D\\r\\l\\m\\D\\e\\k\\l","\\m\\D\\O\\e\\l"];c g=x y();c v=0;c j=x y();z R(H){u(c b=0;b<H[a[2]][a[1]][a[0]];b++){c p=H[a[2]][a[1]][b];g[v]=p[a[4]][a[3]];u(c q=0;q<p[a[5]][a[0]];q++){A(p[a[5]][q][a[6]]==a[7]){j[v]=p[a[5]][q][a[8]];v++;18}}}}z X(){c n=x y(0);c o=x y(0);u(c b=0;b<j[a[0]];b++){A(!J(n,j[b])){n[a[0]]+=1;n[n[a[0]]-1]=j[b];o[a[0]]+=1;o[o[a[0]]-1]=g[b]}};g=o;j=n}z J(G,L){u(c t=0;t<G[a[0]];t++){A(G[t]==L){M 1b}};M Y}z 19(){c i=N[a[10]]((g[a[0]]-1)*N[a[9]]());c b=0;E[a[12]](a[11]);Z(b<g[a[0]]&&b<1c){E[a[12]](a[13]+j[i]+a[14]+g[i]+a[15]+g[i]+a[16]);A(i<g[a[0]]-1){i++}1a{i=0};b++};E[a[12]](a[17])}',62,75,'||||||||||_0x22c4|_0x6c56x6|var|x65|x6C|x74|relatedTitles|x72|_0x6c56x11|relatedUrls|x69|x3E|x3C|_0x6c56xa|_0x6c56xb|_0x6c56x7|_0x6c56x8|x61|x6E|_0x6c56xf|for|relatedTitlesNum|x22|new|Array|function|if|x66|x68|x2F|document|x6F|_0x6c56xd|_0x6c56x5|x64|contains|x20|_0x6c56xe|return|Math|x75|x3D|x67|related_results_labels|x6B|x77|x6D|x24|x79|removeRelatedDuplicates|false|while|||||||||break|ignielBacaJuga|else|true|jumlah'.split('|'),0,{}));
  //]]></script>
  <div class='ignielRelatedMiddle'>
    <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
        <b:if cond='data:view.isPost'>
          <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=100&quot;'/>
        </b:if>
      </b:loop>
    </b:if>
    <span class='judul'><span>Baca Juga</span></span>
    <script> //<![CDATA[
      eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('L b=["\\i\\p\\e\\i\\a\\c\\K\\a\\c\\m\\d\\a\\h\\J\\i\\h\\h\\c\\a","\\p\\a\\d\\S\\c\\a\\s\\a\\e\\d\\j\\v\\r\\R\\c\\m\\j\\j\\t\\m\\s\\a","\\x\\n\\f\\j\\d\\y\\o\\f\\h\\r\\u\\o\\k\\Q\\u\\x\\n\\f\\j\\d\\y\\o\\f\\h\\r\\u\\n","\\P\\D\\a\\k\\r\\w\\a\\c\\a\\E\\d\\f\\k\\F\\c\\c","\\c\\a\\e\\p\\d\\G","\\e\\f\\h\\a\\t\\m\\s\\a","\\C","\\i\\e\\j\\a\\k\\d\\v\\a\\H\\f\\k\\a","\\n\\m\\k\\a\\e\\d\\t\\f\\h\\a","\\e\\a\\I\\d\\w\\i\\o\\c\\i\\e\\p"];O();(N(){A q=z[b[1]](b[0])[0];B(q){A g=z[b[3]](b[2]),l=M(g[b[4]]/2);B(g[l][b[5]]==b[6]){g[l][b[8]][b[7]](q,g[l])}T{g[l][b[8]][b[7]](q,g[l][b[9]])}}})()',56,56,'||||||||||x65|_0x9301|x6C|x74|x6E|x6F|_0xa209x2|x64|x69|x73|x72|_0xa209x3|x61|x70|x62|x67|_0xa209x1|x79|x6D|x4E|x20|x42|x53|x2E|x2D|document|let|if|x50|x75|x63|x41|x68|x66|x78|x4D|x52|var|parseInt|function|ignielBacaJuga|x71|x2C|x43|x45|else'.split('|'),0,{}));
    //]]> </script>
  </div>
</b:if>


6. Selanjutnya tekan lagi Ctrl + F lalu ketikkan </style> selanjutnya Enter.


Cari code </style>
Cari code </style>


7. Letakkan skrip dibawah ini di atas kode </style>.


.ignielRelatedMiddle {background-color:#f5f5f5; display:block; margin:20px 0px; padding:10px 20px;}
.ignielRelatedMiddle .judul {color:#ff5000; font-size:120%; font-weight:600; text-transform:uppercase}
.ignielRelatedMiddle ul {margin:10px 0px 0px !important; padding:0px !important;}
.ignielRelatedMiddle ul li {list-style:none; padding:5px 0px !important; border-bottom:2px dotted #aaa !important; text-align:left !important; line-height:1.25em !important;}
.ignielRelatedMiddle ul li:first-child {padding-top:0px; !important;}
.ignielRelatedMiddle ul li:last-child {padding-bottom:0px !important; border:0px !important}
.ignielRelatedMiddle ul li a:before{content:&#39;&#39;; display:inline-block; width:17px; height:17px; margin-right:3px; vertical-align:-3px; background:url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;%23333&#39;/%3E%3C/svg%3E&quot;) center / 20px no-repeat;}

Tempelkan code yang tersedia diatas code </style>
Tempelkan code yang tersedia diatas code </style>

8. Selanjutnya tekan icon save yang berada di sebalah kanan atas.

Save untuk menyimpan
Save untuk menyimpan

Baca juga : 2 Cara Mudah Membuat Halaman Kontak Di Blog 2022


9. Silahkan Anda cek salah satu postingan di blog. Apabila sudah muncul seperti dibawah ini maka artikel terkait ditengah blog sudah selesai dibuat.

Tampilan baca Juga di tengah postingan blog
Tampilan baca Juga di tengah postingan blog

Sekian tutorial tentang cara menambahkan artikel terkait ditengah blog. Semoga artikel ini bermanfaat. Sampai jumpa di tutorial selanjutnya ya.

Update :

Apabila ingin membuat baca juga seperti di template ini maka salin dan pastekan script dibawah ini dibawah kode <data:post.body/>.
<b:if cond='data:view.isPost and !data:view.isPreview'>
<div class='pRelate' id='pRelated'>
<script>/*<![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 cond='data:post.labels'>
<b:loop index='i' values='data:post.labels' var='label'>
<b:if cond='data:i&lt;1'>
<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;' rel='preload'/>
</b:if>
</b:loop>
</b:if>
<b>Baca Juga : </b>
<script>removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
<script>/*<![CDATA[*/ function insertAfter(tbh,tgt) {var prt = tgt.parentNode; if (prt.lastChild == tgt) {prt.appendChild(tbh);} else {prt.insertBefore(tbh,tgt.nextSibling);}} var tgt = document.getElementById("postBody");var midAd3 = document.getElementById("pRelated"); var showAd3 = tgt.getElementsByTagName("p"); if (showAd3.length > 0) {insertAfter(midAd3,showAd3[3]);}; /*]]>*/</script>
</b:if>

Baca Juga :
Guru, Desainer, Programmer

6 komentar

  1. Tampilan Baca juga pada blog mas ini, gimana ya? Apakah masih sama kodenya? Kebetulan template kita sama. Jd gw pengen tampilan "Baca Juganya" sama persis punya mas sendiri(tampilannya simpel dan ga norak).terimakasih.
  2. Halo mas, sudah saya update artikelnya ya,, bisa dipakai kodenya untuk membuat baca juga seperti yang saya gunakan di template ini
    1. Terimakasih mas...salam dan sukses selalu
  3. terimakasih banyak kang
  4. Halo mas, saya udah pake script update nya, karena template nya sama.
    Tapi ko dibawah postingan ya keluarnya, bukan di tengah.
    Terima kasih sebelumnya..
  5. Halo mas, apakah munculnya di akhir artikel? Jika iya, kemungkinan konten masnya terlalu sedikit, usahakan konten lebih dari 500 - 1000 kata