Cara Membuat Related Posts pungsi scrolling

membuat Related posts atau postingan terkait mungkin sudah banyak yang bahas, tapi saya akan tetap menuliskannya disamping untuk meramaikan isi blog ini, siapa tau diantara para pengunjung blog ini sedang mencari cara membuat related posts walaupun kedatangannya kesini sedang mencari informasi lain^_^

baik! kali ini saya akan ketengahkan membuat related post yang ada pungsi scrollingnya, ini agar para pengunjung tidak merasa terganggu dengan related posts yang panjang ke bawah khusunya jika diletakan di bawah postingan jadi tinggal geser-geser gitu hehe..

Caranya:
1. Login dulu di Blogger.com dengan id anda
2. pilih tata letak/design(kalau pake bhs inggris)
3. kemudian pilih Edit HTML
4. centang kotak kecil yg ada tulisan Expand Template Widget
5. cari kode berikut <p><data:post.body/></p>
Letakkan kode berikut di bawah kode tadi :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<H2>Related Post:</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 = 50;

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>

6. Jika sudah, sekarang cari kode ini: ]]></b:skin>
7. Letakkan kode berikut di bawah kode tadi :

.rbbox{border: 1px solid #D8D8D8;padding: 5px;

background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}

.rbbox:hover{background-color: #EFFBEF;}

8. klik SIMPAN TEMPLATE
9. selesai
untuk tulisan Related post bisa diganti dengan tulisan kesukaan anda misal artikel menarik lainnya dll. okeh gan demikian cara Membuat Related Posts pungsi scrolling selamat mencoba ^_^

Cara Membuat Related Posts pungsi scrolling 2011-11-19T01:16:00-08:00 Rating: 4.5 Diposkan Oleh: eBlog-wayan