• RSS
  • Facebook
  • Twitter
  • Linkedin

Monday, June 13, 2011

Recent Posts with Simple Spy Effect

Posted by dav on 12:06 PM with
Alhamdulillah. Satu widget lagi selesai dibuat walau berbekal kepala yang masih "mumet". Widget ini dibuat untuk memenuhi permintaan dari beberapa pembaca setia Blogger Tune-Up yang ide aslinya lahir dari Abu Farhan dan jqueryfordesigners.com. Setelah dibongkar script asli milik Abu Farhan ternyata cukup rumit dalam proses penerapannya plus rumit jika ingin mengembangkannya, akhirnya menulis ulang code JSON dan jQuery-nya. 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.

Kelebihan Recent Post with Simple Spy Effect

  • Lebih mudah dalam penerapan karena menggunakan script yang lebih sederhana
  • Lebih cepat karena pembacaan Feed tidak semuanya hanya dibatas pada sejumlah feed yang telah diatur
  • Pengaturan lebih mudah dan sederhana karena pengaturan hanya pada beberapa bagian utama saja
  • Memiliki 2 mode pilihan sehingga lebih mudah untuk ditempatkan sesuai dengan ruangan yang dimiliki
  • Rasakan sendiri dan tinggalkan pada komentar kelebihan dan kekurangannya ya teman-teman
  • Widget akan berhenti berjalan jika pointer mouse berada diatasnya

Kelemahan Recent Posts with Simple Spy Effect

  • Hanya mampu bekerja baik dengan Framework jQuery Versi 1.3.2 kebawah, maka disarankan untuk tidak menggunakan versi diatasnya atau yang terbaru, atau gunakan framework tersendiri untuk widget ini.
  • Apalagi ya? Baru itu yang ditemukan, kesalahan lain yang ditemukan kemudian akan diperbaiki dalam tempo yang sesingkat-singkatnya.

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://henscripts.googlecode.com/svn/trunk/jquery.simplespy.min.js' type='text/javascript'></script>
</div>
Langkah 5
Klik tombol "SIMPAN"
Langkah 6
Preview blog anda dan perhatikan, menarik bukan?

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 :)

Popular Posts