Membuat Related Post dengan Scroll dibawah Postingans Membuat Related Post dengan Scroll dibawah Postingan

tau apa itu Related Post? tentu tau lah ya.. kalo yang ngga tau bisa melihat paling bawah artikel di blog ini, kan ada disitu Related Post. Jadi Related Post adalah artikel yang berkaitan dengan artikel dalam postingan kita.. Maka blogliverpool sekarang akan memberi tahu cara membuatnya. sebelumnya bisa coba membaca "Membuat Related Post Berdasarkan Penulis di wordpress" dan "Membuat Related Post Tanpa Plugin di wordpress".

mari kita lihat dulu screen shotnya, mungkin ada yang belum tahu bagaimana bentuknya:

Membuat Related Post dengan Scroll dibawah Postingan

mari, ini dia cara membuatnya:

==> masuk dulu ke blogger, langsung ke edit HTML

==> untuk keamanan download dulu template anda yang sekarang

==> Centang pada "Expang Widget Template"

==> CTRL+F cari code:

 <p><data:post.body/></p>

 kalo tidak ada boleh cari yang ini:

<data:post.body/>

note: jika anda menemukan beberapa code diatas, maka ketika memasukkan code di bawah ini anda bisa mencoba coba, try and error. jika di yang pertama ngga berhasil, coba di bawah code yang kedua, dan jika ngga berhasil juga coba di yang ketiga. gitu aja..

==> lalu, masukkan kode dibawah ini dibawah code diatas tadi:

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

==> sekarang CTRL+F cari kode di bawah ini:

]]></b:skin>

==> letakkan kode berikut ini diatas code diatas:

/*-- Related Post dengan Scroll Ka Damar--*/
.rbbox{border: 1px solid #D8D8D8;padding: 5px;
background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}

==> ok, save template anda.


Semoga bermanfaat !

Thanks for reading & sharing Kumpulan Artikel