• Home
  • Trang trí blog mùa giáng sinh với hiệu ứng giàn chuông, nhạc cực độc

Trang trí blog mùa giáng sinh với hiệu ứng giàn chuông, nhạc cực độc

Demo 1
Noel đã về, khắp các diễn đàn trang web, blog đang trang trí blog để đón một mùa Giáng Sinh an lành hạnh phúc. Để hòa nhịp vào không khí đó mình cũng góp một chút ít thủ thuật cho cộng đồng. Đây là cách trang trí blog mùa giáng sinh với hiệu ứng giàn chuông nhạc cực độc rất thú vị và vui tai.
Thủ thuật này được giới thiệu tại xenforo của JacquiiDesigns. Nếu muốn tìm hiểu thêm thì đến trang gốc nhưng báo trước là việc làm khá lằng nhăng. Còn nếu muốn ăn ngay thì làm theo hướng dẫn sau đây. Thủ thuật trên cũng đã được giới thiệu tại BTK nhưng ở bài viết này mình viết chi tiết hơn và khác hơn một chút.
Demo live

Tải các file sau up lên Google Code:
https://dl.dropbox.com/u/29848934/holiday_bells/holidays_bells.swf (up nên các hosting về flash)
https://dl.dropbox.com/u/29848934/holiday_bells/holiday_bells.js (nhớ mở holiday_bells.js thay link holidays_bells.swf trên vào trước khi up lên hosting riêng.)
https://dl.dropbox.com/u/29848934/holiday_bells/swfobject.min.js

Chú ý thay link các file của bạn vào code ở bước 1 nếu làm biếng bạn có thể dùng link trên luôn cũng được.
THỰC HIỆN

Bước 1: Thêm đoạn code sau vào trên thẻ </head>
<script src="holiday_bells/js/swfobject.min.js"></script>
<script src="holiday_bells/js/holiday_bells.js"></script>

Bước 2: Chèn đoạn code này ngay dưới thẻ <body>
<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><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i1"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i2"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i3"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i4"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i5"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i6"><div class="b-ball_right"></div><div class="b-ball_i"></div></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><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i1"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i2"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i3"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i4"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i5"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i6"><div class="b-ball_right"></div><div class="b-ball_i"></div></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><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i1"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i2"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i3"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i4"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i5"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i6"><div class="b-ball_right"></div><div class="b-ball_i"></div></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><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i1"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i2"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i3"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i4"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i5"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i6"><div class="b-ball_right"></div><div class="b-ball_i"></div></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><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i1"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i2"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i3"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i4"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i5"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
<div class="b-ball b-ball_i6"><div class="b-ball_right"></div><div class="b-ball_i"></div></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><div class="b-ball_i"></div></div>
<div class="b-ball

Bước 3: Chèn đoạn code này ngay dưới thẻ ]]></b:skin> và lưu lại là xong.
Chú ý ở code này nếu bạn thay thế các icon ảnh tại đây thì sẽ có mộ dàn chuông khác cũng khá đẹp mắt như  ảnh bên dưới.
Demo 2
 /* HOLIDAY BELLS */
.b-page__content { min-height:20px; }
.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://lh4.googleusercontent.com/-Fw52YRWmOes/UMB0XOjXsnI/AAAAAAAAC1E/EENsIn76nXk/s373/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://lh3.googleusercontent.com/-CBEwMmGrqZ8/UMB0VT8RJMI/AAAAAAAAC0U/VVuQKjz292Y/s83/b-ball_n1.png') no-repeat; }
.b-ball_n2 .b-ball__i { background:url('https://lh5.googleusercontent.com/-wOz2yKeFu7I/UMB0URa7HNI/AAAAAAAAC0I/XnAVs3w9_Vw/s70/b-ball_n2.png') no-repeat; }
.b-ball_n3 .b-ball__i { background:url('https://lh5.googleusercontent.com/-8A4ZJeTF4cg/UMB0UygpdrI/AAAAAAAAC0M/NfoWup7hI58/s67/b-ball_n3.png') no-repeat; }
.b-ball_n4 .b-ball__i { background:url('https://lh3.googleusercontent.com/-Nx7_Tm-nkAI/UMB0VkMAHpI/AAAAAAAAC0c/09GjFBtv1Sw/s102/b-ball_n4.png') no-repeat; }
.b-ball_n5 .b-ball__i { background:url('https://lh5.googleusercontent.com/-4P-GX2WVLXI/UMB0V6O1MrI/AAAAAAAAC0Y/nNZOwiGOmRc/s57/b-ball_n5.png') no-repeat; }
.b-ball_n6 .b-ball__i { background:url('https://lh4.googleusercontent.com/-Y8mmZd60f5k/UMB0WEfbWcI/AAAAAAAAC0k/xf-TW8EU0-w/s70/b-ball_n6.png') no-repeat; }
.b-ball_n7 .b-ball__i { background:url('https://lh3.googleusercontent.com/-BYfmH5Mpksw/UMB0WbPto9I/AAAAAAAAC00/jFbTK8qzXbs/s67/b-ball_n7.png') no-repeat; }
.b-ball_n8 .b-ball__i { background:url('https://lh5.googleusercontent.com/-AkG1qZqE2lA/UMB0WnEGXtI/AAAAAAAAC0s/VgQQkCeP7YQ/s54/b-ball_n8.png') no-repeat; }
.b-ball_n9 .b-ball__i { background:url('https://lh5.googleusercontent.com/-qyza4SONUdM/UMB0W64FoOI/AAAAAAAAC1A/uBhV0yD6sbk/s66/b-ball_n9.png') no-repeat; }
.b-ball_i1 .b-ball__i { background:url('https://lh6.googleusercontent.com/-QhhDd1SE_V0/UMB0PA61nFI/AAAAAAAACzg/CXvrLe3CRjI/s71/b-ball_i1.png') no-repeat; }
.b-ball_i2 .b-ball__i { background:url('https://lh4.googleusercontent.com/-9XMuFc_Yp5c/UMB0QBkDNuI/AAAAAAAACzk/bKiU8K3vgXU/s61/b-ball_i2.png') no-repeat; }
.b-ball_i3 .b-ball__i { background:url('https://lh3.googleusercontent.com/-j6E5yxK2u-Y/UMB0PGXq-2I/AAAAAAAACzc/j1vsaU11xvc/s31/b-ball_i3.png') no-repeat; }
.b-ball_i4 .b-ball__i { background:url('https://lh6.googleusercontent.com/-o2OZuJyWj4s/UMB0QoPX2KI/AAAAAAAACz4/JQIHqmVrhS8/s51/b-ball_i4.png') no-repeat; }
.b-ball_i5 .b-ball__i { background:url('https://lh5.googleusercontent.com/-kG7U9F_tEx4/UMB0QYsHNLI/AAAAAAAACzw/3QInJrJIIfA/s78/b-ball_i5.png') no-repeat; }
.b-ball_i6 .b-ball__i { background:url('https://lh4.googleusercontent.com/-TWr-kxeQTSc/UMB0UdruXgI/AAAAAAAAC0E/CS9sAXVQ_9E/s69/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); }
Chúc bạn thành công!

Recent News

[latest][5][recentright]

TOGGLE CONTENT

NASA Website SEND YOUR NAME TO MARS
Layout Builder with dozens of easy to use elements
Just change the contents and everything done in minutes
Content Importer, to easily setup your site
With one click you get a site very similar to the theme demo.
Many layout styles
Lots of beautiful interactive elements like slideshows, galleries, tabs, toggles that help you showcase your best work
Responsive Layout and High Resolution Display
Works beautiful on modern high resolution displays: Smarthpones, iPads, Retina MacBooks, etc