SPY EFFECT PADA RECENT POST BLOG


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.

Download Recent Posts

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

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
<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>
//

Langkah 5
Klik tombol “SIMPAN”

Langkah 6
Preview

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&#8221;; 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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s