Membuat Related Post/ Artikel Terkait dengan Scroll Down- sebelumnya saya pernah menulis artikel tentang Cara Membuat Related Post / Artikel Terkait pada kesempatan kali ini, saya akan membagikan tips untuk membuat related post lengkap dengan scroll down. ada yang belum tau apa itu scroll down?? jika kalian penasaran, kalian bisa melihat pada bagian bawah artikel ini. terdapat related post yang dilengkapi dengan kotak yang bisa ditarik kebawah dan keatas. nah kotak itulah yang bisa disebut scroll down.
saya rasa, sebuah blog yang dilengkapi dengan related post akan sangat bermanfaat apalagi jika dilengkapi dengan fungsi scroll. blog kalian akan terlihat lebih menarik dan cantik. langsung saja, jika kalian penasaran cobalah cara dibawah
Membuat Related Post/ Artikel Terkait dengan Scroll Down :
- login ke dashboard blog anda
- pilih rancangan >> edit HTML
- centang pada bagian Expand Widget Templates
- cari kode (gunakan CTLTR +F) <data:post.body/>
- copykan kode dibawah ini setelah kode <data:post.body/>
- <b:if cond='data:blog.pageType == "item"'>
<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 = 100;
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> - bagi kalian yang menggunakan readmore, maka kalian akan menemukan dua kode <data:post.body/> gunakalah yang pertama
- jika sudah selesai, cari kode ini ]]></b:skin>
- lalu copykan kode dibawah ini sebelum kode ]]></b:skin>
- .rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);} - jika kalian sebelumnya pernah menggunakan related post, sebaiknya hapus dahulu related post sebelumnya agar tidak berantakan
- simpan templates anda
- semoga bermanfaat ^__^
thanks infonya
ReplyDelete