Efek Slide Show Otomatis Pada Gambar

Membuat Efek Slide Otomatis Pada Gambar - Tehalang karena ada kesibukan diluar, sehingga cukup lama tidak up-date Artikel, dan kesempatan kali ini saya akan berbagi sesuatu yang unik kepada semua sahabat pecinta SAHABAT BLOGGER 77 tentang Membuat Efek Slide Show Otomatis Pada Gambar, yang tampilannya kurang lebih seperti gambar berikut

Artikel Terkait:  Efek Remote Link Pada Gambar


Pada umumnya efek slide show pada sebuah obyek merupakan pergantian menu dengan menu yang lainnya dalam satu selector secara otomatis, dan efek seperti ini sering kita jumpai pada template web, yang mana pada halaman beranda akan ada sebuah tampilan gambar yang secara terus menerus berjalan saling bergantian untuk menampilkan menu artikel dalam bentuk gambar, inilah yang kita kenal dengan slide show efek. Di artikel kali ini saya akan menggunakan kode yang sama, namun saya menghapus kode artikel menunya, sehingga hanya ada gambar fokus dengan slide efek, jika pada Template default blogger efek ini secara mudah kita dapatkan pada widget menu bawaan blogger.

Jika tertarik ingin mencoba, Silahkan COPY kode berikut dan tempatkan dimana yang Anda sukai pada blog Anda

<style type="text/css">
#slideshow {
  width:300px;
  height:250px;
  background-color:#333;
  margin:0 auto;
}

#slideshow img {display:block;}
</style>
<div id="slideshow">
</div>
<script type="text/javascript">
//<![CDATA[
(function() {
    var container = document.getElementById('slideshow');
    var slide = [
        "URL-gambar Anda//..(gambar-1).jpg",
        "URL-gambar Anda//..(gambar-2).jpg",
        "URL-gambar Anda//..(gambar-3).jpg",
        "URL-gambar Anda//..(gambar-4).jpg"
                ];
    var count = 0;
    setInterval(function() {
        container.innerHTML = "<img src='"+slide[count]+"' alt='Slide "+(count+1)+"'>";
        count++;
        if (count == slide.length) {
            count = 0;
        }
    }, 3000); // Untuk tiga detik sekali (silahkan ubah waktu slide gambar)
})();
//]]>
</script>

Simpan dan lihat hasilnya....

Agar tampilan SLIDE GAMBAR Anda terlihat lebih cantik dan ganteng, Saya sudah siapkan beberapa model bingkai pilihan buat Anda, berikut beberapa model pilihan bingkai untuk menghias tampilan gambarnya, Copy kode berikut dan letakkan dibawah kode pertama.

BINGKAI GAMBAR MODEL PITA

<style>
.rb-wrap {
  position:relative;
  z-index:1;}
.ribbon {
  width:38%;
  font:normal 16px cosmic sans MS !important;
  position:relative;
  background-color:#ba89b6;
  color:#660000;
  text-align:center;
  padding:1em 2em;
  margin:0 auto 3em;
  margin-top:-4.2em;
  /* Content javaScript text='http://sahabatblogger77.blogspot.com' google-code-versi-ID='ribbon77' */
  -webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);
  -moz-box-shadow:0 1px 1px rgba(0,0,0,.2);
  box-shadow:0 1px 1px rgba(0,0,0,.2);}
.ribbon:before,
.ribbon:after {
  content:"";
  position:absolute;
  display:block;
  bottom:-1em;
  border:1.5em solid #986794;
  z-index:-1;}
.ribbon:before {
  left:-2em;
  border-right-width:1.5em;
  border-left-color:transparent;}
.ribbon:after {
  right:-2em;
  border-left-width:1.5em;
  border-right-color:transparent;}

.ribbon .ribbon-content:before,
.ribbon .ribbon-content:after {
  content:"";
  position:absolute;
  display:block;
  border-style:solid;
  border-color:#804f7c transparent transparent transparent;
  bottom:-1em;}

.ribbon .ribbon-content:before {
  left:0;
  border-width:1em 0 0 1em;}

.ribbon .ribbon-content:after {
  right:0;
  border-width:1em 1em 0 0;}
</style>

<div class="rb-wrap">
     <div class="ribbon">
   <strong class="ribbon-content">

..//TEKS ANDA//..

   </strong>
     </div>
</div>

DEMO SHOW

BINGKAI GAMBAR MODEL MENGGANTUNG

<center>
<div style=" margin-top: -1.6em;border-left:6px solid #ccc;border-right:6px solid #ccc;height:15px;max-width:30%;"></div><div style="-moz-border-radius: 20px; -webkit-border-radius: 20px; background: #ccc; border-radius: 20px; color: red; font-weight: bold;max-width: 45%; overflow: auto; padding: 10px; text-align: center;border-left:12px double magenta;border-right:12px double magenta;">

...//TEKS ANDA//...

</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 15px; background: #080; border-radius: 15px; border-top: 3px solid lime; height: 25px; margin-top: -20em; max-width: 45%;"></div><div style="-moz-border-radius: 9px; -webkit-border-radius: 9px; background: red; border-radius: 9px; border: 5px double #ccc; height: 7px; margin-right: 28%; margin-top: -1em; width: 7px;"></div><div style="-moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; border: 6px double #ccc; height: 15px; margin-right: 28%; margin-top: 0; width: 15px;box-shadow: 3px 3px 3px rgb (204, 204, 204);"></div><div style="-moz-border-radius: 9px; -webkit-border-radius: 9px; background: red; border-radius: 9px; border: 5px double #ccc; height: 7px; margin-left: 28%; margin-top: -2.74em; width: 7px;"></div><div style="-moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; border: 6px double #ccc; box-shadow: 3px 3px 3px rgb (204, 204, 204); height: 15px; margin-left: 28%; margin-top: 0; width: 15px;"></div>
</center>

DEMO SHOW