About Mew O wSepakbolaTV OnlineGameOnlineAplikasiAwardDaftar isi

Minggu, 30 Desember 2012

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:

Ditulis Oleh : jolly sondakh ~ Great Works Of Art

Artikel Membuat SlideShow mudah dan keren di blog ini diposting oleh jolly sondakh pada hari Minggu, 30 Desember 2012. Terimakasih atas kunjungan Sobat serta kesediaan Sobat membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.

:: Get this widget ! ::

Comments
0 Comments

Tidak ada komentar: