Membuat Related Post Dibawah Posting Dengan Scroll

Related Post atau artikel terkait sering kita temui di blog-blog yang kita kunjungi. Ada yang meletakkannya di sidebar, di atas artikel dan ada juga yang meletakkan related post dibawah artikel/posting.

Disini ane ingin menulis cara membuat related post / artikel terkait / similiar post. terserah ente aja mau bilangnya apa.

Lalu apa bedanya dengan cara membuat related post di bawah artkel yang sudah ane tulis sebelumnya? bedanya yang kali ini kita membuat artikel terkait dibawah posting yang dilengkapi dengan fungsi scroll.



Langsung aja ane tulis cara pembuatannya yang ane dapatkan dari blognya Themas Doyok.

1 - Masuk ke dashboard blogger.
2 - Edit template.
3 - Edit HTML.
4 - Kasih centang Expand template widget.
5 - Cari kode berikut : ]]></b:skin>
     Kalau sudah ketemu, letakkan kode berikut ini diatas kode tadi :

/* Kode Artikel Terkaitt */
#underpost{
font-family:Arial, Tahoma, Verdana, Sans-serif;/* Jenis Huruf. */
font-size:small;/* Ukuran Huruf. */
color:#000000;/* Warna Teks. */
background:#CCCCCC;/* Warna Latar Artikel Terkait. */
clear:both;
float:left;
width:500px;/* Lebar Artikel Terkat (sesuaikan dengan halaman posting ente)*/
-moz-border-radius:10px;
border:0;
height:auto;
margin:0 auto;
padding:10px;
}
#underpost h2{
font-family:'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;/* Jenis Huruf Heading. */
font-size:large;/* Ukuran Huruf Heading. */
color:#000000;/* Warna Teks Heading. */
margin-bottom:5px;
border-bottom:1px solid #000000;/* Warna gari s Bawah Heading. */
padding:0 0 5px;
}
#underpost a,#underpost a:link,#underpost a:active,#underpost a:visited{
color:#0099FF;/* Warna Link */
text-decoration:none;
}
#underpost a:hover{
text-decoration:underline;
}
#artikel-terkait{
overflow:auto;
width:auto;
height:300px;/* Tinggi Artikel Terkait*/
padding:10px;
}

 6 - Cari kode : <data:post.body/></p>
Bila kodenya lebih dari satu, ambil yang paling bawah. lalu masukkan kode berikut di abwah kode tadi :

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

<div class='widget-content'>
<h2>Artikel Menarik Lainnya</h2>
<div id='artikel-terkait'>
<div id='relposts'/><br/><br/>
<script type='text/javascript'>

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

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;relposts&#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>

</div>
</div>
</b:if>

7 - Simpan Template.

Selesai. Periksa blog ente, bila sudah artikel terkait dibawah postingan ente, ntu berarti ente sudah berhasil memasang related post atau artikel terkait dibawah posting dengan fungsi scroll.