Tuesday, 10 April 2012

cara membuat artikel terkait scroll

Untuk mempermudah pembaca saya memasang artikel terkait di bawah posting saya, agar pembaca bisa membaca artikel yang terkait dengan bacaannya saat ini, atau kalian bisa membaca artikel yang kategorinya sama dengan yang kalian baca. Contohnya posting ini kategorinya blogger, judulnya cara membuat artikel terakhir scroll, kalian juga bisa membaca judul posting yang sejenis. kalian bisa lihat seperti blog ini di bawah posting sebelum kotak komentar. oke tidak panjang lebar lagi langsung saja praktekkan di blog kalian.

Berikut cara Membuat Artikel Terkait Dengan Scroll :
  • Login ke akun blog sobat.

  • Pilih tata letak >> rancangan.

  • Klik tab edit HTML.

  • Kemudian klik Expand Template Widgets.

  • Cari kode seperti ini :   <data:post.body/> (gunakan Ctrl + F untuk mempermudah pencarian)

  • Copy Paste kode di bawah ini setelah kode <data:post.body/>
 


<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. 
 Sampai disini kita belum selesai, selanjutnya masukkan kode dibawah 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;}
  • Terakhir klik Simpan Template.

  • Selamat mencoba.... semoga dengan ini pengunjung blog kalian makin ramai.
    jangan lupa like blog ini ya.. heeee

    Follow by email

    Delivered by kaprikon.blogspot.com

    0 komentar:

    Post a Comment

    Terimakasih.. semoga bermanfaat