Cara Mudah Membuat Artikel terkait dengan Scroll

   Salah Satu cara menarik ini bisa membuat pengunjung betah di website kita, dengan adanya Scroll Artikel ini dapat melihat postingan yang pernah kita buat sebelumnya, sehingga dengan mudah dapat terbaca oleh pengunjung.

Artikel Terkait

• Membuat Blog SImple dan Menarik
•  Cara menghilangkan Navbar blog dengan mudah
• Situs Penyedia Domain Gratis

Berikut cara membuat Scroll artikel dengan mudah :

1. Nasuk ke Blogger { masuk ke blog anda} => dan pilih TEMPLATE dan pilih Edit HTML
2. CTRL+F dan cari code <data:post.body/> 
3. Contoh :
<data:post.body/></b:if> <b:if cond=’data:blog.pageType == "item"’> <br/> <br/> <h2> Artikel Terkait:</H2>

4. Jika kalian sudah mengguakan fungsi Read More, maka akan terdapat dua kode <data:post.body/> berada dibawah <b/b:if> jika telah menggunakan artikel terkaitm kalian bisa menghapus artikel terkait yang lama tersebut, bila kalian ingin menggantinya dengan yang baru. 
 5. kalian bisa Copypaste code dibawah ini setelah code <data:post.body/></b:if> ini yang pertama [ bila kalian 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 " Artikel Terkait " bisa kalian Ubah dengan kata yang lain

6 . Lalu masukan Code dibawah ini di atas code ]]></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 Code warna sesuai ke ingan kalian, jika tidak tau kode warnanya kalian bisa  melihatnya di

• Code code warna yang perlu klian ketahui

#D8D8D8: Code warna untuk border
#E0F8E0 :  Code Warna Untuk Background 
#EFFBEF:  Code Warna Untuk Background , akan terlihat jika disorit dengan pointer

7. Terakhir klik SIMPAN TEMPLATE.

Semoga berhasil,..dan semoga bermanfaat Cara Mudah Membuat Artikel terkait dengan Scroll

Share this

Jeni

Tag : Blog