Slideshow Otomatis Blog TinyCarousel (Custom)

1.  masuk akun blog sobat >> tataletak/layout >> klik tambah gadget >> pilih HTML/Javascript >> lalu copy dan pastekan kode di bawah

<script type="text/javascript">
var showPostDate_g  = true,

    showComm_g      = true,

    slideOpenNewTab = true,

    idMode          = true,

    slidebyLabels   = false,

    slideLabelName  = "Mengenai",

    pBlank          = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEoe0Pw4_DWKVFwJhFReII2IVJQe2ktzCdP3xBClPbyXh5-0FEPKe5NNoMMTzfHmhC-JNRYCsoLhDpHtYuZ9_Z3Equ-HfgxJKH9pIij2IzoFGuSAzjYei6GsDheUQ0nIkzn8atvpE9Wfr5/s259/images.jpg",

    text            = "Komentar",

    numposts_g      = 30,

    numchars_g      = 100,

    showText        = "Menampilkan",

    postText        = "Posting",

    tinyprevNav     = "&lt;",

    tinynextNav     = "&gt;",

    home_page       = "http://www.alizainsyahab.co.cc/";

</script>

<script src="http://reader-download.googlecode.com/svn/trunk/autoContent4TinyCarousel.js" type="text/javascript"></script>



<script src='http://myjavascriptslibrarry.googlecode.com/files/jquery.min.tinycrousel.js' type='text/javascript'></script>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function(){

    $('#tinycarousel').tinycarousel({

        start       : 5,

        display     : 5,

        axis        : 'x',

        interval    : false,

        intervaltime: 5000,

        animation   : false,

        duration    : 2000,

        callback    : null

    }); 

});

//]]>

</script>

<script src='http://myjavascriptslibrarry.googlecode.com/files/jquery.tinycarousel-custom.js' type='text/javascript'></script>



<style>

/**

 * Custom TinyCarousel by Ali Zain Syahab

 * Visit: http://www.alizainsyahab.co.cc/

 */



#tinycarousel {

  width:532px; /* Lebar Slideshow */

  height:1%;

  overflow:hidden;

  font:normal 10px/12px Arial,Sans-Serif;

  color:#666;

  margin:30px auto;

}



#tinycarousel .viewport {

  height:337px;

  overflow:hidden;

  position:relative;

  background-color:#eee;

  border:1px solid #ccc;

}



#tinycarousel ul.overview {

  list-style:none !important;

  position:absolute;

  padding:0px 0px !important;

  margin:0px 0px !important;

  width:240px;

  left:0px;

  top:0px;

}



#tinycarousel ul.overview li {

  list-style:none !important;

  float:left;

  margin:5px 0px 5px 5px !important;

  padding:0px 0px !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 !important;

  height:170px !important;

  border:none;

  outline:none;

  padding:0px 0px;

  margin:0px 0px;

  -webkit-box-shadow:none;

  -moz-box-shadow:none;

  box-shadow:none;

}



#tinycarousel h6 {

  border-top:1px solid #ddd;

  font:bold 11px/12px Verdana,Arial,Sans-Serif;

  color:#39f;

  margin:9px 0px 5px;

  padding:10px 0px 0px;

  backgorund:transparent;

  overflow:hidden;

}



#tinycarousel h6 a {

  color:#39f;

  text-decoration:none;

  border:none;

}



#tinycarousel p {

  margin:0px 0px;

  padding:0px 0px;

  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:0px 0px;

}



#tinycarousel #tinyarrow {

  display:block;

  background-color:white;

  border:1px solid #ccc;

  padding:5px;

  margin:2px 0px 0px;

  overflow:hidden;

}



#tinycarousel #tinyarrow .buttons {

  background-color:#666;

  border:none;

  outline:none;

  display:block;

  padding:2px 5px;

  overflow:hidden;

  position:relative;

  float:left;

  margin:0px 1px;

  color:white;

  text-decoration:none;

  font-weight:bold;

}



#tinycarousel #tinyarrow .disable {

  display:none;

}



#tinycarousel #tinyarrow .buttons:active {

background-color:#900;

  position:relative;

  top:1px;

}



#tinycarousel #tinyarrow span {

  float:right;

  font:bold 11px Tahoma,Verdana,Arial,Sans-Serif;

  display:block;

  margin:2px 5px 0px 0px;

}



/*

 * 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:230px;

  margin:5px auto 10px !important;

}



/* End Slideshow */

</style>

2. Ganti URL http://www.alizainsyahab.co.cc/ 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 link akan terbuka di tab/jendela baru. Jika bernilai false, setiap link 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.
	'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.
	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.
	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.
	function() { ... }

silahkan mencoba.....
Sumber :

---

DAFTAR ISI

---