Pembaharuan: 25 November 2013
Menjawab permintaan dari It's a Hardlife, Saya mencoba untuk memodifikasi JQuery Carousel yang sederhana karena slideshow versi Agile Carousel itu terlalu rumit. Saya mengambil TinyCarousel sebagai bahan utama, yang pada awalnya hanya berupa slideshow gambar biasa untuk dimodifikasi lagi sesuai dengan tata letak slideshow Agile Carousel sehingga setiap slide menjadi lebih kaya akan konten:
Tahap 1: Mengedit Templat
Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan:
Temukan kode ini:
Salin kode di bawah ini, kemudian letakkan di atasnya:
/*!
* Custom TinyCarousel for Blogger by Taufik Nurrohman
* Visit: http://www.dte.web.id
*/
.tinycarousel {
overflow:hidden;
font:normal normal 10px/12px Arial,Sans-Serif;
color:#666;
margin:0 auto;
}
.tinycarousel-viewport {
overflow:hidden;
position:relative;
background-color:#eee;
border:1px solid #ccc;
margin:0 auto;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.tinycarousel-overview {
list-style:none;
margin:0;
padding:0;
position:absolute;
left:0;
top:0;
}
.tinycarousel-overview li {
list-style:none;
float:left;
padding:0;
height:auto;
background-color:white;
color:#666;
}
.tinycarousel-inner {
padding:10px;
border:1px solid #ccc;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
overflow:hidden;
position:relative;
}
li .tinycarousel-inner {padding-bottom:48px}
.tinycarousel-image {
display:block;
width:100%;
height:auto;
border:none;
outline:none;
margin:0;
padding:0;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}
.tinycarousel-title {
font:normal bold 11px/100% Verdana,Tahoma,Arial,Sans-Serif;
color:#39f;
margin:0 0 6px;
padding:10px 0 0;
background:none;
}
.tinycarousel-title a {
color:inherit;
text-decoration:none;
border:none;
}
.tinycarousel-summary {
margin:0;
padding:0;
overflow:hidden;
}
.tinycarousel-footer {
color:#aaa;
background-color:#333;
background-image:-webkit-linear-gradient(#555,#333);
background-image:-moz-linear-gradient(#555,#333);
background-image:-ms-linear-gradient(#555,#333);
background-image:-o-linear-gradient(#555,#333);
background-image:linear-gradient(#555,#333);
padding:0 10px;
height:24px;
line-height:24px;
overflow:hidden;
position:absolute;
right:0;
bottom:0;
left:0;
}
.tinycarousel-footer-date {bottom:24px}
.tinycarousel-navigation {
display:block;
background-color:white;
border:1px solid #ccc;
margin:2px auto 0;
overflow:hidden;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.tinycarousel-navigation .tinycarousel-inner {border:none}
.tinycarousel-button {
background-color:#666;
padding:2px 5px;
overflow:hidden;
position:relative;
float:left;
margin:0 2px 0 0;
color:white;
text-decoration:none;
font-weight:bold;
text-align:center;
}
.tinycarousel-navigation .disable {display:none}
.tinycarousel-button:active {background-color:#900}
.tinycarousel-total-posts {
float:right;
margin:2px 5px 0 0;
font-weight:bold;
font-size:120%;
}
/* Orientasi Vertikal */
.tinycarousel.vertical .tinycarousel-overview li {
float:none;
display:block;
}
.tinycarousel.vertical .tinycarousel-button,
.tinycarousel.vertical .tinycarousel-total-posts {
float:none;
display:block;
margin:0 0 2px;
}
.tinycarousel.vertical .tinycarousel-button.disable {display:none}
.tinycarousel.vertical .tinycarousel-total-posts {
text-align:center;
margin-top:10px;
margin-bottom:0;
}Klik Simpan Template.
Tahap 2: Meletakkan Slideshow
Masuklah ke menu Tata Letak kemudian tambahkan sebuah elemen halaman HTML/JavaScript yang terletak di bagian atas posting:
Salin kode di bawah ini kemudian letakkan di dalam formulirnya:
<div id="tinycarousel-container" class="tinycarousel"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var tinycarousel_config = {
url: 'http://nama_blog.blogspot.com',
numPosts: 12,
labelName: null,
containerId: 'tinycarousel-container',
newTabLink: false,
summaryLength: 100,
monthArray: [
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
noImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC',
nav: {
prevText: '<',
nextText: '>',
showText: 'Menampilkan {num} Posting'
},
carousel: {
axis: "x",
itemwidth: 200,
itemheight: 370,
itemmargin: 5,
itempadding:10,
visible: 4,
display: 1,
start: 1,
interval: true,
intervaltime: 3000,
animation: true,
duration: 1000,
easing: "swing",
callback: function() {}
}
};
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/blogger-tinycarousel.js"></script>Ganti URL http://nama_blog.blogspot.com dengan alamat blog Anda lalu klik Simpan.
Kode yang Saya beri garis bawah adalah JQuery. Jika templat Anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut!
Konfigurasi Widget
| Opsi | Keterangan |
|---|---|
| url | Ganti nilainya dengan URL blog Anda. |
| numPosts | Digunakan untuk menentukan jumlah posting yang ingin ditampilkan. |
| labelName | Ganti nilainya menjadi nama label untuk menampilkan posting dengan label yang spesifik. Misalnya, menentukan nilai labelName: "Widget" akan membuat widget ini menampilkan posting berlabel Widget saja. |
| containerId | ID kontainer penampung widget. |
| newTabLink | Ganti nilainya menjadi true untuk membuat semua tautan terbuka di tab/jendela baru secara otomatis. |
| summaryLength | Digunakan untuk menentukan panjang ringkasan posting. |
| monthArray | Daftar nama-nama bulan sesuai dengan sistem penanggalan di negaramu. |
| noImage | URL gambar thumbnailgambar kecil pengganti untuk posting yang tidak memiliki gambar. |
| nav => prevText | Teks navigasi mundur. |
| nav => nextText | Teks navigasi maju. |
| nav => showText | Teks indikator jumlah posting. |
| carousel => axis | Ganti nilainya menjadi "y" untuk menampilkan carousel vertikal. |
| carousel => itemwidth | Digunakan untuk menentukan lebar masing-masing item carousel. |
| carousel => itemheight | Digunakan untuk menentukan tinggi masing-masing item carousel. |
| carousel => itemmargin | Digunakan untuk menentukan margin masing-masing item carousel. |
| carousel => itempadding | Digunakan untuk menentukan padding masing-masing item carousel. |
| carousel => visible | Digunakan untuk menentukan jumlah item yang ingin ditampilkan dalam satu baris. |
| carousel => display | Digunakan untuk menentukan jumlah item yang akan tergeser dalam satu kali gerakan. |
| carousel => start | Digunakan untuk menentukan indeks permulaan item (normalnya dimulai dari indeks pertama). |
| carousel => interval | Ganti nilainya menjadi false untuk membuat animasi berjalan secara manual (dengan cara mengeklik tombol navigasi). |
| carousel => intervaltime | Digunakan untuk menentukan waktu interval animasi (hanya berlaku jika opsi interval bernilai true). |
| carousel => animation | Ganti nilainya menjadi false untuk mematikan efek animasi. |
| carousel => duration | Digunakan untuk menentukan kecepatan animasi. |
| carousel => easing | Digunakan untuk menentukan tipe easing animasi. |
| carousel => callback | Fungsi bebas yang bisa Anda terapkan pada widget ini yang akan bekerja setiap kali slide berganti. |
Contoh Pengaturan Carousel Vertikal
Perhatikan pada bagian-bagian yang Saya tandai:
var tinycarousel_config = {
...
nav: {
prevText: '▲',
nextText: '▼',
showText: 'Menampilkan {num} Posting'
},
carousel: {
axis: "y",
itemwidth: 200,
itemheight: 370,
itemmargin: 5,
itempadding:10,
visible: 1,
display: 1,
start: 1,
interval: true,
intervaltime: 3000,
animation: true,
duration: 1000,
easing: "swing",
callback: function() {}
}
};
Tidak ada komentar