Slideshow Otomatis Blogger dengan TinyCarousel (Custom)

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 tipografi slideshow Agile Carousel sehingga setiap slide menjadi lebih kaya akan konten:

Lihat Demo

Tahap 1: Mengedit Template

Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan:

Temukan kode ini:

]]></b:skin>

Salin kode di bawah ini, kemudian letakkan di atasnya:

/**
 * Custom TinyCarousel by Taufik Nurrohman
 * Visit:http://hompimpaalaihumgambreng.blogspot.com
 */

#tinycarousel {
  width:532px; /* Lebar Slideshow */
  height:1%;
  overflow:hidden;
  font:normal 10px/12px Arial,Sans-Serif;
  color:#666;
  margin:30px auto;
}

#tinycarousel .viewport {
  height:336px;
  overflow:hidden;
  position:relative;
  background-color:#eee;
  border:1px solid #ccc;
}

#tinycarousel ul.overview {
  list-style:none !important;
  position:absolute;
  padding:0 0 !important;
  margin:0 0 !important;
  width:240px;
  left:0;
  top:0;
}

#tinycarousel ul.overview li {
  list-style:none !important;
  float:left;
  margin:5px 0 5px 5px !important;
  padding:0 0 !important;
  height:auto !important;
  width:168px; /* Lebar satu unit slide */
  background-color:white;
  color:#666;
  border:1px solid #ccc;
}

#tinycarousel .inner {
  margin:10px;
  height:260px;
  overflow:hidden;
}

#tinycarousel img {
  width:auto;
  height:170px;
  border:none;
  outline:none;
  padding:0 0;
  margin:0 0;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}

#tinycarousel h6 {
  border-top:1px solid #ddd;
  font:normal bold 11px/12px Verdana,Tahoma,Arial,Sans-Serif;
  color:#39f;
  margin:9px 0 5px;
  padding:10px 0 0;
  background:none;
  overflow:hidden;
}

#tinycarousel h6 a {
  color:inherit;
  text-decoration:none;
  border:none;
}

#tinycarousel p {
  margin:0 0;
  padding:0 0;
  overflow:hidden;
}

#tinycarousel em {
  font-style:normal;
  color:#aaa;
  background-color:#333;
  background-image:-webkit-linear-gradient(top,#555,#333);
  background-image:-moz-linear-gradient(top,#555,#333);
  background-image:-ms-linear-gradient(top,#555,#333);
  background-image:-o-linear-gradient(top,#555,#333);
  background-image:linear-gradient(top,#555,#333);
  display:block;
  padding:5px 10px;
  margin:0 0;
}

#tinyarrow {
  display:block;
  background-color:white;
  border:1px solid #ccc;
  padding:5px;
  margin:2px 0 0;
  overflow:hidden;
}

#tinyarrow .buttons {
  background-color:#666;
  border:none;
  outline:none;
  display:block;
  padding:2px 5px;
  overflow:hidden;
  position:relative;
  float:left;
  margin:0 1px;
  color:white;
  text-decoration:none;
  font-weight:bold;
}

#tinyarrow .disable {display:none}

#tinyarrow .buttons:active {
  background-color:#900;
  position:relative;
  top:1px;
}

#tinyarrow span {
  float:right;
  font:normal bold 11px/12px Tahoma,Verdana,Arial,Sans-Serif;
  margin:2px 5px 0 0;
}

/*
 * Orientasi Vertikal
 * CSS diatur secara manual pada versi aslinya
 * tapi di sini semuanya sudah cukup teratur
 */
#tinycarousel.vertical {width:242px}
#tinycarousel.vertical ul.overview li {
  float:none;
  display:block;
  width:228px;
  margin:5px auto 10px !important;
}

#tinycarousel.vertical img {
  width:100%;
  height:auto;
}

Kemudian temukan kode ini:

</head>

Salin kode di bawah ini kemudian letakkan di atasnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
    $('#tinycarousel').tinycarousel({
        start       : 1,
        display     : 1,
        axis        : 'x',
        interval    : false,
        intervaltime: 3000,
        animation   : true,
        duration    : 1000,
        callback    : null
    }); 
});
//]]>
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/jquery.tinycarousel-custom.js' type='text/javascript'></script>

Kode yang Saya beri garis bawah adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut!

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:

<script type="text/javascript">
var showPostDate_g  = true,
    showComm_g      = true,
    slideOpenNewTab = true,
    idMode          = true,
    slidebyLabels   = false,
    slideLabelName  = "Mengenai",
    pBlank          = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
    text            = "Komentar",
    numposts_g      = 7,
    numchars_g      = 100,
    showText        = "Menampilkan",
    postText        = "Posting",
    tinyprevNav     = "&lt;",
    tinynextNav     = "&gt;",
    home_page       = "http://nama_blog.blogspot.com";
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/autoContent4TinyCarousel.js" type="text/javascript"></script>

Ganti URL http://nama_blog.blogspot.com dengan alamat blog Anda lalu klik Simpan Template.

Konfigurasi Slideshow - JSON & Custom TinyCarousel

Pengaturan JSON - Auto Content Slider

Opsi	Keterangan
showPostDate_g	Jika bernilai `true`, bulan terbit artikel akan ditampilkan. Jika bernilai `false`, bulan terbit artikel akan disembunyikan.
slideOpenNewTab	Jika bernilai `true`, setiap tautan akan terbuka di tab/jendela baru. Jika bernilai `false`, setiap tautan akan terbuka di tab/jendela yang sama.
idMode	Jika bernilai `true`, sistem penanggalan akan berubah menjadi berbahasa Indonesia. Jika bernilai `false`, sistem penanggalan akan berubah menjadi berbahasa Inggris.
slidebyLabels	Ubah nilainya menjadi `true` jika ingin menampilkan daftar slide artikel dengan label yang spesifik. Setelah itu tentukan nama label pada variabel `slideLabelName`.
slideLabelName	Digunakan untuk menentukan nama label yang spesifik setelah mengubah nilai `slidebyLabels` menjadi `true`.
pBlank	Adalah gambar cadangan yang akan ditampilkan jika artikel tidak memiliki gambar.
text	Digunakan untuk menentukan label jumlah komentar (contoh: 7 Komentar).
numposts_g	Digunakan untuk menentukan jumlah slide.
numchars_g	Digunakan untuk menentukan jumlah karakter ringkasan artikel.
showText & postText	Digunakan untuk mengubah teks "Menampilkan" N "Posting".
tinyprevNav	Digunakan untuk menentukan simbol navigasi mundur pada slideshow.
tinynextNav	Digunakan untuk menentukan simbol navigasi maju pada slideshow.
home_page	URL blog Anda.

Konfigurasi Slideshow

Terdapat beberapa konfigurasi standar yang sangat umum dijumpai pada plugin animasi JQuery. Yaitu kecepatan, delay, opsi animasi otomatis dan hal-hal umum lainnya:

Opsi	Nilai	Keterangan
start	1, 2, 3, ... (urutan)	Digunakan untuk menentukan slide nomor ke berapa yang akan tampil terlebih dulu saat halaman dikunjungi.
display	1, 2, 3, ... (jumlah)	Digunakan untuk menentukan berapa banyak slide yang akan bergeser dalam sekali klik navigasi/sekali animasi.
axis	'x'	Nilai `'x'` akan membuat orientasi slideshow menjadi horizontal, nilai `'y'` akan membuat orientasi slideshow menjadi vertikal.
axis	'y'
interval	true	Nilai `true` akan membuat slideshow bergerak secara otomatis, nilai `false` akan membuat slideshow mati dan hanya bisa bergerak jika Anda mengeklik tombol navigasi.
interval	false
intervaltime	500, 3000, ... (kecepatan)	Digunakan untuk menentukan lama waktu slide berhenti diantara animasi (hanya berlaku untuk animasi otomatis).
animation	true	Nilai `true` akan membuat slideshow bergerak dengan efek animasi, nilai `false` akan membuat slideshow bergerak kaku dan tampak meloncat.
animation	false
duration	500, 3000, ... (kecepatan)	Digunakan untuk menentukan kecepatan animasi perpindahan slide.
callback	null	Digunakan untuk menerapkan fungsi tambahan yang akan dieksekusi setiap kali slide berpindah.
callback	function() { ... }

Contoh Konfigurasi Animasi Otomatis

$('#tinycarousel').tinycarousel({
    start       : 1,
    display     : 1,
    axis        : 'x',
    interval    : true,
    intervaltime: 3000,
    animation   : true,
    duration    : 1000,
    callback    : null
});

Lihat Demo

Contoh Konfigurasi Orientasi Vertikal

$('#tinycarousel').tinycarousel({
    start       : 1,
    display     : 1,
    axis        : 'y',
    interval    : true,
    intervaltime: 3000,
    animation   : true,
    duration    : 1000,
    callback    : null
});

Lihat Demo

Contoh Konfigurasi Menggeser Slide 3 Buah/Klik Navigasi

$('#tinycarousel').tinycarousel({
    start       : 1,
    display     : 3,
    axis        : 'x',
    interval    : false,
    intervaltime: 3000,
    animation   : true,
    duration    : 1000,
    callback    : null
});

Lihat Demo

Slideshow Otomatis Blogger dengan TinyCarousel (Custom)

Tahap 1: Mengedit Template

Tahap 2: Meletakkan Slideshow

Konfigurasi Slideshow - JSON & Custom TinyCarousel

Pengaturan JSON - Auto Content Slider

Konfigurasi Slideshow

Contoh Konfigurasi Animasi Otomatis

Contoh Konfigurasi Orientasi Vertikal

Contoh Konfigurasi Menggeser Slide 3 Buah/Klik Navigasi

0 komentar:

Posting Komentar

Fotografi

Photoshop

Tutorial Blog

Iklan

Random