Cara Membuat Recent Post dengan Animasi Keren

Setelah kemarin saya memberikan tips tentang Bagaimana menuliskan Makalah yang benar, maka kali ini saya akan mencoba memberikan tips tentang blogger yaitu cara membuat recent post dengan animasi yang keren. Recent Post (Artikel Terkini) Animasi yang akan saya jelaskan disini sebetulnya mungkin sudah banyak yang membuatkan tutorialnya. Namun, kebanyakan yang saya lihat tidak memakai thumbnile. Nah disini akan saya lengkapi dengan Thumbnile nya. Untuk melihat hasil akhirnya silahkan klik tombol demo dibawah ini.

Lihat Demo

Bagaimana cara membuatnya? :

Langkah 1. Silahkan Anda login dulu ke Dashboard akun blogger Anda. Kemudian Pilih Layout atau tata letak pada menu disebalah kiri.
Langkah 2. Silahkan klik tombol Add a Gadget. dan pilih yang HTML/JavaScript. Lihat gambar dibawah ini.

Langkah 3. Masukkan kode berikut ini kedalam form HTML/JavaScript.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">


</style><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu-4WEwD_CXblQK12nI_1WMun9stB42cbg4f7xhKgYmwGLEEp9wcGWNpBXEFyrNWFLiCBzXY368yYqpWd4LhOXR0W6boTIBVHLSK0ark1ogQpfi4WAxt7xP1-HwWYGfo8-aYR9FkOHOy6E/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu-4WEwD_CXblQK12nI_1WMun9stB42cbg4f7xhKgYmwGLEEp9wcGWNpBXEFyrNWFLiCBzXY368yYqpWd4LhOXR0W6boTIBVHLSK0ark1ogQpfi4WAxt7xP1-HwWYGfo8-aYR9FkOHOy6E/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu-4WEwD_CXblQK12nI_1WMun9stB42cbg4f7xhKgYmwGLEEp9wcGWNpBXEFyrNWFLiCBzXY368yYqpWd4LhOXR0W6boTIBVHLSK0ark1ogQpfi4WAxt7xP1-HwWYGfo8-aYR9FkOHOy6E/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu-4WEwD_CXblQK12nI_1WMun9stB42cbg4f7xhKgYmwGLEEp9wcGWNpBXEFyrNWFLiCBzXY368yYqpWd4LhOXR0W6boTIBVHLSK0ark1ogQpfi4WAxt7xP1-HwWYGfo8-aYR9FkOHOy6E/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu-4WEwD_CXblQK12nI_1WMun9stB42cbg4f7xhKgYmwGLEEp9wcGWNpBXEFyrNWFLiCBzXY368yYqpWd4LhOXR0W6boTIBVHLSK0ark1ogQpfi4WAxt7xP1-HwWYGfo8-aYR9FkOHOy6E/s1600/noimage.png";
showRandomImg = true;
boxwidth = 220;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;



home_page = "http://myarcive.blogspot.com/";



limitspy=5
intervalspy=4000
</script>
<div id="spylist">
<script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated-recent-posts-ycode-1.js' type='text/javascript'></script>

</div>

Langkah 4. Ganti http://myarcive.blogspot.com/ dengan alamat blog Anda. Lalu Simpan/Save. Lihat hasilnya.

Opsional : Jika ukurannya kurang pas dengan sidebar blog Anda, Ganti width : 220px; dan width:208px: sesuai dengan lebar sidebar blog Anda.

Selamat Mencoba. Jika ada kendala, silahkan tanyakan saja langsung melalui kolom komentar dibawah postingan ini.