Recent Posts with Simple Spy Effect

Dari tampilan akhir memang sangat mirip dengan widget-widget yang sudah beredar di dunia maya, namun sebenarnya menggunakan kode JavaScript yang baru, hanya kode CSS di ambil dari code aslinya yang kemudian di tata ulang untuk menyesuaikan dengan script JSON dan jQuery yang digunakan.

Widget ini kemudian diberi nama "Recent Posts with Simple Spy Effect" atau dalam bahasa Indonesia-nya kurang lebih "Artikel Terbaru dengan Efek Sederhana Mata-mata". Widget ini memiliki dua mode yang bisa disesuaikan dengan ruangan yang dimilikinya. Jika blog anda memiliki ruangan yang cukup lebar maka akan lebih menarik jika menggunakan Mode 2 namun jika ruangan yang dimiliki sempit akan lebih menarik jika menggunakan Mode 1.

Integrasi 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 menarik
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, menarik bukan?

Download Recent PostsKlik disini untuk mengunduh source code Recent Posts

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;
}

Ubahlah nilai 70 keduanya untuk mengatur besar gambar mini yang akan ditampilkan

Perhatikan kode dan gambar dibawah ini (code diambil dari langkah 4):

jmlrepos = 10;
tampilspy = 5;
durasispy = 4000;
alamatblog = "http://modification-blog.blogspot.com";
eusiartikel = true;
jmlkarpos = 150;

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

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Baca Juga Artikel Terpopuler :

Oke Google