Minggu, 16 Agustus 2009

Cara Membuat Related Post Artikel di blogger

Cara Membuat Related Post di blogger Cara Membuat Related Post di blogger. Related post adalah menampilkan artikel yang berhubungan atau artikel yang sejenis (satu label). Dengan kata lain menampilkan beberapa artikel yang berada pada satu label. Contohnya teman-teman tips blogger bisa melihat pada akhir dari postingan saya ini, yaitu ada kotak yang bertuliskan "Read This | Baca Yang ini". Nah bagaimana cara membuatnya?, caranya sangat mudah. Apa teman-teman ingin mencobanya?, apabila iya silahkan lanjut membaca Cara Membuat Related Post.



Cara Membuat Related Post

1. Login ke account blogger kamu.

2. Masuk ke kustomisasi >> edit html.

3. Kemudian Klik centang pada "expand widget template".

4. Cari kode <p><data:post.body/></p> (tekan Control+F lalu masukkan kode tadi)

5. Pasang kode di bawah ini tepat di bawah kode <p><data:post.body/></p>

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

<div class='widget-content'>
<h3>Read this | Baca yang ini</h3>
<div style='border: 2px solid rgb(230, 230, 230); width:100%; height:300px; overflow:auto;'>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

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

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><p>Widget by [ <a href='http://tips-tutorial.blogspot.com/2009/08/cara-membuat-related-post-artikel-di.html' target='new'>Tips Blogger</a> ]</p>

</div>
</b:if>


6. Simpan dan lihat hasilnya...


Selamat mencoba...salam tips blogger.


Read this | Baca yang ini



Widget by [ Tips Blogger-Tutorial Blogger Pemula ]

13 comments:

22 mengatakan...

Thanks ...

Dunia Komputer mengatakan...

Nice infonya!

Irfan mengatakan...

Terima kasih telah berbagi, sudah terlaksana...

Bang arie mengatakan...

Sama-sama all....sering-sering mampir ya.

bdgyes mengatakan...

makasih infonya boss..keereeenn

dasir mengatakan...

:)]Terima kasih ilmunya mas...salam kenal ya..

Nais Impoh mengatakan...

thanks infonya bro, sangat berguna sekali
salam kenal

Eky Dakka mengatakan...
Komentar ini telah dihapus oleh administrator blog.
Cocs Boots mengatakan...

Makasih kang. Cuma kalo mau ngilangin atau nge-hiden nama labelnya yang muncul sebelum list. Gimana Kang?

Cara membuat recent posts per labels mengatakan...

Nah kalo yang ini saya pernah coba. mudah di edit n gak terlalu berat buat blog. Nice Share :)

blog-nailah mengatakan...

Terima kasih atas tutorialnya sob

UD.NABIL mengatakan...

Terima kasih banget atas tutorialnya. Sekarang related post nya sudah berhasil terpasang di blog saya.

keluarga ale mengatakan...

manteb ilmunya,,, langsung coba dan berhasil hehhe :D

Posting Komentar

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

Untuk menggunakan emotion copy paste kodenya saja, budayakan berkomentar setelah membaca ya .

Note : Harap gunakan nama anda dan jangan menggunakan keyword-keyword tertentu atau komentar anda tidak akan dipublish...