Menampilkan Artikel yang Berhubungan | Tips Blog « Hitsuke

Apr 30, 2009

Menampilkan Artikel yang Berhubungan

. Apr 30, 2009






Cara menampilkan Artikel yang Berhubungan


Keuntungan menampilkan "Artikel yang berhubungan" atau "Related Post" , "Related Article" adalah para pembaca blog bisa dengan mudah menemukan informasi lain yang masih ada hubungannya dengan artikel yg sedang mereka baca. Contohnya seperti yang ada dibagian akhir dari artikel ini, disitu ada link-link dari artikel yang berhubungan yang berdasarkan pada kategori atau label yang sama. Nha mau tahu cara membuatnya?



Caranya cukup mudah, ikuti langkah2 berikut ini:

1. Login dulu ke blog kamu

2. Pilih menu "Rancangan - Edit HTML"




3. Beri tanda centang pada kotak "Expand Widgets Template" .

4. Setelah itu cari kode ini <data:post.body/> dan letakkan script dibawah ini setelah kode tersebut.



<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<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>
<div id='vebyorel'>
<b>Get This Widget <u><a href='http://hitsuke.blogspot.com/2009/05/menampilkan-artikel-yang-berhubungan.html'> Here </a></u></b>
</div>



Kamu bisa melihat contohnya disini. Kode dibawah ini adalah kode setelah kode Artikel yang berhubungan diatas ditambahkan.



Kode untuk Artikel yang berhubungan setelah ditambahkan :

<data:post.body/><b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='similiar'>

<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>

<div id='vebyorel'>
<b>Get This Widget <u><a href='http://hitsuke.blogspot.com/2009/05/menampilkan-artikel-yang-berhubungan.html'> Here </a></u></b>
</div>



Note: Untuk blog yang ada "readmore"nya biasanya akan terdapat 2 kode. Nha km taruhnya di bawah kode yang pertama.


5. Kalo sudah simpan (SAVE) template kamu dan lihat hasilnya.


Contoh punya q yang sudah jadi di Browser Google Chrome

Tambahan:

Sekarang sudah ada readmore terbaru klik disini untuk mencobanya

Setelah jadi, jika kamu ingin merubah tulisan "Related Posts by Categories" maka cari kode tersebut di HTML, trus ganti dengan text/tulisan yg kamu suka.

Popular Posts

Related Topic by Categories

Inilah Daftar Situs Penghasil Uang Dollar [$] dari Internet

  1. Adf.ly - Pendekkan link atau URL lalu dapatkan dollar [$] disetiap link itu diklik More info »»
  2. Paid-to-Promote - Pasang script code yang diberikan lalu dapatkan $$$ dari setiap halaman kamu di kunjungi Payment Proof »»

Buat Rekening Tabungan Online anda sekarang untuk transaksi bisnis online anda di PayPal Gratiss!!

21 Responses to "Menampilkan Artikel yang Berhubungan"


:f :D :) ;;) :x :$ x( :? ;3

;2 :@ :~ :| :)) :( :s :(( :o

Post a Comment

SPAM = Trash RuleHelp?

Bangari said...

good post ... lumayan tambahan ilmu

Hatake additc said...

sob,, gwa dh tes tips tu,, tpe bagaimana cara menggunakan tips tersebut jika dia menggunakan readmore otomatis???

tlang bantuannya y sob..

Hitsuke said...

@Hatake addict/Ajis, ywdah save templatena dulu ntar bw rumah abg. byar bg yg ngurus ^_^

MASTERgoMASTER said...

artikel yang menarik ..kapan-kapan akan aku gunakan.trima kasih

Adin marscell said...

readmore gw otomatis udh gw cari kode data:post.body adanya cuman 1 tapi kode itu dempet sama yg lainya aku taruh setelah kode itu aja tapi ga keluar bos..??Related Posts by Categories nya bantuin dong???he he..sekalian tukar link ya...udh gw pasang linknya si bos Hitsuke pasang balik ya..ditunggu di www.adinmarscell.co.cc

zenal said...

blog'y bmanfaat bgt....
saya punya blog pengen ada artikel yg berhubungannya,
tapi ga ada kode
gimana tuhh????
saya mohon bantuannya, bls ke email sya dbskusukses99@yahoo.co.id
ini blog saya http://myfolder99.blogspot.com/

nick_lemek said...

keren :D

tobi said...

wkwkwkkwkw

crossbone72 said...

udah di coba koq ga keluar? :?

alonemisery said...

:((

ada yang tw g..biar related post nya muncul d googleeeeee chroooommmmmmmmmmmmmmmmmmmmmmmmmmmme

alonemisery said...

punya q g muncul..... :o

http://kesmas-unsoed.blogspot.com

Hitsuke said...

@alonemisery, bisa kox...di google chrome...punya q aja make yg ini :)

Anonymous said...

g bs bro... :(( help.....me.....

minta alamat email nya dunk :o leh privat kan...

alonemisery

Hitsuke said...

@alonemisery, add aja twitter q nie http://twitter.com/vebyo
ntar via twitter aja..klo e-mail percuma..
aq jarang buka email ( :

eimi said...

kok saya tidak ada kode ini ya??

Hamzah Hutomo said...

Thanks ya... enak nih,, gk kbanyakan script...

khalif said...

:@

roi_sihombing said...

kak, pada menu rancangan-edit html terdapat di mana kak? kok enggak ada

Hitsuke said...

@roi_sihombing, nah..kk mw nanya balik nih..
tmpilan Blogger kan sudah di update..

kmu make yang mana..??

MuhaiminAbd said...

What a great and clear tutorial...

vebyo hitsuke said...

@MuhaiminAbd, mkasih bro :)

 

Followers

Guest Book

Please read The Rules First. Thanks!

Facebook Page