Tuesday, August 14, 2012

Cara Membuat Related Post di Blog

Cara Membuat Related Post di Blog - Pada kesempatan yang baik ini saya akan menjelaskan tentang Bagaimana Cara Membuat Related Post di Blog, ini bermanfaat untuk memancing pengunjung untuk membaca artikel lain yang terkait dengan yang pengunjung tersebut baca. Anda bisa melihat contoh related post pada Ilfan Blog ini, jujur saya juga suka pada related post ini.

Berikut langkah-langkah :

1. Login blogger

2. Pilih blog anda >> Template >> Edit HTML >> Expand Widget Template

3. Cari <data:post.body/> atau <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

4. Copy script berikut lalu paste tepat dibawah script pada no.3

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 = 50;
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;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>

5. Setelah itu anda cari ]]></b:skin>

6. Copy script berikut tepat diatas ]]></b:skin>

/*-- modifikasi related posts oleh http://ilfan-rifai.blogspot.com/--*/
.rbbox{border: 1px solid #D8D8D8;padding: 5px;
background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}

7. Save template anda.

Demikian yang bisa saya sampaikan dan semoga bermanfaat bagi kita semua yang membacanya.




Related Post



Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

5 comments: on "Cara Membuat Related Post di Blog"

Blogadexme said...

MAMpir di mari rasa nya enggk komplit enggk ksih komntar,,,,

ane kira ini yg bergambar/thumnail.....! klw boleh di share juga sob....thanks!

ILFAN RIFAI said...

Thanks atas komentarnya Irwan Saputra, related post ini kan sama ama blogadexme,,

Utan Musyfiq Kautsar said...

Copy script berikut lalu paste tepat dibawah script pada no.3
saya g apaham ????.
Mohon pencerahan'y bos lebih rinci, maklum saya baru belajar bikin blog.

ILFAN RIFAI said...

@Utan Musyfiq Kautsar :
Copy script poin 4, terus paste tepat di bawah script poin 3
kemudian save template...

Utan Musyfiq Kautsar said...

Sudah muncul tp hasilnya blank, knp ya bos ????.
kira2 ada kesalahan di mana'y ???
coba liat blogku di : http://sepenggal-pengetahuan.blogspot.com
trim's

Post a Comment