29 Maret 2011

Membuat Artikel Terkait di Blogspot

Artikel terkait (related post) berfungsi untuk memberitahukan kepada pembaca tentang artikel lain yang berhubungan dengan artikel yang sedang dibacanya. Dengan adanya artikel terkait di blogger/blogspot memudahkan pembaca untuk mengetahui postingan kita yang lain dan masih satu kategori dengan yang sedang dikunjunginya. Keuntungan lain bisa didapatkan oleh blogger, karena dengan adanya artikel terkait bisa menambah kunjungan halaman blog.

Berikut cara membuat related post di blogspot:

1. Login ke blogger
2. Pilih rancangan, lalu klik edit HTML
3. Cari kode <data:post.body/> dan letakkan kode dibawah ini tepat di bawahnya

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

<div class='widget-content'>
<h3>Artikel Terkait Lainnya:</h3>
<div id='Related'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 7;

maxNumberOfPostsPerLabel = 7;
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;Related&#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>

4. Simpan dan jalankan untuk melihat hasilnya.

Semoga tutorial ini bermanfaat, selamat mencoba. Salam. 

Artikel Terkait Lainnya



13 komentar:

Gaptek mengatakan...

Makasih banyak,,,


Aku coba,, dulu,,,

Contoh jadinya kayak di blog ini ya??!!



salam kenal ya

Info Kita1978 mengatakan...

@Gaptek: ya bnr, contohnya seperti pd blog ini, terima kasih sdh berkunjung. Salam kenal juga.

tutorial adobe flex mengatakan...

terimakasih ya.. nanti hasilnya seperti yang diatas ya?

Bang Tama mengatakan...

Luar biasa bro blog dan ilmunya...terima kasih loh...
Salam kenal...

Info Kita1978 mengatakan...

@tutorial adobe flex: sama2, yupz contohnya seperti di atas.

@ Bang Tama: Biasa aja bro, saya masih baru belajar, trims dah berkunjung. Salam.

Gitar Pro Indonesia mengatakan...

Makasih banyakkk sekali lagi,, ku masang lagi di blogku :)

Korea Terbaru mengatakan...

Di template ku kode data post bodinya banyak bangeeeeeett,


gimana cara naruh kodenya ??

Hamzah Fansuri mengatakan...

saya coba dulu deh,,,biar aplikasi'y tmbh cantik.., mksih bnyak yh...

GPenk mengatakan...

Ane cb dulu zA
mga ae sukses

Ciuman Panas mengatakan...

Wah tips keren neh sob. thanks for share....

langsung saya coba dulu. :D

rasit ridho mengatakan...

makasih infonya,, sudah dipraktek,

garasi indie mengatakan...

kode tidak ada dalam html template saya tolong di bantu

alfians mengatakan...

tengkyu boss tutorialnya... cek di log gue ye...

Posting Komentar

PrevPage NextPage home