Plugin ini pada dasarnya merupakan perpaduan antara Basic JQuery Image Retator dengan JSON Blogger yang kemudian saya jadikan sebagai semacam
slideshow dengan konten yang akan diperbaharui secara otomatis berdasarkan posting yang sudah terbit. Saya memutuskan untuk membuat ini karena saya penasaran dengan tampilannya yang keren, karena menurut saya lebih bagus jika di tampilkan di blog.
Plugin JQuery Image Retator ini juga sudah dimodifikasi hampir secara keseluruhan, khusus untuk diaplikasikan pada widget ini. Beberapa hal yang lebih keren tampilannya menurut saya, diantaranya adalah navigasi, efek animasi kontainer dan dukungan fungsi callback yang dapat dijalankan pada sesi-sesi tertentu.
Lihat DEMO-nya :
Implementasi Dasar
Berikut ini adalah contoh implementasi paling mendasar yang bisa Anda lakukan untuk mengaktifkan plugin:
<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider({
url: "http://nama_blog.blogspot.com" // URL blog Anda
});
</script>
Susun file CSS dengan plugin
Blogger Feed Retator sesuai dengan urutan yang saya perlihatkan di atas. Tambahkan juga elemen HTML yang berfungsi untuk menampilkan
slideshow sebelum plugin. Setelah itu aktifkan fungsi
makeSlider( ) dengan parameter berupa objek tunggal
url yang diisi dengan URL blog Anda. Salin dan tempelkan didalam formulir elemen halaman
HTML/JavaScript. Dengan ini maka Anda sudah bisa menampilkan sebuah
slideshow sederhana seperti yang terlihat pada demo di atas.
Daftar Opsi Konfigurasi Dasar
{
url: "http://the-warasi.blogspot.com", // Your blog URL
numPost: 5, // Number of posts to display
newTabLink: false, // `true` to automatically open link in new window tab
labelName: null, // Show posts in specific label. Specify name of the post label, or `null` to show all posts
showDetail: true, // `false` to hide the blog post title & description
summaryLength: 60, // Length of post summary
titleLength: "auto", // Length of the post title. "auto" by default, or specify number to crop the post title characters and truncate it with `...`
showThumb: true, // `false` to hide the post thumbnails
thumbWidth: 250, // Width of post thumbnail in pixels
squareThumb: true, // Thumbnail mode: Square mode or use the scaled thumbnail with original width and height ratio
noThumb: "images/grey.png", // Fallback thumbnail for no picture posts
showNav: true, // `true` to show both next/prev navigation and navigation number, "next/prev" to show next/prev navigation only, "number" to show navigation number only, `false` to hide the navigation
navText: {
prev: "<", // Label of the previous navigation
next: ">" // Label of the next navigation
},
containerId: "slider-rotator" // HTML element ID that is used to display the slideshow/rotator
}
| OPSI |
| Opsi | Keterangan |
| url | Isi dengan URL halaman muka blog Anda |
| numPost | Digunakan untuk menentukan jumlah posting yang akan ditampilkan |
| newTabLink | Ubah nilainya menjadi true untuk membuat tautan-tautan di dalam widget ini terbuka di jendela/tab baru saat diklik |
| labelName | Digunakan untuk menampilkan daftar posting dengan label/kategori tertentu. Nilai null berarti menampilkan semua posting terbaru. Ganti nilainya menjadi nama label untuk menampilkan posting dengan label tertentu. Misalnya label labelName:"Foto" untuk menampilkan semua posting yang memiliki label Foto |
| showDetail | Ubah nilainya menjadi false untuk menyembunyikan judul dan ringkasan posting. Berguna untuk membuat slideshow foto/gambar tanpa tulisan |
| summaryLength | Digunakan untuk membatasi panjang ringkasan posting. Akhir pemotongan ringkasan posting akan digantikan dengan simbol "-" |
| titleLength | Digunakan untuk membatasi panjang judul posting. Secara normal bernilai "auto". Ubah nilainya dengan angka tertentu untuk memotong panjang judul jika Anda merasa judul posting yang tampil terlalu panjang. Akhir pemotongan judul posting akan digantikan dengan simbol "-" |
| showThumb | Ubah nilainya menjadi false untuk menyembunyikan gambar posting. Berguna untuk membuat slideshow teks |
| tumbWidth | Digunakan untuk menentukan lebar thumbnail posting dan juga sekaligus menentukan lebar slideshow. |
| squareThumb | Opsi untuk memilih mode thumbnail. true untuk menampilkan gambar dengan resolusi /sN-c,falseuntuk menampilkan gambar dengan resolusi /sN |
| noThumb | Isi dengan URL gambar. Gambar ini akan digunakan sebagai cadangan jika posting yang tampil tidak memiliki gambar. |
| showNav | Opsi untuk menampilkan atau menyembunyikan navigasi slideshow. Ubah nilai menjadi false untuk menyembunyikan navigasi. "number" untuk menampilkan navigasi angka saja. "next/prev" untuk menampilkan navigasi next/prev saja. true untuk menampilkan keduanya. |
| navText | Opsi untuk menentukan label navigasi Next dan Previous |
| containerld | Digunakan untuk menentukan di mana slideshow akan ditampilkan. Isi dengan ID elemen HTML. Dan jangan lupa untuk menyertakan elemen HTML tersebut sebelum eksekusi plugin. |
Pengaturan Animasi
Pengaturan animasi saya batasi pada opsi-opsi yang berhubungan dengan animasi plugin:
{
interval: 6000, // Slideshow interval
speed: 1000, // Slideshow animation speed
hoverPause: true, // `false` to make the slideshow/rotator keep running on mouse-over
crossFade: false, // `true` if you want to make the slide change effect occurs simultaneously between disappearance and appearance
autoHeight: false, // Animate the rotator to adjust the height of the displayed item
autoSlide: true // `false` to run the slideshow manually (with navigation)
}
Selamat mencoba, semoga berhasil,..
Blogger
Google+
Facebook
Twitter