7.17.2010

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

20 komentar temen:

AdityaBlogsphere2 mengatakan...

Insya allah setelah urusan saya di dunia nyata selesai....saya akan blogwalking...makasih komentarnya sob...klo mau jadiin konten di blognya tolong kasih link sumber ya

ceritatugu mengatakan...

wa kodenya panjang amat, copy dulu ah tak simpan

Rock mengatakan...

Wahhh... banyak banget ya kodenya...
Nambah berat loading blog gak mas?

kurniawan.q mengatakan...

TQ 4 share :)terus update ya mas

yogadc mengatakan...

Keren2.. mumpung pnyaku lom ada relPostny..

jhaa mengatakan...

berkunjung kembali
terimakasih atas ilmunya

Umy Diary mengatakan...

nice info,,,
makasih y

attayaya mengatakan...

wuiiiiiiiiiiih ada poto ceweknya
mantap

Seti@wan Dirgant@Ra mengatakan...

Mohon maaf sobat...
lama baru sempat mampir baca tutorial mantap.

Ninda Rahadi mengatakan...

waaaaahhh fotonya :P

Unknown mengatakan...

wes, bener2 keren nih
bisa aja ni sobat

Laksamana Embun mengatakan...

Gebrakan yang bagus mas, ternyata mas adit seorang yang romantiss....

Oia mas ada info bagus tntang network di blog saya.. :)

yanuar derilayn mengatakan...

bagus postinganx mas, lngsung ke tkp j ea .

tkar link tw banner yukz mas???

AeArc mengatakan...

bikin pusing :hammer:

ms office 2010 mengatakan...

salah satu kelemahan related post di blogspot adalah karena hanya bisa berdasarkan label, nggak bisa berdasarkan keyword density. sampai saat ini saya belum menemukan satupun tutorial related post blogspt yg berdasarkan keyword density :(

btw thanks ya tutorialnya :)

Rizkyzone mengatakan...

wah keren juga mas adit akalu di kasih gambar kaya gini ntar aq coba deh

Blogger mengatakan...

Echem² RP nya kren pake background ya sob, foto siapa gerangan disana hahai...seep dech nanti tak praktekan
Sukses Slalu!

Keong Racun mengatakan...

Thanks atas infonya sobat.. ini perlu untuk di blog kita

Dofollow Blog Community mengatakan...

Hehe. dah lama gak mampir nih.. ngabsen dulu ah

Dofollow Blog Community mengatakan...

Hehe. dah lama gak mampir nih.. ngabsen dulu ah