- Back to Home »
- One trik at TKJ
Posted by : Unknown
Kamis, 30 Oktober 2014
Membuat Gambar Background Blog Berganti Otomatis
Copyright by Agus Pashter
Agar Blog
makin keren, kita coba membuat Gambar Backgroundnya berganti-ganti
secara otomatis, sehingga indah dipandang mata, jangan kwuatir ini tidak
akan buat lelet loudingnya asalkan jangan terlalu banyak anda
menggunakan flash animasi, caranya 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>
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