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

Setelah sekian lama saya mencari kesana kemari tentang cara membuat
Atiket terkait di bawah postingan akhirnya saya nemu juga ok langsung saja lihat langkah - langkahnya...

Jika sobat masih penasaran, seperti apa sih tampilannya, maka saya akan memperlihatkan Gambarnya seperti berikut :

Tampilan Dasar :

Tampilan Saat Disorot :


Ok, bagi teman-teman yang mau membuatnya, silahkan ikuti langkah-langkah di bawah ini:

1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Klik Expand Templates Widget,
3. 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 kode : <data:post.body/>

<!-- Related Posts Scroll Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 = &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;albri&#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>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>
<!-- Related Posts Scroll Code End-->

Sedikit Tambahan :: 
- Silahkan ganti tulisan yang berwarna merah sesuai kehendak sahabat..
- Jika Nanti Artikel Terkait diatas Tidak Muncul dibawah Posting anda, maka kode diatas sobat simpan dibawah Kode : <data:post.body/> yang 'kedua' (lebih tepatnya di bawah tag </b:if> ).

4. Selanjutnya cari kode :  ]]></b:skin>  lalu copy code di bawah ini :  ( dan letakkan di atas kode :  ]]></b:skin>

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #666;-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://i492.photobucket.com/albums/rr288/angger07/EmoExcited.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 adlh gambar yg akan muncul saat 'Mouse' disorot.
- Teks yang berwarna Hijau itu adlh warna 'Box Shadow' sebelum atau saat 'Mouse' disorot , sobat bisa menggantinya dengan warna lain. Klik Disini untuk melihat warna. untuk lebih jelasnya sobat bisa lihat trik membuat Box Hover. disini.
- Sedangkan Teks yang berwarna Biru, itu adlh 'Rotate Miring' saat 'Mouse' disorot.makin besar angkanya, maka akan semakin Miring, sobat tinggal merubah angkanya. untuk lebih jelasnya mengenai 'Rotate Miring', sobat bisa lihat langsung disini.

6. Terakhir Save Templates.. dan lihat hasilnya...

jangan lupa mampir ke kotak komentar ya sob...

Share this history on :

Tweet

Title : Cara Membuat Artikel Terkait (Related Post) dengan efek Animasi Miring
URL : http://blogcunayz.blogspot.com/2011/06/cara-membuat-artikel-terkait-related.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link Cara Membuat Artikel Terkait (Related Post) dengan efek Animasi Miring sebagai Sumbernya.