Seperti yang dijelaskan pada artikel sebelumnya, bahwa artikel terkait fungsinya adalah agar setiap post/artikel yang terkait atau terbit dalam kategori yang sama, dapat ditampilkan juga dalam post yang sedang dibaca pengunjung.
Selain itu, artikel terkait dengan scroll ini dapat menghemat tempat dan juga memasukkan berpuluh-puluh postingan tanpa batas. Jadi, dengan menggunakan artikel terkait memudahkan para pengunjung untuk melihat posting atau artikel lain yang berkaitan dengan artikel yang sedang dibaca, dalam hal ini artikel yang berkaitan sesuai dengan label atau kategori.
Cara Membuat Artikel Terkait Dengan Scroll
<data:post.body/>
Gunakan Ctrl + F untuk mempermudah pencarian.
<b:if cond='data:blog.pageType == "item"'>
<br/>
<br/>
<H2>Artikel Terkait:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 9999;
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>
<br/>
<br/>
<H2>Artikel Terkait:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 9999;
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>
. rbbox {border: 1px solid #D8D8D8; padding: 5px;
background-color: #E0F8E0;-moz-border-radius: 5px; margin: 5px;}
. rbbox: hover {background-color: #EFFBEF;}
background-color: #E0F8E0;-moz-border-radius: 5px; margin: 5px;}
. rbbox: hover {background-color: #EFFBEF;}
Catatan:
Ganti kode-kode yang berwarna dengan kode warna yang sobat mau. Jika tidak tahu kode warnanya, silakan ke artikel tabel dan kode warna html.
#D8D8D8: warna border
#E0F8E0: warna background
#EFFBEF: warna background juga, namun akan terlihat jika disorot dengan pointer
Sekian dulu artikel Deny ini mengenai cara membuat artikel terkait dengan scroll. Semoga dengan widget artikel terkait dengan scroll ini pageviews blog anda makin meningkat karena klik di artikel terkait dari pengunjung. Semoga bermanfaat.
30 comments
Mantaff sob,udah ane praktekin tutorialnya :D,sekalian pertamax
ReplySaya udah lama ga urusin blogspot nih.
Replythx atas infonya sob,, sudah saya praktekin,, hehhe,,
Replyhhi mantep ^_^ nice share master Deny
Replyuntuk blog dengan artikel yang kaya saya kira tips ini sangat cocok, tapi kurang cocok jika blog yang berbasiskan gambar.. :D thanks
Replymakasih gan infonya
Replysiip makasih infonya saya coba,bila berkanan kunjungi blog saya http://rendraaloneae.blogspot.com/ minta masukannya dari senior bloger,makasih sebelumnya
ReplyTerima kasih infonya... salam...
Replythanks mas bro ..
Replyhttp://kelaspojok.org/
tq masssssssss, mantap infonya...
Replyhttp://www.kuntil-lepas.com
thanks bgt gan, otak-atik sampe kepala pening...... :))
Replymakasih banget,, setelah keliling-keliling dan nggak berhasil. ternyata di sini ane nemu yang pas. its work! thanks sob...
Replymakasih tutorialnya mas hehe
ReplyMantap gan artikelnya, sangat membantu.....trims
ReplyLangsung dipraktekin...hohohohohooo
Replytengkyu gan,,,
mantaph om..
Replysy olah TKP dulu
thanks
terimakasih..
Replysudah saya aplikasikan di blog saya
thanks... dah q prakteki broo...
Replykok gak kerja mas broo... g jalan..
Replyada empat.. gimana?
ReplyMakasih banget tipsnya mas, sudah saya terapkan di blog saya dan berhasil. Alhamdulillah sekarang udah ada artikel terkait...hehehe...
Replylangsung ah ke TKP., mantap gannn
ReplyWiiih Makasih sob Infonya
ReplyTHANKS SOB..UDAH ANE PASANG DAN BERHASILL
Replyuntung mas ngepost artikel kaya begini, jadi saya bisa ngeganti tampilan artikel terkait yang lama (nggak ada scrollnya)
Replymakasih mas.
saya coba dulu kawan. mudah2an sukses...hehehe
ReplyTkz,
Replyhttp://hikmahtaubat.blogspot.com/
keren... tengkyu mas
ReplyTerimakasih banyak atas tipsnya
Replyyay , dapet juga ... :D
ReplyPost a Comment
Silahkan Anda kritik dan sarannya pada kolom komentar di bawah ini. Karena setiap satu kata Anda berkomentar sangat berarti untuk kemajuan blog ini (baca: Cara Berkomentar yang Baik).