21.3.14
18
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

Efek gambar

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


TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Efek Slide Show Otomatis Pada Gambar
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

18 komentar

  1. jadi lebih unik klau dicoba..

    BalasHapus
  2. Wah gambarnya bisa lebih hidup nantinya yah Sob?
    saya coba dulu makasih atas berbaginya :)

    BalasHapus
    Balasan
    1. ya bang, sangat cocok buat blog yang dominan share gambar atau tentang gallery foto, sehingga kita bisa menempatkan semua koleksi gambar dengan sistem slide show diatas

      Hapus
  3. Selain di blog tidak bisa ditempatkan pada yang lain ya mbak..

    BalasHapus
    Balasan
    1. jika ingin tampil pada sidebar, letakkan kodenya pada kolom <aside> dan jika pada postingan letakkan pada mode HTML

      Hapus
  4. awal masuk kemana teh aku masih awam

    BalasHapus
  5. dibuat diman tuh kode, di java/html script ya???

    BalasHapus
    Balasan
    1. boleh mas, jika ingin tampil sebagai widget, namun jangan lupa untuk menyisipkan elemen style pada awal kode

      Hapus
  6. ternyata di sini ada slide gambar yg responsive.. dari kemarin nyari tp nda ketemu..
    apalagi ada bonus cewe cakepnya.. sy pilih nomor satu sampai lima saja..

    sampaiin ya Vy.. yg punya poto di demoshow.. senyumnya bikin lemes..

    inih kelebihan dari mantan model.. pernah saat buat kegiatan fashion dgn teman2.. yg ikut lomba cantik2.. tp masih kalah dgn yg di demoshow.. nda ngebosanin.. sejuk di mata..

    apalgi ituh yg di tirai 2.. padahal sdh ditawari amplop tp ttp pilih tirai saja..mirip mimpi semalam ketemu bidadari..

    BalasHapus
  7. artis india mah lewaaat....!

    BalasHapus
  8. iiih ada kupu2..
    mau jadi kupu2 jg aahh..!

    BalasHapus
  9. kalo poto profil yg ditirai dipasang..pasti.. spammer makin byk.. seperti koment inih..
    bikin gemes..pengen nyubit pipi mas cefriandy sj.. tp takut..

    BalasHapus
  10. IJIN DUDUK DI SINI YA ADMIN..
    lagi liat2 demoshow.. soalnya tadi.. foto yg didemoshow.. tersenyum manis.. maniiis..skali.. sampe2 lupa mandi..

    mumpung dimoderasi.. hahahaha...

    BalasHapus
  11. kode style satunya yg mna VVy..!??

    BalasHapus
  12. hapus kkoment2 inih Vy.... malu ..sedang ngerayu si admin.. hapus ya Vy..pliss..yg penting sudah baca..

    BalasHapus
    Balasan
    1. mas Al kan cowok, Devy cewek, wajar kali kalau ada rayuan, yang gak wajar itu kalau mas Al selalu merayu mas saud, itu baru malu..!!

      Hapus
  13. Ngga bisa komentar mbak blognya keren banget salam kenal ya mbak

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK