bergabung di grup telegram kami

cara membuat related post di tengah artikel blogger

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.

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.

untuk kode ini saya dapatkan dari template fletro versi lawasnya, dan javascript sebelumnya menggunakan document.write telah saya update menggunakan appendChild yang lebih di rekomendasikan oleh browser.

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> atau di atas kode </style>

/* ubah warna cari kode #f89000 dan %23f89000 */
.postTextRelated{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;display:none}
.postTextRelated a{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}
.postTextRelated a:hover{opacity:.8}
.postTextRelated b{font-size:13px;font-weight:400;margin:0;padding:2px 14px;background-color:#fefefe;border:1px solid #e6e6e6;border-radius:15px; position:absolute;top:-15.5px;left:20px}
.postTextRelated ul{margin:8px 0 0;padding-left:20px}
.postTextRelated li:hover{margin-left:5px}
.postTextRelated li{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g transform='translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) translate(6.500000, 3.000000)'><line fill='none' stroke='%23f89000' x1='5.3939' y1='9.7001' x2='5.3939' y2='0.7501'></line><path fill='none' stroke='%23f89000' d='M5.3998,17.3539 C6.6558,17.3539 10.6708,10.9899 9.9488,10.2679 C9.2268,9.5459 1.6418,9.4769 0.8508,10.2679 C0.0598,11.0599 4.1448,17.3539 5.3998,17.3539 Z'></path></g></svg>") left / 20px no-repeat;list-style-type:none;padding:0 25px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f89000;transition:all .4s ease}

/* css darkmode sesuaikan class (.drK) */
.drK .postTextRelated b{background-color:#1e1e1e;}
.drK .postTextRelated,.drK .postTextRelated b{border-color:rgba(255,255,255,.15)}

selanjutnya 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

untuk pengguna template median-ui 1.6 bisa letakkan di bawa kode ini <div class='pS post-body postBody' id='postBody'><data:post.body/></div>

<!-- letakkan kode ini harus di bawah kode <data:post.body/> -->
<div class='postTextRelated' id='postTextRelated'>
<script>/*<![CDATA[*/ var relatedTitles=new Array,relatedTitlesNum=0,relatedUrls=new Array;function related_results_labels(e){for(var t=0;t<e.feed.entry.length;t++){var l=e.feed.entry[t];relatedTitles[relatedTitlesNum]=l.title.$t;for(var r=0;r<l.link.length;r++)if("alternate"==l.link[r].rel){relatedUrls[relatedTitlesNum]=l.link[r].href,relatedTitlesNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),t=new Array(0),l=0;l<relatedUrls.length;l++)contains(e,relatedUrls[l])||(e.length+=1,e[e.length-1]=relatedUrls[l],t.length+=1,t[t.length-1]=relatedTitles[l]);relatedTitles=t,relatedUrls=e}function contains(e,t){for(var l=0;l<e.length;l++)if(e[l]==t)return!0;return!1}function printRelatedLabels(){for(var e=Math.floor((relatedTitles.length-1)*Math.random()),t=0;t<relatedTitles.length&&t<20;){var l=document.createElement("ul"),r=document.createElement("li"),a=document.createElement("a");a.setAttribute("href",relatedUrls[e]),a.setAttribute("target","_blank"),a.innerText=relatedTitles[e],l.appendChild(r),r.appendChild(a),document.querySelector(".postTextRelated").appendChild(l),e<relatedTitles.length-1?e++:e=0,t++}} /*]]>*/</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>
<script>/*<![CDATA[*/
// (postBody) sesuaikan dengan kode di template kalian, biasanya dapat di lihat pebungkus kode ini <data:post.body/> contoh <div class='postBody'><data:post.body/></div>
!function() {
    let c = document.querySelector("#postTextRelated");
    if (c) {
        let a = document.querySelectorAll(".postBody p"),
            b = parseInt(a.length / 2);
        if (a.length > 0) {
        c.style.display = 'block';
        "P" == a[b].nodeName ? a[b].parentNode.insertBefore(c, a[b]) : a[b].parentNode.insertBefore(c, a[b].nextSibling)
    }
}
}()
/*]]>*/</script>

sekian cara membuat related post di tengah artikel blogger yang bisa saya bagikan kali ini semoga bermanfaat dan terima kasih telah berkunjung.

Source code:
https://fletro.jagodesain.com
https://median-ui.jagodesain.com

Baca juga :

19 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
  10. Di median ui versi 1.6 work gk bg? Dan apakah otomatis?
    1. Work
© 2020 - Wendy Code