Related Posts sering muncul di akhir setiap artikel, membantu pembaca mengakses artikel lain dalam kategori yang sama. Artikel ini akan memandu Anda untuk menambahkan widget posting terkait ke Blogspot, tetapi posisinya akan muncul di tengah artikel.
Karena ini adalah default di tengah artikel, Anda perlu menyelaraskan elemen dengan benar di artikel.
Sisipkan Posting Terkait di antara posting blogspot
Masuk ke halaman admin Blogger > Tema > Edit HTML .
Masukkan kode berikut sebelum tag </head>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
var bspostRelatedIn = new Array(); var bspostRelatedInNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entri = json.feed.entry[i]; bspostRelatedIn[bspostRelatedInNum] = entri.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[bspostRelatedInNum] = entry.link[k].href; bspostRelatedInNum++; 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.panjang += 1; tmp2[tmp2.length - 1] = bspostRelatedIn[i];}} bspostRelatedIn = tmp2; relatedUrls = tmp;} fungsi berisi(a, e) { for(var j = 0; j < a.length; j++) jika (a[j]==e) mengembalikan nilai true; return false;} function printRelatedLabels() { var r = Math.floor((bspostRelatedIn.length - 1) * Math.random()); var saya = 0; document.write('<ul>'); sementara (saya <bspostRelatedIn.length && i < 3 ) { document.write('<li><a href="' + relatedUrls[r] + '">' + bspostRelatedIn[r] + '</a></li>') ; if (r < bspostRelatedIn.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');let element = document.createElement('a');element.href = 'https://www.bloggerspice.com/ ';element.pathname = 'embed' + element.pathname;console.log(element.toString());}//]]>
</script>
</b:if>
Di bspostRelatedIn.length && i < 3 Ganti angka 3 dengan jumlah postingan yang ingin ditampilkan.
Berikutnya. Temukan dan ganti <data:post.body/>(Perhatikan dalam template bisa ada banyak paragraf ini, Anda harus mencari tahu dan memilih yang benar, biasanya paragraf ke-2 atau ke-3 dengan yang berikut:
<div expr:id='"post1" + data:post.id'/>
<div class='bspostRelatedIn'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels& hasil-maks=3 " ' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<div id='bspostRelatedIn_title'>Terkait</div>
<script type='text/javascript' >
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='"post2" + data:post.id'><p><data:post.body/></p></div>
<script type='text/javascript'>
var obj0=document.getElementById("post1<data: post.id/>");
var obj1=document.getElementById("post2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf("<br>");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>
At max-results= 3 Ganti angka 3 dengan jumlah kartu yang ingin ditampilkan di atas.
Terakhir. Tambahkan CSS terlebih dahulu ]]></b:skin>:
/* Posting Terkait */
.bspostRelatedIn{text-align: left;
bantalan: 15px;
margin: 30 piksel 0;
perbatasan: 1px solid #ddd;
batas-radius: 3px;
ukuran font: 15px;
posisi: relatif;}
#bspostRelatedIn_title{ukuran font: 16px;
margin: 0;
tampilan: blok sebaris;
bantalan: 0 10px;
posisi: mutlak;
atas: -14px;
kiri: 10 piksel;
warna latar: #fefefe;
warna: #7d7d7d;}
.bspostRelatedIn ul {
list-style: none;
bantalan: 3px 22px 0;
}
.bspostRelatedIn li{ radius batas: 5px;
tinggi garis: 1.7em;
margin-bawah: 0.433333em;
gaya daftar: cakram;
}
.bspostRelatedIn li:hover {text-decoration: underline;}
.bspostRelatedIn li{ border-radius: 5px;
tinggi garis: 1.7em;
margin-bawah: 0.433333em;
gaya daftar: cakram;
}
Anda dapat menyesuaikan gaya tampilan daftar, gunakan CSS seperti di bawah ini:
Gaya 1: poin-poin
.bspostRelatedIn li {
radius batas: 5px;
tinggi garis: 1.7em;
margin-bawah: 0.433333em;
gaya daftar: lingkaran;
}
Gaya 2: nomor peluru
.bspostRelatedIn li {
radius batas: 5px;
tinggi garis: 1.7em;
margin-bawah: 0.433333em;
gaya daftar: desimal;
}
Simpan Template dan lihat hasilnya. Dapat menyesuaikan beberapa CSS agar sesuai dengan blog Anda!
Secara default, jumlah maksimum posting di segmen ini adalah 3. Tetapi nilai ini dapat ditambah atau dikurangi sesuai dengan kebutuhan Anda.