Membuat SlideShow mudah dan keren di blog

Jika sobat ingin membuat SlideShow seperti ini...
Maka ikutilah turtorial di bawah ini..
1. Login blogger sobat...
2. Masuk Template > Edit Template HTML > centang Expand Template Widget
3.Search : ]]></b:skin> 
4. copy kan Css berikut ini 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;
}

6. Search : </head> dan pastekan Script berikut ini di atasnya.

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

7. Next.. Masuk ke Tata Letak > Tambah gadget > pilih HTML/JavaScript dan pastekan script berikut ini.

<script type="text/javascript">
    showPostDate_g     = true;  (tanggal postingan)
    slideOpenNewTab    = false;
    idMode             = true;
    slidebyLabels      = true; (jika tidak menggunakan berdasarkan label tertentu ubah jadi false)
    var slideLabelName = "The%20World", (jika sobat menggunakan label, masukan judul label)
        pBlank         = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
        text           = "Komentar",
        numposts_g     = 20, (banyaknya postingan yang di tampilkan)
        home_page      = "http://rexroom.blogspot.com/"; (ubah dengan url blog sobat)
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/autoContent4s3Slider.js" type="text/javascript"></script>

Hapus tulisan berwarna kuning
8. Save dan lihat hasilnya

DEMO

Related Post: