Membuat Background Image Slideshow

Hai sobat semua, ga bosen-bosennya saya membahas tentang pengalaman saya dalam ngeblog. Tutorial kali ini saya ingin Membuat Background Image Slideshow. Pada postingan sebelumnya saya sudah membahas Membuat Background Blog Otomatis Berganti. Sebenarnya tutorial ini hampir sama dengan tutorial sebelumnya, yaitu agar background berganti-ganti. Hanya bedanya yang kemarin itu hanya warna dan kali ini dengan gambar. Langsung aja ke tutorialnya.
http://alprablog.blogspot.com/

1. Login Blogger.com
2. Masuk ke Rancangan ~> Edit HTML.
3. Cari kode </head>.
   Letakkan kode berikut tepat di atas kode itu.
   
   
   <script type="text/javascript" src="http://js.alpra.co.cc/file/n4317681/jquery-1.6.3.min.js"></script>
   <script type="text/javascript" src="http://js.alpra.co.cc/file/n4317681/jquery.cycle.all.2.74.js"></script>
   <script>
    $(document).ready(function() {
       $('#slideshow').cycle({
       fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
       pager: '#smallnav',
       pause:   1,
       speed: 1800,
       timeout:  3500
      });  
     });
    </script>
   
   
4. Masih di halaman Edit HTML. Cari kode ]]></b:skin>
5. Letakkan kode berikut tepat di atasnya.
   
   
   
   #slideshow, img.bgM {
           min-height: 100%;
           min-width: 1024px;
           width: 100%;
           height: auto;
           position: fixed;
           top: 0;
           left: 0;
           z-index:-9999;
   }
6. Simpan.

http://alprablog.blogspot.com/
Kode di atas itu adalah kode jQuery dan CSS nya saja. Mari lanjut ke cara pemasangannya.
Letakkan kode berikut dimana pun Anda suka.

<div id="slideshow">
<img src="http://img.alpra.co.cc/file/n4317707/bg1.jpg" class="bgM"/>
<img src="http://img.alpra.co.cc/file/n4317707/bg2.jpg" class="bgM"/>
<img src="http://img.alpra.co.cc/file/n4317707/bg3.jpg" class="bgM"/>
<img src="http://img.alpra.co.cc/file/n4317707/bg4.jpg" class="bgM"/>
<img src="http://img.alpra.co.cc/file/n4317707/bg5.jpg" class="bgM"/>
<img src="http://img.alpra.co.cc/file/n4317707/bg6.jpg" class="bgM"/>
<img src="http://img.alpra.co.cc/file/n4317707/bg7.jpg" class="bgM"/>
</div>
<div id="wrap">
Masukan Content Kamu Di Sini.
</div>

View the Demo

Sekian dari saya, semoga bermanfaat :D

Posted in: tutorial blog