Cara Memasang Artikel Terkait Otomatis Di Dalam Postingan Blog artikel terkait di dalam postingan blog yang kita tulis akan menarik dan memudahkan pengunjung blog untuk membaca artikel lainnya yang otomatis di tampilkan di dalam postingan blog menurut label atau kategori artikel yang sedang dibacanya.Dengan adanya related post yang otomatis di tampilkan di tengah artikel ini akan meningkatkan kualitas kualitas internal link blog kita. Dan hal ini akan cukup membantu untuk menurunkan bounce rate blog sobat. Karena tidak sedikit yang menyampaikan bahwa salah satu tekhnik ataupun cara menurunkan bounce rate blog yaitu dengan memasang internal link di dalam postingan atau artikel blog.Cara Membuat atau Memasang Artikel Terkait Otomatis di tengah artikel blog ini aku dapatkan dari blog igniel.com dan naminakiky.com/ yang kemudian aku padukan semoga tampilan dari related post (baca juga) atau artikel terkait ini lebih menarik untuk di lihat dan gampang untuk dipasang atau diterapkan di blog sobat.Untuk melihat hasil dan tampilan dari related post di dalam postingan blog ini, silahkan cek melalui link demo berikut:Demo Memasang Related Post di Tengah Artikel Blog Non AMPUntuk sahabat yang memakai blog non amp dan ingin memasang artikel terkait di tengah postingan yang aku bagikan kali ini, silahkan ikuti tutorial singkatnya berikut ini :Pertama, silahkan login Blogger - Template - Edit HTMLKemudian letakkan CSS berikut sebelum instruksi ]]></b:skin> atau </style>.relatedPhw {display:inline-block;background:#fff;position:relative;padding:0;margin:36px auto 26px auto;width:100%;box-shadow:0 0 20px -5px rgba(0,0,0,0.3);transition:all 0.3s cubic-bezier(.25,.8,.25,1);border-top:2px solid #2B0C93;border-radius:30px;} .relatedPhw .judul {background:#2B0C93;padding:4px 15px;position:absolute;margin:0;font-size:15px;color:#fff;top:-14px;left:2.8%;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.17);border-radius:30px;} .relatedPhw ul {margin:0;padding:0} .relatedPhw ul li {position:relative;list-style:none;padding:0;margin:auto;line-height:1.4em;transition:all .3s} .relatedPhw a{display:block;color:#2B0C93;font-size:15px;padding:5px 15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap} .relatedPhw ul li:first-child {padding-top:0px;} .relatedPhw ul li:last-child {padding-bottom:0px ; border:0px } .relatedPhw ul li:first-child a{margin:15px auto 0 auto;} .relatedPhw ul li:first-child a:hover,.relatedPhw a:hover{color:#000;padding-left:18px}Sobat juga sanggup mengotak-atik tampilan related post ini dengan mengedit instruksi css diatasTerakhir silahkan simpan instruksi berikut setelah instruksi <data:post.body/>. Jika di template yang sahabat gunakan terdapat beberapa instruksi <data:post.body/>, silahkan sahabat coba satu persatu sesudah instruksi <data:post.body/>.<b:if cond='data:view.isPost'> <script> //<![CDATA[ // Related Posts Middle by Pehawe.info var jumlah = 4; eval(function(p,a,c,k,e,r){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--)r[e(c)]=k[c]||e(c);k=[function(e){return r[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 b=["G","H","I","$t","y","J","K","L","z","M","N","<A>","O",\'<B><a z="\',\'" y="\',\'">\',"</a></B>","</A>"];c d=n o;c p=0;c e=n o;q P(v){c r=0;h(;r<v[b[2]][b[1]][b[0]];r++){c k=v[b[2]][b[1]][r];d[p]=k[b[4]][b[3]];c l=0;h(;l<k[b[5]][b[0]];l++){s(k[b[5]][l][b[6]]==b[7]){e[p]=k[b[5]][l][b[8]];p++;Q}}}}q R(){c g=n o(0);c m=n o(0);c i=0;h(;i<e[b[0]];i++){s(!C(g,e[i])){g[b[0]]+=1;g[g[b[0]]-1]=e[i];m[b[0]]+=1;m[m[b[0]]-1]=d[i]}}d=m;e=g}q C(w,D){c j=0;h(;j<w[b[0]];j++){s(w[j]==D){E S}}E T}q U(){c f=F[b[10]]((d[b[0]]-1)*F[b[9]]());c u=0;x[b[12]](b[11]);h(;u<d[b[0]]&&u<V;){x[b[12]](b[13]+e[f]+b[14]+d[f]+b[W]+d[f]+b[X]);s(f<d[b[0]]-1){f++}Y{f=0}u++}x[b[12]](b[Z])}',62,67,'|||||||||||_0x22c4|var|relatedTitles|relatedUrls|indexLookupKey|value|for|||payload|id|errorsCopy|new|Array|relatedTitlesNum|function|signedTransactionsCounter|if||_0x6c56x6|canCreateDiscussions|lookIn|document|title|href|ul|li|contains|forWhat|return|Math|length|entry|feed|link|rel|alternate|random|floor|write|related_results_labels|break|removeRelatedDuplicates|true|false|ignielBacaJuga|jumlah|15|16|else|17|||||'.split('|'),0,{})) //]]></script> <div class='relatedPhw'> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:view.isPost'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=100"'/> </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}('Z(z(p,a,c,k,e,r){e=z(c){A c.K(a)};B(!\'\'.E(/^/,N)){D(c--)r[e(c)]=k[c]||e(c);k=[z(e){A r[e]}];e=z(){A\'\\\\w+\'};c=1};D(c--)B(k[c])p=p.E(M L(\'\\\\b\'+e(c)+\'\\\\b\',\'g\'),k[c]);A p}(\'j a=["k","l",".f-g m, .f-g p","n","o","q","r","s","t","u"];v();(w(){e d=h[a[1]](a[0])[0];i(d){e b=h[a[3]](a[2]);e c=x(b[a[4]]/2);i(b[c][a[5]]==a[6]){b[c][a[8]][a[7]](d,b[c])}y{b[c][a[8]][a[7]](d,b[c][a[9]])}}})();\',C,C,\'||||||||||O|Q|R|J|F|I|H|G|B|Y|14|11|13|16|15||12|P|U|T|S|V|z|W|10\'.X(\'|\'),0,{}))',62,69,'|||||||||||||||||||||||||||||||||||function|return|if|35|while|replace|let|document|body|post|artistTrack|toString|RegExp|new|String|_0x9301||nextIdLookup|indexLookupKey|nextSibling|parentNode|insertBefore|ignielBacaJuga|parseInt|split|var|eval|else|getElementsByClassName|nodeName|br|relatedPhw|length|querySelectorAll'.split('|'),0,{})) //]]> </script> </div> </b:if>Baca Juga: Cara Mempercepat Loading Gambar Blog Memasang Related Post di Tengah Artikel Blog AMPUntuk yang sudah memakai template AMP pada tampilan mobile, sahabat juga sanggup memasang related post ini khusus tampilan dekstop saja semoga supaya template kita tetap valid AMP pada tampilan selulerUntuk yang ingin mencoba memasang artikel terkait ini silahkan simpan css berikut di dalam style amp-custom template blog AMP sobat..relatedPhw {display:inline-block;background:#fff;position:relative;padding:0;margin:36px auto 26px auto;width:100%;box-shadow:0 0 20px -5px rgba(0,0,0,0.3);transition:all 0.3s cubic-bezier(.25,.8,.25,1);border-top:2px solid #2B0C93;border-radius:30px;} .relatedPhw .judul {background:#2B0C93;padding:4px 15px;position:absolute;margin:0;font-size:15px;color:#fff;top:-14px;left:2.8%;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.17);border-radius:30px;} .relatedPhw ul {margin:0;padding:0} .relatedPhw ul li {position:relative;list-style:none;padding:0;margin:auto;line-height:1.4em;transition:all .3s} .relatedPhw a{display:block;color:#2B0C93;font-size:15px;padding:5px 15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap} .relatedPhw ul li:first-child {padding-top:0px;} .relatedPhw ul li:last-child {padding-bottom:0px ; border:0px } .relatedPhw ul li:first-child a{margin:15px auto 0 auto;} .relatedPhw ul li:first-child a:hover,.relatedPhw a:hover{color:#000;padding-left:18px}Sobat juga sanggup mengotak-atik tampilan related post ini dengan mengedit instruksi css diatasKemudian simpan instruksi berikut sesudah instruksi <data:post.body/><b:if cond='data:view.isPost and data:blog.isMobileRequest == "false"'> <script> //<![CDATA[ // Related Posts Middle by Pehawe.info var jumlah = 4; eval(function(p,a,c,k,e,r){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--)r[e(c)]=k[c]||e(c);k=[function(e){return r[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 b=["G","H","I","$t","y","J","K","L","z","M","N","<A>","O",\'<B><a z="\',\'" y="\',\'">\',"</a></B>","</A>"];c d=n o;c p=0;c e=n o;q P(v){c r=0;h(;r<v[b[2]][b[1]][b[0]];r++){c k=v[b[2]][b[1]][r];d[p]=k[b[4]][b[3]];c l=0;h(;l<k[b[5]][b[0]];l++){s(k[b[5]][l][b[6]]==b[7]){e[p]=k[b[5]][l][b[8]];p++;Q}}}}q R(){c g=n o(0);c m=n o(0);c i=0;h(;i<e[b[0]];i++){s(!C(g,e[i])){g[b[0]]+=1;g[g[b[0]]-1]=e[i];m[b[0]]+=1;m[m[b[0]]-1]=d[i]}}d=m;e=g}q C(w,D){c j=0;h(;j<w[b[0]];j++){s(w[j]==D){E S}}E T}q U(){c f=F[b[10]]((d[b[0]]-1)*F[b[9]]());c u=0;x[b[12]](b[11]);h(;u<d[b[0]]&&u<V;){x[b[12]](b[13]+e[f]+b[14]+d[f]+b[W]+d[f]+b[X]);s(f<d[b[0]]-1){f++}Y{f=0}u++}x[b[12]](b[Z])}',62,67,'|||||||||||_0x22c4|var|relatedTitles|relatedUrls|indexLookupKey|value|for|||payload|id|errorsCopy|new|Array|relatedTitlesNum|function|signedTransactionsCounter|if||_0x6c56x6|canCreateDiscussions|lookIn|document|title|href|ul|li|contains|forWhat|return|Math|length|entry|feed|link|rel|alternate|random|floor|write|related_results_labels|break|removeRelatedDuplicates|true|false|ignielBacaJuga|jumlah|15|16|else|17|||||'.split('|'),0,{})) //]]></script> <div class='relatedPhw'> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:view.isPost'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=100"'/> </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}('Z(z(p,a,c,k,e,r){e=z(c){A c.K(a)};B(!\'\'.E(/^/,N)){D(c--)r[e(c)]=k[c]||e(c);k=[z(e){A r[e]}];e=z(){A\'\\\\w+\'};c=1};D(c--)B(k[c])p=p.E(M L(\'\\\\b\'+e(c)+\'\\\\b\',\'g\'),k[c]);A p}(\'j a=["k","l",".f-g m, .f-g p","n","o","q","r","s","t","u"];v();(w(){e d=h[a[1]](a[0])[0];i(d){e b=h[a[3]](a[2]);e c=x(b[a[4]]/2);i(b[c][a[5]]==a[6]){b[c][a[8]][a[7]](d,b[c])}y{b[c][a[8]][a[7]](d,b[c][a[9]])}}})();\',C,C,\'||||||||||O|Q|R|J|F|I|H|G|B|Y|14|11|13|16|15||12|P|U|T|S|V|z|W|10\'.X(\'|\'),0,{}))',62,69,'|||||||||||||||||||||||||||||||||||function|return|if|35|while|replace|let|document|body|post|artistTrack|toString|RegExp|new|String|_0x9301||nextIdLookup|indexLookupKey|nextSibling|parentNode|insertBefore|ignielBacaJuga|parseInt|split|var|eval|else|getElementsByClassName|nodeName|br|relatedPhw|length|querySelectorAll'.split('|'),0,{})) //]]> </script> </div> </b:if> Tag kondisional yang ditandai diatas berfungsi untuk menampikan related post ini pada postingan blog tampilan dekstop saja. Agar supaya dikala blog di susukan melalui seluler (AMP) tidak error.Baca Juga: Cara Membuat Sitemap (Daftar ISI) Seo Responsive di BlogAkhir kata dari aku semoga tutorial Cara Mmbuat atau Memasang Artikel Terkait atau Related yang Otomatis muncul di Dalam Postingan atau artikel Blog ini bermanfaat. Selamat mencoba Sumber https://www.pehawe.info/ Berbagi :
