Membuat Artikel Terkait (Related Post) Di Tengah Postingan "Baca Juga"

Related Post Di Tengah Postingan

Membuat Artikel Terkait (Baca Juga) Di Tengah Postingan - Membuat artikel melalui platform blogspot atau di wordpress, adalah sarana untuk pengembangan potensi diri juga sebagai berbagi informasi. 

Dalam kaitannya sebagai sarana informasi, artikel yang ditulis sudah pasti sesuatu yang bermanfaat dan enak dibaca serta dimengerti oleh pengunjung. Sehingga untuk mempermudah visitor dan agar visitor betah berlama-lama dalam situs tersebut, salah satunya menyediakan artikel terkait dalam artikel (related post).

Membuat Artikel Terkait (Related Post) Di Tengah Artikel Dengan menyediakan beberapa artikel yang masih memiliki hubungan dengan artikel yang sedang dibaca pengunjung (baik itu yang berada di tengah postingan atau di bawah postingan), tujuannya semua sama, yaitu mempermudah pengunjung dalam mencari informasi yang di tuju.

Dalam Menyediakan related post atau artikel terkait, si empunya postingan berharap pengunjung atau visitor betah dan tidak beranjak dari website. dan mau berlama-lama membaca tulisan yang telah di publish, sehingga menghasilkan kepuasan di hati pengunjung karena telah memperoleh informasi yang dicari.

Untuk artikel terkait yang ada di tengah postingan yang berupa "Baca Juga" sudah lazim digunakan oleh para penulis, karena dipandang oleh penulis, begitu juga oleh Google. 

Membuat Baca juga "Related Post" di tengah Artikel

Ada tiga cara membuat related Post BACA JUGA di tengah postingan. satu cara manual, yang dua cara otomatis

1. Related Post "Baca Juga" Cara Manual

Untuk membuat Related post "Baca juga" secara manual, cukup tambahkan kalimat beserta linknya di tengah-tengah isi artikel.

Contoh seperti di bawah ini :

Cara ini adalah cara manual untuk membuat Baca Juga/Related Post. Sobat bisa mengatur sendiri lokasi penempatannya. Cukup mudah, tinggal tulis teks BACA JUGA, kemudian masukkan url link ke dalam teks tersebut, Selesai.
Cara di atas adalah cara terbaik.

2. Related Post "Baca Juga" Cara Otomatis

Jika sobat malas untuk membuat Related Post (Baca Juga) Di Tengah Postingan secara manual, karena dinilai ribet. gunakan saja cara otomatis.

Cara otomatis ini ada dua, sobat tinggal pilih salah satu atau gunakan semuanya. terserah.
Pastikan artikel sobat sudah ada labelnya, karena untuk related post/baca juga ini akan menampilkan artikel-artikel yang terkait di tengah artikel yang di buat secara otomatis terkait Labelnya

Silakan ikuti caranya di bawah ini.

Cara Otomatis pertama

Membuat Artikel Terkait (Related Post) Di Tengah Postingan "Baca Juga"
Baca Juga di tengah artikel


Tolong baca perlahan, agar tidak gagal fokus. sehingga dapat menimbulkan kesalahan.

Pertama, Silahkan masuk ke blog sobat  >> Kemudian pilih TEMA >> edit HTML.

Silakan cari kode ]]></b:skin> atau </style>
Agar lebih mudah, gunakan CTRL + F

Kemudian copy paste kode di bawah ini tepat di atas ]]></b:skin> atau </style>
/* Related Post (baca juga)*/
.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:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f138';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)}}

Kemudian Silakan cari kode </head> atau  &lt;/head&gt; atau &lt;/head&gt;&lt;!--<head/>
Agar lebih mudah, gunakan CTRL + F.

Letakkan kode dibawah, tepat di atas </head> atau  &lt;/head&gt; atau &lt;/head&gt;&lt;!--<head/>
<b:if cond="data:blog.pageType == &quot;item&quot;">
<script type="text/javascript">
//<![CDATA[
var relatedSimply = new Array(); var relatedSimplyNum = 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]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {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 < 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 < 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('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>


Setelah selesai, terakhir cari, <data:post.body/>
Kemudian kalian ganti <data:post.body/>  dengan kode dibawah ini
<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='related-simplify'>
<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'><p><data:post.body/></p></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/2);
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>
Klik SIMPAN TEMA, Selesai.

Untuk <data:post.body/>, dalam template biasanya lebih dari satu, silahkan sobat cari dan coba masing-masing


Cara Otomatis Kedua

Untuk Cara Membuat Related Post (Baca Juga) otomatis di Dalam Postingan atau artikel yang kedua ini, hampir sama dengan cara yang pertama. 

Untuk cara otomatis kedua ini sangat direkomendasikan, karena sangat bagus dan tidak berada di satu tempat saja. melainkan berpisah-pisah. 

Pertama, Masuk ke blog >> pilih TEMA >> edit HTML

Cari kode ]]></b:skin> atau </style>
gunakan CTRL + F untuk memudahkan pencarian. 

Kemudian copy paste kode di bawah ini tepat di atas ]]></b:skin> atau </style>

/* Related Posts Random blog.suhux.com */
.ignielMultiRelated {background-color:#C0392B; color:#fff; margin:10px 0px; display:-webkit-box;
display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; justify-content:space-between; transition:all .3s ease;}
.ignielMultiRelated:hover {background-color:#252525;}
.ignielMultiRelated .content {padding:10px 15px;}
.ignielMultiRelated .content .text {margin-right:10px; text-decoration:underline;}
.ignielMultiRelated .content a {color:#fff; text-decoration:none; line-height:1.5em;}
.ignielMultiRelated .icon{height:auto; min-width:50px; background:#E74C3C url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%23fff'/%3E%3C/svg%3E") center / 40px no-repeat; transition:all .3s ease;}
.ignielMultiRelated:hover .icon {background-color:#000;}

Setelah itu cari <data:post.body/> 
Kemudian letakkan Kode Javasript di bawah <data:post.body/>

<b:if cond='data:view.isPost'>
  <script> //<![CDATA[
  // Multiple Related Posts by igniel.com
  (function() {
    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}('Z i=["JvlsjEtlqxwtn14wJvlsjEtlqxwv","XFhnxDhkhAjlnTkk","khmBjU","Gnlu","qoL","AnhrjhKkhuhmj","Akrsszruh","oBmohkMFkjoOhkrjhq","mlqhzruh","P","omshnjRhGlnh","vrnhmjzlqh","mhNjDotkomB"];y p=I[i[1]](i[0]),a=C+1,b=p[i[2]]/a;c=V[i[3]]({W:C},(15,H)=>H+1);Y(y d=0;d<c[i[2]];d++){y e=c[d],f=13((b*e)),g=I[i[5]](i[4]);g[i[6]]=i[7];S(p[f][i[8]]==i[9]){p[f][i[11]][i[10]](g,p[f])}Q{p[f][i[11]][i[10]](g,p[f][i[12]])}}',62,68,'|||||||||||||||||x65|_0xe7e5|x74|x6C|x6F|x6E|x72|x69|post|x64|x61|x73|x62|x6D|x70|x20|x79|let|x4E|x63|x67|jumlah|x53|x2D|x75|x66|_0x67aex5|document|x2E|x45|x76|x4D|x78|x52|x50|else|x42|if|x41|x68|Array|length|x71|for|var||||parseInt|x2C|_0x67aex4'.split('|'),0,{}));
  })();
  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}('a 9=["iclLdC","cldkH","xccK","Fd","dwdic","iwlM","kci","zidcklzdc","Ckcx"];a n=o p();a m=0;a f=o p();t E(u){r(a b=0;b<u[9[2]][9[1]][9[0]];b++){a j=u[9[2]][9[1]][b];n[m]=j[9[4]][9[3]];r(a h=0;h<j[9[5]][9[0]];h++){s(j[9[5]][h][9[6]]==9[7]){f[m]=j[9[5]][h][9[8]];m++;I}}}}t G(){a e=o p(0);a g=o p(0);r(a b=0;b<f[9[0]];b++){s(!B(e,f[b])){e[9[0]]+=1;e[e[9[0]]-1]=f[b];g[9[0]]+=1;g[g[9[0]]-1]=n[b]}};n=g;f=e}t B(v,y){r(a q=0;q<v[9[0]];q++){s(v[q]==y){A D}};A J}',49,49,'|||||||||_0x6cd8|var|_0x941ax6|x65|x74|_0x941axa|relatedUrls|_0x941axb|_0x941ax8|x6C|_0x941ax7|x72|x6E|relatedTitlesNum|relatedTitles|new|Array|_0x941axf|for|if|function|_0x941ax5|_0x941axd|x69|x66|_0x941axe|x61|return|contains|x68|true|related_results_labels|x24|removeRelatedDuplicates|x79|break|false|x64|x67|x6B'.split('|'),0,{}));
  //]]> </script>
  <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>
  <script> //<![CDATA[
    // Multiple Related Posts by igniel.com
    (function ignielMultiRelated() {
      var text = 'BACA JUGA:';
      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}('P b=["efcBhE","odczqN","Aeqqo","SnBcnfeCyehnTfedhfz","MyfoGHfefphqoLee","nccfoFVCI","kgmdcspedggujpqchfchjlkgmdcspedggujhfKhjl","kwgmdclkdsEofAuj","jshnhefuj","jl","kwdlkwgmdclkgmdcspedggujnpqcjlkwgmdcl"];v r=D[b[2]]((t[b[0]]-1)*D[b[1]]());v i=0;v x=O[b[4]](b[3]);Q(i<t[b[0]]&&i<x[b[0]]){R(v a=0;a<x[b[0]];a++){x[a][b[5]]=b[6]+W+b[7]+Y[r]+b[8]+t[r]+b[9]+t[r]+b[U];J(r<t[b[0]]-1){r++}X{r=0};i++}}',61,61,'|||||||||||_0x2867|x6E|x61|x6C|x65|x73|x74||x22|x3C|x3E|x70|x69|x72|x63|x6F||x20|relatedTitles|x3D|let|x2F|jumlah|x75|x64|x66|x67|x4D|Math|x68|x48|x79|x53|x4C|if|x78|x41|x71|x6D|document|var|while|for|x2E|x52|10|x54|text|else|relatedUrls'.split('|'),0,{}));
    })();
  //]]> </script>
</b:if>

Klik simpan TEMA dan lihat hasilnya.  
Sumber https://www.igniel.com/2019/01/multiple-artikel-terkait-dalam-post.html 

Hasilnya seperti dalam artikel ini... sobat liat dalam artikel saya ini, pasti ada to tulisan baca juga dengan bentuk terpisah?

Nah itulah yang saya maksud dengan Related Post (baca Juga) secara otomatis tapi tidak berkumpul dali satu bingkai seperti cara otomatis pertama di atas. 

Cukup sekian dulu dari saya, tentang Cara Membuat BACA JUGA/RELATED POST/ARTIKEL TERKAIT di tengah artikel atau tengah postingan blog. Semoga bermanfaat bagi sobat semua. 
data:post.title
Seseorang yang lebih suka menulis dan membagikan apa yang di tuliskan agar dunia tahu.
  • Facebook
  • WhatsApp
  • Instagram
  • Berlangganan update artikel terbaru via email:

    0 Response to "Membuat Artikel Terkait (Related Post) Di Tengah Postingan "Baca Juga""

    Post a comment