Bikin Scroll di Related Post

Widgets

Pengen bikin efek scroll kamu di related post kamu?? atau kamu belum punya artikel terkait?? Kalo pengen n belum punya, cocok banget kamu cobain postingan kali ni, soalnya Saya pengen berbagi ilmu sedikit tentang membuat related post + scrollnya..

Cukup banyak situs memuat artikel seperti ini, tapi jika kamu lagi males surfing di dunia maya, pelajari saja cara membuat related post + scroll berikut


Langkah pertama
1. Login dulu ke blogger kamu.

2. Lalu masuk ke tata letak >> Edit HTML.. Jangan lupa centangin expand template
widget nya ya..

3. Cari Kode berikut ni :
]]></b:skin>

4. Lalu Copy paste kode ini tepat diatasnya...

.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);}

Untuk yang dikasi warna biru, kamu bisa menggantinya sesuai warna yang kamu sukai..


Langkah kedua
1. Cari kode berikut :
<data:post.body/>


Inget!! Kalo kamu punya 2 macam kayak gitu.. pilih aja yang paling bawah ya...

2. Lalu masukin kode ini tepat di bawahnya ya..

<b:if cond='data:blog.pageType == "item"'><br /><br/><br /><br/><br /><h2> Artikel Terkait:</H2><br /><div class='rbbox'> <br /><div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> <br /><div id='albri'/> <br /><script type='text/javascript'><br />var homeUrl3 = "<data:blog.homepageUrl/>";<br />var maxNumberOfPostsPerLabel = 4;<br />var maxNumberOfLabels = 10;<br />maxNumberOfPostsPerLabel = 10;<br />maxNumberOfLabels = 3;<br />function listEntries10(json) {<br />var ul = document.createElement('ul');<br />var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?<br />json.feed.entry.length : maxNumberOfPostsPerLabel;<br />for (var i = 0; i < maxPosts; i++) {<br />var entry = json.feed.entry[i];<br />var alturl;<br />for (var k = 0; k < entry.link.length; k++) {<br />if (entry.link[k].rel == 'alternate') {<br />alturl = entry.link[k].href;<br />break;<br />}<br />}<br />var li = document.createElement('li');<br />var a = document.createElement('a');<br />a.href = alturl;<br />if(a.href!=location.href) {<br />var txt = document.createTextNode(entry.title.$t);<br />a.appendChild(txt);<br />li.appendChild(a);<br />ul.appendChild(li);<br />}<br />}<br />for (var l = 0; l < json.feed.link.length; l++) {<br />if (json.feed.link[l].rel == 'alternate') {<br />var raw = json.feed.link[l].href;<br />var label = raw.substr(homeUrl3.length+13);<br />var k;<br />for (k=0; k<20; k++) label = label.replace("%20", " ");<br />var txt = document.createTextNode(label);<br />var h = document.createElement('b');<br />h.appendChild(txt);<br />var div1 = document.createElement('div');<br />div1.appendChild(h);<br />div1.appendChild(ul);<br />document.getElementById('albri').appendChild(div1);<br />}<br />}<br />}<br />function search10(query, label) {<br />var script = document.createElement('script');<br />script.setAttribute('src', query + 'feeds/posts/default/-/'<br />+ label +<br />'?alt=json-in-script&callback=listEntries10');<br />script.setAttribute('type', 'text/javascript');<br />document.documentElement.firstChild.appendChild(script);<br />}<br />var labelArray = new Array();<br />var numLabel = 0;<br /><b:loop values='data:posts' var='post'><br /><b:loop values='data:post.labels' var='label'><br />textLabel = "<data:label.name/>";<br />var test = 0;<br />for (var i = 0; i < labelArray.length; i++)<br />if (labelArray[i] == textLabel) test = 1;<br />if (test == 0) {<br />labelArray.push(textLabel);<br />var maxLabels = (labelArray.length <= maxNumberOfLabels) ?<br />labelArray.length : maxNumberOfLabels;<br />if (numLabel < maxLabels) {<br />search10(homeUrl3, textLabel);<br />numLabel++;<br />}<br />}<br /></b:loop><br /></b:loop><br /></script><br /></div> <br /><script type="text/javascript">RelPost();</script><br /></div> <br /></b:if><br />

6. Simpan templatenya....

Dah selesai nie... tinggal lihat hasilnya... selamat mencoba ya...