You are here: Home » Tips dan Trik » Cara Membuat Related Post / Artikel Terkait dengan Fungsi Scroll
Kali ini hapehatelo akan membahas tentang bagaimana cara mengubah tampilan related post atau bahasa kitanya artikel terkait di bawah posting yang memiliki fungsi scroll? Kita Sebut saja dengan nama Related Post With Scroll yaiturelated post yang ditampilkan dalam bentuk menu scroll. Contohnya seperti gambar di bawah ini :
Bagi anda yang ingin tau bagaimana cara membuat Artikel terkait sepeti di atas silakan ikuti langkah-langkah di bawah inii :
Bagi anda yang ingin tau bagaimana cara membuat Artikel terkait sepeti di atas silakan ikuti langkah-langkah di bawah inii :
1. Login Ke Blogger
2. Pilih Tata Letak
3. Klik Edit HTML
4. Klik kotak kecil expand . .
5. Cari kode seperti ini <data:post.body/>
(Biar cepat ketemu, tekan CTRL+F tar masukin aja
6. Copy kode di bawah ini dan dan simpan di bawah kode <data:post.body/>
<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 = 10;
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>
7. Cari kode ini : ]]></b:skin>
8. Copy kode di bawah ini dan paste di atas kode ]]>
.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);}
9. Save template
Selesai, dan lihat hasilnya . . .
Post By : http://asksalman19.blogspot.com
Refrensi : brugkembar.blogspot.com
Category: Tips dan Trik
Related posts:
If you enjoyed this article, subscribe to receive more great content just like it.
Langganan:
Posting Komentar (Atom)
POST COMMENT
0 komentar:
Post a Comment