Cara Mudah Membuat Scrolling pada Artikel Terkait / Related Post
Langsung saja gak pakai basa-basi, cara mudah Membuat Scrolling pada Artikel Terkait / Related Post.
Seperti biasa * Log in ke Blog,* layout terus edit html * klik expand widget template * Lalu cari kode :
<data:post.body/>
* Copy dan pastekan kode dibawah ini dan taruh di atas kode <data:post.body/> ( jika kode <data:post.body/> ada dua, pilih yang ke-2 ) :
<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>
* Kemudian cari kode ]]></b:skin>
* Jika sudah ketemu copy dan pastekan kode di bawah ini dan taruh di atasnya kode tadi.
.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);}
* Klik Save, selesai deh...
semoga bermanfaat dan selamat mencoba...
jika berhasil komentarnya di tunggu dengan senang hati...
( Jika mau related postnya atau artikel terkaitnya ada backgroundnya caranya mudah sekali lihat di sini )
12 komentar:
makasih love atas ilmunya, related pos scroll mmg perlu biar gak terlalu panjang kali ya, thanks
mantab kawan.. blog q juga dah tak pasang RP tp belum da Csrolnya, tak cioba ah
infonya keren & bermanfaat sekali dek.....
@ Makasih atas komentarnya mas Aryo...
@ Mas Rizky ; coba aja deh...
@ Mas Moer ; Makasih mas...sego pecelnya ngangeni.
tips yg bagus dek...:)
@ Kasih - ku buat kak jhonson ...
@ Tipsnya buat blogku sendiri ...
tapi kalo pingen naruh kartun kayak punya kamu gmana non??
salah satu cara agar pengunjung langsung menuju ke artikel terkait..
@ Ryumah Blogger : pasang kartun yang mana? background artikel terkait? sudah ada kok caranya....klik saja ( lihat disini ).
@ Mas Sabirin : Makacih ya atas komentarnya...
Dah tak coba mbak, tapi klo diblogku ada sedikit revisi, script yang pertama tu berada di bawah <data:post.body/>. Klo kutaruh diatas <data:post.body/> , maka box-nya ada diantara judul ama isi posting.. makasih banyak infonya mbak
Alhamdulillah... AKhirnya berhasil juga dek, setelah percoban yg pertama gagal..
Ternyata sedikit di ubah templatenya..
Terimakasih banyak....
Ada yang mau bantu, saya pernah baca , membuat mic exel , bila ditulis angka maka akan diterjemahkan menjadi bacaan, mis 1050 tertulis nantinya seribu lima puluh. sudah ana baca tapi lupa blog sobat yg mana. Mungkin sobat bisa bantu
Post a Comment