Membuat Artikel terkait di bawah postingan dengan scroll

hai,..ketemu lagi... malam ini ane masih posting tentang tutorial ni...membuat artikel terkait di bawah postingan ane kasi lihat screenshoot nya ya. kalo mau langsung tu di bawah artikel ini juga ada...oke. langsung aja gak usah  panjang lebar...



itu yang ane... kalo mau ikutin ni caranya

Loggin blogger
Rancangan, edit html
cari kode yang mirip <data:post.body/> lalu letakkin kode berikut di bawahnya

<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 = 10;
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>


oke kalo udah cari lagi kode ]]></b:skin>


letakkin kode berikut diatasnya


.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}


nah di situ tempat ente ngedit... ubah tu backgroundnya jadi gambar...kalo mau sih!!

ya udah selesai ya





Bagikan Artikel Ini ke: Facebook Twitter Google+ Linkedin Technorati Digg
Posted by Jasriman Sukri, Published at 08.39 and have 7 komentar

7 komentar:

  1. Keren gan...
    tapi kalau mau buat artikel terkait dengan background kayak punya agan..
    gimana caranya gan???

    BalasHapus
    Balasan
    1. background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}

      coba ganti

      background:url(alamat gambar.gif)no-repeat right center;

      Hapus
  2. Mantap gan, aku coba
    wkwkwk

    BalasHapus
  3. Gan
    Kok punya ane aneh
    kalo gak mouse gak di dalem kotak terkait warna nya hitam
    kalo mouse di dalem kotak terkait warna nya putih
    bisa ga warna nya hitam terus
    Arioutsider69.blogspot.com

    BalasHapus
  4. Gan
    Kok punya ane aneh
    kalo mouse gak di dalem kotak terkait warna nya hitam
    kalo mouse di dalem kotak terkait warna nya putih
    bisa ga warna nya hitam terus
    Arioutsider69.blogspot.com
    FIX

    BalasHapus