cara membuat related post di tengah artikel blogger

cara membuat related post hanya teks di tengah artikel otomatis

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.

Cara Membuat Related Post Di Tengah Artikel Blogger

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letkkan 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.