Monday, December 3, 2012

Cara Membuat Widget Awan Akatsuki Di Blog | Tenny Technology




Malam all, kali ini saya akan share ilmu cara membuat Awan Akatsuki di Blogspot, oke berikut caranya :
  • Login ke Blogger
  • Rancangan > Edit HTML
  • Centang "Expand Template Widget"
  • Lalu cari kode ]]></b:skin>
  • Jika sudah ketemu copy paste kode dibawah ini tepat diatas kode  ]]></b:skin>
#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/AVvXsEgn4YT20sjWeaA1tx34aE9VQUMV55ruhL8F8pPZew3j5smWykhzB8vxO6TKDI-TBOCku6Q9OjMz9iZxaeoa7MVO2ZfogC3mtnTw_hy0dR_E6jHfqfGMVbCyGfWAayJ4BY-yUjmu7N_xZ8M/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;}
}

  • Lalu Simpan Template
  • Setelah itu cari Rancangan > Tata Letak 
  • Tambah Gadget > HTML/JavaScript
  • Kalo sudah copy pastekan code dibawah ini :
<div id='akatsuki'>
<div class='akatsuki awanmerah1'/><div class='akatsuki awanmerah2'/><div class='akatsuki awanmerah3'/><div class='akatsuki awanmerah4'/><div class='akatsuki awanmerah5'/></div>
 

  • Jika sudah simpan & lihat hasilnya


Credit : Hyden Noris

Tags: ,

0 Responses to “Cara Membuat Widget Awan Akatsuki Di Blog | Tenny Technology”

Post a Comment

Subscribe

Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio. Duis mollis

© 2013 Tenny Techno. All rights reserved.
Designed by SpicyTricks