www. - Sebenarnya tips ini sudah banyak yang membahasnya akan tetapi disini saya coba ulas kembali versi saya Bagaimana Cara Pasang Multi Related Post dan Random Post di Dalam Postingan Blog tersebut yang dimana bila diperhatikan bisalah niru-niru sedikit kaya situs tribun maupun kaya liputa6 gitu, akan tetapi sebetulnya tujuan pembuatan artikel ini hanya sekedar sebagai dokumentasi admin saja bila sewaktu-waktu admin membutuhkan kode-kode script ini.
Apabila judulnya sedikit mainstream mohon dimaafkan ya soalnya buat membedakan judul postingan dengan judul postingan ditahun-tahun sebelumnya tetapi isyarat kode htmlnya memang berbeda dengan apa yang pernah saya share ditahun tahun sebelumnya tersebut.
Lantas apa manfaat dan kegunaan dari multi related postingan ini, dan untuk keuntungannya tidaklah lain semoga kita tidak perlu menambahkan artikel artikel terkait secara manual didalam postingan blog kita tersebut. nah kaya gambar dibawah ini nih gaess...
(1) Berikut yaitu beberapa tahap dan cara yang dapat kau lakukan untuk memasang multi related dan random post tersebut di dalam postingan blog tersebut, pada tahap pertama pribadi saja buka blogger kau kemudian cari hidangan "TEMA" kemudian klik "EDIT TEMA" kemudian silahkan cari isyarat </head> gunakan ctrl + f untuk mempercepat pencarian tersebut.
Lalu tambahkan isyarat dibawah ini sebelum isyarat </head> tersebut misalnya dapat lihat gambar dibawah:
<b:if cond='data:blog.pageType != "index"'>
<style type='text/css'>
/* Multi Related Post */
.MultiRelated{background-color:#143e82;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}
.MultiRelated:hover{background-color:#5d635d}
.MultiRelated .content{padding:12px 15px}
.MultiRelated .content .text{margin-right:5px}
.MultiRelated .content a{color:#fff;text-decoration:none;line-height:1.5em}
.MultiRelated .content a:hover{text-decoration:underline}
.MultiRelated .icon{height:auto;min-width:55px;background:#050500 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}
</style>
</b:if>
Untuk pola balasannya dapat kau lihat pada gambar diatas saja, kemudian untuk mengganti background dari warna tersebut silahkan perhatikan css yang saya tandai pada gambar diatas (angka), atau kau dapat mencoba gonta-ganti warna saja untuk melihat balasannya dan untuk mengganti warna tersebut kau dapat memanfaatkan "HTML Color Picker" ketik saja digoogle kata kunci tersebut.
(2) Lalu Selanjutnya yaitu silahkan anda cari kode <data:post.body/> dan pastikan isyarat tersebut yang berada di dalam tag kondisional postingan kau dan untuk pola pemasangannya dapat kau perhatikan pada gambar dibawah ini:
Dan berikut yaitu kodenya, apabila sudah yakin dengan <data:post.body/> tersebut silahkan anda tambahkan isyarat dibawah ini sempurna dibawah kode <data:post.body/> tersebut.
<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'] = 'MultiRelated';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='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=100"'/>
</b:if>
</b:loop>
</b:if>
<script type='text/javascript'>
//<![CDATA[
(function MultiRelated() {var text = 'Baca:';let r = Math['floor']((relatedTitles['length'] - 1) * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.MultiRelated');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="Gila! inilah Cara Pasang Related Post di Dalam Postingan Blog Mirip Tribunnews">' + relatedTitles[r] + '</a></span><span class="icon"></span>';if (r < relatedTitles['length'] - 1) {r++} else {r = 0};i++}}})();
//]]>
</script>
</b:if>
Kemudian bila sudah jawaban silahkan simpan tema kau tersebut dan untuk mengganti jumlah related post yang muncul pada halaman postingan kamu, kau cukup ganti goresan pena jumlah =4 dengan angka dalam artian angka tersebut untuk menampilkan jumlah related postnya pada postingan kamu, dan untuk goresan pena Baca : dapat kau ubah sesuai dengan selera kamu.
Mungkin sekiranya dicukupkan dahulu apa yang dapat admin sampaikan pada kesempatan kali ini dengan prihal Bagaimana Cara Memasang Multi Related Post di Dalam Postingan Blog yang dapat dibilang ibarat situs situs besar media gosip ibarat detik, tribun, sindo, liputan6 dll yang memakai related post ibarat itu, walaupun intinya isyarat html dengan php berbeda tetapi untuk ketika ini banyak para blogger yang menciptakan terobosan gres untuk mempercantik blognya tersebut dan terima kasih.
Sumber https://www.indoblog.me/