Archive for Oktober 2012
Cara Membuat Back To Top Efek Bounce
langsung aja ya!.
Pertama buka Blogger > Rancangan > Edit HTML > jangan lupa klik Expand Template Widget
Kalo Udah Copy Kode dibawah ini!
#toTop { text-align:center; position:fixed; bottom:0px; right:10px; cursor:pointer; display:none; color:#000; font-family:verdana; font-size:11px;}
Taruh Code diatas, diatas tag ]]></b:skin>
Oke! Lanjut ke kode </head> n taruh script di bawah ini, dibawah kode </head>
Oke! Lanjut ke kode </head> n taruh script di bawah ini, dibawah kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/><script type='text/javascript'>$(function() { $(window).scroll(function() { if($(this).scrollTop() > 100) { $('#toTop').fadeIn(); } else { $('#toTop').fadeOut(); } });
$('#toTop > img').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });</script>
<div id='toTop'><!-- Back to top animation written by farizemo | edited by ilham mboh --><img src='http://picturestack.com/408/690/3RMToTopyonbijEz.png' style='margin-right:-9px'/></div>
Code yang berwarna merah kamu ganti dengan url gambar kamu sendiri
Lalu klik
SIMPAN TEMPLATE
Lihat Hasilnya!
Cara Membuat Awan Akatsuki Di Blog
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>
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/AVvXsEit1YM0G3wYSxAGMSB59Rg9FSNcu4EOH3TRhaJ7R5qXbM7kg9T0JpCZiiyrzQc-7fV6edIhq5ziOW11MpDy5UWSPO-EusCUN950Ae64HsIfsna3IdIX8SJEOHnhlKzJeSZMfSEW-8-7OvI/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;}
}
HTML
<div id='akatsuki'>
<div class='akatsuki awanmerah1'/><div class='akatsuki awanmerah2'/><div class='akatsuki awanmerah3'/><div class='akatsuki awanmerah4'/><div class='akatsuki awanmerah5'/></div>
