Cara Membuat Artikel Terkait Dengan Fungsi Scroll

Kalau dulu saya telah memposting  Artikel terkait / related post dengan Linkwithin atau artikel terkait yang di sertai dengan gambar, sekarang saya akan posting mengenai Artikel terkait dengan Fungsi scroll. Dan tentu hal ini sangat bermanfaat bagi sobat blogger, disamping tidak terlalu banyak menyita tempat juga memberikan kemudahan bagi pembaca untuk melihat artikel terkait lainnya yang sedang dibaca, dalam hal ini artikel yang berkaitan sesuai dengan label atau kategori.

fungsi scroll dalam blogger sendiri mungkin tidak usah dijelasin lagi karena saya yakin sobat-sobat semua pasti sudah mengetahuinya…J

nah tips blogger ini merupakan salah satu tips yang baik untuk menghemat tempat di halaman utama blogger kita agar tidak kelihatan terlalu penuh, kan pembaca juga lebih terasa nyaman jika blog kita keliihatan tidak terlalu sesak.

nah sekian dulu intemedzo nya kita langsung simak aja tipsnya cekidot….
oya Sebelum ngutak-ngutik, biasakan untuk membackup template Sobat…!!!!!

Tutorial Cara Membuat Artikel Terkait Dengan Fungsi Scroll

1.     Pertama Login ke akun blog Anda.

2.     Pilih Layout / Tata Letak / Rancangan.

3.     Klik tab Edit HTML.

4.     Kemudian klik Expand Template Widgets.

5.     Cari kode yang seperti ini :

<data:post.body/>

Gunakan Ctrl + F untuk mempermudah pencarian.

6.     Jika Sobat sudah menggunakan fungsi Read More, maka terdapat 2 kode <data:post.body/>. Dan jika Sobat sudah menggunakan Artikel Terkait, hapus saja kode artikel terkait yang lama.

7.     Copy Paste kode di bawah ini setelah kode <data:post.body/> yang pertama (jika sudah menggunakan Read More).

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<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 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 9999;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
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 &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
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 = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>

8.     Untuk kata Artikel Terkait, Sobat bisa menggantinya dengan kata yang lain.

9.     Selanjutnya, masukkan kode ini di atas kode ]]></b:skin> .

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

10.   Terakhir klik Simpan Template.

silahkan mencoba semoga bermanfaat....:)

Tweet