Minggu, 14 April 2019

Gila! inilah Cara Pasang Related Post di Dalam Postingan Blog Mirip Tribunnews


www.indoblog.me - 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 jika diperhatikan bisalah niru-niru sedikit kaya situs tribun maupun kaya liputa6 gitu, akan tetapi sebenarnya tujuan pembuatan artikel ini hanya sekedar sebagai dokumentasi admin saja jika 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 kode 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 manfaatnya tidaklah lain biar kita tidak perlu menambahkan artikel artikel terkait secara manual didalam postingan blog kita tersebut. nah kaya gambar dibawah ini nih gaess...

Cara Membuat Related Post Ringan dan SEO Respone di Blogger

(1) Berikut adalah beberapa tahap dan cara yang bisa kamu lakukan untuk memasang multi related dan random post tersebut di dalam postingan blog tersebut, pada tahap pertama langsung saja buka blogger kamu lalu cari menu "TEMA" lalu klik "EDIT TEMA" lalu silahkan cari kode </head> gunakan ctrl + f untuk mempercepat pencarian tersebut.

Lalu tambahkan kode dibawah ini sebelum kode </head>  tersebut contohnya bisa lihat gambar dibawah:

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<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(&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>


Cara Memasang Related Post Ringan dan SEO Respone di Blogger

Untuk contoh hasilnya bisa kamu lihat pada gambar diatas saja, kemudian untuk mengganti background dari warna tersebut silahkan perhatikan css yang saya tandai pada gambar diatas (angka), atau kamu bisa mencoba gonta-ganti warna saja untuk melihat hasilnya dan untuk mengganti warna tersebut kamu bisa memanfaatkan "HTML Color Picker" ketik saja digoogle kata kunci tersebut.

Cara Memasang Related Post Ringan dan SEO Respone di Blogger

(2) Lalu Selanjutnya adalah silahkan anda cari kode <data:post.body/> dan pastikan kode tersebut yang berada di dalam tag kondisional postingan kamu dan untuk contoh pemasangannya bisa kamu perhatikan pada gambar dibawah ini:

Cara Memasang Related Post Ringan dan SEO Respone di Blogger

Dan berikut adalah kodenya, apabila sudah yakin dengan <data:post.body/> tersebut silahkan anda tambahkan kode dibawah ini tepat 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='&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 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="' + relatedTitles[r] + '">' + relatedTitles[r] + '</a></span><span class="icon"></span>';if (r < relatedTitles['length'] - 1) {r++} else {r = 0};i++}}})();
//]]>
</script>
</b:if>


Kemudian jika sudah selesai silahkan simpan tema kamu tersebut dan untuk mengganti jumlah related post yang muncul pada halaman postingan kamu, kamu cukup ganti tulisan jumlah =4 dengan angka dalam artian angka tersebut untuk menampilkan jumlah related postnya pada postingan kamu, dan untuk tulisan Baca : bisa kamu ubah sesuai dengan selera kamu.

Mungkin sekiranya dicukupkan dahulu apa yang bisa admin sampaikan pada kesempatan kali ini dengan prihal Bagaimana Cara Memasang Multi Related Post di Dalam Postingan Blog yang bisa dibilang seperti situs situs besar media informasi seperti detik, tribun, sindo, liputan6 dll yang menggunakan related post seperti itu, walaupun pada dasarnya kode html dengan php berbeda tetapi untuk saat ini banyak para blogger yang membuat terobosan baru untuk mempercantik blognya tersebut dan terima kasih.