rss

Supports

Just an ordinary blogger from urban city bekasi who want to be exist in cyberworld during learn and know bout blog also understanding internet world so i can share, study together in ensiblogpedia. Hanya seorang blogger biasa dari kota urban Bekasi yang berkeinginan untuk bisa eksis di dunia maya sambil belajar dan mengenal blog serta memahami dunia internet untuk bisa berbagi bercerita dan belajar bersama di ensiblogpedia ini.

Friday, 15 January 2010

Membuat Artikel Terkait atau Related Post di blogger

Membuat artikel terkait dapat membantu pengunjung yang membaca dapat mengetahui artikel apa lagi yang dapat dilihat berdasarkan kategori yang sama. Nah untuk lebih jelasnya, fungsi widget ini adalah untuk navigasi langsung kepada pengunjung agar tidak harus lagi membuka label untuk mencari artikel dengan kategori yang sama. Ya sudah seperti biasa, langsung kepada contoh dan cara pembuatannya ya...

Silahkan masuk ke Blogger--> Layout/Tata Letak --> EDIT HTML.

Don't forget to check "Expand Widget Template"

Kalau sudah, cari kode <p><data:post.body/></p>

Copas kode berikut dibawahnya...
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Related Post:</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 = 10;
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>

Nah seharusnya jika berhasil akan tampak seperti dibawah postingan ini. Namun kalau juga belum atau tidak terjadi scroll-nya, maka bisa ditambahkan kode berikut diatas kode  ]]></b:skin>.
Tapi JIKA HANYA scrollnya tidak keluar.

.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);}

Selamat mencoba and happy blogging ya.

Oh ya, jika kamu sudah menggunakan CSS hack READ MORE, biasanya kode <p><data:post.body/></p> ada dua. Nah letakkan dibawah yang kedua ya. Dan letakkan sebelum kode </p>. Contohnya <p><data:post.body/> disini kodenya </p>. Semoga mudah dipahami.



Related Post:



Enter your email address to get the newest article here:



Delivered by FeedBurner


0 comments:


Post a Comment

Saran, kritik, masukan, berikan semuanya ke ensiblogpedia agar blog ini dapat lebih maju untuk belajar bersama.

The Newest article

Enter your email address to get the newest article here:



Delivered by FeedBurner


Followers