Cara Membuat Efek Awan Akatsuki Di BLog

Halo sob, brow, gan, atau yang lain terserah. Kali ini aku mau sharing tentang cara memberi efek awan Akatsuki di blog bukan sharing tentang Rahasia akatsuki dikarenakan tampilan awalnya mirip dengan posting tantang Rahasia akatsuki. Langsung saja, sebelum melakaukan tutorail ini aku sarankan membackup terlebih dahulu blog kamu agar tidak terjadi error/kesalahan yang tidak di inginkan .

-buka blogger=>template=>edit HTML.
- letakan CSS di atas kode ]]></b:skin>
- dan 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/AVvXsEjgVBpMfco-h0Wwotqk-pDhgdtEK9kCMCyDpb4HiyxsCUghRnM0TuiBxHDhOUBTJvFPfsWG6r2ecGbGDIK65qWpPRWZRr56aQY2ungdwPsXRK7v2hVu4_qz7uxxMklyxu08sGl2JQOLewk/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

Sumber: djogzs.blogspot.com