Membuat Artikel Terkait/Related Post dengan Fungsi Scroll

By Friday, March 26, 2010


Assalamu’alaikum....
Bertemu lage, ne. Hehe, pastinya di BLOG sederhana aku ini. Hem, sebenernya aku juga baru belajar nge-blogging. Kalau tutorial-tutorial blog yang aku dapet cuma disimpan di file computer, kok, kayaknya ribet, ya.... Kalau ada temen aku ada yang tanya, aku musti bingung nyari ke sana ke mari file simpenan aku. Jadi, sekalian sharing, skalian nguntungin aku juga (‘kan kalo’ ada yang tanya, tinggal bilang, “Liad di Blog aku, Sobt!” >_<).... Hoho... Oce, deuh, setelah sebelumnya aku sharing cara bikin Read More, sekarang tentang cara bikin Artikel Terkait/Related Post versi scroll.

1.Langkah pertama, tentu aja
LOG IN ke BLOGGER>>TATA LETAK>>EDIT HTML>> klik Expand Template Widgets .
2.Udah??? Nah, sekarang cari kode di bawah ini...
<data:post.body/>

3.Kalo’ ada 2 kode kayak gitu, pilih yang pertama. Copas kode di bawah ini dan letakkan tepat di bawah 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 = 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>

3.Selanjutnya cari kode ]]></b:skin> 

4. Jika sudah ketemu, copy dan pastekan code berikut di atas code merah tadi:

.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);}

5.Save template.... And Jeng jeng... Berhasil, deuh.... Selamat mencoba, ea....

Wassalamu’alaikum... Jangan lupa tulis komentarnya.... Teng qyu....
>::< Jangan lupa comment.nya,ea... >::<





You Might Also Like

6 Comments

  1. Jlan2 lagi2 dpt ilmu dari sobat blogger,,,
    mkasih,,

    ReplyDelete
  2. mkashy buat ilmunyaa.. mau nyobaa tapi takut engga berhasil.. :D

    ReplyDelete
  3. ^Sun's
    Ma sama,,Sun's...
    Jangan lupa balik lage,,ea... >_<

    ^Elok
    Hem,,berhasil,kok. Tuh buktinya aq udah nyoba...
    Tapi,kalo' d punyaQ, no.4 gag berhasil ato gag ngaruh. JAdi, Q gag pake' cara yang no. 4...

    ReplyDelete
  4. Halo Salam Kenal,,,Terimakasih Atas TutorialNya. Blog Anda Bagus, Manstab. Berkunjung Balik ya ???


    Salam,

    [rifweb]

    ReplyDelete
  5. Rifweb::
    Teng qyu2.. Hihi.. :p Abis ini langsung aq kunjungi,,Rif.. ^o^

    Jun::
    Maap T_T,,namanya baru belajar.. Hihi... Ini aja masih agag bingung.. Haha ^0^

    Imtikhan::
    Masama,,Sobt.. Moga ngebantu,,yua.. :D

    Desy::
    Yes,,coba aja.. Jangan lupa kunjungan berikutnya,,,ya :p

    ReplyDelete

Pembaca yang budiman, kindly gimme apapun pendapat atau komentar kamu tentang artikel saya. Tulisan ini tanpa komentar kamu, kayak mahasiswa akhir tanpa skripsi. Ada yang kurang gitu, yak.

Terimakasih atas kunjungan dan segala apresiasinya. Selamat berkarya :)