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

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.

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!

COMMENTS

Booking.com
Name

Ảnh - Video,12,Ảnh tôi chụp,2,Blog,7,Blogger,11,Blogger tips,9,Cảm nhận,1,Cộng đồng,8,Công nghệ,2,Du lịch,21,Facebook,3,Hot,4,ICT,17,Phần mềm,12,Photo,4,Quốc tế,4,Tài liệu,5,Template,1,Video,8,Việt Nam,10,
ltr
item
Vịnh Travel: 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
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.
http://3.bp.blogspot.com/-48EU3D6-Ms8/UMhZNmtfaRI/AAAAAAAACsk/CQ0KzEbFZcI/s640/DLTG.PNG
http://3.bp.blogspot.com/-48EU3D6-Ms8/UMhZNmtfaRI/AAAAAAAACsk/CQ0KzEbFZcI/s72-c/DLTG.PNG
Vịnh Travel
http://www.vinhtravel.com/2014/09/trang-tri-blog-mua-giang-sinh.html
http://www.vinhtravel.com/
http://www.vinhtravel.com/
http://www.vinhtravel.com/2014/09/trang-tri-blog-mua-giang-sinh.html
true
7800426333090035644
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Xin hãy like hoặc chia sẻ lên twitter để xem nội dung bài viết Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy