Selamat pagi para monster dimana pun sobat berada, kali ini admin ingin memberikan tutorial tentang Membuat CSS + HTML Awan Bergerak Dinamis. sudah banyak orang yang menanyakan tentang cara membuat style tersebut, dengan kemurahan hati admin akan memberikan tutorialnya untuk sobat, jangan lupa untuk nge-like ataupun nge-share menggunakan tombol Google Plus (G+), oke lanjut kepembicaraan.
PART1 - HANYA SATU AWAN #1
1. Buka Dashboard Blogger
2. Pilih template
3. Pilih Edit Template HTML
4. Copy kode CSS dibawah ini di atas ]]></b:skin>
.Monster-S1{position:absolute;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOpe1kh7XfuocrZPHFURDljHMm1OheBcAPz3u3u26goCbvmRehOcKAQGLG6Y_schTLVmutrQeVqG9rEDIwfGR-29t4-8XuGn6L_CAA5gRdlLbiIYleOipUY5u63lohXkeo3BbvRVvu5y8/s1600/Monster-Sprite+v7-3.png") no-repeat -141px -240px scroll transparent;width:270px;height:135px;margin-left:80px;margin-top:30px;-moz-animation:Monster-genS1 4.5s infinite linear; -webkit-animation:Monster-genS1 4.5s infinite linear; -o-animation:Monster-genS1 4.5s infinite linear;-ms-animation:Monster-genS1 4.5s infinite linear;animation:Monster-genS1 4.5s infinite linear}
@-moz-keyframes Monster-genS1{
0%{margin-left:80px;margin-top:30px}
20%{margin-left:70px;margin-top:30px}
40%{margin-left:80px;margin-top:40px}
60%{margin-left:70px;margin-top:30px}
80%{margin-left:80px;margin-top:20px}
100%{margin-left:80px;margin-top:30px}}
@-webkit-keyframes Monster-genS1{
0%{margin-left:80px;margin-top:30px}
20%{margin-left:70px;margin-top:30px}
40%{margin-left:80px;margin-top:40px}
60%{margin-left:70px;margin-top:30px}
80%{margin-left:80px;margin-top:20px}
100%{margin-left:80px;margin-top:30px}}
@-o-keyframes Monster-genS1{
0%{margin-left:80px;margin-top:30px}
20%{margin-left:70px;margin-top:30px}
40%{margin-left:80px;margin-top:40px}
60%{margin-left:70px;margin-top:30px}
80%{margin-left:80px;margin-top:20px}
100%{margin-left:80px;margin-top:30px}}
@-ms-keyframes Monster-genS1{
0%{margin-left:80px;margin-top:30px}
20%{margin-left:70px;margin-top:30px}
40%{margin-left:80px;margin-top:40px}
60%{margin-left:70px;margin-top:30px}
80%{margin-left:80px;margin-top:20px}
100%{margin-left:80px;margin-top:30px}}
@keyframes Monster-genS1{
0%{margin-left:80px;margin-top:30px}
20%{margin-left:70px;margin-top:30px}
40%{margin-left:80px;margin-top:40px}
60%{margin-left:70px;margin-top:30px}
80%{margin-left:80px;margin-top:20px}
100%{margin-left:80px;margin-top:30px}}
5. Copy kode HTML dibawah ini di bawah
untuk diletakkan di header template, boleh disimpan dimana saja yang penting tidak error
<div class='Monster-S1'/>
6. Simpan Template dan lihat hasilnya
7. selamat berkreasi (~‾ ▽‾)~dan jangan lupa berikan komentar sobat... ingat! komentar anda sangat membantu blog ini terima kasih
PART2 - BEBERAPA AWAN DAN TAMBAHAN LAIN #2
1. Buka Dashboard Blogger
2. Pilih template
3. Pilih Edit Template
4. Copy kode CSS dibawah ini di atas ]]></b:skin>
.Monster-S1{position:absolute;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOpe1kh7XfuocrZPHFURDljHMm1OheBcAPz3u3u26goCbvmRehOcKAQGLG6Y_schTLVmutrQeVqG9rEDIwfGR-29t4-8XuGn6L_CAA5gRdlLbiIYleOipUY5u63lohXkeo3BbvRVvu5y8/s1600/Monster-Sprite+v7-3.png") no-repeat -141px -240px scroll transparent;width:270px;height:135px;margin-left:80px;margin-top:30px;-moz-animation:Monster-genS1 4.5s infinite linear; -webkit-animation:Monster-genS1 4.5s infinite linear; -o-animation:Monster-genS1 4.5s infinite linear;-ms-animation:Monster-genS1 4.5s infinite linear;animation:Monster-genS1 4.5s infinite linear} .Monster-S2{position:absolute;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOpe1kh7XfuocrZPHFURDljHMm1OheBcAPz3u3u26goCbvmRehOcKAQGLG6Y_schTLVmutrQeVqG9rEDIwfGR-29t4-8XuGn6L_CAA5gRdlLbiIYleOipUY5u63lohXkeo3BbvRVvu5y8/s1600/Monster-Sprite+v7-3.png") no-repeat -194px -68px scroll transparent;width:200px;height:95px;margin-left:-20px;margin-top:90px;-moz-animation:Monster-genS2 4.5s infinite linear; -webkit-animation:Monster-genS2 4.5s infinite linear; -o-animation:Monster-genS2 4.5s infinite linear;-ms-animation:Monster-genS2 4.5s infinite linear;animation:Monster-genS2 4.5s infinite linear} .Monster-S3{position:absolute;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOpe1kh7XfuocrZPHFURDljHMm1OheBcAPz3u3u26goCbvmRehOcKAQGLG6Y_schTLVmutrQeVqG9rEDIwfGR-29t4-8XuGn6L_CAA5gRdlLbiIYleOipUY5u63lohXkeo3BbvRVvu5y8/s1600/Monster-Sprite+v7-3.png") no-repeat -291px -0px scroll transparent;width:104px;height:67px;margin-left:20px;margin-top:12px;-moz-animation:Monster-genS3 4.5s infinite linear; -webkit-animation:Monster-genS3 4.5s infinite linear; -o-animation:Monster-genS3 4.5s infinite linear;-ms-animation:Monster-genS3 4.5s infinite linear;animation:Monster-genS3 4.5s infinite linear} .Monster-S6{position:absolute;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOpe1kh7XfuocrZPHFURDljHMm1OheBcAPz3u3u26goCbvmRehOcKAQGLG6Y_schTLVmutrQeVqG9rEDIwfGR-29t4-8XuGn6L_CAA5gRdlLbiIYleOipUY5u63lohXkeo3BbvRVvu5y8/s1600/Monster-Sprite+v7-3.png") no-repeat -140px -165px scroll transparent;width:120px;height:80px;margin-left:140px;margin-top:120px;-moz-animation:Monster-genS5 4.5s infinite linear; -webkit-animation:Monster-genS5 4.5s infinite linear; -o-animation:Monster-genS5 4.5s infinite linear;-ms-animation:Monster-genS5 4.5s infinite linear;animation:Monster-genS5 4.5s infinite linear} .Monster-S5{position:absolute;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOpe1kh7XfuocrZPHFURDljHMm1OheBcAPz3u3u26goCbvmRehOcKAQGLG6Y_schTLVmutrQeVqG9rEDIwfGR-29t4-8XuGn6L_CAA5gRdlLbiIYleOipUY5u63lohXkeo3BbvRVvu5y8/s1600/Monster-Sprite+v7-3.png") no-repeat -266px -165px scroll transparent;width:220px;height:70px;margin-left:10px;margin-top:60px;-moz-animation:Monster-genS6 4.5s infinite linear; -webkit-animation:Monster-genS6 4.5s infinite linear; -o-animation:Monster-genS6 4.5s infinite linear;-ms-animation:Monster-genS6 4.5s infinite linear;animation:Monster-genS6 4.5s infinite linear} .Monster-S4{position:absolute;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOpe1kh7XfuocrZPHFURDljHMm1OheBcAPz3u3u26goCbvmRehOcKAQGLG6Y_schTLVmutrQeVqG9rEDIwfGR-29t4-8XuGn6L_CAA5gRdlLbiIYleOipUY5u63lohXkeo3BbvRVvu5y8/s1600/Monster-Sprite+v7-3.png") no-repeat -52px -0px scroll transparent;width:152px;height:161px;margin-left:90px;margin-top:12px;-moz-animation:Monster-genS4 1.9s infinite linear; -webkit-animation:Monster-genS4 4.5s infinite linear; -o-animation:Monster-genS4 4.5s infinite linear;-ms-animation:Monster-genS4 4.5s infinite linear;animation:Monster-genS4 4.5s infinite linear} @-moz-keyframes Monster-genS1{ 0%{margin-left:80px;margin-top:30px} 20%{margin-left:70px;margin-top:30px} 40%{margin-left:80px;margin-top:40px} 60%{margin-left:70px;margin-top:30px} 80%{margin-left:80px;margin-top:20px} 100%{margin-left:80px;margin-top:30px}}
@-moz-keyframes Monster-genS2{ 0%{margin-left:-20px;margin-top:90px} 20%{margin-left:-15px;margin-top:95px} 40%{margin-left:-25px;margin-top:90px} 60%{margin-left:-30px;margin-top:95px} 80%{margin-left:-25px;margin-top:90px} 100%{margin-left:-20px;margin-top:90px}}
@-moz-keyframes Monster-genS3{ 0%{margin-left:20px;margin-top:12px} 20%{margin-left:25px;margin-top:20px} 40%{margin-left:20px;margin-top:9px} 60%{margin-left:15px;margin-top:12px} 80%{margin-left:20px;margin-top:17px} 100%{margin-left:20px;margin-top:12px}}
@-moz-keyframes Monster-genS4{ 0%{margin-left:90px;margin-top:5px} 60%{margin-left:90px;margin-top:10px} 100%{margin-left:90px;margin-top:5px}}
@-moz-keyframes Monster-genS5{ 0%{margin-left:140px;margin-top:120px} 20%{margin-left:145px;margin-top:125px} 40%{margin-left:140px;margin-top:120px} 60%{margin-left:145px;margin-top:110px} 80%{margin-left:150px;margin-top:125px} 100%{margin-left:140px;margin-top:120px}}
@-moz-keyframes Monster-genS6{ 0%{margin-left:10px;margin-top:60px} 20%{margin-left:20px;margin-top:60px} 40%{margin-left:10px;margin-top:70px} 60%{margin-left:5px;margin-top:60px} 80%{margin-left:10px;margin-top:50px} 100%{margin-left:10px;margin-top:60px}}
@-webkit-keyframes Monster-genS1{ 0%{margin-left:80px;margin-top:30px} 20%{margin-left:70px;margin-top:30px} 40%{margin-left:80px;margin-top:40px} 60%{margin-left:70px;margin-top:30px} 80%{margin-left:80px;margin-top:20px} 100%{margin-left:80px;margin-top:30px}}
@-webkit-keyframes Monster-genS2{ 0%{margin-left:-20px;margin-top:90px} 20%{margin-left:-15px;margin-top:95px} 40%{margin-left:-25px;margin-top:90px} 60%{margin-left:-30px;margin-top:95px} 80%{margin-left:-25px;margin-top:90px} 100%{margin-left:-20px;margin-top:90px}}
@-webkit-keyframes Monster-genS3{ 0%{margin-left:20px;margin-top:12px} 20%{margin-left:25px;margin-top:20px} 40%{margin-left:20px;margin-top:9px} 60%{margin-left:15px;margin-top:12px} 80%{margin-left:20px;margin-top:17px} 100%{margin-left:20px;margin-top:12px}}
@-webkit-keyframes Monster-genS4{ 0%{margin-left:90px;margin-top:5px} 60%{margin-left:90px;margin-top:10px} 100%{margin-left:90px;margin-top:5px}}
@-webkit-keyframes Monster-genS5{ 0%{margin-left:140px;margin-top:120px} 20%{margin-left:145px;margin-top:125px} 40%{margin-left:140px;margin-top:120px} 60%{margin-left:145px;margin-top:110px} 80%{margin-left:150px;margin-top:125px} 100%{margin-left:140px;margin-top:120px}}
@-webkit-keyframes Monster-genS6{ 0%{margin-left:10px;margin-top:60px} 20%{margin-left:20px;margin-top:60px} 40%{margin-left:10px;margin-top:70px} 60%{margin-left:5px;margin-top:60px} 80%{margin-left:10px;margin-top:50px} 100%{margin-left:10px;margin-top:60px}}
@-o-keyframes Monster-genS1{ 0%{margin-left:80px;margin-top:30px} 20%{margin-left:70px;margin-top:30px} 40%{margin-left:80px;margin-top:40px} 60%{margin-left:70px;margin-top:30px} 80%{margin-left:80px;margin-top:20px} 100%{margin-left:80px;margin-top:30px}}
@-o-keyframes Monster-genS2{ 0%{margin-left:-20px;margin-top:90px} 20%{margin-left:-15px;margin-top:95px} 40%{margin-left:-25px;margin-top:90px} 60%{margin-left:-30px;margin-top:95px} 80%{margin-left:-25px;margin-top:90px} 100%{margin-left:-20px;margin-top:90px}}
@-o-keyframes Monster-genS3{ 0%{margin-left:20px;margin-top:12px} 20%{margin-left:25px;margin-top:20px} 40%{margin-left:20px;margin-top:9px} 60%{margin-left:15px;margin-top:12px} 80%{margin-left:20px;margin-top:17px} 100%{margin-left:20px;margin-top:12px}}
@-o-keyframes Monster-genS4{ 0%{margin-left:90px;margin-top:5px} 60%{margin-left:90px;margin-top:10px} 100%{margin-left:90px;margin-top:5px}}
@-o-keyframes Monster-genS5{ 0%{margin-left:140px;margin-top:120px} 20%{margin-left:145px;margin-top:125px} 40%{margin-left:140px;margin-top:120px} 60%{margin-left:145px;margin-top:110px} 80%{margin-left:150px;margin-top:125px} 100%{margin-left:140px;margin-top:120px}}
@-o-keyframes Monster-genS6{ 0%{margin-left:10px;margin-top:60px} 20%{margin-left:20px;margin-top:60px} 40%{margin-left:10px;margin-top:70px} 60%{margin-left:5px;margin-top:60px} 80%{margin-left:10px;margin-top:50px} 100%{margin-left:10px;margin-top:60px}}
@-ms-keyframes Monster-genS1{ 0%{margin-left:80px;margin-top:30px} 20%{margin-left:70px;margin-top:30px} 40%{margin-left:80px;margin-top:40px} 60%{margin-left:70px;margin-top:30px} 80%{margin-left:80px;margin-top:20px} 100%{margin-left:80px;margin-top:30px}}
@-ms-keyframes Monster-genS2{ 0%{margin-left:-20px;margin-top:90px} 20%{margin-left:-15px;margin-top:95px} 40%{margin-left:-25px;margin-top:90px} 60%{margin-left:-30px;margin-top:95px} 80%{margin-left:-25px;margin-top:90px} 100%{margin-left:-20px;margin-top:90px}}
@-ms-keyframes Monster-genS3{ 0%{margin-left:20px;margin-top:12px} 20%{margin-left:25px;margin-top:20px} 40%{margin-left:20px;margin-top:9px} 60%{margin-left:15px;margin-top:12px} 80%{margin-left:20px;margin-top:17px} 100%{margin-left:20px;margin-top:12px}}
@-ms-keyframes Monster-genS4{ 0%{margin-left:90px;margin-top:5px} 60%{margin-left:90px;margin-top:10px} 100%{margin-left:90px;margin-top:5px}}
@-ms-keyframes Monster-genS5{ 0%{margin-left:140px;margin-top:120px} 20%{margin-left:145px;margin-top:125px} 40%{margin-left:140px;margin-top:120px} 60%{margin-left:145px;margin-top:110px} 80%{margin-left:150px;margin-top:125px} 100%{margin-left:140px;margin-top:120px}}
@-ms-keyframes Monster-genS6{ 0%{margin-left:10px;margin-top:60px} 20%{margin-left:20px;margin-top:60px} 40%{margin-left:10px;margin-top:70px} 60%{margin-left:5px;margin-top:60px} 80%{margin-left:10px;margin-top:50px} 100%{margin-left:10px;margin-top:60px}}
@-keyframes Monster-genS1{ 0%{margin-left:80px;margin-top:30px} 20%{margin-left:70px;margin-top:30px} 40%{margin-left:80px;margin-top:40px} 60%{margin-left:70px;margin-top:30px} 80%{margin-left:80px;margin-top:20px} 100%{margin-left:80px;margin-top:30px}}
@-keyframes Monster-genS2{ 0%{margin-left:-20px;margin-top:90px} 20%{margin-left:-15px;margin-top:95px} 40%{margin-left:-25px;margin-top:90px} 60%{margin-left:-30px;margin-top:95px} 80%{margin-left:-25px;margin-top:90px} 100%{margin-left:-20px;margin-top:90px}}
@-keyframes Monster-genS3{ 0%{margin-left:20px;margin-top:12px} 20%{margin-left:25px;margin-top:20px} 40%{margin-left:20px;margin-top:9px} 60%{margin-left:15px;margin-top:12px} 80%{margin-left:20px;margin-top:17px} 100%{margin-left:20px;margin-top:12px}}
@-keyframes Monster-genS4{ 0%{margin-left:90px;margin-top:5px} 60%{margin-left:90px;margin-top:10px} 100%{margin-left:90px;margin-top:5px}}
@-keyframes Monster-genS5{ 0%{margin-left:140px;margin-top:120px} 20%{margin-left:145px;margin-top:125px} 40%{margin-left:140px;margin-top:120px} 60%{margin-left:145px;margin-top:110px} 80%{margin-left:150px;margin-top:125px} 100%{margin-left:140px;margin-top:120px}}
@-keyframes Monster-genS6{ 0%{margin-left:10px;margin-top:60px} 20%{margin-left:20px;margin-top:60px} 40%{margin-left:10px;margin-top:70px} 60%{margin-left:5px;margin-top:60px} 80%{margin-left:10px;margin-top:50px} 100%{margin-left:10px;margin-top:60px}}
4. Copy kode HTML dibawah ini di bawah
<div class='Monster-S1'/>
<div class='Monster-S2'/>
<div class='Monster-S3'/>
<div class='Monster-S4'/>
<div class='Monster-S5'/>
<div class='Monster-S6'/>
5. Simpan Template dan lihat hasilnya
6. selamat berkreasi (~‾ ▽‾)~dan jangan lupa berikan komentar sobat... ingat! komentar anda sangat membantu blog ini terima kasih
Dapatkan Banyak Lagi Tips, Trick, Tutorial dan Info Terbaru dari Monster-Shared dengan cara Mem-follow blog ini, klik tombol Join This Site (Sudut Kanan Atas) Trima kasih
Membuat CSS + HTML Awan Bergerak Dinamis
Re Source : http://monster-shared.blogspot.sg/2014/01/membuat-css-html-awan-bergerak-dinamis.html
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon