Kali ini saya buat postigan cara membuat background blog berganti secara otomatis alias Slideshow Background Blog sobat, Demonya sedang sobat lihat pada background dipostingan ini, kalau kurang puas cek demonya pada link dibawah ini
Langkah pemasangannya :
1. Login Keblog Sobat
2. Masuk Rancangan Klik Edit HTML
3. Letakkan CSS berikut diatas kode ]]></b:skin>
.sleding, img.coX {
height: 768px; // bisa diganti : 100%, auto //
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index:-9999;
}
height: 768px; // bisa diganti : 100%, auto //
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index:-9999;
}
4. Letakkan 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>
</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>
5. Letakkan kode HTML berikut dibawah kode </head>
<div class="sleding">
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/oren.jpg" class="coX"/>
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/bego.jpg" class="coX"/>
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/ichigo-in-orange.jpg" class="coX"/>
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/orange1.jpg" class="coX"/>
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/Ultimate_RED_by_mikil.jpg" class="coX"/>
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/bejo.jpg" class="coX"/>
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/ijo.jpg" class="coX"/>
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/Lucky_Orange.jpg" class="coX"/>
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/jembut.jpg" class="coX"/>
</div>
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/oren.jpg" class="coX"/>
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/bego.jpg" class="coX"/>
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/ichigo-in-orange.jpg" class="coX"/>
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/orange1.jpg" class="coX"/>
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/Ultimate_RED_by_mikil.jpg" class="coX"/>
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/bejo.jpg" class="coX"/>
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/ijo.jpg" class="coX"/>
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/Lucky_Orange.jpg" class="coX"/>
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/jembut.jpg" class="coX"/>
</div>
Semoga bermanfaat
Posted On : 30 Januari 2012 Time : 18.58
