Home » Efek unik dan menarik untuk BLOG » Efek unik dan menarik untuk BLOG

Efek unik dan menarik untuk BLOG

Pagi sobat GBX kali ini kang blog mau ngasih efek efek menarik dan unik untuk blog kalian.
apa sih gunannya efek cursor? efek kursor berguna untuk mempercantik blog aga para pengunjungt blog betah berada di blog kalian, jika pengunjng betah otomasis rating blog kalian akan bertambah nah langsung aja ikutin langkah-langkahnya:
Efek yang pertama adalah salju/bintang yang berjatuhan ketika kursor mouse anda bergerak.
Untuk memberikan efek ini pada Blog anda, langkah-langkahnya:
  • Login >> Tata Letak >> Tambahkan Gadget >> HTML/Javascript.
  • Isi konten dengan kode yang ada dibawah
<script src="https://pesan-bocah-alus.googlecode.com/files/salju.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">var colour="blue";</script>
Keterangan : Untuk kode yang berwarna biru, merupakan kode dari warna efek, dapat anda rubah sesuai selera anda.
  • Klik "Simpan".
Efek yang kedua adalah Bubble/gelembung, jika pada efek yang pertama saljunya berjatuhan, maka pada efek ini buble akan melayang keatas.
Untuk menggunakan, Langkah-langkahnya persis seperti memasang efek yang pertama hanya dengan kode yang berbeda, yaitu:
  • Login >> Tata Letak >> Tambahkan Gadget >> HTML/Javascript.
  • Isikan konten dengan kode dibawah.
<script type="text/javascript" src="https://pesan-bocah-alus.googlecode.com/files/startbubble.js"></script>
<script type="text/javascript" src="https://pesan-bocah-alus.googlecode.com/files/bubble.js"></script>
  • Klik "Simpan".
Efek yang ketiga berupa tulisan yang mengikuti kursor mouse, jika pada efek yang pertama saljunya akan berjatuhan dan efek yang kedua bubblenya melayang, maka pada efek ini tulisan akan terus mengikuti kursor mouse dan membentuk sebuah circle.
Untuk memasangnya pada Blog anda, Langkah-langkahnya masih sama dengan langkah efek pertama dan kedua, tentunya dengan kode yang berbeda, yaitu:
  • Login >> Tata Letak >> Tambahkan Gadget >> HTML/Javascript.
  • Isikan konten dengan kode dibawah.
<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: &#39;comic sans ms&#39;, verdana, arial;
color: #0000FF;
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'>
//<![CDATA[
;(function(){
var msg = "Tulisan yang ingin anda tampilkan";
var size = 14;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.2;
var speed = 0.3;
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 : kode berwarna biru, merupakan tulisan yang akan muncul nantinya.
  • Klik "Simpan".

Efek yang keempat, berupa jam digital yang mengikuti kursornya.
Cara pemasangannya,
  • Login >> Tata Letak >> Tambahkan Gadget >> HTML/Javascript.
  • Isikan konten dengan kode dibawah.
<script src="https://goblog-x.blogspot.com/" type="text/javascript"></script>
  • Klik "Simpan"



0 komentar:

Tambahkan Komentar

◄ Selanjutnya Newer Post
Efek unik dan menarik untuk BLOG