Membuat Artikel Terkait Dengan Scroll

Membuat Artikel Terkait Dengan Scroll - artikel terkait dengan scroll ini berbeda dengan artikel terkait sebelumnya (baca: cara membuat artikel terkait) yang tidak mempunyai scroll. Contoh artikel terkait dengan scroll dapat anda lihat pada blog Deny ini.

Seperti yang dijelaskan pada artikel sebelumnya, bahwa artikel terkait fungsinya adalah agar setiap post/artikel yang terkait atau terbit dalam kategori yang sama, dapat ditampilkan juga dalam post yang sedang dibaca pengunjung.

Selain itu, artikel terkait dengan scroll ini dapat menghemat tempat dan juga memasukkan berpuluh-puluh postingan tanpa batas. Jadi, dengan menggunakan artikel terkait memudahkan para pengunjung untuk melihat posting atau artikel lain yang berkaitan dengan artikel yang sedang dibaca, dalam hal ini artikel yang berkaitan sesuai dengan label atau kategori.

Cara Membuat Artikel Terkait Dengan Scroll

Pertama Login ke akun blog Anda.

Pilih Layout / Tata Letak / Rancangan.

Klik tab Edit HTML.

Kemudian klik Expand Template Widgets.

Cari kode yang seperti ini :

<data:post.body/>

Gunakan Ctrl + F untuk mempermudah pencarian.

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.

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>

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

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

. rbbox {border: 1px solid #D8D8D8; padding: 5px;
background-color: #E0F8E0;-moz-border-radius: 5px; margin: 5px;}
. rbbox: hover {background-color: #EFFBEF;}

Catatan:
Ganti kode-kode yang berwarna dengan kode warna yang sobat mau. Jika tidak tahu kode warnanya, silakan ke artikel tabel dan kode warna html.
#D8D8D8: warna border
#E0F8E0: warna background
#EFFBEF: warna background juga, namun akan terlihat jika disorot dengan pointer

Terakhir klik Simpan Template.

Sekian dulu artikel Deny ini mengenai cara membuat artikel terkait dengan scroll. Semoga dengan widget artikel terkait dengan scroll ini pageviews blog anda makin meningkat karena klik di artikel terkait dari pengunjung. Semoga bermanfaat.