Rabu, 13 Juni 2012
,tutorial ini saya copy dari blog tetangga hehee, jadi silahkan nikmati tutorial ini..
,tapi sebelum menggunakannya, saya ingatkan untuk :
,tapi sebelum menggunakannya, saya ingatkan untuk :
- Membackup terlebih dahulu blog kamu agar tidak terjadi sesuatu yang diinginkan.
- Mengetahui bahwa menggunakan trik ini harus dapat mengatur posisi awanya sendiri,karena ada kemungkinan saat kamu menggunakan trik ini,elemen yang dibelakangnya akan tertutupi.
- Header tertutup oleh awan ini hingga header tidak bisa berfungsi untuk diklik.
- Bila kamu menggunakan menubar pada blog kamu maka ada kemungkinan tertutupi oleh awan ini.
Solusi :
- Gunakan/ganti nilai z-index menjadi lebih rendah/tinggi(-99999999 s/d 99999999) pada Css #awan1 atau #akatsuki
- Gunakan margin-top/bottom untuk mengatur posisi.(default yang saya atur 0px*posisi paling atas*)
Untuk memasangnya di blog kamu, langkah langkahnya :
1. Login ke blogspot kamu.
2. Pilih Template kemudian Edit HTML (centang Expand Template Widget)
3. Kemudian letakkan CSS diatas kode ]]></b:skin> dan selanjutnya letakkan kode HTML-nya dibawah kode <body>
Awan Akatsuki
#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/AVvXsEg5QCNddG2VqKPY5n9VrO5Eb2WVOt1vvUaPsnin1Xo6Gibt8fdwvGN3gqKshxxMhJe3EyOMU4DpiZPB6yRfByF_mSSN5VD8WQ_yQbeA1mQNy689P8MDaeDAzqNMDyd0GXDls0vRJGq2rhw/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;}}
<div id='akatsuki'><div class='akatsuki awanmerah1'/><div class='akatsuki awanmerah2'/><div class='akatsuki awanmerah3'/><div class='akatsuki awanmerah4'/><div class='akatsuki awanmerah5'/></div>
Awan Putih
#awan1 {position: absolute;z-index: 0;width:100%;margin-top: 0px;height: 0px;}.awan1 {width: 200px; height: 60px;background: #ffffff;border-radius: 200px;-moz-border-radius: 200px;-webkit-border-radius: 200px;position: relative;}.awan1:before, .awan1:after {content: '';position: absolute;background: #ffffff;width: 100px; height: 80px;position: absolute; top: -15px; left: 10px;border-radius: 100px;-moz-border-radius: 100px;-webkit-border-radius: 100px;-webkit-transform: rotate(30deg);transform: rotate(30deg);-moz-transform: rotate(30deg);}.awan1:after {width: 120px; height: 120px;top: -55px; left: auto; right: 15px;}.putih1 {-webkit-animation: moveclouds1 15s linear infinite;-moz-animation: moveclouds1 15s linear infinite;-o-animation: moveclouds1 15s linear infinite;}.putih2 {left: 200px;-webkit-transform: scale(0.6);-moz-transform: scale(0.6);transform: scale(0.6);opacity: 0.6;-webkit-animation: moveclouds1 25s linear infinite;-moz-animation: moveclouds1 25s linear infinite;-o-animation: moveclouds1 25s linear infinite;}.putih3 {left: -250px; top: -200px;-webkit-transform: scale(0.8);-moz-transform: scale(0.8);transform: scale(0.8);opacity: 0.8;-webkit-animation: moveclouds1 20s linear infinite;-moz-animation: moveclouds1 20s linear infinite;-o-animation: moveclouds1 20s linear infinite;}.putih4 {left: 470px; top: -250px;-webkit-transform: scale(0.75);-moz-transform: scale(0.75);transform: scale(0.75);opacity: 0.75;-webkit-animation: moveclouds1 18s linear infinite;-moz-animation: moveclouds1 18s linear infinite;-o-animation: moveclouds1 18s linear infinite;}.putih5 {left: -150px; top: -150px;-webkit-transform: scale(0.8);-moz-transform: scale(0.8);transform: scale(0.8);opacity: 0.8;-webkit-animation: moveclouds1 20s linear infinite;-moz-animation: moveclouds1 20s linear infinite;-o-animation: moveclouds1 20s linear infinite;}@-webkit-keyframes moveclouds1 {0% {margin-left: 1000px;}100% {margin-left: -1000px;}}@-moz-keyframes moveclouds1 {0% {margin-left: 1000px;}100% {margin-left: -1000px;}}@-o-keyframes moveclouds1 {0% {margin-left: 1000px;}100% {margin-left: -1000px;
<div id='awan1'><div class='awan1 putih1'/><div class='awan1 putih2'/><div class='awan1 putih3'/><div class='awan1 putih4'/><div class='awan1 putih5'/></div>
Related Posts :
- Back to Home »
- TUTORIAL BLOGSPOT »
- Cara Membuat Animasi Awan Di Blogspot