Cara Membuat Related Post Dengan Scroll.

 Cara Membuat Related Post Dengan Scroll. Kali ini saya akan mengulas sedikit tentang Cara Membuat Artikel Terkait Atau Related Post Dengan Scroll. Buat sobat yang masih bingung cara buatnya meding kita simak Tips dan caranya, 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. 


TERBUKTI 100% BERHASIL

Cara Membuat Artikel Terkait Dengan Scroll:

1.Pertama Login ke akun blog Anda.

2.Pilih Layout / Tata Letak / Rancangan.

3.Klik tab Edit HTML.

4.Jangan lupa klik Expand Template Widgets.

5.Cari kode yang seperti ini :<data:post.body/>

Gunakan Ctrl + F untuk mempermudah pencarian.

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>

6.Copy Paste kode di di atas ini setelah/tepat dibawah kode <data:post.body/> yang kedua (jika sudah menggunakan Read More).

7.Untuk kata Artikel Terkait, Anda bisa menggantinya dengan kata yang lain.
Contoh : Artikel Sejenis, Artikle Menarik Lainnya, Baca Artikel Lainnya, Realeted Post, Baru Melintas. dll

8.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 Anda mau.
#D8D8D8: warna border
#E0F8E0: warna background
#EFFBEF: warna background juga, namun akan terlihat jika disorot dengan pointer


9.Terakhir klik Simpan Template.


GOOD LUCK sob,
Nah Itulah Sedikit Ulasan Mengenai Cara Membuat Artikel Terkait Atau Related Post Dengan Scroll, semoga bermanfaat..