Twitter
Change Background of This Blog!



Pasang Seperti Ini

Cara Membuat Awan Akatsuki Bergerak dI Blog

Author Unknown - -
Home » Cara Membuat Awan Akatsuki Bergerak dI Blog


Halo kali ini admin mau post Cara membuat Awan Akatsuki Bergerak di Blog 

Jika ada yang belum mengerti bisa tanyakan pada saya :)
langsung aja ke TKP
untuk memasang pada blog kamu,pertama buka blogger=>template=>edit HTML

1.tekan ctrl + f cari kode ini ]]></b:skin> 
2.lalu letakan CSS dibawah ini di atas kode ]]></b:skin>
   CSS
  1. .akatsuki {
    width: 200px; height: 138px;
    background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjofi4HZ3ls_LD92atqn2DCouju99ODgs0sFjq8zlcFSRMVPCpkR89EiFpJoLauIval-0rDV6sT71BXxJ8XZB9AZJtdsN9PqxfonuwJjEYk5to17cJ4S8VwWqs_oUV6clcFoUWTzlGlb-0/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;}
    }

3.Sedangkan Untuk HTMLnya kamu letakan kodenya di bawah code <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>

2 Responses so far.

  1. Unknown says:

    thanks buat infonya, visit y
    http://konichiwax.blogspot.com/

  2. Unknown says:

    Mas ]]> Di Blog Ane Kagga Ada -_-