Home Blog THỦ THUẬT [ Blogger ] Thêm Hiệu Ứng Tuyết Rơi Và Hiệu Ứng Chuột Đẹp Cho Blog

[ Blogger ] Thêm Hiệu Ứng Tuyết Rơi Và Hiệu Ứng Chuột Đẹp Cho Blog

http://khophanmem0022.blogspot.com/ 01:52 Blog , THỦ THUẬT Edit

***

Những hiệu ứng đẹp sẽ gây ấn tượng cho người xem khi truy cập vào blog cá nhân của bạn .. Chỉ cần bạn chăm chút một ít sẽ tạo phong cách riêng cho blog của bạn ..Thêm hiệu ứng cho chuột cùng sự chuyển động tuyết rơi nhẹ nhàng tạo cảm giác hài hòa không gây cảm giá tĩnh cho blog của bạn ..
Xem Demo

Các bước thực hiện :
- B1 : Đăng nhập vào blogspot => Bố Cục => Thêm Tiện ích => HTML/Javascript

Phần tiêu đề bạn để trống , phần nội dung bạn copy đoạn code sau :

( mỗi hiệu ứng là một HTML/Javascript riêng )

[Code hiệu ứng chuột ]

<script> if ((document.getElementById) && window.addEventListener || window.attachEvent){ (function(){ //Configure here... var xCol = "#ff0000"; var yCol = "#ffffff"; var zCol = "#0000ff"; var n = 6; //number of dots per trail. var t = 40; //setTimeout speed. var s = 0.2; //effect speed. //End. var r,h,w; var d = document; var my = 10; var mx = 10; var stp = 0; var evn = 360/3; var vx = new Array(); var vy = new Array(); var vz = new Array(); var dy = new Array(); var dx = new Array(); var pix = "px"; var strictmod = ((document.compatMode) && document.compatMode.indexOf("CSS") != -1); var domWw = (typeof window.innerWidth == "number"); var domSy = (typeof window.pageYOffset == "number"); var idx = d.getElementsByTagName('div').length; for (i = 0; i < n; i++){ var dims = (i+1)/2; d.write('<div id="x'+(idx+i)+'" style="position:absolute;' +'top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;' +'background-color:'+xCol+';font-size:'+dims+'px"><\/div>' +'<div id="y'+(idx+i)+'" style="position:absolute;top:0px;' +'left:0px;width:'+dims+'px;height:'+dims+'px;' +'background-color:'+yCol+';font-size:'+dims+'px"> <\/div>' +'<div id="z'+(idx+i)+'" style="position:absolute;top:0px;' +'left:0px;width:'+dims+'px;height:'+dims+'px;' +'background-color:'+zCol+';font-size:'+dims+'px"> <\/div>'); } if (domWw) r = window; else{ if (d.documentElement && typeof d.documentElement.clientWidth == "number" && d.documentElement.clientWidth != 0) r = d.documentElement; else{ if (d.body && typeof d.body.clientWidth == "number") r = d.body; } } function winsize(){ var oh,sy,ow,sx,rh,rw; if (domWw){ if (d.documentElement && d.defaultView && typeof d.defaultView.scrollMaxY == "number"){ oh = d.documentElement.offsetHeight; sy = d.defaultView.scrollMaxY; ow = d.documentElement.offsetWidth; sx = d.defaultView.scrollMaxX; rh = oh-sy; rw = ow-sx; } else{ rh = r.innerHeight; rw = r.innerWidth; } h = rh; w = rw; } else{ h = r.clientHeight; w = r.clientWidth; } } function scrl(yx){ var y,x; if (domSy){ y = r.pageYOffset; x = r.pageXOffset; } else{ y = r.scrollTop; x = r.scrollLeft; } return (yx == 0)?y:x; } function mouse(e){ var msy = (domSy)?window.pageYOffset:0; if (!e) e = window.event; if (typeof e.pageY == 'number'){ my = e.pageY - msy + 16; mx = e.pageX + 6; } else{ my = e.clientY - msy + 16; mx = e.clientX + 6; } if (my > h-65) my = h-65; if (mx > w-50) mx = w-50; } function assgn(){ for (j = 0; j < 3; j++){ dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) * Math.sin((stp+j*25)/2) + scrl(0) + pix; dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) * Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix; } stp+=s; for (i = 0; i < n; i++){ if (i < n-1){ vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left; vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left; vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left; } else{ vx[i].top = dy[0]; vx[i].left = dx[0]; vy[i].top = dy[1]; vy[i].left = dx[1]; vz[i].top = dy[2]; vz[i].left = dx[2]; } } setTimeout(assgn,t); } function init(){ for (i = 0; i < n; i++){ vx[i] = document.getElementById("x"+(idx+i)).style; vy[i] = document.getElementById("y"+(idx+i)).style; vz[i] = document.getElementById("z"+(idx+i)).style; } winsize(); assgn(); } if (window.addEventListener){ window.addEventListener("resize",winsize,false); window.addEventListener("load",init,false); document.addEventListener("mousemove",mouse,false); } else if (window.attachEvent){ window.attachEvent("onload",init); document.attachEvent("onmousemove",mouse); window.attachEvent("onresize",winsize); } })(); }//End. </script>

[ Code hiệu ứng tuyết rơi ]

<script type='text/javascript'> //<![CDATA[ var snowmax=100 var snowcolor=new Array("#f2f8fa","#eff5f7","#dcedf1","#ffffff") var snowtype=new Array("Times","Arial","Times","Verdana") var snowletter="*" var sinkspeed=0.6 var snowmaxsize=30 var snowminsize=10 // Set 1 for all-over-snowing, set 2 for left-side-snowing // Set 3 for center-snowing, set 4 for right-side-snowing var snowingzone=1 // Do not edit below this line var snow=new Array() var marginbottom var marginright var timer var i_snow=0 var x_mv=new Array(); var crds=new Array(); var lftrght=new Array(); var browserinfos=navigator.userAgent var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/) var ns6=document.getElementById&&!document.all var opera=browserinfos.match(/Opera/) var browserok=ie5||ns6||opera function randommaker(range) { rand=Math.floor(range*Math.random()) return rand } function initsnow() { if (ie5 || opera) { marginbottom = document.body.scrollHeight marginright = document.body.clientWidth-15 } else if (ns6) { marginbottom = document.body.scrollHeight marginright = window.innerWidth-15 } var snowsizerange=snowmaxsize-snowminsize for (i=0;i<=snowmax;i++) { crds[i] = 0; lftrght[i] = Math.random()*15; x_mv[i] = 0.03 + Math.random()/10; snow[i]=document.getElementById("s"+i) snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)] snow[i].size=randommaker(snowsizerange)+snowminsize snow[i].style.fontSize=snow[i].size+'px'; snow[i].style.color=snowcolor[randommaker(snowcolor.length)] snow[i].style.zIndex=1000 snow[i].sink=sinkspeed*snow[i].size/5 if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)} if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)} if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4} if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2} snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size) snow[i].style.left=snow[i].posx+'px'; snow[i].style.top=snow[i].posy+'px'; } movesnow() } function movesnow() { for (i=0;i<=snowmax;i++) { crds[i] += x_mv[i]; snow[i].posy+=snow[i].sink snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+'px'; snow[i].style.top=snow[i].posy+'px'; if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){ if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)} if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)} if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4} if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2} snow[i].posy=0 } } var timer=setTimeout("movesnow()",50) } for (i=0;i<=snowmax;i++) { document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>") } if (browserok) { window.onload=initsnow } //]]> </script>

Chúc các bạn thành công !!

Share this:

ABOUT THE AUTHOR

Hello We are OddThemes, Our name came from the fact that we are UNIQUE. We specialize in designing premium looking fully customizable highly responsive blogger templates. We at OddThemes do carry a philosophy that: Nothing Is Impossible

Copyright 2014 SINH VIÊN VIỆT.

Designed by OddThemes | Published By Gooyaabi Templates