Code tạo chuông Giáng Sinh cho blogspot

Mỗi dịp Giáng sinh-Noel hầu như các trang web/blog ít nhiều đều có chút không khí đón giáng sinh bằng các hình ảnh hoặc sử dụng các hiệu ứng như tuyết rơi,giàn chuông leng keng khi rê chuột...

Dưới đây là một số code trang trí giáng sinh-Noel cho blog/web giúp các bạn đưa không khí giáng sinh vào web/blogspot của mình.

Trang trí chuông giáng sinh cho blog có 3 tùy chọn:

1- Hai cặp chuông cùng ở 2 góc trên cùng blog
2- Một cặp chuông ở góc trái trên cùng
3- Một cặp chuông ở góc phải trên cùng
Code tạo chuông Giáng Sinh cho blogspot

DEMO
A: Và dưới đây là các code tương ứng với mỗi kiểu trang trí
Bạn chỉ cần tiến hành thêm 1 tiện ích và dán code sau vào

1- 2 cặp chuông ở 2 góc trên cùng

<img src="https://2.bp.blogspot.com/-wwDysm2OXoc/Uqs_La7SULI/AAAAAAAAkBc/-pBDrszYV3g/s1600/christmas-bells-icon-left.png" style="position:fixed; top: 0px;left:0px;border:none;z-index:5;"/><img src="https://lh3.googleusercontent.com/-pTig3Mjd4ww/UXzW9Ucx1sI/AAAAAAAAYy0/snAOGiIbwNg/s141/christmas-bells-icon-right.png" style="position:fixed; top: 0px;right:0px;border:none;z-index:5;"/>
2- Ở góc trái(1 cặp chuông)
<img src="https://2.bp.blogspot.com/-wwDysm2OXoc/Uqs_La7SULI/AAAAAAAAkBc/-pBDrszYV3g/s1600/christmas-bells-icon-left.png" style="position:fixed; top: 0px;left:0px;border:none;z-index:5;"/>
3- Ở góc phải(1 cặp chuông)
<img src="https://lh3.googleusercontent.com/-pTig3Mjd4ww/UXzW9Ucx1sI/AAAAAAAAYy0/snAOGiIbwNg/s141/christmas-bells-icon-right.png" style="position:fixed; top: 0px;right:0px;border:none;z-index:5;"/>
B: Bạn có thể sử dụng code dưới đây với cặp chuông có hoa dây cùng nền tuyết và chữ chúc mừng giáng sinh:
<img src="https://3.bp.blogspot.com/-HoI2X8bvC-c/Uqs9a8GcIcI/AAAAAAAAkBA/hnI463PJ-G4/s1600/top-left.png" style="position:fixed; top: 0px;left:0px;border:none;z-index:5;"/><img src="https://2.bp.blogspot.com/-QPNFVHMFzDg/UqtFuWLuh9I/AAAAAAAAkB0/3oTwo9EktzY/s1600/top-right-TWINKLE.gif" style="position:fixed; top: 0px;right:0px;border:none;z-index:5;"/><div style='position:fixed;z-index:9999;bottom:0;left:0;width:100%;height:100px;background:url(https://4.bp.blogspot.com/-vpPw80NyDHI/UqtNd9hmsgI/AAAAAAAAkCE/w5agUcLcepU/s1600/footer.png) repeat-x bottom left;'></div><img src='https://4.bp.blogspot.com/-4RKAss4Mup0/UqtNu8UfdyI/AAAAAAAAkCM/qzsdc1RKMOQ/s1600/bottom-left.png' style='position:fixed;z-index:9999;bottom:60px;left:20px'/>
C: Tạo dàn chuông giáng sinh leng keng khi rê chuột
Bạn cũng có thể sử dụng code dưới đây để tạo 1 dàn chuông rất đẹp mắt cho blogspot nhân dịp Giáng sinh.Đặc điểm của dàn chuông này là khi ta rê chuột vào dàn chuông,chuông và những quả cầu giáng sinh sẽ đung đưa và phát ra những tiếng leng keng như chuông gió rất vui tai.
DEMO
Để tạo dàn chuông như vậy bạn cần dán code sau vào trước thẻ </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function () {
var d = function () {};
$(document).delegate(".b-ball_bounce", "mouseenter", function () {
b(this);
m(this)
}).delegate(".b-ball_bounce .b-ball__right", "mouseenter", function (i) {
i.stopPropagation();
b(this);
m(this)
});

function f() {
var i = "https://jpicforum.info/holiday_bells/flash/holiday_bells.swf";
i = i + "?nc=" + (new Date().getTime());
swfobject.embedSWF(i, "z-audio__player", "1", "1", "9.0.0", null, {}, {
allowScriptAccess: "always",
hasPriority: "true"
})
}
function h(i) {
if ($.browser.msie) {
return window[i]
} else {
return document[i]
}
}
window.flashInited = function () {
d = function (j) {
try {
h("z-audio__player").playSound(j)
} catch (i) {}
}
};
if (window.swfobject) {
window.setTimeout(function () {
$("body").append('<div class="g-invisible"><div id="z-audio__player"></div></div>');
f()
}, 100)
}
var l = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "=", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "\\"];
var k = ["z", "x", "c", "v", "b", "n", "m", ",", ".", "/"];
var g = 36;
var a = {};
for (var e = 0, c = l.length; e < c; e++) {
a[l[e].charCodeAt(0)] = e
}
for (var e = 0, c = k.length; e < c; e++) {
a[k[e].charCodeAt(0)] = e
}
$(document).keypress(function (j) {
var i = $(j.target);
if (!i.is("input") && j.which in a) {
d(a[j.which])
}
});

function b(n) {
if (n.className.indexOf("b-ball__right") > -1) {
n = n.parentNode
}
var i = /b-ball_n(\d+)/.exec(n.className);
var j = /b-head-decor__inner_n(\d+)/.exec(n.parentNode.className);
if (i && j) {
i = parseInt(i[1], 10) - 1;
j = parseInt(j[1], 10) - 1;
d((i + j * 9) % g)
}
}
function m(j) {
var i = $(j);
if (j.className.indexOf(" bounce") > -1) {
return
}
i.addClass("bounce");

function n() {
i.removeClass("bounce").addClass("bounce1");

function o() {
i.removeClass("bounce1").addClass("bounce2");

function p() {
i.removeClass("bounce2").addClass("bounce3");

function q() {
i.removeClass("bounce3")
}
setTimeout(q, 300)
}
setTimeout(p, 300)
}
setTimeout(o, 300)
}
setTimeout(n, 300)
}
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
/* SWFObject v2.2 <https://code.google.com/p/swfobject/>
is released under the MIT License <http://www.opensource.org/licenses/mit-license.php>
*/
var swfobject=function(){var D="undefined",r="object",S="Shockwave Flash",W="ShockwaveFlash.ShockwaveFlash",q="application/x-shockwave-flash",R="SWFObjectExprInst",x="onreadystatechange",O=window,j=document,t=navigator,T=false,U=[h],o=[],N=[],I=[],l,Q,E,B,J=false,a=false,n,G,m=true,M=function(){var aa=typeof j.getElementById!=D&&typeof j.getElementsByTagName!=D&&typeof j.createElement!=D,ah=t.userAgent.toLowerCase(),Y=t.platform.toLowerCase(),ae=Y?/win/.test(Y):/win/.test(ah),ac=Y?/mac/.test(Y):/mac/.test(ah),af=/webkit/.test(ah)?parseFloat(ah.replace(/^.*webkit\/(\d+(\.\d+)?).*$/,"$1")):false,X=!+"\v1",ag=[0,0,0],ab=null;if(typeof t.plugins!=D&&typeof t.plugins[S]==r){ab=t.plugins[S].description;if(ab&&!(typeof t.mimeTypes!=D&&t.mimeTypes[q]&&!t.mimeTypes[q].enabledPlugin)){T=true;X=false;ab=ab.replace(/^.*\s+(\S+\s+\S+$)/,"$1");ag[0]=parseInt(ab.replace(/^(.*)\..*$/,"$1"),10);ag[1]=parseInt(ab.replace(/^.*\.(.*)\s.*$/,"$1"),10);ag[2]=/[a-zA-Z]/.test(ab)?parseInt(ab.replace(/^.*[a-zA-Z]+(.*)$/,"$1"),10):0}}else{if(typeof O.ActiveXObject!=D){try{var ad=new ActiveXObject(W);if(ad){ab=ad.GetVariable("$version");if(ab){X=true;ab=ab.split(" ")[1].split(",");ag=[parseInt(ab[0],10),parseInt(ab[1],10),parseInt(ab[2],10)]}}}catch(Z){}}}return{w3:aa,pv:ag,wk:af,ie:X,win:ae,mac:ac}}(),k=function(){if(!M.w3){return}if((typeof j.readyState!=D&&j.readyState=="complete")||(typeof j.readyState==D&&(j.getElementsByTagName("body")[0]||j.body))){f()}if(!J){if(typeof j.addEventListener!=D){j.addEventListener("DOMContentLoaded",f,false)}if(M.ie&&M.win){j.attachEvent(x,function(){if(j.readyState=="complete"){j.detachEvent(x,arguments.callee);f()}});if(O==top){(function(){if(J){return}try{j.documentElement.doScroll("left")}catch(X){setTimeout(arguments.callee,0);return}f()})()}}if(M.wk){(function(){if(J){return}if(!/loaded|complete/.test(j.readyState)){setTimeout(arguments.callee,0);return}f()})()}s(f)}}();function f(){if(J){return}try{var Z=j.getElementsByTagName("body")[0].appendChild(C("span"));Z.parentNode.removeChild(Z)}catch(aa){return}J=true;var X=U.length;for(var Y=0;Y<X;Y++){U[Y]()}}function K(X){if(J){X()}else{U[U.length]=X}}function s(Y){if(typeof O.addEventListener!=D){O.addEventListener("load",Y,false)}else{if(typeof j.addEventListener!=D){j.addEventListener("load",Y,false)}else{if(typeof O.attachEvent!=D){i(O,"onload",Y)}else{if(typeof O.onload=="function"){var X=O.onload;O.onload=function(){X();Y()}}else{O.onload=Y}}}}}function h(){if(T){V()}else{H()}}function V(){var X=j.getElementsByTagName("body")[0];var aa=C(r);aa.setAttribute("type",q);var Z=X.appendChild(aa);if(Z){var Y=0;(function(){if(typeof Z.GetVariable!=D){var ab=Z.GetVariable("$version");if(ab){ab=ab.split(" ")[1].split(",");M.pv=[parseInt(ab[0],10),parseInt(ab[1],10),parseInt(ab[2],10)]}}else{if(Y<10){Y++;setTimeout(arguments.callee,10);return}}X.removeChild(aa);Z=null;H()})()}else{H()}}function H(){var ag=o.length;if(ag>0){for(var af=0;af<ag;af++){var Y=o[af].id;var ab=o[af].callbackFn;var aa={success:false,id:Y};if(M.pv[0]>0){var ae=c(Y);if(ae){if(F(o[af].swfVersion)&&!(M.wk&&M.wk<312)){w(Y,true);if(ab){aa.success=true;aa.ref=z(Y);ab(aa)}}else{if(o[af].expressInstall&&A()){var ai={};ai.data=o[af].expressInstall;ai.width=ae.getAttribute("width")||"0";ai.height=ae.getAttribute("height")||"0";if(ae.getAttribute("class")){ai.styleclass=ae.getAttribute("class")}if(ae.getAttribute("align")){ai.align=ae.getAttribute("align")}var ah={};var X=ae.getElementsByTagName("param");var ac=X.length;for(var ad=0;ad<ac;ad++){if(X[ad].getAttribute("name").toLowerCase()!="movie"){ah[X[ad].getAttribute("name")]=X[ad].getAttribute("value")}}P(ai,ah,Y,ab)}else{p(ae);if(ab){ab(aa)}}}}}else{w(Y,true);if(ab){var Z=z(Y);if(Z&&typeof Z.SetVariable!=D){aa.success=true;aa.ref=Z}ab(aa)}}}}}function z(aa){var X=null;var Y=c(aa);if(Y&&Y.nodeName=="OBJECT"){if(typeof Y.SetVariable!=D){X=Y}else{var Z=Y.getElementsByTagName(r)[0];if(Z){X=Z}}}return X}function A(){return !a&&F("6.0.65")&&(M.win||M.mac)&&!(M.wk&&M.wk<312)}function P(aa,ab,X,Z){a=true;E=Z||null;B={success:false,id:X};var ae=c(X);if(ae){if(ae.nodeName=="OBJECT"){l=g(ae);Q=null}else{l=ae;Q=X}aa.id=R;if(typeof aa.width==D||(!/%$/.test(aa.width)&&parseInt(aa.width,10)<310)){aa.width="310"}if(typeof aa.height==D||(!/%$/.test(aa.height)&&parseInt(aa.height,10)<137)){aa.height="137"}j.title=j.title.slice(0,47)+" - Flash Player Installation";var ad=M.ie&&M.win?"ActiveX":"PlugIn",ac="MMredirectURL="+O.location.toString().replace(/&/g,"%26")+"&MMplayerType="+ad+"&MMdoctitle="+j.title;if(typeof ab.flashvars!=D){ab.flashvars+="&"+ac}else{ab.flashvars=ac}if(M.ie&&M.win&&ae.readyState!=4){var Y=C("div");X+="SWFObjectNew";Y.setAttribute("id",X);ae.parentNode.insertBefore(Y,ae);ae.style.display="none";(function(){if(ae.readyState==4){ae.parentNode.removeChild(ae)}else{setTimeout(arguments.callee,10)}})()}u(aa,ab,X)}}function p(Y){if(M.ie&&M.win&&Y.readyState!=4){var X=C("div");Y.parentNode.insertBefore(X,Y);X.parentNode.replaceChild(g(Y),X);Y.style.display="none";(function(){if(Y.readyState==4){Y.parentNode.removeChild(Y)}else{setTimeout(arguments.callee,10)}})()}else{Y.parentNode.replaceChild(g(Y),Y)}}function g(ab){var aa=C("div");if(M.win&&M.ie){aa.innerHTML=ab.innerHTML}else{var Y=ab.getElementsByTagName(r)[0];if(Y){var ad=Y.childNodes;if(ad){var X=ad.length;for(var Z=0;Z<X;Z++){if(!(ad[Z].nodeType==1&&ad[Z].nodeName=="PARAM")&&!(ad[Z].nodeType==8)){aa.appendChild(ad[Z].cloneNode(true))}}}}}return aa}function u(ai,ag,Y){var X,aa=c(Y);if(M.wk&&M.wk<312){return X}if(aa){if(typeof ai.id==D){ai.id=Y}if(M.ie&&M.win){var ah="";for(var ae in ai){if(ai[ae]!=Object.prototype[ae]){if(ae.toLowerCase()=="data"){ag.movie=ai[ae]}else{if(ae.toLowerCase()=="styleclass"){ah+=' class="'+ai[ae]+'"'}else{if(ae.toLowerCase()!="classid"){ah+=" "+ae+'="'+ai[ae]+'"'}}}}}var af="";for(var ad in ag){if(ag[ad]!=Object.prototype[ad]){af+='<param name="'+ad+'" value="'+ag[ad]+'" />'}}aa.outerHTML='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"'+ah+">"+af+"</object>";N[N.length]=ai.id;X=c(ai.id)}else{var Z=C(r);Z.setAttribute("type",q);for(var ac in ai){if(ai[ac]!=Object.prototype[ac]){if(ac.toLowerCase()=="styleclass"){Z.setAttribute("class",ai[ac])}else{if(ac.toLowerCase()!="classid"){Z.setAttribute(ac,ai[ac])}}}}for(var ab in ag){if(ag[ab]!=Object.prototype[ab]&&ab.toLowerCase()!="movie"){e(Z,ab,ag[ab])}}aa.parentNode.replaceChild(Z,aa);X=Z}}return X}function e(Z,X,Y){var aa=C("param");aa.setAttribute("name",X);aa.setAttribute("value",Y);Z.appendChild(aa)}function y(Y){var X=c(Y);if(X&&X.nodeName=="OBJECT"){if(M.ie&&M.win){X.style.display="none";(function(){if(X.readyState==4){b(Y)}else{setTimeout(arguments.callee,10)}})()}else{X.parentNode.removeChild(X)}}}function b(Z){var Y=c(Z);if(Y){for(var X in Y){if(typeof Y[X]=="function"){Y[X]=null}}Y.parentNode.removeChild(Y)}}function c(Z){var X=null;try{X=j.getElementById(Z)}catch(Y){}return X}function C(X){return j.createElement(X)}function i(Z,X,Y){Z.attachEvent(X,Y);I[I.length]=[Z,X,Y]}function F(Z){var Y=M.pv,X=Z.split(".");X[0]=parseInt(X[0],10);X[1]=parseInt(X[1],10)||0;X[2]=parseInt(X[2],10)||0;return(Y[0]>X[0]||(Y[0]==X[0]&&Y[1]>X[1])||(Y[0]==X[0]&&Y[1]==X[1]&&Y[2]>=X[2]))?true:false}function v(ac,Y,ad,ab){if(M.ie&&M.mac){return}var aa=j.getElementsByTagName("head")[0];if(!aa){return}var X=(ad&&typeof ad=="string")?ad:"screen";if(ab){n=null;G=null}if(!n||G!=X){var Z=C("style");Z.setAttribute("type","text/css");Z.setAttribute("media",X);n=aa.appendChild(Z);if(M.ie&&M.win&&typeof j.styleSheets!=D&&j.styleSheets.length>0){n=j.styleSheets[j.styleSheets.length-1]}G=X}if(M.ie&&M.win){if(n&&typeof n.addRule==r){n.addRule(ac,Y)}}else{if(n&&typeof j.createTextNode!=D){n.appendChild(j.createTextNode(ac+" {"+Y+"}"))}}}function w(Z,X){if(!m){return}var Y=X?"visible":"hidden";if(J&&c(Z)){c(Z).style.visibility=Y}else{v("#"+Z,"visibility:"+Y)}}function L(Y){var Z=/[\\\"<>\.;]/;var X=Z.exec(Y)!=null;return X&&typeof encodeURIComponent!=D?encodeURIComponent(Y):Y}var d=function(){if(M.ie&&M.win){window.attachEvent("onunload",function(){var ac=I.length;for(var ab=0;ab<ac;ab++){I[ab][0].detachEvent(I[ab][1],I[ab][2])}var Z=N.length;for(var aa=0;aa<Z;aa++){y(N[aa])}for(var Y in M){M[Y]=null}M=null;for(var X in swfobject){swfobject[X]=null}swfobject=null})}}();return{registerObject:function(ab,X,aa,Z){if(M.w3&&ab&&X){var Y={};Y.id=ab;Y.swfVersion=X;Y.expressInstall=aa;Y.callbackFn=Z;o[o.length]=Y;w(ab,false)}else{if(Z){Z({success:false,id:ab})}}},getObjectById:function(X){if(M.w3){return z(X)}},embedSWF:function(ab,ah,ae,ag,Y,aa,Z,ad,af,ac){var X={success:false,id:ah};if(M.w3&&!(M.wk&&M.wk<312)&&ab&&ah&&ae&&ag&&Y){w(ah,false);K(function(){ae+="";ag+="";var aj={};if(af&&typeof af===r){for(var al in af){aj[al]=af[al]}}aj.data=ab;aj.width=ae;aj.height=ag;var am={};if(ad&&typeof ad===r){for(var ak in ad){am[ak]=ad[ak]}}if(Z&&typeof Z===r){for(var ai in Z){if(typeof am.flashvars!=D){am.flashvars+="&"+ai+"="+Z[ai]}else{am.flashvars=ai+"="+Z[ai]}}}if(F(Y)){var an=u(aj,am,ah);if(aj.id==ah){w(ah,true)}X.success=true;X.ref=an}else{if(aa&&A()){aj.data=aa;P(aj,am,ah,ac);return}else{w(ah,true)}}if(ac){ac(X)}})}else{if(ac){ac(X)}}},switchOffAutoHideShow:function(){m=false},ua:M,getFlashPlayerVersion:function(){return{major:M.pv[0],minor:M.pv[1],release:M.pv[2]}},hasFlashPlayerVersion:F,createSWF:function(Z,Y,X){if(M.w3){return u(Z,Y,X)}else{return undefined}},showExpressInstall:function(Z,aa,X,Y){if(M.w3&&A()){P(Z,aa,X,Y)}},removeSWF:function(X){if(M.w3){y(X)}},createCSS:function(aa,Z,Y,X){if(M.w3){v(aa,Z,Y,X)}},addDomLoadEvent:K,addLoadEvent:s,getQueryParamValue:function(aa){var Z=j.location.search||j.location.hash;if(Z){if(/\?/.test(Z)){Z=Z.split("?")[1]}if(aa==null){return L(Z)}var Y=Z.split("&");for(var X=0;X<Y.length;X++){if(Y[X].substring(0,Y[X].indexOf("="))==aa){return L(Y[X].substring((Y[X].indexOf("=")+1)))}}}return""},expressInstallCallback:function(){if(a){var X=c(R);if(X&&l){X.parentNode.replaceChild(l,X);if(Q){w(Q,true);if(M.ie&&M.win){l.style.display="block"}}if(E){E(B)}}a=false}}}}();
//]]>
</script>
<style type='text/css'>
/* HOLIDAY BELLS */
.b-page__content { min-height:60px; }
.b-head-decor { display:none; }
.b-page_newyear .b-head-decor { position:absolute; top:0; left:0; display:block; height:115px; width:100%; overflow:hidden; background:url(&#39;http://4.bp.blogspot.com/-mYsWnqKJlXg/VI398BRJXrI/AAAAAAAAB6c/W1VJipi2Gm8/s1600/b-head-decor_newyear.png&#39;) repeat-x 0 0; }
.b-page_newyear .b-head-decor__inner { position:absolute; top:0; left:0; height:115px; display:block; width:373px; }
.b-page_newyear .b-head-decor::before { content:&#39;&#39;; display:block; position:absolute; top:-115px; left:0; z-index:3; height:115px; display:block; width:100%; }
.b-page_newyear .b-head-decor__inner_n2 { left:373px; }
.b-page_newyear .b-head-decor__inner_n3 { left:746px; }
.b-page_newyear .b-head-decor__inner_n4 { left:1119px; }
.b-page_newyear .b-head-decor__inner_n5 { left:1492px; }
.b-page_newyear .b-head-decor__inner_n6 { left:1865px; }
.b-page_newyear .b-head-decor__inner_n7 { left:2238px; }
.b-ball { position:absolute; }
.b-ball_n1 { top:0; left:3px; width:59px; height:83px; }
.b-ball_n2 { top:-19px; left:51px; width:55px; height:70px; }
.b-ball_n3 { top:9px; left:88px; width:49px; height:67px; }
.b-ball_n4 { top:0; left:133px; width:57px; height:102px; }
.b-ball_n5 { top:0; left:166px; width:49px; height:57px; }
.b-ball_n6 { top:6px; left:200px; width:54px; height:70px; }
.b-ball_n7 { top:0; left:240px; width:56px; height:67px; }
.b-ball_n8 { top:0; left:283px; width:54px; height:53px; }
.b-ball_n9 { top:10px; left:321px; width:49px; height:66px; }
.b-ball_n1 .b-ball__i { background:url(&#39;http://1.bp.blogspot.com/-g2jNbPKRX1A/Uq9HxxFV8II/AAAAAAAABHo/G42-bAJE91I/s1600/b-ball_n1.png&#39;) no-repeat; }
.b-ball_n2 .b-ball__i { background:url(&#39;http://1.bp.blogspot.com/-Gl8xOnmbVM4/Uq9HyBu8NjI/AAAAAAAABH4/x2c_Bb_b9UE/s1600/b-ball_n2.png&#39;) no-repeat; }
.b-ball_n3 .b-ball__i { background:url(&#39;http://4.bp.blogspot.com/-61pfg7Dun34/Uq9HyMOUmNI/AAAAAAAABH0/JYwDLCQG2JQ/s1600/b-ball_n3.png&#39;) no-repeat; }
.b-ball_n4 .b-ball__i { background:url(&#39;http://3.bp.blogspot.com/-IOzjyIFqLyY/Uq9HySOmobI/AAAAAAAABH8/_UgAE7k775c/s1600/b-ball_n4.png&#39;) no-repeat; }
.b-ball_n5 .b-ball__i { background:url(&#39;http://1.bp.blogspot.com/-XiICjq4Cc3g/Uq9HyyMxQiI/AAAAAAAABIY/PpmzJy9elUo/s1600/b-ball_n5.png&#39;) no-repeat; }
.b-ball_n6 .b-ball__i { background:url(&#39;http://1.bp.blogspot.com/-e9VXsSHy2Ws/Uq9HzF52KWI/AAAAAAAABIU/hq6bQYd_jeg/s1600/b-ball_n6.png&#39;) no-repeat; }
.b-ball_n7 .b-ball__i { background:url(&#39;http://4.bp.blogspot.com/-IBEB64itDKM/Uq9HzNvnGZI/AAAAAAAABIQ/zCO9wxwelhs/s1600/b-ball_n7.png&#39;) no-repeat; }
.b-ball_n8 .b-ball__i { background:url(&#39;http://1.bp.blogspot.com/-r1eoLZUhbyQ/Uq9HzxpcARI/AAAAAAAABIs/yVb6ucYc_bQ/s1600/b-ball_n8.png&#39;) no-repeat; }
.b-ball_n9 .b-ball__i { background:url(&#39;http://1.bp.blogspot.com/-b-HB8iVma78/Uq9H0a_Y_rI/AAAAAAAABIo/8EAGtOnodD4/s1600/b-ball_n9.png&#39;) no-repeat; }
.b-ball_i1 .b-ball__i { background:url(&#39;http://3.bp.blogspot.com/-eY4qqQ_v2dg/Uq9HwFG9XQI/AAAAAAAABHE/LxVwvRYbJ6Y/s1600/b-ball_i1.png&#39;) no-repeat; }
.b-ball_i2 .b-ball__i { background:url(&#39;http://2.bp.blogspot.com/-jFlhw4Ck3MA/Uq9HwDtLImI/AAAAAAAABHI/76UL8D2PX4U/s1600/b-ball_i2.png&#39;) no-repeat; }
.b-ball_i3 .b-ball__i { background:url(&#39;http://1.bp.blogspot.com/-28ycejOxmrc/Uq9HwSSq2yI/AAAAAAAABHA/q8Wu5FJd0tU/s1600/b-ball_i3.png&#39;) no-repeat; }
.b-ball_i4 .b-ball__i { background:url(&#39;http://3.bp.blogspot.com/-Nu1iJ0dQ5_M/Uq9Hw6MRaDI/AAAAAAAABHY/yuT50gnPmjs/s1600/b-ball_i4.png&#39;) no-repeat; }
.b-ball_i5 .b-ball__i { background:url(&#39;http://3.bp.blogspot.com/-rwebsrJd6hk/Uq9HxJIIf1I/AAAAAAAABHg/-GhDEYjOJ4s/s1600/b-ball_i5.png&#39;) no-repeat; }
.b-ball_i6 .b-ball__i { background:url(&#39;http://4.bp.blogspot.com/-_x4KdCnDYwE/Uq9HxHGBg1I/AAAAAAAABHc/8-iu5Jjov48/s1600/b-ball_i6.png&#39;) no-repeat; }
.b-ball_i1{top:0; left:0; width:25px; height:71px; }
.b-ball_i2{top:0; left:25px; width:61px; height:27px; }
.b-ball_i3{top:0; left:176px; width:29px; height:31px; }
.b-ball_i4{top:0; left:205px; width:50px; height:51px; }
.b-ball_i5{top:0; left:289px; width:78px; height:28px; }
.b-ball_i6{top:0; left:367px; width:6px; height:69px; }
.b-ball__i { position:absolute; width:100%; height:100%; -webkit-transform-origin:50% 0; -moz-transform-origin:50% 0; -o-transform-origin:50% 0; transform-origin:50% 0; -webkit-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out; transition:all .3s ease-in-out; pointer-events:none; }
.b-ball_bounce .b-ball__right{position:absolute; top:0; right:0; left:50%; bottom:0; z-index:9; }
.b-ball_bounce:hover .b-ball__right{ display:none; }
.b-ball_bounce .b-ball__right:hover{ left:0; display:block!important; }
.b-ball_bounce.bounce&gt;.b-ball__i{ -webkit-transform:rotate(-9deg); -moz-transform:rotate(-9deg); -o-transform:rotate(-9deg); transform:rotate(-9deg); }
.b-ball_bounce .b-ball__right.bounce+.b-ball__i { -webkit-transform:rotate(9deg); -moz-transform:rotate(9deg); -o-transform:rotate(9deg); transform:rotate(9deg); }
.b-ball_bounce.bounce1&gt;.b-ball__i {-webkit-transform:rotate(6deg); -moz-transform:rotate(6deg); -o-transform:rotate(6deg); transform:rotate(6deg); }
.b-ball_bounce .b-ball__right.bounce1+.b-ball__i {-webkit-transform:rotate(-6deg); -moz-transform:rotate(-6deg); -o-transform:rotate(-6deg); transform:rotate(-6deg); }
.b-ball_bounce.bounce2&gt;.b-ball__i{ -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); }
.b-ball_bounce .b-ball__right.bounce2+.b-ball__i{ -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); }
.b-ball_bounce.bounce3&gt;.b-ball__i {-webkit-transform:rotate(1.5deg); -moz-transform:rotate(1.5deg); -o-transform:rotate(1.5deg); transform:rotate(1.5deg); }
.b-ball_bounce .b-ball__right.bounce3+.b-ball__i { -webkit-transform:rotate(-1.5deg); -moz-transform:rotate(-1.5deg); -o-transform:rotate(-1.5deg); transform:rotate(-1.5deg); }
</style>
Bước tiếp theo dán code bên dưới vào ngay sau thẻ <body>
Nếu là template mặc định của blogger cung cấp thì thẻ <body> có dạng
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Nó ở ngay sau thẻ </head>
<div class='b-page_newyear'>
<div class='b-page__content'>
<i class='b-head-decor'>
<i class='b-head-decor__inner b-head-decor__inner_n1'>
<div class='b-ball b-ball_n1 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n2 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n3 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n4 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n5 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n6 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n7 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n8 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n9 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i1'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i2'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i3'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i4'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i5'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i6'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
</i>
<i class='b-head-decor__inner b-head-decor__inner_n2'>
<div class='b-ball b-ball_n1 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n2 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n3 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n4 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n5 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n6 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n7 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n8 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n9 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i1'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i2'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i3'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i4'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i5'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i6'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
</i>
<i class='b-head-decor__inner b-head-decor__inner_n3'>
<div class='b-ball b-ball_n1 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n2 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n3 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n4 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n5 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n6 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n7 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n8 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n9 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i1'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i2'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i3'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i4'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i5'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i6'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
</i>
<i class='b-head-decor__inner b-head-decor__inner_n4'>
<div class='b-ball b-ball_n1 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n2 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n3 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n4 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n5 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n6 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n7 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n8 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n9 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i1'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i2'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i3'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i4'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i5'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i6'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
</i>
<i class='b-head-decor__inner b-head-decor__inner_n5'>
<div class='b-ball b-ball_n1 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n2 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n3 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n4 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n5 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n6 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n7 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n8 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n9 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i1'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i2'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i3'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i4'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i5'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i6'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
</i>
<i class='b-head-decor__inner b-head-decor__inner_n6'>
<div class='b-ball b-ball_n1 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n2 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n3 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n4 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n5 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n6 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n7 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n8 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n9 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i1'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i2'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i3'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i4'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i5'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i6'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
</i>
<i class='b-head-decor__inner b-head-decor__inner_n7'>
<div class='b-ball b-ball_n1 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n2 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n3 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n4 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n5 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n6 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n7 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n8 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n9 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i1'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i2'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i3'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i4'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i5'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i6'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
</i>
</i>
</div>
</div>
Bạn có thể thay các link ảnh bằng hình ảnh sau để có dàn chuông với kiểu dáng khác.
DEMO
Code tạo chuông Giáng Sinh cho blogspotCode tạo chuông Giáng Sinh cho blogspotCode tạo chuông Giáng Sinh cho blogspotCode tạo chuông Giáng Sinh cho blogspotCode tạo chuông Giáng Sinh cho blogspotCode tạo chuông Giáng Sinh cho blogspotCode tạo chuông Giáng Sinh cho blogspotCode tạo chuông Giáng Sinh cho blogspotCode tạo chuông Giáng Sinh cho blogspot
Link ảnh:
https://4.bp.blogspot.com/-RH1U4LVBNMM/Uq9KmOmiMNI/AAAAAAAABJQ/AB2BBfyFWQU/s1600/b-ball_n1.png
https://1.bp.blogspot.com/-sAIzK0ZtHU4/Uq9KmAVZ9rI/AAAAAAAABJM/tHyaUVOQHOo/s1600/b-ball_n2.png
https://2.bp.blogspot.com/-SS5Oz9twGYY/Uq9KmA0v6QI/AAAAAAAABJU/TE6PtvuK8II/s1600/b-ball_n3.png
https://4.bp.blogspot.com/-WKzZ1C1j-tI/Uq9KmvGhf1I/AAAAAAAABJc/aLe6gimvJbs/s1600/b-ball_n4.png
https://1.bp.blogspot.com/-Iuvov9V9ERY/Uq9KnBHsXKI/AAAAAAAABJw/39Zt8iwbrV4/s1600/b-ball_n5.png
https://2.bp.blogspot.com/-WZf8tE84Z7Q/Uq9KnDvXeTI/AAAAAAAABJ0/V8mUuDs_2zo/s1600/b-ball_n6.png
https://2.bp.blogspot.com/-iQZTCD02sD4/Uq9KnYBK3pI/AAAAAAAABJs/c9FP0hawjX8/s1600/b-ball_n7.png
https://2.bp.blogspot.com/-wbSeEw3sH9g/Uq9KoFWNTAI/AAAAAAAABKA/VP8Mz2QswjU/s1600/b-ball_n8.png
http://3.bp.blogspot.com/-nhcCmdIVfIk/Uq9KoA7NR4I/AAAAAAAABKI/upHey9-9SvU/s1600/b-ball_n9.png
Hoặc xài ngay CSS sau:
<style type='text/css'>
/* HOLIDAY BELLS */
.b-page__content { min-height:60px; }
.b-head-decor { display:none; }
.b-page_newyear .b-head-decor { position:absolute; top:0; left:0; display:block; height:115px; width:100%; overflow:hidden; background:url('https://4.bp.blogspot.com/-mYsWnqKJlXg/VI398BRJXrI/AAAAAAAAB6c/W1VJipi2Gm8/s1600/b-head-decor_newyear.png') repeat-x 0 0; }
.b-page_newyear .b-head-decor__inner { position:absolute; top:0; left:0; height:115px; display:block; width:373px; }
.b-page_newyear .b-head-decor::before { content:''; display:block; position:absolute; top:-115px; left:0; z-index:3; height:115px; display:block; width:100%; }
.b-page_newyear .b-head-decor__inner_n2 { left:373px; }
.b-page_newyear .b-head-decor__inner_n3 { left:746px; }
.b-page_newyear .b-head-decor__inner_n4 { left:1119px; }
.b-page_newyear .b-head-decor__inner_n5 { left:1492px; }
.b-page_newyear .b-head-decor__inner_n6 { left:1865px; }
.b-page_newyear .b-head-decor__inner_n7 { left:2238px; }
.b-ball { position:absolute; }
.b-ball_n1 { top:0; left:3px; width:59px; height:83px; }
.b-ball_n2 { top:-19px; left:51px; width:55px; height:70px; }
.b-ball_n3 { top:9px; left:88px; width:49px; height:67px; }
.b-ball_n4 { top:0; left:133px; width:57px; height:102px; }
.b-ball_n5 { top:0; left:166px; width:49px; height:57px; }
.b-ball_n6 { top:6px; left:200px; width:54px; height:70px; }
.b-ball_n7 { top:0; left:240px; width:56px; height:67px; }
.b-ball_n8 { top:0; left:283px; width:54px; height:53px; }
.b-ball_n9 { top:10px; left:321px; width:49px; height:66px; }
.b-ball_n1 .b-ball__i { background:url('https://4.bp.blogspot.com/-RH1U4LVBNMM/Uq9KmOmiMNI/AAAAAAAABJQ/AB2BBfyFWQU/s1600/b-ball_n1.png') no-repeat; }
.b-ball_n2 .b-ball__i { background:url('https://1.bp.blogspot.com/-sAIzK0ZtHU4/Uq9KmAVZ9rI/AAAAAAAABJM/tHyaUVOQHOo/s1600/b-ball_n2.png') no-repeat; }
.b-ball_n3 .b-ball__i { background:url('https://2.bp.blogspot.com/-SS5Oz9twGYY/Uq9KmA0v6QI/AAAAAAAABJU/TE6PtvuK8II/s1600/b-ball_n3.png') no-repeat; }
.b-ball_n4 .b-ball__i { background:url('https://4.bp.blogspot.com/-WKzZ1C1j-tI/Uq9KmvGhf1I/AAAAAAAABJc/aLe6gimvJbs/s1600/b-ball_n4.png') no-repeat; }
.b-ball_n5 .b-ball__i { background:url('https://1.bp.blogspot.com/-Iuvov9V9ERY/Uq9KnBHsXKI/AAAAAAAABJw/39Zt8iwbrV4/s1600/b-ball_n5.png') no-repeat; }
.b-ball_n6 .b-ball__i { background:url('https://2.bp.blogspot.com/-WZf8tE84Z7Q/Uq9KnDvXeTI/AAAAAAAABJ0/V8mUuDs_2zo/s1600/b-ball_n6.png') no-repeat; }
.b-ball_n7 .b-ball__i { background:url('https://2.bp.blogspot.com/-iQZTCD02sD4/Uq9KnYBK3pI/AAAAAAAABJs/c9FP0hawjX8/s1600/b-ball_n7.png') no-repeat; }
.b-ball_n8 .b-ball__i { background:url('https://2.bp.blogspot.com/-wbSeEw3sH9g/Uq9KoFWNTAI/AAAAAAAABKA/VP8Mz2QswjU/s1600/b-ball_n8.png') no-repeat; }
.b-ball_n9 .b-ball__i { background:url('https://3.bp.blogspot.com/-nhcCmdIVfIk/Uq9KoA7NR4I/AAAAAAAABKI/upHey9-9SvU/s1600/b-ball_n9.png') no-repeat; }
.b-ball_i1 .b-ball__i { background:url('https://3.bp.blogspot.com/-eY4qqQ_v2dg/Uq9HwFG9XQI/AAAAAAAABHE/LxVwvRYbJ6Y/s1600/b-ball_i1.png') no-repeat; }
.b-ball_i2 .b-ball__i { background:url('https://2.bp.blogspot.com/-jFlhw4Ck3MA/Uq9HwDtLImI/AAAAAAAABHI/76UL8D2PX4U/s1600/b-ball_i2.png') no-repeat; }
.b-ball_i3 .b-ball__i { background:url('https://1.bp.blogspot.com/-28ycejOxmrc/Uq9HwSSq2yI/AAAAAAAABHA/q8Wu5FJd0tU/s1600/b-ball_i3.png') no-repeat; }
.b-ball_i4 .b-ball__i { background:url('https://3.bp.blogspot.com/-Nu1iJ0dQ5_M/Uq9Hw6MRaDI/AAAAAAAABHY/yuT50gnPmjs/s1600/b-ball_i4.png') no-repeat; }
.b-ball_i5 .b-ball__i { background:url('https://3.bp.blogspot.com/-rwebsrJd6hk/Uq9HxJIIf1I/AAAAAAAABHg/-GhDEYjOJ4s/s1600/b-ball_i5.png') no-repeat; }
.b-ball_i6 .b-ball__i { background:url('https://4.bp.blogspot.com/-_x4KdCnDYwE/Uq9HxHGBg1I/AAAAAAAABHc/8-iu5Jjov48/s1600/b-ball_i6.png') no-repeat; }
.b-ball_i1{top:0; left:0; width:25px; height:71px; }
.b-ball_i2{top:0; left:25px; width:61px; height:27px; }
.b-ball_i3{top:0; left:176px; width:29px; height:31px; }
.b-ball_i4{top:0; left:205px; width:50px; height:51px; }
.b-ball_i5{top:0; left:289px; width:78px; height:28px; }
.b-ball_i6{top:0; left:367px; width:6px; height:69px; }
.b-ball__i { position:absolute; width:100%; height:100%; -webkit-transform-origin:50% 0; -moz-transform-origin:50% 0; -o-transform-origin:50% 0; transform-origin:50% 0; -webkit-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out; transition:all .3s ease-in-out; pointer-events:none; }
.b-ball_bounce .b-ball__right{position:absolute; top:0; right:0; left:50%; bottom:0; z-index:9; }
.b-ball_bounce:hover .b-ball__right{ display:none; }
.b-ball_bounce .b-ball__right:hover{ left:0; display:block!important; }
.b-ball_bounce.bounce>.b-ball__i{ -webkit-transform:rotate(-9deg); -moz-transform:rotate(-9deg); -o-transform:rotate(-9deg); transform:rotate(-9deg); }
.b-ball_bounce .b-ball__right.bounce+.b-ball__i { -webkit-transform:rotate(9deg); -moz-transform:rotate(9deg); -o-transform:rotate(9deg); transform:rotate(9deg); }
.b-ball_bounce.bounce1>.b-ball__i {-webkit-transform:rotate(6deg); -moz-transform:rotate(6deg); -o-transform:rotate(6deg); transform:rotate(6deg); }
.b-ball_bounce .b-ball__right.bounce1+.b-ball__i {-webkit-transform:rotate(-6deg); -moz-transform:rotate(-6deg); -o-transform:rotate(-6deg); transform:rotate(-6deg); }
.b-ball_bounce.bounce2>.b-ball__i{ -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); }
.b-ball_bounce .b-ball__right.bounce2+.b-ball__i{ -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); }
.b-ball_bounce.bounce3>.b-ball__i {-webkit-transform:rotate(1.5deg); -moz-transform:rotate(1.5deg); -o-transform:rotate(1.5deg); transform:rotate(1.5deg); }
.b-ball_bounce .b-ball__right.bounce3+.b-ball__i { -webkit-transform:rotate(-1.5deg); -moz-transform:rotate(-1.5deg); -o-transform:rotate(-1.5deg); transform:rotate(-1.5deg); }
</style>
Chúc thành công!
Publis: 

Post a Comment

🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji