Artikel ini saya copy blog temen , jadi silahkan nikmati tutorial ini
Tapi sebelum menggunakan trik ini 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.
Contoh kemungkinan problem:
-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*)
Jika ada yang belum mengerti bisa tanyakan pada saya :)
untuk memasang pada blog kamu,pertama buka blogger=>template=>edit HTML
lalu letakan CSS di atas kode ]]></b:skin>
Sedangkan Untuk HTMLnya kamu letakan kodenya di bawah code <body>
1. Awan Putih
CSS.
#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;}HTML
<div id='awan1'><div class='awan1 putih1'/><div class='awan1 putih2'/><div class='awan1 putih3'/><div class='awan1 putih4'/><div class='awan1 putih5'/></div>2. Awan Akatsuki
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/AVvXsEi03Zl0rnU1MbTlgxtLRu_g4sYha4uplKEThc6Ziv4xvs806zrX9MXnpwLVB9WcaNyK24-k1AjM_893yCQm6_O9qs581lIY9-WEaMEwDUEvLInkWTu5RTmmTJacn6LN1dH54Bolr-BHNqM/s1600/Untitled-1.png") no-repeat top center;position: relative;}HTML
.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>
Selamat mencoba dan semoga bermanfaat.
0 komentar:
Posting Komentar