29 April 2010

Membuat Related Post Dalam Kotak Scroll

Hi, Kawan kembali lagi bersama saya hari ini untuk Membuat Related Post Dalam Kotak Scroll yang sebelumnya rekan saya http://setya21.blogspot.com/ tanyakan. Cara inipun tidak jauh berbeda dengan postingan saya sebelumnya tentang membuat-artikel-terkait-plusikon. Semoga Artikel ini bermanfaat unutk kawan-kawan blog yang lainnya yang tidak bisa disebutkan namanya satu persatu namun tak mengurangi rasa horamat saya kepada kawan sekalian ( Pidato X ya ) !!!


Adapun Cara Membuat Related Post Dalam Kotak Scroll adalah sebagai berikut :
1. Masuk Ke halam Dasboard > Tata Letak > Edit HTML.

2. BackUp template kesayangan Anda, Agar dapat dinormalkan apabila mengalami eror. caranya disini.

3. Klik 'Expand Template Widget' yang berfungsi untuk menampilkan seluruh kode HTML pada template Anda.

4. Lalu cari kode <data:post.body/> atau <p><data:post.body/></p> ( Keduanya sama saja, pilih saja salah satu karna setiap template kodenya berbeda-beda ). Utuk Mencari kode Tekan Saja ( Ctrl+f ) pada keyboard Anda.

Catatan : Apabila salah satu dari kode diatas telah memiliki 2 kode yang sama maka letakanlah kode berikutnya (No.5) dibawah kode yang terakhir.

5. Copy pastekan kode berikut persis dibawah kode di Atas (No.4)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar' style='border:1px solid #CCC; padding:10px; width:95%; height:200px; overflow:auto;'>

<div class='widget-content'>
<h3>Related Posts by Categories</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>
</b:if>








dan bisaanya setelah kode diatas Anda akan menemukan Kode

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

yang memang sudah alami ada pada template Anda.

6. Simpan Template Dan Lihatlah Hasilnya.

Catatan : Related Post Hanya bisa digunakan Apabila Anda Sudah membuat LABEL ( Mengkelompokan tiat-tiap artikel Anda berdasarkan CATEGORI ).

Membuat Related Post Dalam Kotak Scroll Rating: 4.5 Diposkan Oleh: Sarifa Marwa

12 komentar:

  1. maksudnya : Related Post Hanya bisa digunakan Apabila Anda Sudah membuat LABEL ( Mengkelompokan tiat-tiap artikel Anda berdasarkan CATEGORI ). apa?

    ReplyDelete
  2. blogwalking gan.... thanks tipsnya, saya terapkan di blog saya, thanks so much

    ReplyDelete
  3. terimakasih infonya, sangat bermanfaat untuk pengembangan web saya

    ReplyDelete
  4. mantap langsung uji coba sip.........

    ReplyDelete
  5. wah makasih sobat ,, ane sukses ....

    ReplyDelete
  6. makasi sobat,.
    hakirnya saya bisa, setelah beberapa kali mencoba sana sini,.

    ReplyDelete
  7. setelah saya kesana kemari ,Akhirnya ketemu juga yang aku inginkan.thanks bro atas ilmunya yang bermanfaat ini ,sudah saya coba dan 100% berhasil.

    ReplyDelete

Komentar Spam, Link Aktif, dan URL Blog Takkan Muncul. Tidak semua pertanyaan sempat/bisa dijawab.