Kali ini saya buat postigan cara membuat background blog berganti secara otomatis alias Slideshow sobat, Demonya sedang sobat lihat pada background dipostingan ini, kalau kurang puas cek demonya pada link dibawah iniLangkah pemasangannya : 1. Login Keblog Sobat
2. Masuk Rancangan Klik Edit HTML
3. Letakkan CSS berikut diatas kode ]]></b:skin>
4. Letakkan Script dibawah ini diatas kode </head>
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>
2. Masuk Rancangan Klik Edit HTML
3. Letakkan CSS berikut diatas kode ]]></b:skin>
.sleding, img.coX {
height: 768px; // bisa diganti : 100%, auto //
width: 1024px;
position: fixed;
top: 0;
left: 0;
z-index:-9999;
}
height: 768px; // bisa diganti : 100%, auto //
width: 1024px;
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>

0 komentar:
Posting Komentar