Membuat RelPost Keren

Tutorial ini bersumber dari aetonsoft, namun saya sedih ketika situs bermutu tersebut hilang karena domainya expired, ndak tau deh sekarang berubah jadi apa!!! related post ini akhirnya saya coba untuk modifikasi biar lebih keren kaya punya saya itu lho hehehe



Langkah awalnya seperti biasa masuk ke Rancangan (dulu tata letak) lalu klik edit HTML, setelah itu chek expand widget template.....mudah kan?emang mudah kok!!!
Udah selesai?


beloooooommmmm aduduuuuuhhhhh......
Setelah itu temukan kode <data:post.body>, kalau blog kita udah dikasih readmore, ya temukan kode readmore itu dulu,tapi intinya bisa langsung di cari kode <data:post.body> aja kok......

Lalu paste kode berikut ini di bawah <data:post.body> atau kode readmore kita :

<b:if cond='data:blog.pageType == "item"'>
<H2>Menu lain:</H2>
<DIV class='relief'>
<DIV style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<DIV id='secretoftrifle'/>
<SCRIPT type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
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 < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('secretoftrifle').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
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 = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</SCRIPT>
</DIV>
<script type="text/javascript">RelPost();</script>
</DIV>
</b:if>

Setelah itu cari kode ]]></b:skin> lalu pastekan CSS berikut di atasnya :

.relief{border: 1px solid rgb(192, 192, 192);padding: 5px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR1u0aV0_ujRltAjRhKTvrysloYfmXVP33OxrfxcfryDbHllEmbbSeabRl2WfOQgCpk5oe-hKk-x7-TjBUNmSuIeSKWEcQYKgaOoP-XgNINzR946L7V4H7Dj_QvfuJRZWJKSndAnff7es/s1600/123.JPG);background-repeat: no-repeat; background-position: top;-moz-border-radius:5px; margin:5px;}
.relief:hover{background-color: rgb(255, 255, 255);}

Semua yang dicetak merah bisa dimodifikasi kok, silahkan ganti bacground nya dengan warna PAPORIT atau gambar yang kita suka.....tentu saja harus dikasih repeat-x atau repeat-y dan ndak perlu dijelaskan lagi to...udah banyak contohnya kok, semoga bermanfaat ya....