Recent Posts Dengan Efek Spy

Recent Posts atau daftar postingan adalah salah satu widget yang mempunyai peran penting dalam sebuah blog atau web yang fungsinya adalah untuk menampilkan artikel atau postingan terbaru dari blog tersebut. Recent Posts dapat ditampilkan dengan berbagai cara salah satunya dengan menggunakan Efek Spy.

Widget Recent Posts ini memiliki dua mode tampilan yang bisa disesuaikan dengan ruang blog yang ada.
Jika blog kamu memiliki ruangan yang cukup lebar maka kamu bisa menggunakan mode tampilan dua namun jika ruangan yang dimiliki sempit maka kamu bisa menggunakan mode tampilan yang pertama.

Demo

Langkah Memasang Recent Posts dengan Efek Spy
1. Login ke Blogger -> pilih Rancangan
2. Tambahkan Widget HTML/JavaScript dan paste kode dibawah ini di kotak tersebut

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#rpsidebarspy {
overflow:hidden;
margin:5px auto;
padding:0px 0px;
height:450px;
font:11px/1.5 Verdana, Arial, Helvetica, sans-serif;
}
#rpsidebarspy ul{
width:480px;
overflow:hidden;
list-style-type: none !important;
padding: 0px 0px;
margin:0px 0px;
}
#rpsidebarspy li {
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none !important;
float:none;
height:70px;
overflow: hidden;
background:#fff url(https://lh5.googleusercontent.com/-GKbvLBC1tW8/TfYBC0rDF5I/AAAAAAAAFa4/e58iyiLSm-s/s800/bgrcspypost.jpg) repeat-x;
border:1px solid #ddd;
}
#rpsidebarspy li a {
text-decoration:none;
color:#4B545B;
height:16px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#rpsidebarspy li .news-text {
display:block;
padding:5px;
text-align:justify;
}
#rpsidebarspy li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
width:70px;
height:70px;
}
.spydate{
overflow:hidden;
padding:2px 0px;
margin:1px 0px 0px 0px;
}
</style>
<script language="Javascript" type="text/javascript">//<![CDATA[
jmlrepos = 10;
tampilspy = 5;
durasispy = 4000;
alamatblog = "http://purnamalabs.blogspot.com";
eusiartikel = true;
jmlkarpos = 150;
//]]></script>
<div id="rpsidebarspy">
<script src='http://henscripts.googlecode.com/svn/trunk/jquery.simplespy.min.js' type='text/javascript'></script>
</div>

* Keterangan kode

• jmlrepos = 10; | Ubah nilai 10 untuk mengatur jumlah keseluruhan artikel yang ingin ditampilkan
• tampilspy=5; | Ubah nilai 5 untuk mengatur jumlah artikel yang akan ditampilkan
• durasispy=4000; | Ubah nilai 4000 untuk mengatur waktu pergantian satuan dalam milidetik
• alamatblog="http://purnamalabs.blogspot.com"; | Ganti dengan alamat blog kamu
• eusiartikel= true; | Ganti dengan false jika hanya ingin menampilkan judul artikelnya saja tanpa ringkasan artikel
• jmlkarpos=150; | Ubah nilai 150 untuk menentukan jumlah karakter ringkasan artikel

Semoga Bermanfaat