Cara Pasang Related Post di Tengah Artikel Blogger 100% Work!!

Hallo selamat datang kembali di artikel mimin, kali ini admin akan membahas tentang cara membuat baca juga yang ada di tengah artikel blog, mungkin kalian disni sedang mencari-cari tutorial cara pasang related post di blog namun sebagian tidak work di template kalian pakai, nah kali ini mimin akan memberikan tutorial ini dijamin work terpasang di blog kalian ya.

Cara Pasang Related Post Di Tengah Artikel Blogger

Pertama kalian silakan masuk ke dashboard blogger dan pilih tema dan edit html lalu kalian salin css di bawah ini dan letakkan di atas kode ]]></b:skin> atau di atas kode </style> atau bebas dimana kalian biasa menempatkan css custom kalian ya.

/* Css Related Posts */
.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,") 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)}

Untuk kalian disini yang memakai template Plus UI/ Lantro UI yang memiliki theme color bisa rubah background-color #fefefe diatas menjadi var(--linkB) agar dapat mengikuti warna tema kalian masing2

Selanjutnya silakan salin kode di bawah ini dan letakkan di bawah kode <data:post.body/> biasanya kode ini ada lebih dari 1 tergantung template apa yang kalian gunakan silakan coba satu per satu kalo mimin cari yang terdekat dengan

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>

Nah jika sudah selesai harusnya relatedpost terpasang dengan baik di template kalian, namun jika relatedpost kalian tidak muncul atau muncul di bawah artikel kalian bisa mengganti P yang admin tandai di atas dibagian .postBody menjadi br atau div tergantung tag artikel yang kalian gunakan.

Nah itu dia tutorial dari admin mengenai Cara pasang related posts di tengah artikel yang bisa saya bagikan dikesempatan kali ini semoga bermanfaat.