Cara Membuat Artikel Terkait (Related Post) dengan efek Animasi Miring

hy teman teman Blog Learing. Pada kali ini saya akan memberikan cara membuat Artikel terkait (Related Post) dengan efek animasi miring.

Dan kegunaannya adalah menampilkan artikel terkait berdasarkan kategorinya,

jika kalian masih penasaran, maka seperti apa yah tampilannya, maka Saya akan memperlihatkan Gambarnya seperti di bawah ini:

Tampilan Dasar:

Tampilan Saat Di Sorot

Bagi kalian yang tertarik atau Anda ingin membuatnya. Silhakan ikuti langkah - langkah berikut ini:

1. Login ke Akun Blogspot, Anda

2. Klik Design atau rancangan kemudian pilh edit HTML

3. centang Expand Templates Widget,(download template Anda dahulu)

4. Lalu cari kode :<data:post.body/>, bagi yang sudah memasang read more akan ada dua kode nah ambil kode yang pertama, lalu copy kode berikut ini di bawah :<data:.post.body/>

<b:if cond='data:blog.pageType == "item"'>
<br/>
<br/>
<H2>Artikel Terkait :</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 = "<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('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>

Sedikit Tambahan sobat:::.

silahkan ganti tulisan yang berwarna Kuning sesuai kehendak kalian....
jika Nanti Artikel Terkait diatas Tidak Muncul dibawah posting Kalian, maka kode diatas sobat simpan dibawah kode :<data:post.body/>yang 'kedua' (lebih tepatnya dibawah tag </b:if>).

5. Selanjutnya Anda Cari kode : ]]></b:skin> lalu copy code di bawah ini : dan letakkan tepat diatas kode : ]]></b:skin>

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #FFF;-moz-border-radius:5px; margin:5px;opacity:0.9; filter:alpha(opacity=40); this.style.opacity=6;box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F;}
.rbbox:hover{background:url(http://i634.photobucket.com/albums/uu66/oktri_2009/L8e18979.gif) no-repeat right bottom #fff;-moz-border-radius:5px;margin:5px;padding:5px;box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #F70000; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #F70000; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #F70000;transform:rotate(-3deg); -moz-transform:rotate(-3deg); -webkit-transform:rotate(-3deg); -o-transform:rotate(-3deg)}

Sedikit Tambahan ::.

Teks yang berwarna merah itu adalah gambar yg akan muncul saat" mouse" disorot.
teks yang berwarna biru itu adalah warna BOX Shadow' sebelum atau saat "mouse" disorot, kalian bisa menggantinya dengan warna lainnya.
sedangkan teks yang berwarna Orange, itu adalah 'Rotate Miring' saat 'Mouse'disorot.makin besar angkanya, maka akan semakin Miring, kalian tinggal merubah angkanya.

6. Terakhir Save templates Anda... dan lihat hasilnya......????

Good Lauck