›

Cara Membuat Multi Related Post (Artikel Terkait) Otomatis di Postingan Blogger

1/29/2020 Add Comment Edit
komputerdia.com - Automatic Multi related post atau dalam bahasa indonesia dikenal dengan istilah Multi Artikel Terkait Otomatis merupakan salah satu cara atau teknik yang bisa kalian lakukan untuk membuat seo onpage pada blog yang kalian kelola. Multi related post ini mempunyai fungsi sebagai sebagai widget blog yang menampilkan daftar url atau link artikel didalam suatu postingan yang mempunyai kategori pembahasan yang sama, sehingga para pengunjung blog dapat melakukan ekplorasi serta dapat memberikan efek yang baik untuk blog yang kita kelola

Related post atau artikel terkait jenis ini pada umumnya sering kita jumpai pada blog yang menggunakan platform wordpress, namun untuk kaian yang menggunakan platform blogspot pun dapat mengguakan gaya related post tersebut dengan melakukan modifikasi pada menu edit html

Dengan memasang script multi artikel terkait otomatis pada blog, kalian tidak perlu lagi melakukan pembuatan artikel terkait secara manual, namun artikel terkait ini secara otomatis akan terbentuk dengan sendirinya sesuai dengan label atau kategori yang sama pada artikel tersebut. Berikut ini adalah cara yang bisa kalian lakukan untuk membuat multi related post atau multi artikel terkait di blogger



Cara Membuat Multi Related Post Otomatis di Postingan Blogger

Membuat Multi Related Post di Postingan Blog

1. Membuat Multi Related Post Blogger #1

Cara Membuat Multi Related Post (Artikel Terkait) Otomatis di Postingan Blogger
  • Langkah pertama silahkan kalian login ke akun blogger, kemdian pilih menu tema dan klik tombol edit html
  • Setelah berada dihalaman menu edit html, silahkan kalian cari kode </head> dan tempelkan kode dibawah ini tepat di atas kode </head>
 <style>
/* Multiple Related Posts by tamboenman.xyz */
.tamboenmanMultiRelated {background-color:#DAA520; 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;}
.tamboenmanMultiRelated:hover {background-color:#C0392B;}
.tamboenmanMultiRelated .content {padding:10px 15px;}
.tamboenmanMultiRelated .content .text {margin-right:10px; text-decoration:uppercase;}
.tamboenmanMultiRelated .content a {color:#fff; text-decoration:none; line-height:1.5em;}
.tamboenmanMultiRelated .icon{height:auto; min-width:50px; background:#FFD700 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;}
.tamboenmanMultiRelated:hover .icon {background-color:#e74c3c;}
</style>
  • Setelah itu silahkan kalian cari kode <data:post.body/>, biasanya didalam suatu template blogger terdapat 3 (tiga) kode yang sama. Untuk melakukan penerapan kode multi related post silahkan kalian gunakan kode <data:post.body/> urutan yang kedua (2)
  • Setelah kode tersebut kalian temkan, langkah selanjutnya silahkan kalian copy kode dibawah ini dan letakkan tepat dibawah kode <data:post.body/> yang kedua (2)
 <b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<![CDATA[
// Multi Related Post
(function() {var jumlah = 5;let post = document['querySelectorAll']('.post-body br, .post-body p'),a = jumlah + 1,b = post['length'] / a;c = Array['from']({length: jumlah}, (redfx, blufx) => blufx + 1);
for (let d = 0; d < c['length']; d++) {let e = c[d],f = parseInt((b * e)),g = document['createElement']('div');g['className'] = 'tamboenmanMultiRelated';if (post[f]['nodeName'] == 'P') {post[f]['parentNode']['insertBefore'](g, post[f])} else {post[f]['parentNode']['insertBefore'](g, post[f]['nextSibling'])}}})();
var relatedTitles = new Array();var relatedTitlesNum = 0;var relatedUrls = new Array();function related_results_labels(nerdfx) {for (var desfx = 0; desfx < nerdfx['feed']['entry']['length']; desfx++) {var nefx = nerdfx['feed']['entry'][desfx];relatedTitles[relatedTitlesNum] = nefx['title']['$t'];for (var ciafx = 0; ciafx < nefx['link']['length']; ciafx++) {if (nefx['link'][ciafx]['rel'] == 'alternate') {relatedUrls[relatedTitlesNum] = nefx['link'][ciafx]['href'];relatedTitlesNum++;break}}}}
function removeRelatedDuplicates() {var viefx = new Array(0);var labfx = new Array(0);for (var desfx = 0; desfx < relatedUrls['length']; desfx++) {if (!contains(viefx, relatedUrls[desfx])) {viefx['length'] += 1;viefx[viefx['length'] - 1] = relatedUrls[desfx];labfx['length'] += 1;labfx[labfx['length'] - 1] = relatedTitles[desfx]}};relatedTitles = labfx;relatedUrls = viefx}
function contains(yelfx, yufx) {for (var grefx = 0; grefx < yelfx['length']; grefx++) {if (yelfx[grefx] == yufx) {return true}};return false}
//]]>
</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 type='text/javascript'>
//<![CDATA[
(function tamboenmanMultiRelated() {var text = 'BACA JUGA :';let r = Math['floor']((relatedTitles['length'] - 1) * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.tamboenmanMultiRelated');while (i < relatedTitles['length'] && i < jumlah['length']) {for (let a = 0; a < jumlah['length']; a++) {jumlah[a]['innerHTML'] = '<span class="content"><span class="text">' + text + '</span><a href="' + relatedUrls[r] + '" title="' + relatedTitles[r] + '">' + relatedTitles[r] + '</a></span><span class="icon"></span>';if (r < relatedTitles['length'] - 1) {r++} else {r = 0};i++}}})();
//]]>
</script>
</b:if>
  • Silahkan kalian ganti kode yang berwarna merah dengan tulisan yang kalian inginkan serta kalian ganti juga dapat mengganti kode yang berwarna biru (angka) jika kalian akan merubah jumlah multi related post yang akan tampil di postingan
  • Selesai semoga artikel ini dapat bermanfaat dan membantu menyelesaikan masalah kalian semuanya

2. Membat Multi Related Post Otomatis #2

Cara Membuat Multi Related Post (Artikel Terkait) Otomatis di Postingan Blogger
  • Langkah pertama silahkan kalian login ke akun blogger, kemdian pilih menu tema dan klik tombol edit html
  • Setelah berada dihalaman menu edit html, silahkan kalian cari kode </head> dan tempelkan kode dibawah ini tepat di atas kode </head>
 <style>
/* Multiple Related Posts by tamboenman.xyz */
.tamboenmanMultiRelated {background-color:#2F4F4F; 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;}
.tamboenmanMultiRelated:hover {background-color:#B8860B;}
.tamboenmanMultiRelated .content {padding:10px 15px;}
.tamboenmanMultiRelated .content .text {margin-right:10px; text-decoration:uppercase;}
.tamboenmanMultiRelated .content a {color:#fff; text-decoration:none; line-height:1.5em;}
.tamboenmanMultiRelated .icon{height:auto; min-width:50px; background:#696969 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;}
.tamboenmanMultiRelated:hover .icon {background-color:#DAA520;}
</style>
  • Setelah itu silahkan kalian cari kode <data:post.body/>, biasanya didalam suatu template blogger terdapat 3 (tiga) kode yang sama. Untuk melakukan penerapan kode multi related post silahkan kalian gunakan kode <data:post.body/> urutan yang kedua (2)
  • Setelah kode tersebut kalian temkan, langkah selanjutnya silahkan kalian copy kode dibawah ini dan letakkan tepat dibawah kode <data:post.body/> yang kedua (2)
 <b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<![CDATA[
// Multi Related Post
(function() {var jumlah = 5;let post = document['querySelectorAll']('.post-body br, .post-body p'),a = jumlah + 1,b = post['length'] / a;c = Array['from']({length: jumlah}, (redfx, blufx) => blufx + 1);
for (let d = 0; d < c['length']; d++) {let e = c[d],f = parseInt((b * e)),g = document['createElement']('div');g['className'] = 'tamboenmanMultiRelated';if (post[f]['nodeName'] == 'P') {post[f]['parentNode']['insertBefore'](g, post[f])} else {post[f]['parentNode']['insertBefore'](g, post[f]['nextSibling'])}}})();
var relatedTitles = new Array();var relatedTitlesNum = 0;var relatedUrls = new Array();function related_results_labels(nerdfx) {for (var desfx = 0; desfx < nerdfx['feed']['entry']['length']; desfx++) {var nefx = nerdfx['feed']['entry'][desfx];relatedTitles[relatedTitlesNum] = nefx['title']['$t'];for (var ciafx = 0; ciafx < nefx['link']['length']; ciafx++) {if (nefx['link'][ciafx]['rel'] == 'alternate') {relatedUrls[relatedTitlesNum] = nefx['link'][ciafx]['href'];relatedTitlesNum++;break}}}}
function removeRelatedDuplicates() {var viefx = new Array(0);var labfx = new Array(0);for (var desfx = 0; desfx < relatedUrls['length']; desfx++) {if (!contains(viefx, relatedUrls[desfx])) {viefx['length'] += 1;viefx[viefx['length'] - 1] = relatedUrls[desfx];labfx['length'] += 1;labfx[labfx['length'] - 1] = relatedTitles[desfx]}};relatedTitles = labfx;relatedUrls = viefx}
function contains(yelfx, yufx) {for (var grefx = 0; grefx < yelfx['length']; grefx++) {if (yelfx[grefx] == yufx) {return true}};return false}
//]]>
</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 type='text/javascript'>
//<![CDATA[
(function tamboenmanMultiRelated() {var text = 'BACA JUGA :';let r = Math['floor']((relatedTitles['length'] - 1) * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.tamboenmanMultiRelated');while (i < relatedTitles['length'] && i < jumlah['length']) {for (let a = 0; a < jumlah['length']; a++) {jumlah[a]['innerHTML'] = '<span class="content"><span class="text">' + text + '</span><a href="' + relatedUrls[r] + '" title="' + relatedTitles[r] + '">' + relatedTitles[r] + '</a></span><span class="icon"></span>';if (r < relatedTitles['length'] - 1) {r++} else {r = 0};i++}}})();
//]]>
</script>
</b:if>
  • Silahkan kalian ganti kode yang berwarna merah dengan tulisan yang kalian inginkan serta kalian ganti juga dapat mengganti kode yang berwarna biru (angka) jika kalian akan merubah jumlah multi related post yang akan tampil di postingan
  • Selesai semoga artikel ini dapat bermanfaat dan membantu menyelesaikan masalah kalian semuanya

3. Membuat Multi Artikel Terkait Otomatis #3

Cara Membuat Multi Related Post (Artikel Terkait) Otomatis di Postingan Blogger
  • Langkah pertama silahkan kalian login ke akun blogger, kemdian pilih menu tema dan klik tombol edit html
  • Setelah berada dihalaman menu edit html, silahkan kalian cari kode </head> dan tempelkan kode dibawah ini tepat di atas kode </head>
 <style>
/* Multiple Related Posts by tamboenman.xyz */
.tamboenmanMultiRelated {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;}
.tamboenmanMultiRelated:hover {background-color:#252525;}
.tamboenmanMultiRelated .content {padding:10px 15px;}
.tamboenmanMultiRelated .content .text {margin-right:10px; text-decoration:uppercase;}
.tamboenmanMultiRelated .content a {color:#fff; text-decoration:none; line-height:1.5em;}
.tamboenmanMultiRelated .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;}
.tamboenmanMultiRelated:hover .icon {background-color:#000;}
</style>
  • Setelah itu silahkan kalian cari kode <data:post.body/>, biasanya didalam suatu template blogger terdapat 3 (tiga) kode yang sama. Untuk melakukan penerapan kode multi related post silahkan kalian gunakan kode <data:post.body/> urutan yang kedua (2)
  • Setelah kode tersebut kalian temkan, langkah selanjutnya silahkan kalian copy kode dibawah ini dan letakkan tepat dibawah kode <data:post.body/> yang kedua (2)
 <b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<![CDATA[
// Multi Related Post
(function() {var jumlah = 5;let post = document['querySelectorAll']('.post-body br, .post-body p'),a = jumlah + 1,b = post['length'] / a;c = Array['from']({length: jumlah}, (redfx, blufx) => blufx + 1);
for (let d = 0; d < c['length']; d++) {let e = c[d],f = parseInt((b * e)),g = document['createElement']('div');g['className'] = 'tamboenmanMultiRelated';if (post[f]['nodeName'] == 'P') {post[f]['parentNode']['insertBefore'](g, post[f])} else {post[f]['parentNode']['insertBefore'](g, post[f]['nextSibling'])}}})();
var relatedTitles = new Array();var relatedTitlesNum = 0;var relatedUrls = new Array();function related_results_labels(nerdfx) {for (var desfx = 0; desfx < nerdfx['feed']['entry']['length']; desfx++) {var nefx = nerdfx['feed']['entry'][desfx];relatedTitles[relatedTitlesNum] = nefx['title']['$t'];for (var ciafx = 0; ciafx < nefx['link']['length']; ciafx++) {if (nefx['link'][ciafx]['rel'] == 'alternate') {relatedUrls[relatedTitlesNum] = nefx['link'][ciafx]['href'];relatedTitlesNum++;break}}}}
function removeRelatedDuplicates() {var viefx = new Array(0);var labfx = new Array(0);for (var desfx = 0; desfx < relatedUrls['length']; desfx++) {if (!contains(viefx, relatedUrls[desfx])) {viefx['length'] += 1;viefx[viefx['length'] - 1] = relatedUrls[desfx];labfx['length'] += 1;labfx[labfx['length'] - 1] = relatedTitles[desfx]}};relatedTitles = labfx;relatedUrls = viefx}
function contains(yelfx, yufx) {for (var grefx = 0; grefx < yelfx['length']; grefx++) {if (yelfx[grefx] == yufx) {return true}};return false}
//]]>
</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 type='text/javascript'>
//<![CDATA[
(function tamboenmanMultiRelated() {var text = 'BACA JUGA :';let r = Math['floor']((relatedTitles['length'] - 1) * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.tamboenmanMultiRelated');while (i < relatedTitles['length'] && i < jumlah['length']) {for (let a = 0; a < jumlah['length']; a++) {jumlah[a]['innerHTML'] = '<span class="content"><span class="text">' + text + '</span><a href="' + relatedUrls[r] + '" title="' + relatedTitles[r] + '">' + relatedTitles[r] + '</a></span><span class="icon"></span>';if (r < relatedTitles['length'] - 1) {r++} else {r = 0};i++}}})();
//]]>
</script>
</b:if>
  • Silahkan kalian ganti kode yang berwarna merah dengan tulisan yang kalian inginkan serta kalian ganti juga dapat mengganti kode yang berwarna biru (angka) jika kalian akan merubah jumlah multi related post yang akan tampil di postingan
  • Selesai semoga artikel ini dapat bermanfaat dan membantu menyelesaikan masalah kalian semuanya

4. Membuat Multi Artikel Terkait Keren #4

Cara Membuat Multi Related Post (Artikel Terkait) Otomatis di Postingan Blogger
  • Langkah pertama silahkan kalian login ke akun blogger, kemdian pilih menu tema dan klik tombol edit html
  • Setelah berada dihalaman menu edit html, silahkan kalian cari kode </head> dan tempelkan kode dibawah ini tepat di atas kode </head>
 <style>
/* Multiple Related Posts by tamboenman.xyz */
.tamboenmanMultiRelated {background-color:#0000CD; 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;}
.tamboenmanMultiRelated:hover {background-color:#C71585;}
.tamboenmanMultiRelated .content {padding:10px 15px;}
.tamboenmanMultiRelated .content .text {margin-right:10px; text-decoration:uppercase;}
.tamboenmanMultiRelated .content a {color:#fff; text-decoration:none; line-height:1.5em;}
.tamboenmanMultiRelated .icon{height:auto; min-width:50px; background:#0000FF 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;}
.tamboenmanMultiRelated:hover .icon {background-color:#FF00FF;}
</style>
  • Setelah itu silahkan kalian cari kode <data:post.body/>, biasanya didalam suatu template blogger terdapat 3 (tiga) kode yang sama. Untuk melakukan penerapan kode multi related post silahkan kalian gunakan kode <data:post.body/> urutan yang kedua (2)
  • Setelah kode tersebut kalian temkan, langkah selanjutnya silahkan kalian copy kode dibawah ini dan letakkan tepat dibawah kode <data:post.body/> yang kedua (2)
 <b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<![CDATA[
// Multi Related Post
(function() {var jumlah = 5;let post = document['querySelectorAll']('.post-body br, .post-body p'),a = jumlah + 1,b = post['length'] / a;c = Array['from']({length: jumlah}, (redfx, blufx) => blufx + 1);
for (let d = 0; d < c['length']; d++) {let e = c[d],f = parseInt((b * e)),g = document['createElement']('div');g['className'] = 'tamboenmanMultiRelated';if (post[f]['nodeName'] == 'P') {post[f]['parentNode']['insertBefore'](g, post[f])} else {post[f]['parentNode']['insertBefore'](g, post[f]['nextSibling'])}}})();
var relatedTitles = new Array();var relatedTitlesNum = 0;var relatedUrls = new Array();function related_results_labels(nerdfx) {for (var desfx = 0; desfx < nerdfx['feed']['entry']['length']; desfx++) {var nefx = nerdfx['feed']['entry'][desfx];relatedTitles[relatedTitlesNum] = nefx['title']['$t'];for (var ciafx = 0; ciafx < nefx['link']['length']; ciafx++) {if (nefx['link'][ciafx]['rel'] == 'alternate') {relatedUrls[relatedTitlesNum] = nefx['link'][ciafx]['href'];relatedTitlesNum++;break}}}}
function removeRelatedDuplicates() {var viefx = new Array(0);var labfx = new Array(0);for (var desfx = 0; desfx < relatedUrls['length']; desfx++) {if (!contains(viefx, relatedUrls[desfx])) {viefx['length'] += 1;viefx[viefx['length'] - 1] = relatedUrls[desfx];labfx['length'] += 1;labfx[labfx['length'] - 1] = relatedTitles[desfx]}};relatedTitles = labfx;relatedUrls = viefx}
function contains(yelfx, yufx) {for (var grefx = 0; grefx < yelfx['length']; grefx++) {if (yelfx[grefx] == yufx) {return true}};return false}
//]]>
</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 type='text/javascript'>
//<![CDATA[
(function tamboenmanMultiRelated() {var text = 'BACA JUGA :';let r = Math['floor']((relatedTitles['length'] - 1) * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.tamboenmanMultiRelated');while (i < relatedTitles['length'] && i < jumlah['length']) {for (let a = 0; a < jumlah['length']; a++) {jumlah[a]['innerHTML'] = '<span class="content"><span class="text">' + text + '</span><a href="' + relatedUrls[r] + '" title="' + relatedTitles[r] + '">' + relatedTitles[r] + '</a></span><span class="icon"></span>';if (r < relatedTitles['length'] - 1) {r++} else {r = 0};i++}}})();
//]]>
</script>
</b:if>
  • Silahkan kalian ganti kode yang berwarna merah dengan tulisan yang kalian inginkan serta kalian ganti juga dapat mengganti kode yang berwarna biru (angka) jika kalian akan merubah jumlah multi related post yang akan tampil di postingan
  • Selesai semoga artikel ini dapat bermanfaat dan membantu menyelesaikan masalah kalian semuanya

0 Response to "Cara Membuat Multi Related Post (Artikel Terkait) Otomatis di Postingan Blogger"

Post a Comment

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2