Pada tutorial kali ini kita akan belajar bagaimana cara membuat related post dengan fungsi scroll. Mengapa menggunakan scroll? Karena dengan adanya scroll dapat memberikan kesan rapi karena artikel tidak memanjang ke bawah semuanya namun ada batasannya.
Langsung saja cara untuk membuat related post dengan scroll adalah sebagai berikut:
1. Login blogger dengan ID Anda
2. Pilih menu “Design/Tata Letak”
3. Klik “Edit HTML”
4. Jangan lupa beri tanda centang pada tulisan “Expand Widget Templates”
5. Cari kode berikut:
<p><data:post.body/></p>
6. Copas kode berikut dibawah kode tadi
<b:if7. Kemudian copas kode berikut diatas
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 />
]]>
<
/b:skin
>
. /*-----------------------------
kode related post optimal
visit http://www.ateonsoft.com
------------------------------*/
.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. Selanjutnya copas kode berikut diatas kode </head>
<SCRIPT src='http://ateon.fs.googlepages.com/kodescript.js' type='text/javascript'/>
9. Simpan template sobat.
10. Lihatlah perbedaannya sekarang.
Bagaimana? Mudah bukan? Selamat mencoba!
Salam dari BangJohan!