Membuat CSS + HTML Awan Bergerak Dinamis
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.
seperti screenshot gambar tersebut, dibentuk oleh CSS + HTML juga digunakan CSS Sprite. CSS Sprite lebih mudah dan lebih efisien untuk template
karena lebih hemat dan praktis. Coba baca terlebih dahulu Penggunaan CSS Sprite. okey disini saya hanya memberikan tutorial awan tersebut lalu sobat
bisa kembangkan.[:emosi] langsung saja kita simak , berikut ini:
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/AVvXsEi8ZvAp6UY1i-QtHacbVDq9kNXZWkR5dqOskf03D44JSPLx91EwLdpEcgzB-Se-LfxxRyJ_KYUTs86a-R5XEtAN0cjLcQV1JAjSRWW4BqBlha4KffmIkiKAp9793FwEuDAzQasZXJ6-sdQ/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/AVvXsEi8ZvAp6UY1i-QtHacbVDq9kNXZWkR5dqOskf03D44JSPLx91EwLdpEcgzB-Se-LfxxRyJ_KYUTs86a-R5XEtAN0cjLcQV1JAjSRWW4BqBlha4KffmIkiKAp9793FwEuDAzQasZXJ6-sdQ/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/AVvXsEi8ZvAp6UY1i-QtHacbVDq9kNXZWkR5dqOskf03D44JSPLx91EwLdpEcgzB-Se-LfxxRyJ_KYUTs86a-R5XEtAN0cjLcQV1JAjSRWW4BqBlha4KffmIkiKAp9793FwEuDAzQasZXJ6-sdQ/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/AVvXsEi8ZvAp6UY1i-QtHacbVDq9kNXZWkR5dqOskf03D44JSPLx91EwLdpEcgzB-Se-LfxxRyJ_KYUTs86a-R5XEtAN0cjLcQV1JAjSRWW4BqBlha4KffmIkiKAp9793FwEuDAzQasZXJ6-sdQ/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/AVvXsEi8ZvAp6UY1i-QtHacbVDq9kNXZWkR5dqOskf03D44JSPLx91EwLdpEcgzB-Se-LfxxRyJ_KYUTs86a-R5XEtAN0cjLcQV1JAjSRWW4BqBlha4KffmIkiKAp9793FwEuDAzQasZXJ6-sdQ/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/AVvXsEi8ZvAp6UY1i-QtHacbVDq9kNXZWkR5dqOskf03D44JSPLx91EwLdpEcgzB-Se-LfxxRyJ_KYUTs86a-R5XEtAN0cjLcQV1JAjSRWW4BqBlha4KffmIkiKAp9793FwEuDAzQasZXJ6-sdQ/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/AVvXsEi8ZvAp6UY1i-QtHacbVDq9kNXZWkR5dqOskf03D44JSPLx91EwLdpEcgzB-Se-LfxxRyJ_KYUTs86a-R5XEtAN0cjLcQV1JAjSRWW4BqBlha4KffmIkiKAp9793FwEuDAzQasZXJ6-sdQ/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
3 comments