Cara Membuat Awan Akatsuki Melayang Di Blog

loading...
Assalamualaikum.. ^_^

Halo-halo..Jumpa lagi neeh dengan saya dipostingan ini.Setelah cukup lama tidak buat posting tentang tutorial blog,kali ini saya sempatkan membuat posting tentang tutorial blog.Kira-kira mau bahas apa ya ? Hmm..Oh iya,yg unik-unik aja deh.Kalo gitu kita akan bahas tentang akatsuki.Loh kok ? Haha..iya2 belum selesai ngomong juga.Maksudnya membuat awan aktsuki yang bisa bergerak di blog.Nanti awannya muncul di headernya saja,jadi tidak akan menggangu pandangan mata saat baca isi postingnya.Kalian simak baik-baik ya cara membuatnya :

1. Log in Blog dulu
2. Masuk ke  Rancangan > template > edit template
3. Cari kode ]]></b:skin> 
4. Letakkan kode dibawah ini tepat diatas kode ]]></b:skin>  tadi

#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;}
}

4. Letakkan kode dibawah ini tepat dibawah 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. Untuk hasilnya seperti apa kalian bisa lihat demonya DISINI
Selamat mencoba ^_^

4 Comments

Leave a Reply

Your email address will not be published.


*