Cara membuat multi related post di dalam postingan

Hi, bertemu kembali di blog AUTOGOBLOOG , artikel ini akan membawa pembahasan tentang cara memutihkan wajah Cara membuat multi related post di dalam postingan simak selengkapnya

Cara membuat multi related post di dalam postingan kita lanjut ke tutorial membuat multi related di dalam postingan blog.

Biasanya kita menyebutnya widget baca lagi di dalam postongan blog 

nah untuk widget related post ini tak gap jauh dengan widget baca juga.

Yang membedakannya hanya tata letak di setiap postingannya, tapi multi related postingan ini lagi telah banyak yang menggunakannya.

Untuk kalian yang didalam postingannya telah terdapat widget baca lagi contohnya kalian memanfaatkan Template VioMagz karena dengan memanfaatkan template ini kalian telah tak mesti menambahkan widget baca juga.

Karena didalam template viomagz ini telah terdapat widget baca lagi bawaan templatenya.

Nah untuk sobat yang belum atau yang telah memakai widget baca juga, widget multi related post dan ingin menambahkannya agar terlihat beda.

Sebelum kita ke caranya faktual jika kita memanfaatkan Template VioMagz dan ingin tampilan daftar baca juganya banyak tinggal merubah

var jumlah= misalnya didalam daftar baca lagi tampil '3' daftar baca juganya dan ingin menampilkan lebih dari '3' kalian tinggal merubahnya seperti 4,7,9-10 contohnya dari var jumlah=3 kalian ubah andaikan menjadi var jumlah=10 dan bakal tampil daftar 10 baca juga, tapi bagaimana didalam kategori postingan kalian besaran postingannya telah melebihi 10.

Nah jika kalian ingin menambahkan lebih banyak dan dengan tampilan yang berbeda bisa memanfaatkan multi related post cara menggunakannya bisa ikuti langkah dibawah ini.

Langkah 1: Buka dasboard blogger membeda-bedakan tema dan edit html cari kode seperti ini

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
  <meta expr:content='data:post.snippet' itemprop='description'/>
 
  <div id='body-post-it'>
  <data:post.body/>
<b:if cond='data:view.isPost'>

dan selanjutnya kalian letakan kode dibawah ini tepat dibawah kode <b:if cond='data:view.isPost'> 

<script type='text/javascript'>
//<![CDATA[
// Multi Related Post
(function() var besaran = 3;let post = document['querySelectorAll']('.post-body br, .post-body p'),a = besaran + 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'] = 'agusidnMultiRelated';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 = 'Baca Juga :';let r = Math['floor']((relatedTitles['length'] - 1) * Math['random']());let i = 0;let besaran = document['querySelectorAll']('.agusidnMultiRelated');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>

Jika telah silahkan kalian kita ke aturan selanjutnya agar tampilannya bagus kalian pasang langakah selanjutnya.

Langkah 2: Jika kode diatas telah kalian terapkan selanjunya kalian pasang kode css dibawah ini

/* Multi Related Post */
.agusidnMultiRelatedkeras #fd3b3b;transition:all .3s}
.agusidnMultiRelated .content .textmargin-right:5px;font-weight:bold;
.agusidnMultiRelated .contentpadding:10px 15px
.agusidnMultiRelated .content acolor:#fd3b3b;text-decoration:none !important;line-height:1.5em
.agusidnMultiRelated .content a:hovercolor:#fd3b3b;text-decoration:underline !important

Terapkan kode cssnya tepat diatas kode ]]></b:skin> atau </style> lalu simpan kembali template yang telah kalian edit tadi dan lihat hasilnya. untuk demo tampilannya kalian bisa lihat di blog saya.

Mungkin dari saya cukup sampe disini dulu semoga bisa bermanfaat, dan jangan lupa bahagia.

Begitulah penjelasan tentang Cara membuat multi related post di dalam postingan semoga artikel ini bermanfaat terima kasih

Tulisan ini diposting pada kategori cara memutihkan wajah, tips dan trik kesehatan, cara menghilangkan bekas jerawat,

Bagikan Artikel ini