Cara Memasang Gambar Berterbangan di Header Blog

Kali ini www.davidgunawan123.blogspot.com akan mengeshare cara memasang gambar berterbangan di header Blog , jika kalian membaca judulnya pasti bingung kan apa maksudnya, Maksudnya adalah di header kalian akan ada gambar yang bergerak dari kanan ke kiri, nah gambarnya ini bisa disesuaikan dengan kalian sendiri . Saya Sudah pernah mencobanya tetapi karena blog saya terlalu berat jadi saya lepas, kalau mau silakan ikuti tutorialnya

1. Masuk www.blogger.com
2. Template
3. Edit HTML, Expand Template Widget
4. Akan ada 2 kode yang saya berikan dan dua duanya harus dipasang
- Kode CSS , kode ini dipasang di atas kode ]]></b:skin>

#akatsuki{position: absolute;
z-index: 0;
width:100%;
margin-top: 0px;
height: 0px;}
.akatsuki {
width: 200px; height: 138px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCrMeiHtoX9tS83eh7X-gw1Y7V4wLgMvWgNKisFMBje0LYUvqa4iMobA2KdlUCdeWlLfR8n9KM0M2iixfokLoffG5yQKz_W47n3-nypd8MuciYd1XnK-JVfeaoNZ36ZwPspPioBwHtIoE/s1600/Untitled-1.png") no-repeat top center;
position: relative;
}

.awanmerah1 {
-webkit-animation: moveclouds2 15s linear infinite;
-moz-animation: moveclouds2 15s linear infinite;
-o-animation: moveclouds2 15s linear infinite;
}
.awanmerah2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
-webkit-animation: moveclouds2 25s linear infinite;
-moz-animation: moveclouds2 25s linear infinite;
-o-animation: moveclouds2 25s linear infinite;
}
.awanmerah3 {
left: -250px; top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds2 20s linear infinite;
-moz-animation: moveclouds2 20s linear infinite;
-o-animation: moveclouds2 20s linear infinite;
}
.awanmerah4 {
left: 470px; top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75;
-webkit-animation: moveclouds2 18s linear infinite;
-moz-animation: moveclouds2 18s linear infinite;
-o-animation: moveclouds2 18s linear infinite;
}
.awanmerah5 {
left: -150px; top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds2 20s linear infinite;
-moz-animation: moveclouds2 20s linear infinite;
-o-animation: moveclouds2 20s linear infinite;
}
@-webkit-keyframes moveclouds2 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds2 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds2 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}

- Kode HTML, kode ini dipasang di bawah kode <body>

5. Simpan, dan selesai
NB: di bagian CSS point ke 4 , url yang saya beri warna merah dapat diganti dengan gambar yang kalian inginkan, apabila kalian tidak menggantinya maka kalian akan menggunakan gambar awan akatsuki
Sekian dari www.davidgunawan123.blogspot.com , semoga berhasi
Jangan lupa comment ya

Backlink Please !

URL

Code For Forum

HTML Code

<a href='http://davidgunawan123.blogspot.com/2012/11/cara-memasang-gambar-berterbangan-di.html' target='_blank'>Cara Memasang Gambar Berterbangan di Header Blog</a>

Anda sedang membaca artikel tentang Cara Memasang Gambar Berterbangan di Header Blog dan anda bisa menemukan artikel Cara Memasang Gambar Berterbangan di Header Blog ini dengan url http://davidgunawan123.blogspot.com/2012/11/cara-memasang-gambar-berterbangan-di.html, anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Memasang Gambar Berterbangan di Header Blog ini sangat bermanfaat, namun jangan lupa untuk meletakkan link Cara Memasang Gambar Berterbangan di Header Blog ataupun link ke D-G Blog sebagai sumbernya. Semoga dengan adanya artikel Cara Memasang Gambar Berterbangan di Header Blog bisa membantu kalian semua.