Slideshow Otomatis Blogger dengan TinyCarousel Slideshow Otomatis Blogger dengan TinyCarousel

sebelum kita memulai tutorial nya saya mau minta maaf karna tidak bisa ngasih demo nya.......
agar tidak menunda-nunda tutorial nya kita langsung ke ------

Tahap 1: Mengedit Template

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

Mengedit HTML

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: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 */

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://logcyber.blogspot.com/";
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/autoContent4TinyCarousel.js" type="text/javascript"></script>

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