The underlined code is jQuery. If your tema already have a jQuery, remove the underlined code! We just need one forever.
Slideshow Configuration
Option
Description
url
Change with your blog homepage URL.
numPost
Used to set the number of slides.
labelName
Used to determine the specific label name to sort the posts by a specific label.
monthArray
Array of month names.
noImage
Change with your own “no image” URL.
newTabLink
If true, every link will automatically open in new tab/new window.
containerId
ID of the slideshow container.
slider => itemWidth
Image width in pixels.
slider => itemHeight
Image height in pixels.
slider => autoplay
If true, the slideshow will be played automatically.
slider => interval
Slideshow interval if autoplay set to true.
Few suggestions: This slideshow is only use CSS3 Transition and CSS3 Transformation for the animation machine. This fact will be very closely related to the browser support (although we have used the Modernizr script so we will get a very nice fallback slideshow for the browser that does not support it). If you are interested, I'll post back a better similar slideshow that support for all browsers. This is called ImageFlow 1.3.0.
Just wait :)
Ganti kode yang Saya beri tanda dengan alamat blog Anda lalu simpan.
Kode yang Saya beri garis bawah adalah jQuery. Jika tema Anda sudah dilengkapi dengan jQuery, singkirkan kode tersebut!
Konfigurasi Widget
Opsi
Keterangan
url
Ganti nilainya dengan URL blog Anda.
numPost
Digunakan untuk menentukan jumlah posting yang ingin ditampilkan.
labelName
Ganti nilainya dengan nama label untuk menampilkan posting berlabel spesifik. Misalnya labelName: "jQuery" akan membuat slideshow hanya menampilkan posting yang memiliki label jQuery.
monthArray
Daftar nama-nama bulan sesuai dengan sistem penanggalan di negaramu.
noImage
URL gambar cadangan untuk posting yang tidak memiliki gambar.
newTabLink
Jika bernilai true, semua tautan pada slideshow akan membuka ke tab/jendela baru secara otomatis ketika diklik.
containerId
ID kontainer penampung widget.
slider => width
Digunakan untuk menentukan lebar slideshow.
slider => height
Digunakan untuk menentukan tinggi slideshow.
slider => preload
Jika bernilai false, efek animasi akan dimulai segera sesaat ketika JSON berhasil dimuat. Ini akan membuat halaman seolah termuat lebih cepat. Hanya saja, karena animasi dimulai terlalu cepat (sebelum semua gambar termuat) akibatnya itu akan membuat animasi slideshow menjadi tidak rapi pada saat permulaan.
slider => preloadImage
URL gambar animasi memuat slideshow.
slider => generateNextPrev
Jika bernilai false, navigasi Next & Prev tidak akan tampil.
slider => nextText
Label navigasi Next.
slider => prevText
Label navigasi Prev.
slider => generatePagination
Jika bernilai false, navigasi 1, 2, 3, … tidak akan tampil.
slider => prependPagination
Opsi untuk menyisipkan navigasi angka dari sebelah atas slideshow. Secara normal, navigasi angka akan disisipkan dari sebelah bawah.
slider => fadeSpeed
Digunakan untuk menentukan kecepatan animasi jika opsi effect bernilai "fade".
slider => fadeEasing
Digunakan untuk menentukan easing animasi jika opsi effect bernilai "fade".
slider => slideSpeed
Digunakan untuk menentukan kecepatan animasi jika opsi effect bernilai "slide".
slider => slideEasing
Digunakan untuk menentukan easing animasi jika opsi effect bernilai "slide".
slider => start
Digunakan untuk menentukan urutan slide yang akan ditampilkan pertama kali.
slider => effect
Digunakan untuk menentukan tipe efek animasi. Pilihannya ada dua: slide dan fade.
slider => crossfade
Digunakan untuk menentukan apakah efek perpindahan slide (khusus efek fade) akan dilakukan dengan cara memudarkan slide yang tampil, kemudian pada saat yang bersamaan menampilkan slide setelahnya (true) atau dengan cara memudarkan slide yang tampil, menunggu sampai efek pemudaran berakhir, lalu slide berikutnya ditampilkan (false).
slider => randomize
Jika bernilai true, maka plugin akan berusaha untuk mengacak urutan slide.
slider => play
Digunakan untuk menentukan lama waktu berhenti sementara setelah animasi terjadi.
slider => pause
Digunakan untuk menentukan lama waktu berhenti sementara setelah pengguna mengeklik tombol navigasi.
slider => bigTarget
Jika bernilai true setiap gambar pada slide akan berfungsi sebagai navigasi. Ketika gambar tersebut diklik, maka slide berikutnya akan tampil.
slider => animationStart
Opsi untuk menerapkan fungsi bebas yang akan bekerja ketika animasi perpindahan slide dimulai.
slider => animationComplete
Opsi untuk menerapkan fungsi bebas yang akan bekerja ketika animasi perpindahan slide selesai.
slider => slidesLoaded
Opsi untuk menerapkan fungsi bebas yang akan bekerja ketika slideshow telah berhasil termuat.
S3Slider adalah sebuah slideshow sederhana namun selalu memiliki kesan tegas dan kuat bagi Saya. Itulah yang dulu membuat Saya memilih ini sebagai slideshow pertama yang Saya terapkan di blog ini. Sampai pada akhirnya Saya memutuskan berpindah ke Nivo. Dan sekarang Saya sudah tidak lagi memakai slideshow manapun di blog ini karena merasa tidak memerlukannya lagi.
Kali ini Saya akan mengintegrasikan S3Slider dengan JSON Blogger untuk memuat setiap slide secara otomatis berdasarkan artikel/posting terbaru yang diterbitkan:
Masuklah ke menu Tata Letak kemudian tambahkan sebuah elemen halaman HTML/JavaScript yang terletak di bagian atas posting. Karena di situlah letak ideal untuk menampilkan slideshow:
Menambahkan widget
Salin kode di bawah ini kemudian letakkan di dalam formulirnya:
Ganti URL http://nama_blog.blogspot.com/ dengan alamat blog Anda lalu simpan.
Kode yang Saya beri garis bawah adalah jQuery. Jika tema Anda sudah dilengkapi dengan jQuery, singkirkan kode tersebut!
Konfigurasi Widget
Berikut ini adalah tabel pengaturan variabel widget beserta penjelasannya:
Opsi
Keterangan
url
Ganti nilainya dengan URL blog Anda.
numPost
Tentukan jumlah posting yang ingin ditampilkan pada widget ini.
labelName
Ubah nilainya menjadi nama label untuk menampilkan posting dengan label tertentu (Sebagai contoh, menentukan nilai labelName menjadi "Widget" akan membuat widget ini menampilkan posting yang memiliki label Widget saja.
monthArray
Daftar nama bulan sesuai dengan sistem penanggalan di negaramu.
noImage
Gambar cadangan untuk posting yang tidak memiliki gambar.
newTabLink
Ganti nilainya menjadi true untuk membuat tautan slideshow membuka ke tab/jendela baru secara otomatis ketika diklik.
containerId
ID kontainer penampung slideshow.
slider => width
Digunakan untuk menentukan lebar slideshow.
slider => height
Digunakan untuk menentukan tinggi slideshow.
slider => timeOut
Jalan pintas untuk opsi timeOut pada plugin S3Slider (untuk mengatur kecepatan animasi).
Konfigurasi Lain
Elemen <div class="s3slider loading"></div> ditambahkan sebagai elemen slideshow palsu yang nantinya akan menghilang ketika slideshow termuat. Ini diperlukan untuk mencegah tampilan tema Anda menjadi berantakan sebelum slideshow termuat. Di situ terdapat CSS ukuran lebar dan tinggi yang ukurannya disarankan untuk disamakan dengan opsi s3slider_config.slider.width dan s3slider_config.slider.height. Atau bisa juga diterapkan ke dalam CSS secara terpisah seperti ini untuk menjaga kebersihan markup HTML:
Widget yang tampak berwarna hijau di atas adalah widget recent post/posting terbaru dengan begitu banyak pilihan. Anda bisa menyembunyikan gambar, komentar, bulan terbit dan ringkasan atau sebaliknya, menampilkannya. Menentukan apakah widget ini akan dianimasikan atau tidak juga bisa dilakukan. Cukup ikuti langkah-langkah di bawah ini dan pelajari tabel konfigurasinya:
Ganti URL http://nama_blog.blogspot.com dengan alamat blog Anda lalu simpan.
Konfigurasi Widget
Opsi
Keterangan
widgetTitle
Markup HTML untuk judul widget.
url
Ganti nilainya dengan URL blog Anda.
containerId
ID kontainer yang akan digunakan untuk menampung isi widget.
numPost
Jumlah posting yang ingin ditampilkan (harus lebih besar dari newsTicker => visible).
numChars
Jumlah karakter ringkasa posting jika showSummaries bernilai true.
monthNames
Nma-nama bulan dalam satu tahun sesuai dengan sistem penanggalan di negaramu.
noImage
URL gambar cadangan untuk posting yang tidak memiliki gambar di dalamnya.
showSummaries
Ganti nilainya menjadi false untuk menyembunyikan ringkasan posting.
showThumbnails
Ganti nilainya menjadi false untuk menyembunyikan showThumbnails.
showPostDate
Ganti nilainya menjadi false untuk menyembunyikan bulan terbit pada item posting.
showComments
Ganti nilainya menjadi false untuk menyembunyikan jumlah komentar.
newTabLink
Ganti nilainya menjadi true untuk membuat tautan-tautan widget membuka pada tab/jendela baru ketika diklik.
animatedRecentPost
Ganti nilainya menjadi false untuk mematikan efek animasi newsticker.
newsTicker => visible
Jumlah posting yang ingin ditampilkan dalam widget. Sisanya disembunyikan dan akan tampil secara bergantian saat efek animasi terjadi. Pastikan nilainya lebih kecil dari numPost.
newsTicker => interval
Interval perpindahan item dalam satuan milidetik.
newsTicker => speed
Kecepatan efek animasi kemunculan item.
Kode yang Saya beri garis bawah adalah jQuery. Jika tema Anda sudah dilengkapi dengan jQuery, singkirkan kode tersebut!
Tutorial ini sudah tidak terlalu efektif lagi untuk diterapkan pada tema Blogger standar saat ini mengingat formulir komentar bisa berpindah-pindah posisi.
Saya mencuri desainnya dari panel kontrol Blogger hehe. Anda pasti selalu ingat saat sedang mengunggah gambar atau mengedit tema atau mengubah pengaturan blog. Seringkali Anda akan berhadapan dengan jendela munculan yang Saya rasa sangat menarik jika bisa kita terapkan pada formulir komentar sebuah blog.
Meski sedikit sulit, tapi sebenarnya ada beberapa hal yang umum ditemui dalam tema blogspot sehingga keseragaman itu bisa meringankan kerja kita.
Pertama-tama masuklah ke halaman editor HTMLtema Anda kemudian cek Expand Tema Widget agar seluruh widget bisa dijabarkan.
Setelah itu temukan kode yang tampak seperti ini:
<div id='comment-form' class='comment-form'>
Atau mungkin Anda juga akan menemukan kode yang berbeda seperti ini:
<div id='respond'>
Tip: Tekan CTRL + F kemudian ketik 'comment-form' atau 'respond' untuk mempermudah pencarian.
Jika sudah ketemu, tambahkan kelas pop-form di samping kelas yang sudah ada seperti ini:
Bukankah itu sangat luar biasa? Kita bisa menyisipkan elemen-elemen yang tidak lazim ke dalam komentar Blogger hanya dengan memanfaatkan cara kerja JavaScript .replace(). Pada intinya, kita menyisipkan kode-kode yang bisa dimasukkan ke dalam komentar seperti [im]. Kode tersebut bukanlah kode yang bisa mempengaruhi file HTML dan hanya merupakan teks biasa yang dibuat-buat, namun dengan sedikit trik, Anda bisa memanfaatkan peraturan yang Anda buat sendiri untuk mengontrol fungsi .replace()
Di sini Saya akan memberikan alternatif lain yang lebih aman dan tampak rapi, yaitu menggunakan jQuery untuk memanipulasi dua jenis tag yang diperbolehkan masuk ke dalam komentar Blogger yaitu <b> dan <i>. Kita akan menggunakan atribut rel sebagai pengontrol. Dan ini adalah sebuah trik untuk mengubah tag-tag tersebut menjadi tag lain dengan jQuery ⇒ http://stackoverflow.com/questions/7093417/using-jquery-to-replace-one-tag-with-another
Katakanlah kita ingin memposting kode di dalam tag <pre> untuk diterbitkan ke dalam komentar postingan, namun seperti yang kita tahu, Blogger tidak mengizinkan tag <pre> masuk ke dalam posting komentar. Jadi kita bisa menggunakan kode ini sebagai penanda:
<i rel='pre'>Kode di sini...</i>
Untuk mengubah tag <i rel='pre'> menjadi <pre> kita bisa menggunakan fungsi ini:
// Seleksi elemen `p` di dalam `#comments`
$('#comments p').each(function() {
// Ubah semua tag `<i rel="pre">` dengan `<pre>`
$('i[rel="pre"]', this).replaceWith(function() {
return $('<pre></pre>').append($(this).contents());
});
});
Selektor $('#comments p') tidak mutlak. Terkadang ada juga kerangka komentar yang terdiri dari elemen <dd>, bahkan mungkin juga dengan ID komentar yang berbeda sehingga selektor tersebut juga bisa diubah menjadi $('#comments dd') atau $('#commentsbox dd')
Cukup pastikan bahwa tema Anda sudah dilengkapi dengan jQuery, kemudian letakkan kode tersebut di atas </body>. Dan coba terbitkan sebuah komentar berupa teks di dalam <i rel='pre'></i>
Lebih Lengkap
Untuk tingkat manpulasi yang lebih lengkap, Anda bisa menggunakan baris kode ini. Salin kode ini lalu sisipkan di atas </body>:
<script>
//<![CDATA[
$('#comments p, #comments dd').each(function() {
// Singkirkan semua tag `<br>` di sebelah tag `<b rel^="h">`
// (semua elemen `<b>` dengan nilai atrubut `rel` yang diawali dengan "h")
$('b[rel^="h"]', this).nextAll().filter('br').remove();
// Menyisipkan tag `<pre>`
$('i[rel="pre"]', this).replaceWith(function() {
return $('<pre></pre>').append($(this).contents());
});
// Menyisipkan gambar
$('i[rel="image"]', this).replaceWith(function() {
return $('<img />').attr('src', $(this).text());
});
// Menyisipkan tag `<h3>`
$('b[rel="h3"]', this).replaceWith(function() {
return $('<h3></h3>').append($(this).contents());
});
// Menyisipkan kuota/catatan
$('b[rel="quote"]', this).replaceWith(function() {
return $('<blockquote></blockquote>').append($(this).contents());
});
// Menyisipkan tag `<code>`
$('i[rel="code"]', this).contents().unwrap().wrap('<code></code>');
});
//]]>
</script>
Klik Simpan Tema. Setelah itu Anda tinggal menuliskan pesan untuk para komentator di atas formulir komentar seperti ini:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA DI SINI...</i> atau <i rel="pre">KODE ANDA DI SINI...</i>Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>
Bagi Anda yang suka menelusuri artikel-artikel potongan kode di sini mungkin pernah sekali dua kali melihat halaman ini ยป Tambahkan State Aktif untuk jQuery Accordion. Kali ini Saya akan membantu Anda untuk mengerti lebih dalam tentang salah satu manfaat besar dari potongan kode tersebut.
Pernahkan Anda memperhatikan sidebar blog Anda dan menyadari bahwa susunan elemen yang ada pada sidebar tersebut sebenarnya sama persis dengan kerangka akordion yang pernah Anda lihat di halaman tersebut?
Mari kita coba mengambil sudut pandang ini:
Kerangka sidebar pada dasarnya bisa kita jadikan sebagai panel-panel akordion.
Setiap sidebar biasanya dibungkus oleh elemen #sidebar-wrapper dimana di dalamnya terdapat beberapa widget yang selalu terdiri dari elemen <h2> dan elemen tubuh widget itu sendiri seperti ini:
Jika Anda teliti dengan baik, ternyata model kerangka di atas sama persis dengan kerangka yang ada pada percobaan jQuery akordion yang pernah Saya tuliskan:
Itulah kesempatan Anda untuk menjadi kreatif hari ini. Kali ini kita akan menciptakan sidebar dengan efek akordion hanya dengan bermodalkan ide tersebut. Pertama-tama, tentunya harus kita ketahui beberapa elemen yang sama sebagai pemandu dan itu akan kita gunakan untuk memodifikasi potongan kode efek akordion ini:
Sebagai contoh, elemen #accordion memiliki peran yang sama persis dengan elemen #sidebar-wrapper dan elemen .content juga memiliki peran yang sama dengan elemen .widget-content. Elemen h2 tidak perlu dipertanyakan lagi. Kesimpulannya adalah, untuk menciptakan sidebar akordion setidaknya kita harus memodifikasi kode di atas menjadi seperti ini:
Ya, cuma begitu saja modal dasar untuk menciptakan efek akordion pada sidebar. Asalkan kita sudah menemukan ID sidebar yang ingin kita jadikan sebagai target, maka sisanya tinggal melakukan beberapa modifikasi kecil saja.
Langkah-Langkah Membuat Sidebar Akordion
Pertama-tama masuklah ke halaman editor HTMLtema Anda, lalu temukan kode ini:
</head>
Salin kode di bawah ini dan letakkan di atasnya:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script><script>
//<![CDATA[
$(function() {
// Sembunyikan semua tubuh widget (tutup semua panel)
$('#sidebar-wrapper .widget-content').hide();
// Tambahkan class 'active' pada elemen <h2> pertama
// kemudian tampilkan elemen berikutnya dengan efek .slideDown(), sehingga panel akordion paling atas akan tampak terbuka
$('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');
// Saat elemen <h2> yang berada di dalam elemen #sidebar-wrapper diklik...
$('#sidebar-wrapper h2').click(function() {
if($(this).next().is(':hidden')) {
// Sembunyikan semua panel yang terbuka dengan efek .slideUp()
$('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');
// Lalu buka panel yang berada di bawah elemen ini (elemen <h2> yang diklik) dengan efek .slideDown()
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
//]]>
</script>
Kode yang Saya beri garis bawah adalah jQuery. Jika tema Anda sudah dilengkapi dengan jQuery, singkirkan kode tersebut.
Sekarang coba simpan tema Anda dan lihat apa yang terjadi pada sidebar blog Anda...
Tidak berhasil?
Oke, mungkin Anda mempunyai sidebar dengan ID yang berbeda. Coba periksa kembali tema Anda dan temukan baris kode yang menggambarkan deretan widget sidebar blog Anda. Kurang lebih tampilannya seperti ini:
Atau Anda juga bisa melihat ID sidebar secara langsung dari halaman blog Anda melalui Add-on Firebug atau aplikasi web developer sejenis lainnya:
Melihat ID Sidebar dengan Firebug
Nah, Anda bisa mengganti kode #sidebar-wrapper dengan ID yang Saya beri garis bawah untuk menciptakan efek akordion pada sidebar tersebut.
Satu tambahan lagi: Saat Anda mencoba menyentuh judul widget biasanya akan terasa sesuatu yang sedikit mengganjal. Ya, kursornya masih berupa kursor teks. Itu akan membuat elemen pemicu akordion tersebut menjadi tampak sebagai sesuatu yang tidak penting/tidak memiliki sesuatu yang penting (alah!). Kita harus mengubah pointer teksnya menjadi pointer jari telunjuk seperti halnya pointer standar yang selalu muncul pada semua link.
Ada dua cara untuk mengubah pointer teks pada elemen <h2> menjadi pointer telunjuk. Pertama, dengan cara menuliskannya secara langsung pada kode CSS seperti ini:
#sidebar-wrapper h2 {
cursor:pointer;
}
Atau cukup sisipkan fungsi jQuery .css() di depan selektor yang mengarah kepada elemen h2 seperti ini:
Mengenai fungsi .addClass('active'), .removeClass('active') dan .toggleClass('active') itu semua hanya untuk menandai panel akordion yang sedang aktif/terbuka. Katakanlah kita ingin membuat elemen <h2> yang sedang aktif berubah warna menjadi merah, maka dalam kode CSS Anda tinggal menambahkan selektor #sidebar-wrapper h2.active dan memberinya warna merah seperti ini:
Tema author: NBTemplate
Description: Bleach is a free blogger tema with 3 columns, sidebar on the right and left and exclusive design for Blogger.
Excellent layout for blogs about animals, anime, kids or love.
Download Bleach for free in BTemplates.
Nivo adalah jQuery slider yang paling fleksibel dalam hal konfigurasi (setidaknya saat pertama kali Saya menulis pos ini). Terdapat begitu banyak pilihan yang dapat Anda gunakan di dalamnya. Dimulai dari menentukan efek spesifik, kontrol navigasi sampai kepada fungsi-fungsi tambahan. Namun pada intinya, Nivo adalah slider yang bisa bekerja pada sebagian besar versi jQuery:
/*
* jQuery Nivo Slider v2.7.1
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* March 2010
* Style by Taufik Nurrohman <http://gplus.to/tovic>
*/
#slider-wrapper {
width:618px;
margin:30px auto;
padding:2px;
background-color:black;
-webkit-box-shadow:0 1px 5px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 5px rgba(0,0,0,.4);
box-shadow:0 1px 5px rgba(0,0,0,.4);
}
.nivoSlider {
position:relative;
background:white url('loading.gif') no-repeat 50% 50%;
width:618px; /* Make sure your images are the same size */
height:246px; /* Make sure your images are the same size */
}
.nivoSlider img {
position:absolute;
top:0;
left:0;
display:none;
}
.nivoSlider a {
border:none;
display:block;
}
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:none;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
.nivo-caption {
font:normal bold 12px/normal Arial,Sans-Serif;
position:absolute;
left:0;
bottom:0;
background-color:black;
color:white;
opacity:.8; /* Overridden by `captionOpacity` setting */
width:100%;
z-index:8;
}
.nivo-caption a {
color:white;
border-bottom:1px dotted white;
}
.nivo-caption a:hover {color:#ffa}
.nivo-caption p {
padding:8px 10px;
margin:0;
}
.nivo-html-caption {display:none}
.nivoSlider .nivo-caption a {display:inline}
/* Direction nav styles (e.g. "Next" & "Prev") */
.nivo-directionNav a {
border:none;
display:block;
width:30px;
height:30px;
position:absolute;
top:50%;
margin-top:-15px;
z-index:9;
background:transparent url('arrows.png') no-repeat 0 0;
text-indent:-9999px;
cursor:pointer;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {left:15px}
/* Control nav styles (e.g. 1, 2, 3 ...) */
.nivo-controlNav {
position:absolute;
top:10px;
right:15px;
}
.nivo-controlNav a {
font:normal normal 10px/normal Verdana,Tahoma,Arial,Sans-Serif;
color:white;
text-decoration:none;
position:relative;
z-index:9;
cursor:pointer;
background-color:#111;
width:17px;
padding:2px 0 3px;
margin:0 0 0 4px;
text-align:center;
display:inline-block;
*display:inline;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}
.nivo-controlNav a.active {background-color:#39f}
Detail Nivo Slider
Untuk menjalankan slider, terapkan method .nivoSlider() secara langsung pada elemen pembungkusnya. Konfigurasi ini akan mengubah daftar gambar menjadi slider dengan opsi bawaan dari skrip Nivo yang telah terpasang:
Digunakan untuk menentukan efek transisi spesifik (normal: "random")
slices
Digunakan untuk menentukan jumlah potongan (jumlah potongan gambar vertikal) (normal: 15)
boxCols
Digunakan untuk menentukan jumlah kolom pada efek berupa blok-blok potongan gambar (normal: 8)
boxRows
Digunakan untuk menentukan jumlah baris pada efek berupa blok-blok potongan gambar (normal: 4)
animSpeed
Digunakan untuk menentukan kecepatan animasi (normal: 500)
pauseTime
Digunakan untuk menentukan seberapa lama slide akan berhenti sebelum memulai berganti menuju slide berikutnya (normal: 3000)
startSlide
Digunakan untuk menentukan urutan slide yang akan terlihat lebih dulu saat slideshow dimulai. Indeks dimulai dari 0 (normal: 0)
directionNav
Jika bernilai false, navigasi Next & Prev tidak akan ditampilkan (default: true)
directionNavHide
Jika bernilai false, navigasi Next & Prev akan selalu terlihat. Jika bernilai true, navigasi Next & Prev akan menghilang, namun akan tampil ketika pointer berada di atas slider (normal: true)
controlNav
Jika bernilai false, navigasi 1, 2, 3, … tidak akan ditampilkan (normal: true)
controlNavThumbs
Jika bernilai true, navigasi 1, 2, 3, … akan berubah menjadi thumbnail, namun opsi ini membutuhkan sedikit modifikasi khusus pada CSS yang nanti akan kita bahas di bawah (normal: false)
controlNavThumbsFromRel
Jika bernilai true, navigasi thumbnail akan mengambil data URL thumbnail dari atribut rel di dalam setiap gambar (normal: false)
keyboardNav
Jika bernilai false, fitur navigasi slideshow menggunakan papan ketik akan dinonaktifkan (normal: true)
pauseOnHover
Jika bernilai false, animasi slide akan terus berjalan meskipun pointer sedang berada di atas slide (normal: true)
manualAdvance
Jika bernilai true, efek perpindahan slide akan dilakukan secara manual, yaitu dengan cara mengeklik navigasi Next & Prev atau 1, 2, 3, … atau menggunakan tombol panah pada papan ketik (normal: false)
captionOpacity
Digunakan untuk menentukan tingkat transparasi deskripsi slide (image caption). Sebenarnya ini tidak terlalu penting dan hanya digunakan untuk menangani validasi dan masalah cross-browser untuk efek CSS transparasi (normal: 0.8)
prevText
Digunakan untuk menentukan teks navigasi Previous (normal: "Prev")
nextText
Digunakan untuk menentukan teks navigasi Next (normal: "Next")
Lebih Detail
Di sini Saya hanya akan memberikan sedikit halaman demo. Untuk demo selengkapnya sudah ada di dalam berkas unduhan.
Menentukan Efek Spesifik
Nivo memiliki beberapa efek di dalamnya yang secara normal akan ditampilkan secara acak. Efek-efek tersebut diantaranya bisa Anda lihat di dalam kode sumber jquery.nivo.slider.js pada bagian ini:
Secara normal, jumlah slice adalah 15 dan box sebanyak 8 × 4. Namun kita bisa memodifikasi jumlahnya. Yang penting pastikan saja Anda menggunakan angka-angka yang tepat sesuai dengan pembagian lebar dan tinggi gambar agar hasilnya tidak berantakan. Misalnya, jika ukuran gambar yang digunakan untuk membuat slider adalah 200 × 100, buatlah jumlah slice sebanyak 10 atau 20 dan jangan membuat jumlah slice sebanyak 13, 17, 70, … karena ini akan membuat slider menjadi tersentak-sentak. Selain itu jangan terlalu banyak menciptakan slice, itu akan membuat peramban menjadi macet (biasanya muncul peringatan: the script on this page is too busy blah blah blah…):
$('#nivoSlider').nivoSlider({
slices: 20, // Menentukan jumlah slice sebanyak 20
boxCols: 5, // Menentukan jumlah kolom sebanyak 5
boxRows: 4 // Menentukan jumlah baris sebanyak 4
});
$('#nivoSlider').nivoSlider({
animSpeed: 1000, // Menentukan kecepatan animasi
pauseTime: 2000 // Menentukan lama waktu tunda sebeum animasi berpindah ke slide berikutnya terjadi
});
Menampilkan Slide ke 4 Terlebih Dahulu
Dalam JavaScript, urutan umumnya dimulai dari 0, jadi pastikan Anda tidak keliru dengan ini. Jika ingin menampilkan slide ke empat sebagai slide pertama yang ditampilkan, maka Anda harus menuliskan nilai 3 pada opsi startSlide:
$('#nivoSlider').nivoSlider({
startSlide: 3 // Urutan ke empat
});
Menghilangkan semua navigasi dapat dilakukan dengan cara menuliskan nilai false pada semua opsi yang berhubungan dengan navigasi jalan pintas. Jika perlu, nonaktifkan juga fitur navigasi dengan papan ketik sehingga pengunjung tidak akan bisa melakukan apapun kecuali menatap slider sampai pertunjukan berakhir. Ini jika Anda ingin menguji kesabaran pengunjung:
Secara normal, navigasi Next & Prev tidak akan menampilkan teks apapun. Karena di dalam temanya indentasi teks memang sudah diset agar tidak terlihat untuk mengubah tampilannya menjadi berupa gambar panah kiri dan kanan:
Nivo Slider memiliki beberapa hal yang akan membuat semua pengaturan menjadi jauh lebih praktis dan masuk akal. Pertama, teks di dalam caption (pita hitam berisi deskripsi slide) diproduksi dari atribut title pada gambar. Begitu pula dengan thumbnail. Untuk mengaktifkan thumbnail pada NioSlider, syarat pertama yang harus Anda penuhi adalah membuat beberapa gambar berukuran kecil sebagai thumbnail, kemudian memasukkan URL gambar tersebut ke dalam atribut rel yang telah ditambahkan ke dalam setiap gambar:
Setelah atribut rel ditambah, maka thumbnail akan secara otomatis terbentuk di dalam kontrol navigasi. Namun saat ini thumbnail masih tidak bisa terlihat karena pengaturan normal dalam CSS dan dalam plugin masih belum mengizinkan untuk menampilkan gambar. Anda harus memodifikasi kode CSS di dalamnya untuk mengaktifkan thumbnail dan mengaktifkan fitur navigasi thumbnail pada pengaturan (baca: Using Thumbnail with the Nivo Slider)
Itu semua adalah fungsi-fungsi kosong yang nantinya bisa Anda gunakan untuk membuatnya bekerja pada waktu-waktu tertentu:
Opsi
Keterangan
beforeChange
Digunakan untuk menjalankan aksi sebelum slide berganti.
afterChange
Digunakan untuk menjalankan aksi setelah slide berganti.
slideshowEnd
Digunakan untuk menjalankan aksi setelah slideshow berakhir.
lastSlide
Digunakan untuk menjalankan aksi saat animasi telah mencapai slide terakhir.
afterLoad
Digunakan untuk menjalankan aksi saat slider telah selesai (baru saja selesai) dimuat.
Katakanlah kita akan menciptakan fungsi-fungsi tambahan yang akan dijalankan secara otomatis berdasarkan pembagian waktu seperti pada tabel di atas. Ini cuma contoh saja. Dalam kenyataannya, fungsi bisa bermacam-macam. Di sini Saya akan menggunakan jQuery .text() dan .append() sebagai percobaan:
Jangan terpaku pada tema yang itu-itu saja. Cobalah untuk mengubah posisi navigasi, deskripsi slide, warna latar dan yang lain untuk menciptakan tema sendiri. Semoga sukses!
Widget Posting Terbaru/Recent Post dengan Gambar Thumbnail dan Tooltip
Widget recent post dengan gambar mini mungkin sudah biasa Anda temukan. Tapi mungkin Anda mau mencoba yang satu ini. Widget recent post dengan thumbnail dan tooltip:
Ganti URL http://nama_blog.blogspot.com dengan alamat blog Anda. Tentukan judul widget pada variabel widgetTitle, tentukan jumlah posting yang ditampilkan (gambar mini) pada variabel numPosts, tentukan juga jumlah karakter/ringkasan artikel yang akan muncul pada variabel numChars.
Kode yang Saya beri garis bawah adalah jQuery. Jika tema Anda sudah dilengkapi dengan jQuery, buang kode itu dari widget.
