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

Main Posts Background Image

Main Posts Background Image

Thứ Sáu, 26 tháng 9, 2014

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

09:45

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!

Error 404

The page you were looking for, could not be found. You may have typed the address incorrectly or you may have used an outdated link.

Go to Homepage