Efek awan dan pesawat terbang di blog


[1]. Pertama, pastinya Login dulu ke Blog Kalian.
[2]. Kemudian dari Dasbor, cari Rancangan --> Edit HTML.
[3]. Lalu cari Code <Body>.
[4]. Setelah ketemu, Copy dan Paste-kan Code di bawah ini, tepat di BAWAH Code tadi.

<style type="text/css">
#cover-cloud {
width:100%;
height:200px;
position:absolute;
z-index:100;
left:0;
}
#cloud {
background: url(http://2.bp.blogspot.com/-pIdaj5t_YMg/T4asjeHwrJI/AAAAAAAADPo/1jFK0WRW4Z0/s1600/cloud1.png) repeat-x 0 0;
position: absolute;
width:100%;
height:188px;
z-index: 200;
}
#cloud2 {
background: url(http://4.bp.blogspot.com/-1LiwOdGfsag/T4afsRPasQI/AAAAAAAADPI/rP6G5TP0ky8/s1600/cloud2.png) repeat-x 0 0;
position: absolute;
width:100%;
height:125px;
z-index: 300;
}
#cloud3 {
background: url(http://3.bp.blogspot.com/-D1UZFZTfMMo/T4afst6IauI/AAAAAAAADPU/zzTOtV0P-40/s1600/cloud3.png) repeat-x 0 0;
position: absolute;
width:100%;
height:46px;
z-index: 400;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="http://monozcore-project.googlecode.com/files/jquery_spritely.js" type="text/javascript"></script>
<script type="text/javascript">
(function($) {$(document).ready(function() {$('#cloud').pan({fps: 30, speed: 1, dir: 'right'});$('#cloud2').pan({fps: 30, speed: 2, dir: 'right'});$('#cloud3').pan({fps: 30, speed: 0.5, dir: 'right'});});})(jQuery);
</script>
<div id='cover-cloud'><div id='cloud'></div><div id='cloud2'><marquee direction='right'><img src='https://lh6.googleusercontent.com/-c4TjgNXUJPA/T4b2CqEp_GI/AAAAAAAABjY/yt4AWY6tGXQ/s800/red_baron.gif'/></marquee></div><div id='cloud3'></div></div>

- Keterangan :

Teks yang berwarna biru merupakan link gambar pesawat, untuk mengganti gambar pesawat silakan ganti link tersebut dengan link gambar yang sobat inginkan. Usahakan menggunakan gambar dengan ukuran 144 pixel baik ukuran tinggi maupun ukuran lebar gambar. Pada postingan artikel ini terdapat beberapa pilihan gambar yang bisa sobat gunakan untuk menyesuaikan gambar pesawat dengan tema template blog sobat.


[5]. Klik "Save" dan lihat hasilnya...

Pilihan Gambar Pesawat :








3 komentar: