2009-03-03

Membuat Related Post / Artikel Terkait

Related Post atau Artikel Terkait biasa kita temukan di bawah dari postingan. Related Post ini sangat berguna terutama untuk memudahkan pembaca blog untuk mengetahui tulisan-tulisan terkait atau yang berhubungan dengan tulisan yang baru dibaca. Langsung pada intinya, untuk membuat supaya muncul Artikel Terkait di bawah postingan, ikuti cara-cara berikut :

1. Silakan login ke blogger.com, masuk ke Tata Letak >> Edit HTML.
2. Beri tanda centang pada kotak "Expand Widgets Template".
3. Cari kode dibawah ini :

<p><data:post.body/></p>

kalau sudah ketemu silahkan copy kode berikut ini kemudian paste dibawah kode tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 = 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;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>

Kalau sudah silahkan dicari lagi kode dibawah ini:

]]></b:skin>

Kalau sudah ketemu copy kode dibawah ini kemudian paste " diatas" kode ]]></b:skin> 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);}

Simpan pekerjaan anda dan lihat hasilnya dengan membuka salah satu artikel anda.

8 komentar:

ardi33 on 12 March 2009 at 21:29

waahhaahhaa..ketemu juga niih....q coba ah....

ardi33 on 12 March 2009 at 21:42

berhasil bro........thanks bgdt....

Anonymous on 20 March 2009 at 15:30

Koq gak muncul ya.. kotaknya si dah muncul tapi gak ada isinya.. help me

Anonymous on 20 March 2009 at 15:33

OO tahu karena artikel yg kubuka gak ada tag-nya tx ilmunya bro..

awan_clickerz on 10 April 2009 at 22:03

aku dah bisa,
kemaren ngerjain bareng di tempat pa RT..

sampe lemburan,:@

Dilla AS on 4 May 2009 at 23:31

Thanks bro infonya gw ambil yg ini aja... ada info buat tampilin kode html ga... mau dunk. :)

Unknown on 23 August 2009 at 00:26

Trims TIPSnya.
OKE banget nggak pake njlimet
:)

hannan on 16 January 2010 at 21:06

Berhasil bro... trims banget pokoke! kunjungi balik yo

Leave a Comment

Silahkan menuliskan komentar anda pada opsi Google/Blogger untuk anda yang memiliki akun Google/Blogger.
Silahkan pilih account yang sesuai dengan blog/website anda (LiveJournal, WordPress, TypePad, AIM).
Pada opsi OpenID silahkan masukkan URL blog/website anda pada kotak yang tersedia.
Atau anda bisa memilih opsi Nama/URL, lalu tulis nama anda dan URL blog/website anda pada kotak yang tersedia.

Jika anda tidak punya blog/website, kolom URL boleh dikosongkan.
Gunakan opsi 'Anonim' jika anda tidak ingin mempublikasikan data anda. (sangat tidak disarankan). Jika komentar anda berupa pertanyaan, maka jika anda menggunakan opsi ini tidak akan ditanggapi.