2 Membuat Gambar Background Blog Berganti Otomatis

Membuat Gambar Background Blog Berganti Otomatis

Biar Blog makin mencleng aja, kita coba membuat Gambar Backgroundnya berganti-ganti secara otomatis, sehingga indah dipandang mata, jangan kwuatir ini tidak akan buat lelet loudingnya asalkan jangan terlalu jangan terlalu banyak anda menggunakan flash animasi, cara cukup mudah.

1.  Seperti biasanya Log In Blog dulu
2.  Klik Rancangan
3.  Klik Edit HMTL
4.  Letakkan kode CSS dibawah ini diatas kode   ]]></b:skin>

.sleding, img.coX {
        height: 768px;  // bisa diganti : 100%, auto //
        width: 1024px;
        position: fixed;
        top: 0;
        left: 0;
        z-index:-9999;
}

5.  Coba anda letakkan kode script dibawah ini diatas kode   </head>

<script src="https://sites.google.com/site/cuerosbhelatos/cueros.js" type="text/javascript">
</script>
<script src="https://sites.google.com/site/cuerosbhelatos/sikil.js" type="text/javascript">
</script>
<script>
 $(document).ready(function() {
    $('.sleding').sikil({
    fx: 'growX', // Kode growX bisa diganti dengan:fade, scrollUp, scrollRight, scrollDown, turnUp, turnDown, turnLeft, turnRight, wipe, toss, uncover, cover, fadeZoom, zoom, blindX, blindY, growX, growY, curtainX, curtainY //
    pager: '#smallnav',
    pause:   2,
    speed: 2000,//ganti nilai varibelnya semakin besar nilainya semakin lambat efek slidenya//
    timeout:  2000
   });
  });
</script>

6.  Kode HMTL dibawah ini letakkan tepat dibawah kode  </head>

<div class='sleding'>

<img class='coX' src='http://stuckincustoms.smugmug.com/Portfolio-The-Best/your-favorites/18219156511129fc8dfo/742619193_SacSS-900x583.jpg'/>

<img class='coX' src='http://stuckincustoms.smugmug.com/Portfolio-The-Best/your-favorites/4070581709a1c668a779o/742619345_hkJPG-900x600.jpg'/>

<img class='coX' src='http://1-ps.googleusercontent.com/x/www.stuckincustoms.com/stuckincustoms.smugmug.com/Portfolio-The-Best/your-favorites/Portofino2/900x589x788763356_a9WJp-900x589.jpg.pagespeed.ic.641eVzE004.jpg'/>

<img class='coX' src='http://www.weirdpalace.com/img/nature/peta-protest/peta-protest11.jpg'/>

<img class='coX' src='http://dl.ziza.ru/other/102007/31/other/telke/04_telke_86252.jpg'/>

<img class='coX' src='http://dl.ziza.ru/other/102007/31/other/telke/06_telke_73023.jpg'/>

<img class='coX' src='http://dl.ziza.ru/other/102007/31/other/telke/08_telke_88255.jpg'/>

<img class='coX' src='http://dl.ziza.ru/other/102007/31/other/telke/13_telke_74982.jpg'/>

<img class='coX' src='http://i50.tinypic.com/18j0ic.jpg'/>

<img class='coX' src='http://i45.tinypic.com/25sa1bp.jpg'/>

<img class='coX' src='http://i48.tinypic.com/9pp9ig.jpg'/>

<img class='coX' src='http://i47.tinypic.com/34tahwo.jpg'/>

<img class='coX' src='http://i49.tinypic.com/29yk3ed.jpg'/>

<img class='coX' src='http://i46.tinypic.com/34ycjs9.jpg'/>

<img class='coX' src='http://i49.tinypic.com/t0j8zq.jpg'/>

</div>

Keterangan

Kode warna Hijau sesuaikan lebar gambar dengan layar tampilan di monitor

Kode warna merah ganti sesuai dengan alamat url gambar pilihan anda yang sudah di Uploap

Kalau gambarnya belum di Upload  Masukkan   kesini

7.  Pratinjau dahulu kalau sudah oke Save 

 Selamat bersenang senang dengan gambar blognya.