Entri Populer

Cara Menambah Text Berjalan Mengikuti Mouse pada Blog

Selasa, 24 Juli 2012

Para Blogger yang terhormat, ayo lebih percantik blog anda dengan cara menambah text berjalan mengikuti mouse pada blog kita, ikuti langkah-langkah berikut ini:


  1. Login pada Blog anda
  2. Masuk ke Tata Letak pilih HTML/JavaScript
  3. Lalu copy-paste Code dibawah ini dan Simpan

<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: normal;
font-weight: normal;
font-family: 'comic sans';
color: #f93b08;
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>
<script type="text/javascript">
;(function(){
var msg = "VISI BUNDA | ee-One";
var size = 22;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
var speed = 0.2;
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,


mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
</script>

Keterangan:
Warna merah pada Code di atas ubah sesuai dengan text yang anda inginkan.

Cara Membuat Animasi Robot pada Blog



Kalau terdahulu saya menulis artikel tentang cara membuat animasi naruto diblog, sekarang saya akan berbagi tentang cara membuat animasi robot pada blog berikut langkah-langkahnya:



  1. Login ke blog sobat
  2. Klik Design > Page elements > Add Gadget
  3. Pilih HTML/JavaScript
  4. Copy kode dibawah ini dan paste kan kedalam konten HTML/JavaScript, lalu Simpan.



<div style="position: fixed; bottom: 25px; left: 20px;width:120px;height:135px;"><a href="http://visibunda.blogspot.com" title=""><img src="http://i1108.photobucket.com/albums/h405/christian410/13-1.gif"/></a><small><center><a href="http://visibunda.blogspot.com" target="_blank"><span style="font-weight:bold;color:#00000;"> Visi Bunda </span></a></center></small></div>


Selamat mencoba dan atur baik dari gambar, ukuran dan posisinya sesuai yang anda inginkan.

Cara Membuat Cursor pada Blog

Cara membuat Kursor pada blog, silahkan ikuti tutorial berikut ini:

  1. Login pada Blog anda
  2. Klik link kode kursor Disini
  3. Copy-paste kode kursor yang di sediakan oleh http://www.cursors-4u.com/ ke HTML/JavaScript Blog anda
  4. Lalu simpan
Contoh gambar kode kursor yang perlu di copy paste ke blog anda:


Cara Membuat Animasi "Naruto" pada Blog

Senin, 23 Juli 2012

Hai para blogger...!! :D
Banyak cara untuk mempercantik blog kita salah satunya dengan menambahkan animasi pada blog kita baik itu gambar maupun tulisan dan lain-lain. oleh karena itu saya ingin berbagi tentang cara membuat animasi "Naruto" pada blog, begini caranya teman:

1. Login ke blog sobat
2. Klik Design > Page elements > Add Gadget
3. Pilih HTML/JavaScript
4. Copy kode dibawah ini dan paste kan kedalam konten HTML/JavaScript

<div style="position: fixed; top: 0px; left: 10px;width:130px;height:160px;"><a href="www.visibunda.blogspot.com" target="_blank"><img src="http://3.bp.blogspot.com/-UMReXZr5NzA/UAJ3jKtSp8I/AAAAAAAAAuM/GnFMMY-stlg/s1600/NarutoVsSasuke.gif"/><span><a href="http://visibunda.blogspot.com/">Visi Bunda | ee-One</a></span></a></div>

Keterangan :

Ganti Url gambar animasi-nya dengan Url gambar animasi yg sobat inginkan
Rubah tinggi dan lebar pada hegiht : 130px dan width : 110px
sesuai keinginan sobat
   
Pada position fixed : maksudnya adalah posisi animasi akan selalu bergerak
jika sobat ingin posisi animasi tersebut diam pada satu posisi maka
hapus position : fixed ini tersebut

Pada bottom : 0px :
maksud bottom 0px ini adalah jarak antara animasi dengan sisi bawah.
jika sobat ingin membuat animasi tersebut  berada di atas
edit bottom menjadi top

Pada left : 10px :
maksud left :10px ini adalah jarak antara animasi dengan sisi kiri .
jika sobat ingin membuat animasi tersebut dikanan
edit left menjadi right.


5. Klik Save dan lihat hasilnya

Untuk mencari gambar animasi Naruto
Klik Disini