Cara Menambahkan Fungsi Scroll Pada Related Post di Blog

Kamis, 10 Januari 2013

Cara Membuat Funsi Scroll Pada Related Post di Blog

Umumnya Related Post di ambil berdasarkan fungsi label dalam blog. Jika anda menambahkan fungsi related post di blog dengan meng -copy kode dari sahabat blogger yang lain, biasanya tanpa mengedit kode scripnya, related post akan tampil di kisaran 20 postingan lebih, apalagi jika anda menambahkan lebih dari dua label dalam dalam setiap postingan, maka dapat diperkirakan related post blog anda akan sangat panjang.

Memang tidak masalah karena hal ini menambah indbound link dan menambahkan back link dari blog sendiri. Tapi biasanya cukup mengganngu tampilan blog, karena postingan di blog kita akan terlihat lebih panjang dengan deretan related post di bawah postingan.

Jika anda terganggu dengan masalah seperti ini, anda bisa menambahkan fungsi scroll pada related post tersebut, sehingga tampilan related post menjadi lebih simpel namun tidak kehilangan fungsinya. Untuk menambahkan fungsi scroll tersebut, silahkan simak cara berikut;

Pertama log in ke blog anda dan pilih "template".
Kedua back up dulu template anda untuk berjaga-jaga, kemudian pilih fungsi "edit html".

Ketiga cari kode <data:post.body/> atau <p><data:post.body/></p> gunakan fungsi (ctrl+F)
Keempat jika menemukan kode <data:post.body/> lebih dari satu, pilih kode yang kedua.
Kelima letakkan kode script berikut di dibawah kode <data:post.body/>.

<b:if cond='data:blog.pageType == "item"'><br/><br/><H2>Related Posts</H2> <div class='rbbox'> <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> <div id='ardi33'/> <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('ardi33').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>

Angka "200" merupakan ukuran tinggi kolom related post berikut scroll, anda bisa merubahnya

Keenam cari kode ]]></b:skin> dan letakkan kode berikut 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); }

Ketujuh simpan template dan silahkan cek blog anda.

Sebenarnya kode untuk fungsi scrolnya sendiri adalah:

<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> kode
</div>

Sementara keseluruhan kode tersebut di atas merupakan kode yang telah menyertakan related postnya. Jadi jika blog anda telah menambahkan fungsi related post dengan kode yang lain, anda bisa membuangnya terlebih dahulu atau hanya menambahkan fungsi secrollnya saja. (cakra)