Gratis berlangganan artikel Zykry via mail, join sekarang!

Monday, March 15, 2010

Cara Membuat Scroll Pada Related Post



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.

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
image
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!





Related Post:

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di zykry-trick.blogspot.com
Thx to :
Jangan lupa add facebook Zykry Dark
print this page Print this page
Cara Membuat Scroll Pada Related PostSocialTwist Tell-a-Friend

Comments :

1
AGEN BOLA TERBESAR said...
on 

Terimakasih Atas Infonya Gan.. Sangat Membantu Dan Di Tunggu Artikel Berikutnya Yah ^_^
AGEN PIALA DUNIA
BANDAR BOLA
JUDI ONLINE
BACCARAT ONLINE
PARLAY 2 TIM


Apa pendapat anda?

No spam and no porn yaw!!

Widget By Devils Workshop

Guest Book

Iklan

Pasang iklan anda di Zykry-trick hanya Rp.15.000 /bulan Hubungi : 087 823 177 355 - 085 759 277 896 Facebook : Zykry@programmer.net
 
twitter

Tukeran Link

Tips Dan Trick Blogging

U follow I follow

Statistik


free counters
broadband speed test
Current Events & News Blogs - Blog Rankings Blog Directory
Internet Blogs Web Design & CSS (Graphics) - TOP.ORG
Blogging Blogs - Blog Catalog Blog Directory Online Marketing - OnToplist.com
Web design blogs
The Republic of Indonesian Blogger | Garuda di Dadaku
Top 10 Award