salam untuk semua sahabat bloger,pada kesempatan kali ini saya akan coba share bagai mana Cara Membuat Artikel Terkait (Related Post) dengan Background gambar animasi,maksudnya ya seperti membuat artikel terkait pada umumnya tapi kali ini ada tambahan yaitu di kasih fareasai pakai gambar ataupun animasi,sudah paham kan kira2 sob????kalau sudah paham mari kita mulai bersama :
1.seperti biasa login dulu ke blog kalian
2.Klik Design/Rancangan lalu dilanjutkan edit HTML
3.kemudian cari kode
<data:post.body/>
untuk kalian yang sudah menggunakan read more,biasanya ada 2 atau 3 kode yang sama,kamu pilih kode yang pertama saja,kalu sudah ketemu letakkan scrip berikut di bawah kode tersebut.
<b:if cond='data:blog.pageType == "item"'>
<div style='padding: 5px; background-image: url(
http://i1182.photobucket.com/albums/x452/budywonk2/te.gif); background-repeat: repeat; background-position: center;'><span style=';font-size:130%;color:white;'>
ARTIKEL TERKAIT </span>
</div>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:220px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 50;
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('albri').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>
untuk tulisan yang berwarna merah anda bisa ubah sesuai selera anda masing2,itu terserah kalian mau tulis bagaimana saja boleh.yg berwarna biru kamu bisa ganti animasi sesuai keinginan sobat,kemudian kalau sudah kita lanjut ke langkah berikutnya.
4.kamu cari kode ini ]]></b:skin>
kalau sudah menemukanya letakan kode berikut di atasnya :
.rbbox{border:1px solid black;background:#e0ffff url(http://i1182.photobucket.com/albums/x452/budywonk2/853041-Death.gif) no-repeat right bottom;-moz-border-radius:5px;margin:5px;padding:5px}
.rbbox:hover{background-color:#fff}
kode warna merah ganti dengan kode animasi lain atau url gambar lain sesuai keinginan,kalau sudah kamu tinggal simpan templat,dan lihat hasilnya bisa kamu coba,mudah bukan sob,semoga posting saya bisa bermanfaat untuk anda.salam.
