Recent Posts dengan effect

Recent Posts dengan effect

Recent Posts dengan effect

Recent Posts dengan effect merupakan sebuah widget yang memiliki fungsi menampilakan daftar posting terbaru dengan efek mata-mata yang sederhana. Widget ini dikembangkan dengan script yang cukup rumit oleh Abu Farhan dan jqueryfordesigners.com. ada 2 mode pilihan yang bisa digunkan, mode 1 untuk ruangan yang sempit dan mode 2 untuk ruangan yang lebih lebar.

Kelebihan Recent Post with Simple Spy Effect

Penerapannya lebih mudah karena menggunakan script yang lebih sederhana, Pembacaan Feed lebih cepat karena hanya dibatasi pada sejumlah feed yang telah diatur Pengaturan lebih mudah dan sederhana karena pengaturan hanya pada beberapa bagian utama. Penempatan lebih mudah karena memiliki 2 mode pilihan untuk ditempatkan sesuai dengan ruangan yang dimiliki

Kelemahan Recent Posts with Simple Spy Effect
Widget ini hanya bisa berjalan pada jQuery Versi 1.3.2 atau versi sebelumnya.

Tutorial Recent Posts with Simple Spy Effect
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Elemen Laman"
Langkah 3
Tambahkan sebuah gadget/widget baru dengan tipe "HTML/JavaScript" pada posisi yang sesuai.
Langkah 4
Masukan (copy paste) kode dibawah ini pada bagian "Konten" dan beri judul sesuai keinginan

<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://modification-blog.blogspot.com";
 eusiartikel = true;
 jmlkarpos = 150;
 //]]></script>
<div id="rpsidebarspy">
 <script src='http://dl.dropbox.com/u/3558628/rpspysidemod.min.js' type='text/javascript'></script>
 </div>

Langkah 5
Klik tombol "SIMPAN"

Langkah 6
Preview blog anda dan perhatikan, bagaimana hasilnya, oke kan?

Download Recent PostsKlik disini untuk mengunduh source code Recent Posts

Link download: http://www.box.net/shared/z0t1ahlcksz79v1b5ip4

Pengaturan Recent Post with Simple Spy Effect
Perhatikan kode dibawah ini (code diambil dari langkah 4 dan hanya bagian tertentu saja yang diambil):

#rpsidebarspy {
height:450px;
}

Ubahlah nilai 450 sesuai dengan tinggi widget yang dibutuhkan, namun harus disesuaikan dengan jumlah artikel yang akan ditampilan (lihat tampilspy = 5; pada keterangan dibawah)

#rpsidebarspy ul{
width:480px;
}

Ubahlah nilai 480 untuk mengatur lebar item widget atau ubahlah menjadi 100% untuk lebar yang otomatis mengikuti lebar ruangan yang ada

#rpsidebarspy li {
height:70px;
}

Ubahlah nilai 70 untuk mengatur tinggi item widget

#rpsidebarspy li img {
width:70px;
height:70px;
}

Keterangan:

jmlrepos = 10; ubahlah nilai 10 untuk mengatur jumlah keseluruhan artikel yang akan ditampilkan secara bergantian
tampilspy = 5; ubahlah nilai 5 untuk mengatur jumlah artikel yang akan ditampilkan
durasispy = 4000; ubahlah nilai 4000 untuk mengatur waktu pergantian (satuan dalam milidetik)
alamatblog = "http://modification-blog.blogspot.com"; ubahlah alamat blog sesuai dengan alamat blog anda
eusiartikel = true; nilai true jika ingin menampilkan mode 2, nilai false jika ingin menampilkan mode 1
jmlkarpos = 150; ubahlah nilai 150 untuk menentukan jumlah karakter ringkasan artikel yang akan ditampilkan, mengubah nilai ini jika mengaktifkan tampilan mode 2


Ayo di coba gan!!