Cara Membuat Related Post Template Linkmagz

Template linkmagz mempunyai keunggulan dengan loading yang super cepat. Pada template linkmagz sejak rilis dengan versi pertama sudah banyak peminat yang ingin membeli dan memakai template tersebut. Template linkmagz v.1 belum mempunyai related post, artikel terkait atau menu baca juga.

Pada artikel kali ini kami ingin berbagi Cara Membuat Related Post Template Linkmagz . Sebelum masuk ke tutorial kami ingin menjelaskan tentang related post ini seberapa penting related post pada blog. Related post atau artikel terkait adalah kumpulan link yang akan menuju kepada konten lain, konten yang akan tampil adalah konten yang sesuai dengan label yang digunakan pada postingan.

Keuntungan yang akan didapat jika memasang related post adalah :

1. Meningkatkan jumlah PV (Pageviews)
2. Bisa menurunkan bounce rate
3. Akan memingkatkan waktu kunjungan
4. Melengkapi menu blog supaya terlihat profesional

Sebenarnya Related post di tengah postingan bisa kamu buat sendiri dengan cara manual. Tetapi dengan kode dibawah ini kamu tidak perlu membuat secara manual, karena nantinya related post bisa tampil otomatis dengan sesuai label dan bisa kamu atur sesuai keinginan.

Baca Juga : Membuat Daftar Isi TOC di Template Viomagz

Cara Memasang Related Post di tengah postingan Template Linkmagz

Buka blogger > Klik menu Tema pilih menu edit HTML > Tambahkan kode CSS berikut ini diatas kode </head>

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

Selanjutnya kamu cari kode <data:post.body/> dan taruh kode ini tepat dibawah kode <data:post.body/>

<b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<![CDATA[
// Multi Related Post
(function() {var jumlah = 4;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'] = 'MnhBlogMultiRelated';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 MnhBlogMultiRelated() {var text = 'BACA JUGA:';let r = Math['floor']((relatedTitles['length'] - 1) * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.MnhBlogMultiRelated');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>

pada template linkmagz terdapat 4 kode <data:post.body/> kamu bisa pilih yang paling pertama atau yang paling awal.

Baca Juga : Cara Mudah Pasang Dark Mode Template Viomagz

Kamu bisa merubah jumlah postingan yang akan tampil. Kamu bisa merubahnya pada Var jumlah = 4. Dan pada Var text= BACA JUGA kamu bisa merubah sesuai keinginan

Setelah itu kamu klik Simpan Tema. Dan hasilnya seperti gambar dibawah ini.

Ada beberapa pilihan atau style related post seperti dibawah ini kamu bisa memilih sesuai keinginan.

STYLE 1

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Multi Related Post */
.MnhBlogMultiRelated{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}
.MnhBlogMultiRelated .content{padding:12px 15px}
.MnhBlogMultiRelated .content .text{margin-right:5px}
.MnhBlogMultiRelated .content a{color:#000;text-decoration:none;line-height:1.5em}
.MnhBlogMultiRelated .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}
.MnhBlogMultiRelated:hover .icon,.MnhBlogMultiRelated .content a:hover{color:#0984e3}
</style>
</b:if>

STYLE 2

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Multi Related Post */
.MnhBlogMultiRelated{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}
.MnhBlogMultiRelated:hover{background-color:#e3e3e3}
.MnhBlogMultiRelated .content{padding:12px 15px}
.MnhBlogMultiRelated .content .text{margin-right:5px}
.MnhBlogMultiRelated .content a{color:#000;text-decoration:none;line-height:1.5em}
.MnhBlogMultiRelated .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}
.MnhBlogMultiRelated:hover .icon{background-color:#f9f9f9}
</style>
</b:if>

STYLE 3

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Multi Related Post */
.MnhBlogMultiRelated{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}
.MnhBlogMultiRelated:hover{background-color:#e74c3c}
.MnhBlogMultiRelated .content{padding:12px 15px}
.MnhBlogMultiRelated .content .text{margin-right:5px}
.MnhBlogMultiRelated .content a{color:#fff;text-decoration:none;line-height:1.5em}
.MnhBlogMultiRelated .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}
.MnhBlogMultiRelated:hover .icon{background-color:rgba(255,255,255,.15)}
</style>
</b:if>

STYLE 4

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Multi Related Post */
.MnhBlogMultiRelated{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}
.MnhBlogMultiRelated .content .text{margin-right:5px}
.MnhBlogMultiRelated .content{padding:10px 15px}
.MnhBlogMultiRelated .content a{color:#000;text-decoration:none;line-height:1.5em}
.MnhBlogMultiRelated .content a:hover{color:#111;text-decoration:underline}
</style>
</b:if>

Pada template kami memang belum memakai related post secara otomatis. Kami sengaja membuatnya manual karena kami ingin lebih mencari related post yang tertarget . Sekian artikel tentang tips membuat related post pada template linkmagz. Semoga bermanfaat.

Postingan lainnya

★★★★