Jumat, 03 Juni 2011

Cara Membuat Scroll Pada Related Post Di Blog

| Jumat, 03 Juni 2011 | 1 komentar

Awalnya alasan membuat scroll pada artikel terkait/ related post diblog ini karena pada postingan anaa cara membuat scroll pada daftar komentar sebelumnya bermaksud agar bisa dikit menghemat halaman dan tampilan lebih apik tidak dijejali dengan daftar komentar yang panjang.... tapi komentar dari sahabat blogger (ukhty Narti) yang menanyakan bagaimana agar daftar komentar tidak masuk dalam scroll membuat anaa berpikir kembali. Benar juga ada baiknya kolom untuk menuliskan komentar tidak masuk dalam scroll selain justru lebih apik, sangat membantu sahabat blogger yang masih baru (padahal asli anaa satu diantaranya) untuk tidak bingung saat ingin menuliskan komentarnya harus nyari nyari, apalagi kalau belum ngerti scroll? Karena kolomnya 'sembunyi' didalam scroll & terletak paling bawah dari daftar komentar.

image

Jadinya untuk tujuan yang sama ketika anaa hendak membuat scroll pada daftar komentar, sekarang anaa buat scroll pada artikel terkait/ related post dan menghapus scroll pada daftar komentar, kecuali anaa dah temukan cara membuat scroll pada daftar komentar tanpa memasukkan kolom komentarnya dalam scroll, duh dah otak-atik, search digoogle belum nemu caranya. Ada sahabat yang tahu?
Nah seperti biasa kalau dah nemukan ilmu ngeblog anaa buat postingannya, tentu setelah anaa berhasil mempraktekinnya sendiri diblog ini atau blog anaa lainnya tempat nguji coba.

Jadi panjang ceritanya? Berikut membuat scroll pada artikel terkait/ related post
1. Loggin ke blogger=> Klik layout=> Edit HTML=> Klik Expand Template Widget=> Cari kode 
<data:post.body/>
Kalau sudah ketemu, copi dan pastekan script/ code berikut dibawah kode tadi

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
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 &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
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 = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>

2. Selanjutnya cari kode ]]></b:skin>
3. JIka sudah ketemu copy dan pastekan code berikut diatas code 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);}

4. Simpan template
Selesai, sobat telah membuat scroll pada artikel terkait/ related post pada blog sobat, lihat hasilnya!  Semoga membantu. 


Silahkan Share yah sob! :
Anda sedang membaca artikel tentang Cara Membuat Scroll Pada Related Post Di Blog dan anda bisa menemukan artikel Cara Membuat Scroll Pada Related Post Di Blog ini dengan url http://zidiyuto.blogspot.com/2011/06/cara-membuat-scroll-pada-related-post.html, anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Scroll Pada Related Post Di Blog ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Cara Membuat Scroll Pada Related Post Di Blog sumbernya.

1 komentar:

Silahkan berkomentar kepada sobat blogger semua. Diharapkan komentar yang berkaitan dengan isi dari blog ini. Terima Kasih.



TULISKAN KOMENTAR DI BAWAH!!!

Related Posts Plugin for WordPress, Blogger...
 

Sobat Blogger

About Me

Foto Saya
Saya adalah seseorang yang senang berbagi. Oleh karena itu mari kita saling berbagi informasi di dunia maya ini.

My Status

© Copyright 2012. zidiyuto.blogspot.com . All rights reserved | zidiyuto.blogspot.com is proudly powered by Blogger.com | Template by o-om.com - zoomtemplate.com