Cara Membuat Scroll Related Post Pada Blogger ~ TuTorial Ku UnTuk Mu

Salah satu teknik agar pengunjung betah berlama-lama di blog kita adalah dengan terus memberikan informasi yang berguna kepada pengunjung. Related post dapat memberikan kemudahan kepada pengunjung dengan menampilkan artikel terkait yang ada pada blog kita. Dengan memanfaatkan related post ini, pengunjung akan betah karena biasanya juga akan tertarik untuk membaca artikel lain yang sejenis.

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: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. Kemudian copas kode berikut diatas ]]></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 Tips/Trick Sarip!

Ditulis Oleh : Syariƒ™ ~ Tips dan Trik Blogspot

Sobat sedang membaca artikel tentang Cara Membuat Scroll Related Post Pada Blogger. TuTorial Ku UnTuK Mu™ Memperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya

<a href="http://sariptrik.blogspot.com/2012/04/cara-membuat-scroll-related-post-pada_8480.html" target="_blank">Cara Membuat Scroll Related Post Pada Blogger</a>