Cara Membuat Related Post Dalam Kotak Scroll

Hi, Sahabat kembali lagi bersama saya hari ini untuk Cara Membuat Related Post Dalam Kotak Scroll. Disebut demikian karena beberapa postingan berada pada label yang sama. Kenapa kok pakai Related Post? Karena memiliki fungsi atau manfaat yang besar untuk blog maupun pembaca. Bagi pembaca akan mempermudah untuk mengetahui atau menelusuri tulisan yang terkait dengan yang sedang dibacanya. Kemudian bagi blog bisa membuat lebih banyak page view.

Related post yang ada di blogger.com atau blogspot yaitu related post yang didasarkan pada label. Jika dalam satu label itu banyak tulisan. Misalnya ada label Blogging ada 20 post makan saat kita membaca salah postingan akan ada 19 judul yang terkait yang ada dibawahnya, ini menyebabkan menyita banyak tempat. Oleh sebab itulah perlu kita membuat scroll pada related post.

Ok, langsung aja yuk....Cara Membuat Scroll pada Related Post

1. Pertama Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode <p><data:post.body/></p> 
6. Taruh (copy paste) kode berikut di bawahnya

<b:if cond='data:blog.pageType == "item"'>  <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 = 100; 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><br />

7. Cari kode ]]></b:skin> dan taruh kode berikut di atasnya

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

8. Cari kode </head> dan taruh kode berikut di atasnya

<SCRIPT src='http://ateon.fs.googlepages.com/kodescript.js' type='text/javascript'/>

9. Simpan Template jika sudah selesai dan lihat hasilnya. 




Semoga bermanfaat.