CARA MEMBUAT ARTIKEL TERKAIT DI BAWAH POSTINGAN
Artikel Terkait (Related Post)
fungsinya untuk membuat pengunjung membaca artikel kita yang lainnya
dan tentunya yang masih berhubungan dengan berita yang mereka baca
sebelumnya, ini sangat membantu visitor/pengunjung untuk lebih leluasa
membaca artikel lain yang mungkin bermanfaat untuk diketahui. Artikel
terkait adalah Sebuah Link atau Url yang di kelompokan dan saling
berkaitan atau berhubungan dan bahkan bisa satu topik, makanya di dalam
script artikel terkait tidak akan bisa bekerja jika postingan Anda belum
Anda kasih Label.
Yang sudah ingin mencoba, berikut adalah cara membuat artikel terkait (Related Posts) seperti pada bagian bawah artikel ini :
1. Masuk ke blogger
2. Pilih Template > Click Edit Template.
3. Lalu cari kode <data:post.body/> jika Anda menemukan banyak kode tersebut, gunakan kode yang ke-2
4. Copy-paste kode berikut ini tepat di bawahnya:
<b:if cond='data:blog.pageType == "item"'>
<h3><b><i><span style='font-family: Trebuchet MS, sans-serif; font-size: large;'>Baca Juga Artikel Terkait Lainnya:</span></i></b></h3>
<div class='rbbox'>
<div style='margin:0; padding:0px;height:240px;overflow:auto;border:1px solid #fff;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 15;
maxNumberOfPostsPerLabel = 50;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;>
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('albri').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>
5. Kemudian cari kode ]]></b:skin>
6. Copy-paste code CSS berikut ini tepat diatasnya :
.rbbox{border: 1px solid #FFFFFF;padding: 5px;
background-color: #FFFFFF;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}
.rbbox ul li {
display : block;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF68CGfG71m117oNGyzGeTMRfaP7_ZwZLnhjFu9dc2LdDVqXRcMsyPVKKjSlIzz8BkNqXdROZfqvUesNue1Tnalg2qditj-Kdj8W1hxl-yqQMUO1zfdCUBGkO0IHAfqmiLQFuyoQrl07g/h120/Icon-tugasku-4u.png) no-repeat 0px 0;
margin-left :
-10px;padding-top : 0;padding-right : 0px;padding-bottom :
1px;padding-left : 20px;margin-bottom : 5px; line-height : 2em;
border-bottom:2px dotted #e7e7e7;}
Keterangan :
Baca Juga Artikel Terkait Lainnya: Anda juga dapat menggantinya dengan tulisan yang Anda sukai.
height:240px Tinggi kolom Artikel terkait.
maxNumberOfPostsPerLabel = 50; adalah jumlah posting atau artikel terkait yang ingin di tampilkan.
maxNumberOfLabels = 3; adalah jumlah label terkait yang ingin ditampilkan
background-color: #FFFFFF; adalah warna background kotak related posts
background-color: #EFFBEF; adalah warna background waktu disorot kursor, bisa diganti sesuai keinginan, silahkan lihat disini : Daftar kode warna HTML
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF68CGfG71m117oNGyzGeTMRfaP7_ZwZLnhjFu9dc2LdDVqXRcMsyPVKKjSlIzz8BkNqXdROZfqvUesNue1Tnalg2qditj-Kdj8W1hxl-yqQMUO1zfdCUBGkO0IHAfqmiLQFuyoQrl07g/h120/Icon-tugasku-4u.png Anda juga dapat merubah gambar ini dengan memasukkan link url gambar Anda sendiri.
7. Simpan Template Anda.
Semoga cara membuat artikel terkait di bawah postingan blog ini bisa bermanfaat buat blogger yang lainnya....
