Alvin Radio
Home » » Membuat Artikel Terkait dengan Scroll Bar

Membuat Artikel Terkait dengan Scroll Bar

ILHAN | 07.55 | 2komentar

salam blogger.......kali nini saya coba buat tutorial bagaimana cara buat artikel terkait dengan scrool bar dalam postingan blog atau tepat nya di bawah halaman postingan,apasih pungsi artikel terkait? ya....sangat penting untuk bagi visitor blog untuk membaca dan melihat artikel berhubungan dengan artikel yg baru di baca nya.
dengan scrool bar lebih mempercantik dan menghemat ruangan blog kita.ok... baca juga Cara membuat recent post Berjalan



ok lansung saja ikuti cara memasang nya:
1. Login ke akun blog
2. Selanjutnya edit HTML lalu centang Expand Template Widget dan jangan lupa download template untuk berjaga-jaga jika terjadi kesalahan.
3.  Kemudian carilah kode berikut ini (gunakan ctrl+f untuk mempermudah pencarian)
<data:post.body/>
4. Jika sudah letakkan kode di bawah ini tepat di bawah kode <data:post.body/>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<div style='border: 0px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 300px; background-color: #fcf7f7;'>
<div class='widget-content'>
<h3>Artikel Terkait Lainnya :</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
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;data2007&#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>
</div>
</div>
</b:if>



NB:
- Untuk kode yang berwarna merah silahkan sesuaikan dengan keinginan 
- Untuk kode yang berwarna biru adl warna background  
5. lalu save templet.

Share this article :

2 komentar:

  1. Gan, supaya scrollnya agak ke dalam biar border melengkung semua gimana ??
    Saya udah coba dan border dilengkungkan (sudah jadi pula) tapi pada border yang ada scrollnya ga melengkung karena scrollnya mepet ke garis.
    tolong pencerahannya.
    (untuk melihat kondisinya silakan cek di http://wisnu-friskian.blogspot.com/2012/03/cara-membuat-menu-horizontal-pada-blog.html (pada bagian artikel terkait).
    Terima Kasih.

    BalasHapus
  2. maaf untuk gan wisnu ,baru bikin cara nya ada di sini http://www.alvin-service.com/2012/03/cara-membuat-artikel-terkait-dengan.html

    BalasHapus

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2013. Alvin Service - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger