search

Tampilkan postingan dengan label awan akatsuki di blog. Tampilkan semua postingan
Tampilkan postingan dengan label awan akatsuki di blog. Tampilkan semua postingan

Jumat, 08 Februari 2013

cara membuat awan akatsuki

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWABmz5kaGaWmoW_E6UGe_lPD3Cl7DO5SMZ91LWkzy993uKiVhrK1gTGcIzJt0yQkNcj3ytfjMRuYh1882T-Y0VLtsiUnDvnU5FB_0Imc_eS250AOp3huth7aWmArJ9H2YXkiwuCr6p-k/s1600/Untitled-1.png


Jika ada yang belum mengerti bisa tanyakan pada saya :)

untuk memasang pada blog kamu,pertama buka blogger=>template=>edit HTML

lalu letakan CSS di atas kode ]]></b:skin>

Sedangkan Untuk HTMLnya kamu letakan kodenya di bawah code <body>


CSS


#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/AVvXsEgWABmz5kaGaWmoW_E6UGe_lPD3Cl7DO5SMZ91LWkzy993uKiVhrK1gTGcIzJt0yQkNcj3ytfjMRuYh1882T-Y0VLtsiUnDvnU5FB_0Imc_eS250AOp3huth7aWmArJ9H2YXkiwuCr6p-k/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;}
}





HTML



<div id='akatsuki'>
<div class='akatsuki awanmerah1'/><div class='akatsuki awanmerah2'/><div class='akatsuki awanmerah3'/><div class='akatsuki awanmerah4'/><div class='akatsuki awanmerah5'/></div>

Semoga artikel Cara Membuat Awan Akatsuki Di Blog ini berguna .. terima kasih

Read More ->>
Diberdayakan oleh Blogger.

slide to unlock