Info

SELAMAT DATANG

Selamat datang di Blogger Taufik™ - Saya akan berbagi Trik n Tips tentang Blog maupun game dll,kalian juga boleh meng copas nya tetapi tolong di kasih sumber nya.sekian info dari saya semoga Blog saya ini berguna buat kalian pengunjung blog saya.

Tentang Taufik Blogger

Nama sy Taufik hendriyanto , sy lahir di bumi, no hp 081239992747 .

Cara Memasang Gambar Berterbangan di Header Blog

Minggu, 04 November 2012

 
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/AVvXsEgmMBjYbg9IZHbUppT2ZhelROCfsDP64hnXzugpeX5GvP1kI6UbGAYvFgYKo7nSK5FB7HBLy1WNh_rV_wJnv_AlK8Af-y5wwHbPv3x2P8oZndRO6kgXQh9ZYqch_4UWVvo-u_KRcFy2fjc/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>

<div id='akatsuki'>

<div class='akatsuki awanmerah1'/><div class='akatsuki awanmerah2'/><div class='akatsuki awanmerah3'/><div class='akatsuki awanmerah4'/><div class='akatsuki awanmerah5'/></div>
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

Diposting oleh Unknown di 16.55  

Label: ,

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)