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
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCIEA3iSBfcEUHzcr9yHMOMZeqis80CbLo0oOE3PWgnnhLD4xQJLcQOS9wmAKDMi-xvAPXJPJYQT8eagZr51QvkD5MxNBMEgBNoQOH79jPsSnjpd7LOuCB4cmVcrevgon2WJeM2sbAInA/s1600/christmas-bells-icon-left.png" style="position:fixed; top: 0px;left:0px;border:none;z-index:5;"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO3xpPVpftigNQRWmuaiiKX5WIznMgu14xtt9nlas1UuLt1OqLlPFI2_zL7C18tPggJvyMr1hnpS3f7PD0Pk9vOLY89xRlOdC0UqaycnZYZIDaX1qsV9viW4XM0w-WZRyXUP6yzeSHbnbW/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCIEA3iSBfcEUHzcr9yHMOMZeqis80CbLo0oOE3PWgnnhLD4xQJLcQOS9wmAKDMi-xvAPXJPJYQT8eagZr51QvkD5MxNBMEgBNoQOH79jPsSnjpd7LOuCB4cmVcrevgon2WJeM2sbAInA/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO3xpPVpftigNQRWmuaiiKX5WIznMgu14xtt9nlas1UuLt1OqLlPFI2_zL7C18tPggJvyMr1hnpS3f7PD0Pk9vOLY89xRlOdC0UqaycnZYZIDaX1qsV9viW4XM0w-WZRyXUP6yzeSHbnbW/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQhhjsoroMaPdCF-PN2oSAB6C4p-P8HO_52L8gofAVKIc73DiOlMA-e3AUfjN9NMBnaSJqxGA85sOp8Mr0xfXvh3pYEqM7ULdLiB16tgPuVqbGVVxFHNSseRnBLk4KbpljlJmLZM7QhLA/s1600/top-left.png" style="position:fixed; top: 0px;left:0px;border:none;z-index:5;"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilHhBZwMAuh2up4UGEYdHziQeaFKiHH4rxcqNpw0cA5B7QKkIY5TP2qfn1mTYWd6kNeM0AGYdnhyphenhyphentnJazIFMdsFUgO3K9g0rQDLl4OkcoPCTL90u86aJExvUR1BcpYw4X5qA2bJJo01ms/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk6FY4_EqFrxVdHKNU7XLbWL659nYZcq9XglUb_ELC3Bae6-LHGywA981PIjyA0HvCdUL2Lwj0yhBEFgiDQucmTruuLW84DRGnd0TXSJQSA2JtEoIfN_zdKg5Azg0Cu8_UJgn8YmVCVaY/s1600/footer.png) repeat-x bottom left;'></div><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKE_d8S4lWrVAoz0vNjmOBl3SeYeu9Ap1NG_pOW6T_AsvP0MVgyCd2NeFA8u_lHz3hOUEY5gltxz9KGg8JVsIVMuEeWIrOtDpiagj0u17ojGpbXxK8mQgPQCn_u9J4FQiDsZcYEriQhLs/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'/>Bước tiếp theo dán code bên dưới vào ngay sau thẻ <body>
<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik0bgPieh2vtkyTZ9-pcrOpmYVsGQenwnRFgPyvukaKP5a6EDMoXLEQCnIkgRr4DY1C9K91Q6ltWT0QYKBpQ9La6n90q_icWULfsZRd_epmd-RfFx_QW0igA3hsXdMstKRsjgkz0Ixk-g/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL_48ZkCvLMem4LOdnwH1CR6gP8C27404SCXUnjkkqYuCp1ttwy4gcYjo06AiAPuwpB_zJXi8tH-HRMZc6bDmKPzuWuqYe9aKBa0EuL-mUh_YpewjBIqFZq460iV5DCvinbTDe7Plka9c/s1600/b-ball_n1.png') no-repeat; }
.b-ball_n2 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1bg4CEI6ndPISFDjvrH5qKU90-UJ6eAvaOEz4JWWIbCAhKuhZQIW-FEZ92TOZcgPoekhQZ5LpuBUN9mnDv_YqKep8NPWxDhyphenhyphenjxmk-cIvKhpI6dQGA8p-SdO5HUrPq5H7d74Gu63SjENI/s1600/b-ball_n2.png') no-repeat; }
.b-ball_n3 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheHaFV7VW2rpKMrsB2XcaFm9a4puMaEvABmyCqlpFxV09ouiUL8jioAQo11Y37Y7Cox2Hthze6dj2glLkKe5hh37ACmOiNJv4OKlrmSYvI0pAJ8toiwN4pirJ91RcOKus6evzBpJs1cDw/s1600/b-ball_n3.png') no-repeat; }
.b-ball_n4 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQpDh6YP94zukYzDWSXzKE_20rpBMF2YBhFl6yoyFKtCH3gz948qArsVIYUVJVrOahthTXt3k_vObJAuCor1Hay-rNZYy9pauEma12F43_4CnrXw-RgGcB62psbumVMbFsD2kbLNL4h0/s1600/b-ball_n4.png') no-repeat; }
.b-ball_n5 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh02K3CI9bZ8YJm0NT_4dSxyKv8asq00QtuhtVTR1gNEb11piYhUr3UM_SJVaYwF5gowcuDq_TUr_dLsKflIQbwqcSGRfumPl37FOV4J0mQ93y5qCy-_83-USjagKHdn1SkF3IhsNh9XUU/s1600/b-ball_n5.png') no-repeat; }
.b-ball_n6 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSAISXIAaBbcFVPRJCeHiNzTiiiw5A96_eyXaAdVSmW_fzaWgAU1eXSVC5VaMmcB542gjVxXgu0lJDQhcO5y2OfrYjTOXhnb5fM5SgWVbIrU9wfNJxp42rUF__t3GM2fxLWYMKIaoeJyk/s1600/b-ball_n6.png') no-repeat; }
.b-ball_n7 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhSaSY8xnQ0MZFBfWnhl-5-4ZLL_HpMm347FEeXkto1RtMudBWpcQQ2hHEfOCWBl2tAayhjTe8LJlP9mLRebzgsU964VEGhWjrsOUufMM98W4iwrsit-sWFvlDzIoQy7vmR57ji8aENmo/s1600/b-ball_n7.png') no-repeat; }
.b-ball_n8 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzlfYN_zuTJpe1q9_oGtmV6XRJCeoMq-O7IhS0p0xfri3POrWaAxeOX7UZWdSAyqvRLc-VFDH85-QZj1u-Ub8lqpHVngtnbaYYRECjZ-GPO7jzTqD-o8hhmeC6yWrTIz0PcmdTC3BMXrM/s1600/b-ball_n8.png') no-repeat; }
.b-ball_n9 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0dl-kftm9AZgx-tTYwAgdisjYplb9M2A6a3p38jjLbYvv-yqqkRHoW2fRWmGUllDTD0EkFQ2l7VrRLWDTYp4l6DslmvCnGLMgOUhNC4d_gyUFvM5pT5d2gbBXzo_8FXDWPefMA-jvplk/s1600/b-ball_n9.png') no-repeat; }
.b-ball_i1 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBkbMLyJhgpiH0zJ1-AnTpLoqSCeIxesS9ujHYrHY2xULFeztkZCP9GWpio-URx_-h-GV_1P2XoE3jfqzH2nb_W463PTW77hZNyAkvp30YXgo_tbaGkZM1RlgLqxRBko5-kt-ZMJcA_fU/s1600/b-ball_i1.png') no-repeat; }
.b-ball_i2 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRBGPB5trTXS19f7yhHchdgaAWSnp-5qnc3cfPcL0mpy5JH1J9Cl5Cvimp1IH6n0L1NDCJmX-qMGLm9JyjICAtjqHrn6iozb_FGdGc8T0OhvQlZTAKLJD1RK1njCC1lgTz6qC663uYPO4/s1600/b-ball_i2.png') no-repeat; }
.b-ball_i3 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkCljliv0IoC2f9R9HMMOw5bIycJPQPZ3jYjnpCcTDA9G73Fdu9xEqwm6U0V_CAlVrL-8PAh_tD60aSj9k6_ypfwVaEnTy8G65nFiEAiJP2Ne5GDZzwXqdtOfeNwmyMHvQ90g8tvpt-pU/s1600/b-ball_i3.png') no-repeat; }
.b-ball_i4 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKUzGrQl69YS9vGjhmcBXg5WG4WChes0ZUcWb1Kk-kI_JYQqlfTe7B0BGQdt_SaXq6IVN-fFRVj3xYZNfnrYoHLlAN30TtLkpLdD2WqkGUzo87o5oyW5nhyWAn-MeQrQS9kp2XPEqmJ2M/s1600/b-ball_i4.png') no-repeat; }
.b-ball_i5 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQWX9QEry4Kh7jUVJq0o0RltXQ5iiBSvkCFt-vs65ZXwRRdR98qeKd4Cyea-56lrRWIaQ-GVbsCc6kXa2qmVhcFI0oLzqMQ_q5rLS5NvDkd-C9SYJM8PKK5uj_LiFJ679ZvWaj4AAJixQ/s1600/b-ball_i5.png') no-repeat; }
.b-ball_i6 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgorSe7nM6HFexkC6DfTQtygO9w6969DAxyteYk_1nTc4QQj_dMRx_31L594sEup2XqaXsghsxs0yF2rEfpHv0AlOQCpyATXpAIzkR928Tuzdfc-RF_mVUcE9qKUs_tJiHVTASdXq45ERc/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>
Nếu là template mặc định của blogger cung cấp thì thẻ <body> có dạng
<body expr:class='"loading" + data:blog.mobileClass'>
Nó ở ngay sau thẻ </head>
<div class='b-page_newyear'>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.
<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>
DEMO
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT_nh-GFmZmsMAnNpdjDRKRTfTZF4OogypkWDzoHJqUQwkS5DOrLrqBtIsjP5VseERwUFEyC1yl2Lvl4Jzi96yODg1U1_gXS-ez0TwauqNw9hvF9K1-im9129H3Rc8ZbfPRAffrNpOtp4/s1600/b-ball_n1.pngHoặc xài ngay CSS sau:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj69u-EM6-B1vKpn0JunAk9LaDaiOOMv5yR8A8_nicMNugWnaX65rxbNPSPbJxUvn36HFOmTLBEmtZFWE6QSwCbkkQenv7sh1LBwzx1aqfBvi7WzsCxJ0jEJjwPyZwVa9_qDZ9FK1xgq7Y/s1600/b-ball_n2.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyEAB0oXFtPNz3nlzV-abfyZz_gHFLoJYGARr83ns0BrVC36tgpH9rLSKvhn9SkSVyU8zL0eWgzflHOPjndl8f0tOy34zdQEVbJ58ntIAzfgljEQ9HJe_clGG4BpkMErh-oHPdLA_wDVw/s1600/b-ball_n3.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhq_ioSa72PFhVPuhkpayPMMBJLvX6thdLq1vj73XPhXhMbFi-HZEPSNmsq0uXqvAVg_V4rXO1CC0iB1q-UfVEJzq_sxz6TpTYhILpX4Q80lNQ7jKHEAKGarR1BcSgeW5vQB0AvGbhoxI/s1600/b-ball_n4.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg1JW4YpsDYLMkkOpeAVcOeaghgdXMu70ORZMiRs6nrpKhu1mRFyZJEjIII2MgJ8Mn76U7yp1dynQHJnlE_tnMZBOa-W7n7eg9ET5X_YNLh_d4yqG2gFH4_81it9q4scw6Y-av1fARlXg/s1600/b-ball_n5.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcJSIeY6bKb3RTTzRNRCu6_j-i1fmWCWb3rQBoCAURM7gBeLRy64ImYjLjndQ7qN2khkPGNWjiLEYRq8_6Cd_dDZ69rfukjN5b-fLZ3Tn0Tb-dEmeIHhyvr_hqQ6VwKrI_R2ZNVzgblOM/s1600/b-ball_n6.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijXAfjilgznT1CUvmGsuRQCvJuqwuKmqw6qxeGCf8p1Ui_YZeoJ8yQGP1tSvqkZsDz5pzcE3NC4cB3rVDozqBchXZj1Ed018PcfwfolfDZQFQY0U4RE0JQb8bzx8EqvLxsrMsITSkSTHE/s1600/b-ball_n7.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR1iTvzKM-VJCXrN2A8667MYOTRQutYZOkASjjl8UiQYWq-hy3FnpAP2JVwNv57NfnVUrEpoF2NDxS6NQ_artJayV1VDL1lDtTWfKo7bTTDw7Ha0UkFs7NULw7S4hxgENAEPy7vc4P-KA/s1600/b-ball_n8.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_dPCNC5EtpeGnnbKbK4OUn0Mu8Afha1xx5w5tOv6POxdpHNSdc5O4O4jfNWaLqErVJBLmaVdLUylm-wrF5uIBCYI6d7-Km5HSHvGAQHi8V-s0FS6nHsVlw3aaj1cn89AN5hulG2L8IVo/s1600/b-ball_n9.png
<style type='text/css'> /* HOLIDAY BELLS */ .b-page__content { min-height:60px; }Chúc thành công!
.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik0bgPieh2vtkyTZ9-pcrOpmYVsGQenwnRFgPyvukaKP5a6EDMoXLEQCnIkgRr4DY1C9K91Q6ltWT0QYKBpQ9La6n90q_icWULfsZRd_epmd-RfFx_QW0igA3hsXdMstKRsjgkz0Ixk-g/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT_nh-GFmZmsMAnNpdjDRKRTfTZF4OogypkWDzoHJqUQwkS5DOrLrqBtIsjP5VseERwUFEyC1yl2Lvl4Jzi96yODg1U1_gXS-ez0TwauqNw9hvF9K1-im9129H3Rc8ZbfPRAffrNpOtp4/s1600/b-ball_n1.png') no-repeat; }
.b-ball_n2 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj69u-EM6-B1vKpn0JunAk9LaDaiOOMv5yR8A8_nicMNugWnaX65rxbNPSPbJxUvn36HFOmTLBEmtZFWE6QSwCbkkQenv7sh1LBwzx1aqfBvi7WzsCxJ0jEJjwPyZwVa9_qDZ9FK1xgq7Y/s1600/b-ball_n2.png') no-repeat; }
.b-ball_n3 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyEAB0oXFtPNz3nlzV-abfyZz_gHFLoJYGARr83ns0BrVC36tgpH9rLSKvhn9SkSVyU8zL0eWgzflHOPjndl8f0tOy34zdQEVbJ58ntIAzfgljEQ9HJe_clGG4BpkMErh-oHPdLA_wDVw/s1600/b-ball_n3.png') no-repeat; }
.b-ball_n4 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhq_ioSa72PFhVPuhkpayPMMBJLvX6thdLq1vj73XPhXhMbFi-HZEPSNmsq0uXqvAVg_V4rXO1CC0iB1q-UfVEJzq_sxz6TpTYhILpX4Q80lNQ7jKHEAKGarR1BcSgeW5vQB0AvGbhoxI/s1600/b-ball_n4.png') no-repeat; }
.b-ball_n5 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg1JW4YpsDYLMkkOpeAVcOeaghgdXMu70ORZMiRs6nrpKhu1mRFyZJEjIII2MgJ8Mn76U7yp1dynQHJnlE_tnMZBOa-W7n7eg9ET5X_YNLh_d4yqG2gFH4_81it9q4scw6Y-av1fARlXg/s1600/b-ball_n5.png') no-repeat; }
.b-ball_n6 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcJSIeY6bKb3RTTzRNRCu6_j-i1fmWCWb3rQBoCAURM7gBeLRy64ImYjLjndQ7qN2khkPGNWjiLEYRq8_6Cd_dDZ69rfukjN5b-fLZ3Tn0Tb-dEmeIHhyvr_hqQ6VwKrI_R2ZNVzgblOM/s1600/b-ball_n6.png') no-repeat; }
.b-ball_n7 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijXAfjilgznT1CUvmGsuRQCvJuqwuKmqw6qxeGCf8p1Ui_YZeoJ8yQGP1tSvqkZsDz5pzcE3NC4cB3rVDozqBchXZj1Ed018PcfwfolfDZQFQY0U4RE0JQb8bzx8EqvLxsrMsITSkSTHE/s1600/b-ball_n7.png') no-repeat; }
.b-ball_n8 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR1iTvzKM-VJCXrN2A8667MYOTRQutYZOkASjjl8UiQYWq-hy3FnpAP2JVwNv57NfnVUrEpoF2NDxS6NQ_artJayV1VDL1lDtTWfKo7bTTDw7Ha0UkFs7NULw7S4hxgENAEPy7vc4P-KA/s1600/b-ball_n8.png') no-repeat; }
.b-ball_n9 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_dPCNC5EtpeGnnbKbK4OUn0Mu8Afha1xx5w5tOv6POxdpHNSdc5O4O4jfNWaLqErVJBLmaVdLUylm-wrF5uIBCYI6d7-Km5HSHvGAQHi8V-s0FS6nHsVlw3aaj1cn89AN5hulG2L8IVo/s1600/b-ball_n9.png') no-repeat; }
.b-ball_i1 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBkbMLyJhgpiH0zJ1-AnTpLoqSCeIxesS9ujHYrHY2xULFeztkZCP9GWpio-URx_-h-GV_1P2XoE3jfqzH2nb_W463PTW77hZNyAkvp30YXgo_tbaGkZM1RlgLqxRBko5-kt-ZMJcA_fU/s1600/b-ball_i1.png') no-repeat; }
.b-ball_i2 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRBGPB5trTXS19f7yhHchdgaAWSnp-5qnc3cfPcL0mpy5JH1J9Cl5Cvimp1IH6n0L1NDCJmX-qMGLm9JyjICAtjqHrn6iozb_FGdGc8T0OhvQlZTAKLJD1RK1njCC1lgTz6qC663uYPO4/s1600/b-ball_i2.png') no-repeat; }
.b-ball_i3 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkCljliv0IoC2f9R9HMMOw5bIycJPQPZ3jYjnpCcTDA9G73Fdu9xEqwm6U0V_CAlVrL-8PAh_tD60aSj9k6_ypfwVaEnTy8G65nFiEAiJP2Ne5GDZzwXqdtOfeNwmyMHvQ90g8tvpt-pU/s1600/b-ball_i3.png') no-repeat; }
.b-ball_i4 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKUzGrQl69YS9vGjhmcBXg5WG4WChes0ZUcWb1Kk-kI_JYQqlfTe7B0BGQdt_SaXq6IVN-fFRVj3xYZNfnrYoHLlAN30TtLkpLdD2WqkGUzo87o5oyW5nhyWAn-MeQrQS9kp2XPEqmJ2M/s1600/b-ball_i4.png') no-repeat; }
.b-ball_i5 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQWX9QEry4Kh7jUVJq0o0RltXQ5iiBSvkCFt-vs65ZXwRRdR98qeKd4Cyea-56lrRWIaQ-GVbsCc6kXa2qmVhcFI0oLzqMQ_q5rLS5NvDkd-C9SYJM8PKK5uj_LiFJ679ZvWaj4AAJixQ/s1600/b-ball_i5.png') no-repeat; }
.b-ball_i6 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgorSe7nM6HFexkC6DfTQtygO9w6969DAxyteYk_1nTc4QQj_dMRx_31L594sEup2XqaXsghsxs0yF2rEfpHv0AlOQCpyATXpAIzkR928Tuzdfc-RF_mVUcE9qKUs_tJiHVTASdXq45ERc/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>