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 biar 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 AMP Untuk teman 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 HTML
Kemudian letakkan CSS berikut sebelum isyarat ]]></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 isyarat css diatas Terakhir silahkan simpan isyarat berikut setelah isyarat <data:post.body/>. Jika di template yang teman gunakan terdapat beberapa isyarat <data:post.body/>, silahkan teman coba satu persatu sehabis isyarat <data:post.body/>.
<b:if cond='data:view.isPost'> <script> //<![CDATA[ // Related Posts Middle by Info Material APK 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& amp;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 AMP Untuk yang sudah memakai template AMP pada tampilan mobile , teman juga sanggup memasang related post ini khusus tampilan dekstop saja biar supaya template kita tetap valid AMP pada tampilan seluler
Untuk 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 isyarat css diatas Kemudian simpan isyarat berikut sehabis isyarat <data:post.body/>
<b:if cond='data:view.isPost and data:blog.isMobileRequest == "false"'> <script> //<![CDATA[ // Related Posts Middle by Info Material APK 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 kanal melalui seluler (AMP) tidak error. Baca Juga: Cara Membuat Sitemap (Daftar ISI) Seo Responsive di Blog
Akhir 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
0 Response to "Cara Memasang Artikel Terkait Otomatis Di Dalam Postingan Blog"
Post a Comment