bergabung di grup telegram kami

cara membuat related post di tengah artikel blogger

cara membuat related post di tengah artikel blogger

hallo semua pada kesempatan kali ini saya akan membagikan tutorial cara membuat related post atau postingan terkait di tengah postingan secara otomatis dengan tampilan yang simple mirip template fletro milik jagodesain.com, untuk demonya bisa kalian lihat pada blog ini di mana related post saya atur akan muncul pada pragraf ke lima.

tutorial ini sebenarnya sudah banyak yang bikin dengan tampilan yang berbeda - beda namun jika kalian belum menemukan style yang cocok untuk template kalian mungkin bisa mencoba yang satu ini.

script yang akan saya share kali ini murni menggunakan javascript tanpa jQuary jadi tidak akan dampak buruk pada loading blog kalian. dan sudah otomatis muncul di tengah postingan tanpa harus menulis manual lagi di setiap postingan, kalian juga bisa atur pada pragraf ke berapa related post akan di munculkan

Apa Itu Related Post

related post atau postingan terkait adalah sebuah rujukan atau rekomendasi sebuah artikel yang masih berkaitan dengan artikel yang sedang di baca oleh visitor saat ini. dalam artian artikel tersebut masih satu tema dengan artikel yang visitor baca. hal tersebut tentu akan membuat penasaran pembaca dan akan membuat pembaca mengklik artikel terkait tersebut setelah selesai membaca artikel saat ini. tentunya hal ini sangat baik untuk trafik blog kita kerena visitor tidak langsung pergi saat selesai membaca artikel yang dia cari

Cara Membuat Related Post Di Tengah Artikel Blogger

silakan masuk ke blogger pilih tema dan edit html salin css di bawah ini dan letakkan di atas kode ]]></b:skin>

.post-relatedText{position:relative; margin:42px 0;padding:1.5em 0; border:1px solid #eceff1;border-left:0;border-right:0; font-size:14px;line-height:1.8em;}
.post-relatedText h3, .post-relatedText h4, .post-relatedText b{font-size:13px;font-weight:400; margin:0;padding:2px 14px;background-color:#fefefe;border:1px solid #eceff1;border-radius:15px; position:absolute;top:-15.5px;left:20px}
.post-relatedText ul, .post-relatedText ol{margin:8px 0 0;padding-left:20px}.post-relatedText a{text-decoration: none}
.post-relatedText a:hover{opacity:.9}

selanjutnya salin kode di bawah ini dan letakkan tepat di bawah kode </b:includable> terdapat banyak kode seperti ini , kalian bisa memilih yang masi berada di dalam kode tag head bukan yang di dalam tag body, jika salah tempat maka tidak akan berjalan.


<b:includable id='postTextRelated'>
        <div class='post-relatedText' id='post-relatedText'>
          <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>Baca juga :</b>
          <script>removeRelatedDuplicates(); printRelatedLabels();</script>
        </div>
      </b:includable>
bagian yang saya tandai bisa di ubah, bagian max-results=3 angka 3 adalah jumlah baris related post yang ingin di tampilkan silakan di sesuaikan

langkah terakhir silakan salin kode di bawah ini dan letakkan tepat di bawah kode <data:post.body/> biasanya kode ini ada lebih dari 1 tergantung template apa yang kalian gunakan silakan coba satu per satu


<b:include cond='data:view.isPost and !data:view.isPreview' data='post' name='postTextRelated'/><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("post-body"); var midAd3 = document.getElementById("post-relatedText"); var showAd3 = tgt.getElementsByTagName("p"); if (showAd3.length > 0) {insertAfter(midAd3,showAd3[5]);}; /*]]>*/</script>
(midAd3,showAd3[5] yang saya tandai anggka 5 artinya related post akan muncul setelah pragraf ke 5 jadi silakan di sesuaikan, perlu di ingat saat menulis pragraf harus menggunakan tag P jika kalian menggunakan tag BR maka related post tidak akan muncul

Khusus Pengguna Template Median-Ui V.1.5

di karenakan update pada versi 1.5 ini ada perubahan pada id post-body menjadi postBody, sehingga kode di atas tidak akan berjalan, maka itu saya buatkan juga khusus pengguna template median-ui di bawah ini.

untuk versi 1.5 ini sudah terdapat css pada template bawaannya, jadi kita hanya perlu menambahkan javascript dan json untuk membuatnya muncul secara otomatis.

silakan masuk ke blogger pilih tema dan edit html salin kode di bawah ini dan letakkan tepat di bawah kode </b:includable> terdapat banyak kode seperti ini , pilihlah yang paling atas

<b:includable id='postTextRelated'>
        <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>Baca juga :</b>
          <script>removeRelatedDuplicates(); printRelatedLabels();</script>
        </div>
      </b:includable>
bagian yang saya tandai bisa di ubah, bagian max-results=3 angka 3 adalah jumlah baris related post yang ingin di tampilkan silakan di sesuaikan

langkah terakhir silakan salin kode di bawah ini dan letakkan tepat di bawah kode <div class='postBody' id='postBody'><data:post.body/></div>

<b:include cond='data:view.isPost and !data:view.isPreview' data='post' name='postTextRelated'/><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[5]);}; /*]]>*/</script>
(midAd3,showAd3[5] yang saya tandai anggka 5 artinya related post akan muncul setelah pragraf ke 5 jadi silakan di sesuaikan, perlu di ingat saat menulis pragraf harus menggunakan tag P jika kalian menggunakan tag BR maka related post tidak akan muncul

sekian cara membuat related post di tengah artikel blogger semoga bermanfaat, jika ada pertanyaan silakan berkomentar di bawah ini

Source code:
https://fletro.jagodesain.com

Baca juga :
tutorial blogger

17 komentar



image quote pre code
  1. akhirnya yg di tunggu2, makasih mas udh bikin artikel nya, langsung saya coba terapkan.

    1. sama2 ya kak... silakan di coba..
  2. Disaya gk muncul gan
    1. Pastikan mengikuti tutorial dengan benar ya kak, jika masi terdapat masalah bisa kirimkan url blog nya biar saya bantu cek
  3. How to show this at the end of every post?
    1. this will appear in every post
  4. Halo bg wendy, disini saya ada sedikit kendala dalam hal ini, mengapa waktu mode malah text ( baca juga ) jadi ikut warna putih? Sedangkan disini warna putih namun latar belakangnya menyesuaikan tema blognya, untuk lebih jelasnya silahkan dicek di blog saya ( https://shadowsecuresystem.blogspot.com )
    1. Sampean menggunakan median ui 1.5 itu uda ada cssnua jd ckup copas jsnya aja, baca yg khusus median ui bagian bawah
  5. Buat fletro pro bisa gk
    1. bisa mas, ini aslinya juga source code dari fletro pada versi lawasnya
  6. Om itu kenapa selalu di bawah ya sudah ku otak Atik
    1. itu js nya menggunakan post id post-body jika berbeda ubahlah biar sesuai, klau kamu pke template median ui d versi 1.5 - 1.6 itu idnya postBody
  7. Puedes subir uno igual o parecido a los de xataka
  8. Mas, sy udah coba dan work.
    Tapi selalu muncul di bagian akhir artikel terus.

    padahal bagian (midAd3,showAd3[5] sdh sy ganti dgan angka 2 / 1. tp ttp munculnya d akhir artikel. Mohon sulsinya mas,,,
    1. pada js bagian post-body harus sama dengan yang ada di templatemu, jika tidak sama maka munculnya akan di bawah saja, btw pkai template apa?
  9. Sudah fix mas, post-body diganti postBody dan [3] kurang kurung tutup, makanya dibawah,,

    Thanks mas,,
    1. ok sama2 ya
© 2020 - Wendy Code

Pemblokir Iklan Terdeteksi

Matikan adBlock anda untuk dapat mengakses situs ini.

translate to english