Beranda » Ide » Slideshow Otomatis Blogger dengan S3Slider

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:

#slider, #slider ul#sliderContent, #slider img {
  width:420px;  /* Tentukan lebar slideshow  */
  height:270px; /* Tentukan tinggi slideshow */
}

#slider {
  margin:0px auto 10px;
  border:2px solid white;
  background:#fff url('http://reader-download.googlecode.com/svn/trunk/images/nivo-loading.gif') no-repeat 50% 50%;
  position:relative;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4), 0px 7px 10px -3px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4), 0px 7px 10px -3px rgba(0,0,0,0.4);
  box-shadow:0px 1px 3px rgba(0,0,0,0.4), 0px 7px 10px -3px rgba(0,0,0,0.4);
  overflow:hidden;
}

ul#sliderContent {
  position:absolute;
  top:0px;
  margin:0px 0px;
  padding:0px 0px;
  overflow:hidden;
}

#slider img {
  border:none;
  padding:0px 0px;
  margin:0px 0px;
  outline:none;
}

.sliderImage {
  float:left;
  position:relative;
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
  display:none;
}

.sliderImage span {
  position:absolute;
  left:0px;
  right:0px;
  bottom:0px;
  height:auto;
  font:normal 11px Arial,Sans-Serif;
  color:white;
  background-color:black;
  opacity:0.8;
  filter:alpha(opacity=80);
  padding:7px 10px 12px;
  display:none;
}

.sliderImage span a {
  font-size:12px;
  font-weight:bold;
  color:white;
  text-decoration:none;
}

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 src='http://reader-download.googlecode.com/svn/trunk/s3Slider.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
    $(window).bind('load', function() {
        $('#slider').css('background-image', 'none').s3Slider({
            timeOut:3000
        });
    });
//]]>
</script>

Klik Simpan Template.

Ubah ukuran slideshow dengan cara mengubah nilai width dan height pada CSS:

#slider, #slider ul#sliderContent, #slider img {
  width:420px;  /* Tentukan lebar slideshow  */
  height:270px; /* Tentukan tinggi slideshow */
}

timeOut:3000 adalah kecepatan standar animasi slideshow.
Kode yang Saya beri garis bawah adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut!

Meletakkan Slideshow

Masuklah ke menu Tata Letak kemudian tambahkan sebuah elemen halaman HTML/JavaScript yang terletak di bagian atas posting. Karena di situlah letak ideal untuk menampilkan slideshow:

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<script type="text/javascript">
    showPostDate_g     = true;
    slideOpenNewTab    = false;
    idMode             = true;
    slidebyLabels      = false;
    var slideLabelName = "Mengenai",
        pBlank         = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
        text           = "Komentar",
        numposts_g     = 10,
        home_page      = "http://latitudu.blogspot.com/";
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/autoContent4s3Slider.js" type="text/javascript"></script>