Monday, April 8, 2013

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("http://4.bp.blogspot.com/-fyOVfdo1pFQ/T74QloE-dWI/AAAAAAAAB_E/RNYaqEDBAPY/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>





Posted by at
Labels:

No comments:

Post a Comment

↓↓→Thanks for Visiting ←↓↓
Ada aturan-aturan jika berkomentar , di mohon untuk membacanya

-] → Dilarang Spam ,Flod , junk , iklan, sara , sex
-] → menggunakan bahasa yang sopan
-] → dilarang live link pada saat berkomentar
-] → di larang menghina postingan , dan teman yang berkomentar
-] → Blog ini Dofollow

↑↑→Thanks for Visiting←↑↑

Subscribe to: Post Comments (Atom)

Privasi komentar !

↓↓→Thanks for Visiting ←↓↓
Ada aturan-aturan jika berkomentar , di mohon untuk membacanya

-] → Dilarang Spam ,Flod , junk , iklan, sara , sex
-] → menggunakan bahasa yang sopan
-] → dilarang live link pada saat berkomentar
-] → di larang menghina postingan , dan teman yang berkomentar
-] → Blog ini menggunakan sistem Dofollow

↑↑→Thanks for Visiting←↑↑