Cara Membuat Multi Related Post Otomatis di Postingan Blog

Daftar isi [Tampil]
Serieswans.com | Cara Membuat Multi Related Post Otomatis di Postingan Blog - Hallo sahabat blogger, pada kesempatan kali ini saya akan share tutorial mengenai cara membuat multi related post pada postingan blog.  Mungkin anda sudah pernah melihat contoh multi related pada postingan halaman di situs web besar. salah satu contoh situs web yang saya ketahui adalah di situs web Droidpoin.

Multi Realated Post ini akan tampil dengan jumlah banyak, dari kayanya juga Multi yang artinya "Banyak". selain itu anda juga bisa mengatur berapa multi related post yang akan di tampilkan di halaman postingan, misalnya 3 atau 4. tergantung juga kalo misalkan jumlah kata pada artikel postingan anda banyak lebih dari 1000, anda bisa menambahkan jumlah multi related post menjadi 5 atau 6.
Cara Membuat Multi Related Post Otomatis di Postingan Blog
 Multi Related Post Pada Postingan Blog

Multi Related Post ini berfungsi untuk menampilkan artikel terkait dalam postingan tersebut secara otomatis sesuai label pada halaman artikel.

Apa Kelebihan Multi Related Post ? 

Salah satu kelebihannya adalah sebagai cara untuk mengingatkan pembaca atau pengunjung blog agar mereka juga mengklik dan membaca artikel yang berkaitan dengan artikel yang sedang mareka baca.

Manfaat memasang multi related post ini adalah untuk menambah atau menaikan visitor dan meningkatkan kualitas internal link pada blog anda.

Selain memberi tahu pembaca agar membaca artikel yang terkait denga artikel tersebut adalah multi related post ini juga sangat baik untuk SEO of Page.

Nah,langsung saja ke tutorial cara memasang multi related post pada postingan blog. silahkan simak langkah-langkah di bawah ini.

Cara Memasang Multi Related Post Otomatis Pada Postingan Blog

1. Pertama, login ke Blogger.com dan masuk menu Dashboard
2. Pilih Tema => Edit HTML
3. Silahakan copy kode CSS di bawah in dan letakan sebelum kode </head>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Multi Related Post */
.arldzgnMultiRelated{background-color:#2a2a2a;color:#fff;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;overflow:hidden;transition:all .3s}
.arldzgnMultiRelated:hover{background-color:#222}
.arldzgnMultiRelated .content{padding:12px 15px}
.arldzgnMultiRelated .content .text{margin-right:5px}
.arldzgnMultiRelated .content a{color:#fff;text-decoration:none;line-height:1.5em}
.arldzgnMultiRelated .content a:hover{text-decoration:underline}
.arldzgnMultiRelated .icon{height:auto;min-width:55px;background:#f44336 url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;%23fff&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;transition:all .3s}
</style>
</b:if>
4. Jika sudah, selanjutnya cari kode <data:post.body/>
silahkan anda pilih <data:post.body/> yang di bungkus dengan tag conditional khusus halaman postingan.
biasanya kode tersebut ada 3 
5. Kemudian copy Kode Javascript di bawah ini dan letakan di bawah kode <data:post.body/>

<b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<![CDATA[
// Multi Related Post
(function() {var jumlah = 3;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'] = 'arldzgnMultiRelated';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 arldzgnMultiRelated() {var text = 'Also read :';let r = Math['floor']((relatedTitles['length'] - 1) * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.arldzgnMultiRelated');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>
6. Terakhir Simpan Tema dan cek hasilnya.

Demo

Panduan Setting Multi Related Post

Silahkan sesusaikan dengan keinginan anda pada kode yang saya beri tanda mereah.

Var Jumlah = 3; Menampilkan jumlah multi related post di halaman postingan, silahkan atur berapa jumlah multi related post yang ingin anda tampilakan di postingan.

Also Read = Silahkan ganti kata-kata tersebut dengan yang anda inginkan 

Khusus pengguna Template Viomagz

Untuk anda yang menggunakan template viomagz yang sudah terdapat multi related post (baca juga) di halaman postingannya. maka anda harus menghapus terlebih dahulu kode tersebut agar tidak terjadi bentrok.

Cara Menghapus multi related post (Baca juga) silahkan cari kode CSS berikut

1. Cari kode CSS seperti di bawah ini, setela ketemu silahkan hapus tersebut.

/* BACA JUGA */
 #baca-juga {
    display: none;
    position: relative;
}
#baca-juga h2 {
    color: $(label.color);
    position: absolute;
    top: -15px;
    left: 3.5em;
    border: 2px solid $(label.border.color);
    padding: 2px 12px;
    font-size: 14px;
    background: $(label.bg.color);
    font-weight: bold;
    z-index: 1;
}
#baca-juga a {
    font-weight: bold;
    font-size: 14px;
    display: block;
    padding: 0;
}
#baca-juga ul {
    max-width: 75%;
    margin: 1.5em 0 1.5em 2em;
    padding: 20px 20px 10px 40px;
    position: relative;
    border: 2px solid $(label.border.color);
}
#baca-juga li {
    padding: 0px;
    margin: .6em 0;
}
2. Kemudian cari kode HMTL di bawah ini, jika sudah ketemu hapus kode tersebut.

<div id='baca-juga'>
  <b:loop values='data:post.labels' var='label'>
  <b:if cond='data:label.isLast != &quot;true&quot;'>
  </b:if>
  <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=bacajuga&amp;max-results=5&quot;' type='text/javascript'/>
  </b:loop>
  <script type='text/javascript'>
  var judulbacajuga=&quot;<b:switch var='data:blog.locale'><b:case value='id' /><h2>Baca Juga</h2><b:default /><h2>Related</h2></b:switch>&quot;
  var jumlahbacajuga=3;
  removeRelatedDuplicates();
  printRelatedLabels(&quot;<data:post.url/>&quot;);
  </script>
  </div>
3. Terkahir cari kode Javascript di bawah ini, lalu hapus kode tersebut.

<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array,relatedTitlesNum=0,relatedUrls=new Array;function bacajuga(e){for(var l=0;l<e.feed.entry.length;l++){var t=e.feed.entry[l];relatedTitles[relatedTitlesNum]=t.title.$t;for(var r=0;r<t.link.length;r++)if("alternate"==t.link[r].rel){relatedUrls[relatedTitlesNum]=t.link[r].href,relatedTitlesNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),l=new Array(0),t=0;t<relatedUrls.length;t++)contains(e,relatedUrls[t])||(e.length+=1,e[e.length-1]=relatedUrls[t],l.length+=1,l[l.length-1]=relatedTitles[t]);relatedTitles=l,relatedUrls=e}function contains(e,l){for(var t=0;t<e.length;t++)if(e[t]==l)return!0;return!1}function printRelatedLabels(e){for(var l=0;l<relatedUrls.length;l++)relatedUrls[l]==e&&(relatedUrls.splice(l,1),relatedTitles.splice(l,1));var t=Math.floor((relatedTitles.length-1)*Math.random());l=0;if(widgetBacaJuga==1&&relatedTitles.length>1){for(document.write(judulbacajuga),document.write("<ul>");l<relatedTitles.length&&l<20&&l<jumlahbacajuga;)document.write('<li><a href="'+relatedUrls[t]+'">'+relatedTitles[t]+"</a></li>"),t<relatedTitles.length-1?t++:t=0,l++;document.write("</ul>")}relatedUrls.splice(0,relatedUrls.length),relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>

Jika kode tersebut di hapus, maka anda bisa langsung memasang multi related post pada halaman postingan.

Beberapa Style Multi Related Post pada postingan

Di bawah ini ada beberapa style multi related postingan dengan tampilang yang keren dan warnanya yang berbeda.

Caranya cukup ganti kode CSS pada tutorial di atas, kemudian pilih salah satu style multi related postingan yang anda inginkan.

Style Multi Related Post 1


<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Multi Related Post */
.arldzgnMultiRelated{color:#0984e3;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;border:1px solid rgba(0,0,0,0.2);transition:all .3s}
.arldzgnMultiRelated .content{padding:12px 15px}
.arldzgnMultiRelated .content .text{margin-right:5px}
.arldzgnMultiRelated .content a{color:#000;text-decoration:none;line-height:1.5em}
.arldzgnMultiRelated .icon{height:auto;min-width:55px;background:transparent url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;%23000&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;border-left:1px solid rgba(0,0,0,0.2);transition:all .3s}
.arldzgnMultiRelated:hover .icon,.arldzgnMultiRelated .content a:hover{color:#0984e3}
</style>
</b:if>

Demo

Style Multi Related Post 2


<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Multi Related Post */
.arldzgnMultiRelated{background-color:#eaeaea;color:#000;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;transition:all .3s}
.arldzgnMultiRelated:hover{background-color:#e3e3e3}
.arldzgnMultiRelated .content{padding:12px 15px}
.arldzgnMultiRelated .content .text{margin-right:5px}
.arldzgnMultiRelated .content a{color:#000;text-decoration:none;line-height:1.5em}
.arldzgnMultiRelated .icon{height:auto;min-width:55px;background:#f5f5f5 url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;%23888&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;transition:all .3s}
.arldzgnMultiRelated:hover .icon{background-color:#f9f9f9}
</style>
</b:if>

Demo

Style Multi Related Post 3


<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Multi Related Post */
.arldzgnMultiRelated{background-color:#c0392b;color:#fff;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;transition:all .3s}
.arldzgnMultiRelated:hover{background-color:#e74c3c}
.arldzgnMultiRelated .content{padding:12px 15px}
.arldzgnMultiRelated .content .text{margin-right:5px}
.arldzgnMultiRelated .content a{color:#fff;text-decoration:none;line-height:1.5em}
.arldzgnMultiRelated .icon{height:auto;min-width:55px;background:rgba(255,255,255,.25) url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;%23fff&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;transition:all .3s}
.arldzgnMultiRelated:hover .icon{background-color:rgba(255,255,255,.15)}
</style>
</b:if>

Demo

Style Multi Related Post 4


<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Multi Related Post */
.arldzgnMultiRelated{background:#ffeaa7;color:#000;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;border-left:4px solid #d63031;transition:all .3s}
.arldzgnMultiRelated .content .text{margin-right:5px}
.arldzgnMultiRelated .content{padding:10px 15px}
.arldzgnMultiRelated .content a{color:#000;text-decoration:none;line-height:1.5em}
.arldzgnMultiRelated .content a:hover{color:#111;text-decoration:underline}
</style>
</b:if>

Demo

Style Multi Related Post seperti blog serieswans


<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Multi Related Post */
.arldzgnMultiRelated{background-color:#2a2a2a;color:#fff;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;overflow:hidden;transition:all .3s}
.arldzgnMultiRelated:hover{background-color:#222}
.arldzgnMultiRelated .content{padding:12px 15px}
.arldzgnMultiRelated .content .text{margin-right:5px;font-weight:700;color: #38ef7d}
.arldzgnMultiRelated .content a{color:#fff;text-decoration:none;line-height:1.5em}
.arldzgnMultiRelated .content a:hover{text-decoration:underline}
.arldzgnMultiRelated .icon{height:auto;min-width:55px;background:#0575E6 url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;%23fff&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;transition:all .3s}
</style>
</b:if>

Demo

Cukup mudah bukan cara memasangnya, jika anda masih kebingungan cara pemasangannya, jangan sungkan untuk menanyakan di kolom komentar.

Demikian pembahasan tutorial kali ini mengenai Cara Membuat Multi Related Post Otomatis di Postingan Blog. jangan lupa share juga ke teman-teman dan media sosial anda ya, semoga bermanfaat dan terima kasih

https://www.arlinadzgn.com/2019/01/cara-memasang-multi-related-post-di-postingan.html
Show comments
Hide comments

2 Komentar untuk "Cara Membuat Multi Related Post Otomatis di Postingan Blog"

  1. Good.. Dengan cara ini pengunjung bisa lebih berlama lama di blog kita

    BalasHapus
    Balasan
    1. memudahkan pengunjung juga ketika mencari artikel terkait postingan tersebut

      Hapus
Catatan Untuk Para Jejaker
  • Mohon Tinggalkan jejak sesuai dengan judul artikel.
  • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • Dilarang mencantumkan link aktif di komentar.
  • Komentar dengan link aktif akan otomatis dihapus
  • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Copyright © 2019 - 2020 Serieswans - All Rights Reserved Created With