Öncelikle, lütfen blogger kontrol paneline gidin ve bir tema seçin ve html'yi düzenleyin, ardından aşağıdaki css'yi kopyalayın ve kodun üstüne ]]></b:skin>veya kodun üstüne </style> veya genellikle özel css'inizi yerleştirdiğiniz yere serbestçe yerleştirin.
/* 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)}
Ardından, lütfen aşağıdaki kodu kopyalayın ve kodun altına yerleştirin. <data:post.body/> Kullandığınız şablona bağlı olarak genellikle bu koddan 1'den fazla bulunur.
<!-- 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<1'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"' 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>
Şimdi bittiyse ilgili post şablonunuza düzgün bir şekilde yüklenmiş olmalı fakat ilgili postunuz görünmüyorsa veya yazının altında görünüyorsa yukarıda .postBody bölümünde adminin işaretlediği P'yi br veya olarak değiştirebilirsiniz.