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

Related Post Di Tengah Postingan

Cara Membuat Artikel Terkait (Baca Juga) Di Tengah Postingan  – Membuat artikel melalui platform blogspot atau di wordpress, adalah sarana untuk mengembangkan potensi diri juga sebagai ajang berbagi informasi. Artikel yang ditulis pasti sesuatu yang bermanfaat dan enak dibaca serta dipahami oleh pengunjung. Sehingga untuk mempermudah pengunjung dan agar pengunjung 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 :

Contoh seperti di bawah ini :

Baca Juga :  Cara Memasang Iklan AdSense di Tengah Artikel Postingan Blog

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

Similar Submit atau Baca Juga

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 di bawah, 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 akan membuat soabt puas…

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. 

You May Also Like

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *