ikuti Young di Google News

Cara Menambahkan Related Post di Tengah Artikel Template Median UI

Cara ini pasti akan mendorong pengunjung untuk mengklik artikel terkait setelah membaca artikel saat ini.
Related Post Artikel

Hello world! Dalam posting ini saya akan membagikan tutorial tentang Menambahkan Related Post otomatis di tengah artikel Template Median UI. Posting terkait yang kami tetapkan ini akan muncul di paragraf ketiga, Anda dapat menyesuaikannya.

Karena update post-body id versi baru telah berubah menjadi postbody, jadi saya membagikan tutorial untuk versi Median UI v1.5 dan Median UI v1.6. Semua template default versi ini sudah memiliki CSS, jadi saya menggunakan JavaScript untuk menampilkannya secara otomatis.

Script yang saya bagikan kali ini menggunakan JavaScript murni tanpa jQuery,  tidak akan ada efek buruk yang meresahkan pada pemuatan di blog kalian. Ikuti langkah-langkah yang diberikan sampai akhir agar tidak ada kesalahan.

* * * * *

Apa itu Related Post?

Biasanya, Semua template Blogger memiliki postingan terkait/related post secara default, yang muncul di bagian paling akhir postingan. Posting terkait terutama adalah referensi atau rekomendasi artikel, yang terkait dengan artikel yang sedang dibaca oleh pengunjung. Artinya, semakin banyak postingan terkait topik yang bisa dibaca oleh pengunjung. 

Tidak menutup kemungkinan, terkadang kita melihat di beberapa blogg, related post sangat mengganggu karena kurang rapi dalam pemasangan dan tidak beraturan dalam menempatkan posisinya.

Tetapi cara ini juga akan mendorong pengunjung untuk mengklik artikel terkait setelah membaca artikel saat itu. Tentu saja bisa sangat berguna untuk meningkatkan beberapa traffic ke blog kita dan tentunya related post berguna juga untuk meminimalisir Bounce Rate di blogg kita.

* * * * *

Cara Menambahkan Related Post Tengah di Template Median UI

  • Langkah 1 : Masuk Akun Blogger Anda.
  • Langkah 2 : Lalu Buka Menu Tema.
  • Langkah 3 : Kemudian Klik Edit Html
  • Langkah 4 : Lanjut letakkan semua Script CSS tepat dibawahnya.

Untuk Median UI versi 1.5

Cari kode berikut :
<div class='postBody' id='postBody'><data:post.body/></div>
Tempelkan Script berikut dibawahnya :
<b:if cond='data:view.isPost and !data:view.isPreview'>
<div class='postRelated' id='postRelated'>
<script>/*<![CDATA[*/ 
var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];}} relatedTitles = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');} /*]]>*/</script>
<b:if cond='data:post.labels'>
<b:loop index='i' values='data:post.labels' var='label'>
<b:if cond='data:i&lt;1'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' rel='preload'/>
</b:if>
</b:loop>
</b:if>
<b>Read Also : </b>
<script>removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
<script>/*<![CDATA[*/ function insertAfter(tbh,tgt) {var prt = tgt.parentNode; if (prt.lastChild == tgt) {prt.appendChild(tbh);} else {prt.insertBefore(tbh,tgt.nextSibling);}} var tgt = document.getElementById("postBody");var midAd3 = document.getElementById("postRelated"); var showAd3 = tgt.getElementsByTagName("p"); if (showAd3.length > 0) {insertAfter(midAd3,showAd3[3]);}; /*]]>*/</script>
</b:if>

Untuk Median UI versi 1.6

Cari kode berikut :
<div class='pS post-body postBody' id='postBody'><data:post.body/></div>
Tempelkan Script berikut dibawahnya :
<b:if cond='data:view.isPost and !data:view.isPreview'>
<div class='pRelate' id='pRelated'>
<script>/*<![CDATA[*/ 
var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];}} relatedTitles = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');} /*]]>*/</script>
<b:if cond='data:post.labels'>
<b:loop index='i' values='data:post.labels' var='label'>
<b:if cond='data:i&lt;1'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' rel='preload'/>
</b:if>
</b:loop>
</b:if>
<b>Read Also : </b>
<script>removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
<script>/*<![CDATA[*/ function insertAfter(tbh,tgt) {var prt = tgt.parentNode; if (prt.lastChild == tgt) {prt.appendChild(tbh);} else {prt.insertBefore(tbh,tgt.nextSibling);}} var tgt = document.getElementById("postBody");var midAd3 = document.getElementById("pRelated"); var showAd3 = tgt.getElementsByTagName("p"); if (showAd3.length > 0) {insertAfter(midAd3,showAd3[3]);}; /*]]>*/</script>
</b:if>
  • Langkah 5 : Kemudian Jangan Lupa Klik Simpan dan Lihat Hasilnya.
    Catatan :
  • (midAd3,showAd3[3] Di mana saya telah menandai nomor 3, itu berarti posting terkait akan muncul setelah paragraf ke-3, jadi harap sesuaikan.
  • Perlu diingat bahwa kalian harus menggunakan tag p saat menulis paragraf, jika kalian menggunakan tag br maka related post akan muncul di akhir postingan.
  • Sesuaikan bagian yang saya tandai, max-results=3 (Angka 3 adalah jumlah posting terkait yang ingin Anda tampilkan).
* * * * *

Kesimpulan

Dalam posting ini saya telah membagikan Cara Menambahkan Related Post di Tengah Artikel untuk pengguna template blogger Median UI. Saya harap cara menyisipkan posting terkait otomatis di antara posting di template blogger Median UI ini dapat sangat bermanfaat bagi Anda dan blog Anda. Terima kasih telah mengunjungi blogg saya. Salam!

About the Author

Terlalu muda untuk dikritik dan terlalu dewasa untuk di nasehati :)

Posting Komentar

Cookie Consent
Young serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
Young detect it seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
Young have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.