Slideshow Otomatis Blog TinyCarousel (Custom)

Custom TinyCarousel for Blogger
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://lh3.googleusercontent.com/-TXEAbxVLrs8/UCsb6a0yRnI/AAAAAAAAAuE/AttYJG1IIOk/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…..

Pos ini dipublikasikan di blog tutorial. Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s