//visit www.gerysadhanisal.blogspot.com for more expr:class='"loading" + data:blog.mobileClass'>

Rabu, 08 September 2010

Menampilkan Judul Artikel yang Terkait (Related Articles by Categories)

Pernah kah Temen² mengunjungi situs  kompas.com ketika kita mengeklik salah satu judul berita, disana kita akan menemui ARTIKEL TERKAIT yang dibawah link judul-judul yang masih ada hubungannya dengan berita yang pertama tadi. Mungkin sedikit cerita itu bisa mengambarkan kita apa yang dimaksud dengan judul di atas yaitu "Menampilkan Judul Artikel yang Terkait (Related Articles by Categories)"

Nah disini Saya (penulis) ingin membahas bagai mana cara pembuatannya. Di trik ini, judul itu di tampilkan di bawah artikel, dan penampilan itu berdasarkan label. Mungkin kita ada label Pengunjung karena kamu pengemar browsing, di Label Pengunjung itu ada 10 judul, maka saat kita melihat salah satu dari judul itu maka 9 judul ada di bawahnya.

Berikut ini langkah-langkah kita untuk menampilkan judul artikel yang berhubungan :
1. login ke Blogger
2. Lalu pilih Tata Letak-->Edit HTML
3. Selanjutnya Expand Widgets Template template kita
4. Cari kode berikut ini
<data:post.body/>
*) Lebih mudahnya klik Ctrl+F masukan pencarian <data:post.body/>
**) untuk blog yang ada "read more" nya akan ditemui 2 kode <data:post.body/>, pilihlah kode yang pertama
5. Kalau sudah ketemu, taruh script berikut ini di bawahnya

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>ARTKEL TERKAIT</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>


6. Kalau sudah kita ditaruh script di atas, SIMPAN temlpate kita...



Nah ■SEMOGA BERHASIL■



 Jika Anda menyukai Tulisan ini,
Silahkan Email kan ke Gerysadhanisal@yahoo.co.id
Karna sejujurNya Blog ini Saya (penulis) buat gag bisa di copy paste...
Tinggalkan Kritik dan Saran yang membangunyah...


■Best Regard■




♥♥♥♥♥♥♥♥

ARTKEL TERKAIT



Tidak ada komentar:

Posting Komentar