Home Blogspot Thủ thuật Blogspot Tạo giàn chuông Giáng sinh trang trí cho Blogspot

Tạo giàn chuông Giáng sinh trang trí cho Blogspot

December 21, 2015
A+ A- Print Email
Ngày càng đến gần ngày Noel, không khí ngày càng lạnh. Thành phố Hồ Chí Minh nay trời âm u cả ngày, ra đường se se lạnh mang cho con người ta cảm giác Giáng sinh đang đến gần.

Tạo giàn chuông Giáng sinh trang trí cho Blogspot
Tạo giàn chuông Giáng sinh trang trí cho Blogspot
Tiếp tục tiết mục trang trí Giáng sinh đầy độc đáo và màu sắc cho Blogspot, sau khi đã giới thiệu với các bạn cách làm ông già Noel chạy tung tăng trong blog của mình và cách làm tuyết rơi, thì hôm nay, _CTPG_ sẽ hướng dẫn các bạn làm một dàn chuông Giáng sinh có âm thanh khi rê chuột vào treo trên cùng của web (Như blog của mình chẳng hạn). Không quá rườm rà, lại cực kỳ độc đáo. Cùng theo dõi nhé:
Xem thêm: Cách tạo ông già Noel trang trí Giáng sinh

Hướng dẫn trang trí Giáng sinh với dàn chuông độc đáo

- Như thường lệ ở các bài viết thủ thuật Blogspot mà _CTPG_ đã giới thiệu, đầu tiên luôn là truy cập vào Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML).

- Sau đó, hãy thêm đoạn code này vào phía trên thẻ </head> (Mình đề nghị: Để tối ưu nhất thì nên đặt ngay bên dưới thẻ đóng </b:skin>):
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script src="https://dl.dropboxusercontent.com/u/29848934/holiday_bells/holiday_bells.js"></script>
<script src="https://dl.dropboxusercontent.com/u/29848934/holiday_bells/swfobject.min.js"></script>
<style type='text/css'>
      /* HOLIDAY BELLS */
      .b-page__content { min-height:60px; }
      .b-head-decor { display:none; }
      .b-page_newyear .b-head-decor { position:absolute; top:0; left:0; display:block; height:115px; width:100%; overflow:hidden; background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEJPIRhomKBqCVDvHuAqVjjLfgAT6Th5XR6Cr3TBD1qM7qbSZef1laN-pv8FWNbG7iJ05pStpJIwree2L79D6jHAKvI65mdFKsArxQteHJ83EtzP6qcTGrkEKz_Z73O5fOmKJz3glEgPzC/s1600/giang-sinh.png&#39;) repeat-x 0 0; }
      .b-page_newyear .b-head-decor__inner { position:absolute; top:0; left:0; height:115px; display:block; width:373px; }
      .b-page_newyear .b-head-decor::before { content:&#39;&#39;; display:block; position:absolute; top:-115px; left:0; z-index:3; height:115px; display:block; width:100%; }
      .b-page_newyear .b-head-decor__inner_n2 { left:373px; }
      .b-page_newyear .b-head-decor__inner_n3 { left:746px; }
      .b-page_newyear .b-head-decor__inner_n4 { left:1119px; }
      .b-page_newyear .b-head-decor__inner_n5 { left:1492px; }
      .b-page_newyear .b-head-decor__inner_n6 { left:1865px; }
      .b-page_newyear .b-head-decor__inner_n7 { left:2238px; }
      .b-ball { position:absolute; }
      .b-ball_n1 { top:0; left:3px; width:59px; height:83px; }
      .b-ball_n2 { top:-19px; left:51px; width:55px; height:70px; }
      .b-ball_n3 { top:9px; left:88px; width:49px; height:67px; }
      .b-ball_n4 { top:0; left:133px; width:57px; height:102px; }
      .b-ball_n5 { top:0; left:166px; width:49px; height:57px; }
      .b-ball_n6 { top:6px; left:200px; width:54px; height:70px; }
      .b-ball_n7 { top:0; left:240px; width:56px; height:67px; }
      .b-ball_n8 { top:0; left:283px; width:54px; height:53px; }
      .b-ball_n9 { top:10px; left:321px; width:49px; height:66px; }
      .b-ball_n1 .b-ball__i { background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1quc3SENFdE9vHtJbS61CnLek7vPo-1RFkNRdpUt73fZqScg1EQoaWBGmXaE7_1v1hg4lrqUEmwVPnH8jATHfOiES4hmKFgP3cwaU37t-qLgO4VpYPw69xfk4iFeH4UFD5337KhqnsUU/s1600/b-ball_n1.png&#39;) no-repeat; }
      .b-ball_n2 .b-ball__i { background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-UjRadE80UMnqoJ19WuDSkPNSq0B-i5CchO0_81pmZ6B2WO5h1mQELXNJFPyJK9N5Hgvsqf4ZO9SOl50kC-iHpmfxpNrwQLVE4EGD-QflhB3yuDi0EkKdUYAWZooWpB53UmkqGE-Rcbc/s1600/b-ball_n2.png&#39;) no-repeat; }
      .b-ball_n3 .b-ball__i { background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnZUPaisr4y99Fk-F_FDZX4Ua_pWpkH3Oy6QWcuzHdgpGj0XbzPyQuK0wWg0SDISs3_w_yIhfzBPvBFWRzxMFMUF926LiuXsAiwZBPhJp_GPvsu3MPHo8KU0u30uVLJLPkfzV6Q_llXCY/s1600/b-ball_n3.png&#39;) no-repeat; }
      .b-ball_n4 .b-ball__i { background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6M7QJ9tG5Vl2pQ_RkwbnCQcU7gu35w6AW_7Ota3rvyXIBhQMBy8pdJbkUZmPHuoI4co-7Jl-RGJg46WuxOXrVPCgatMOqDZiPPQMEiadWS9Yjgfs63p30gPO71fj4H-E2weyvaw4Gv18/s1600/b-ball_n4.png&#39;) no-repeat; }
      .b-ball_n5 .b-ball__i { background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzQP13KqmBdX9qeWXOLB3208Jr_JMGhSSGWGpbv24TdKSPWs1gl3RrKF39Vu-x8Dx1CQMEBILUnEbdp1gptexz55PUdggkH7iq5Ith4H1t_h76GdXD2IEfEsu4wRa-iQ9j8RJsunb6Gvs/s1600/b-ball_n5.png&#39;) no-repeat; }
      .b-ball_n6 .b-ball__i { background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNdrp7XRtYZgLzwAHyRLCtIfhBuLQ4FT4DkEy7zINS_dS_eVCmgFdXDXNRgeLNyXaWy8WIdTv7sHFMaoxVlVqCdx2ef9sgWW2wXKxZVXgB4PTaRm6RTCP6EuBn1_PhbyTF1qQcA1Rem5w/s1600/b-ball_n6.png&#39;) no-repeat; }
      .b-ball_n7 .b-ball__i { background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHXF6IW-zBU1ohg5CUku72_8_LeO4zpX56Xqku92G1MdWOva-YHWJEPtZECHx8GvL7pyUmTeabihUBKeDHtBDRr_9oCx3n6Q6fh-prvrHTQCT1MHLYGDt6gZbpfUN0bMfyPWVRvhXUuDc/s1600/b-ball_n7.png&#39;) no-repeat; }
      .b-ball_n8 .b-ball__i { background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5UQ9Kq9zhtKj3rEnJiBhyphenhyphenAgTogEGg5FQc1-BHsIAP9TOPgwpBVRIzwq1mS6e0NrikzoI7jZRgypznlckcGOiw_7gE_2BSRw_tD7wsidGSR1y1_36eXR7D6ro_YcFH30uxU1ciuNi2-1o/s1600/b-ball_n8.png&#39;) no-repeat; }
      .b-ball_n9 .b-ball__i { background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQSv7Vfrx7yvpoXp9TWS1CLx7f09_wCeXuqQ8PM97cUtd2-GP_EJXbiLHP1_Dj5mj4HbS1RwEnC6idcRw4OktIeidi9OaQWQkujZ4QpvtjIWtXhOJHFLIAtSV9zWdyWUrtQltSRQm_kxo/s1600/b-ball_n9.png&#39;) no-repeat; }
      .b-ball_i1 .b-ball__i { background:url(&#39;https://lh6.googleusercontent.com/-QhhDd1SE_V0/UMB0PA61nFI/AAAAAAAACzg/CXvrLe3CRjI/b-ball_i1.png&#39;) no-repeat; }
      .b-ball_i2 .b-ball__i { background:url(&#39;https://lh4.googleusercontent.com/-9XMuFc_Yp5c/UMB0QBkDNuI/AAAAAAAACzk/bKiU8K3vgXU/s61/b-ball_i2.png&#39;) no-repeat; }
      .b-ball_i3 .b-ball__i { background:url(&#39;https://lh3.googleusercontent.com/-j6E5yxK2u-Y/UMB0PGXq-2I/AAAAAAAACzc/j1vsaU11xvc/b-ball_i3.png&#39;) no-repeat; }
      .b-ball_i4 .b-ball__i { background:url(&#39;https://lh6.googleusercontent.com/-o2OZuJyWj4s/UMB0QoPX2KI/AAAAAAAACz4/JQIHqmVrhS8/b-ball_i4.png&#39;) no-repeat; }
      .b-ball_i5 .b-ball__i { background:url(&#39;https://lh5.googleusercontent.com/-kG7U9F_tEx4/UMB0QYsHNLI/AAAAAAAACzw/3QInJrJIIfA/b-ball_i5.png&#39;) no-repeat; }
      .b-ball_i6 .b-ball__i { background:url(&#39;https://lh4.googleusercontent.com/-TWr-kxeQTSc/UMB0UdruXgI/AAAAAAAAC0E/CS9sAXVQ_9E/b-ball_i6.png&#39;) no-repeat; }
      .b-ball_i1{top:0; left:0; width:25px; height:71px; }
      .b-ball_i2{top:0; left:25px; width:61px; height:27px; }
      .b-ball_i3{top:0; left:176px; width:29px; height:31px; }
      .b-ball_i4{top:0; left:205px; width:50px; height:51px; }
      .b-ball_i5{top:0; left:289px; width:78px; height:28px; }
      .b-ball_i6{top:0; left:367px; width:6px; height:69px; }
      .b-ball__i { position:absolute; width:100%; height:100%; -webkit-transform-origin:50% 0; -moz-transform-origin:50% 0; -o-transform-origin:50% 0; transform-origin:50% 0; -webkit-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out; transition:all .3s ease-in-out; pointer-events:none; }
      .b-ball_bounce .b-ball__right{position:absolute; top:0; right:0; left:50%; bottom:0; z-index:9; }
      .b-ball_bounce:hover .b-ball__right{ display:none; }
      .b-ball_bounce .b-ball__right:hover{ left:0; display:block!important; }
      .b-ball_bounce.bounce&gt;.b-ball__i{ -webkit-transform:rotate(-9deg); -moz-transform:rotate(-9deg); -o-transform:rotate(-9deg); transform:rotate(-9deg); }
      .b-ball_bounce .b-ball__right.bounce+.b-ball__i { -webkit-transform:rotate(9deg); -moz-transform:rotate(9deg); -o-transform:rotate(9deg); transform:rotate(9deg); }
      .b-ball_bounce.bounce1&gt;.b-ball__i {-webkit-transform:rotate(6deg); -moz-transform:rotate(6deg); -o-transform:rotate(6deg); transform:rotate(6deg); }
      .b-ball_bounce .b-ball__right.bounce1+.b-ball__i {-webkit-transform:rotate(-6deg); -moz-transform:rotate(-6deg); -o-transform:rotate(-6deg); transform:rotate(-6deg); }
      .b-ball_bounce.bounce2&gt;.b-ball__i{ -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); }
      .b-ball_bounce .b-ball__right.bounce2+.b-ball__i{ -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); }
      .b-ball_bounce.bounce3&gt;.b-ball__i {-webkit-transform:rotate(1.5deg); -moz-transform:rotate(1.5deg); -o-transform:rotate(1.5deg); transform:rotate(1.5deg); }
      .b-ball_bounce .b-ball__right.bounce3+.b-ball__i { -webkit-transform:rotate(-1.5deg); -moz-transform:rotate(-1.5deg); -o-transform:rotate(-1.5deg); transform:rotate(-1.5deg); }
    </style>
<!--End chuông--> 
Trong đó:
  • <script src="http://blogthietke.googlecode.com/files/btk_holiday_bells.js"></script> và <script src="http://blogthietke.googlecode.com/files/btk_swfobject.min.js"></script> là 2 đoạn js chứa hiệu ứng rung chuông và hiệu ứng âm thanh, các bạn có thể tải về và lưu trên host của mình.
  • <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script> là đoạn code Jquery, không được thay thế đoạn code này bằng đoạn code Jquery khác, vì theo mình trải nghiệm thì chỉ có đoạn code này mới giúp 2 đoạn code js chứa hiệu ứng rung chuông và âm thanh hoạt động.
  • Và nếu blog bạn đã có 1 đoạn code Jquery khác, thì nên xóa nó tạm đi để tránh bị xung đột, và nhớ là luôn để cho đoạn Jquery 1.7.2 này nằm phía trên 1 đoạn Jquery khác nếu bạn không xóa đoạn Jquery khác đó đi.

- Sau đó thêm đoạn code này vào ngay bên dưới thẻ <body> (Mục đích là để dàn chuông Giáng sinh này xuất hiện ở phần trên cùng của web):
<!--Chuông-->
<div class='b-page_newyear'>
<div class='b-page__content'>
<i class='b-head-decor'>
<i class='b-head-decor__inner b-head-decor__inner_n1'>
<div class='b-ball b-ball_n1 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n2 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n3 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n4 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n5 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n6 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n7 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n8 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n9 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i1'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i2'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i3'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i4'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i5'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i6'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
</i>
<i class='b-head-decor__inner b-head-decor__inner_n2'>
<div class='b-ball b-ball_n1 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n2 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n3 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n4 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n5 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n6 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n7 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n8 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n9 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i1'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i2'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i3'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i4'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i5'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i6'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
</i>
<i class='b-head-decor__inner b-head-decor__inner_n3'>
<div class='b-ball b-ball_n1 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n2 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n3 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n4 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n5 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n6 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n7 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n8 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n9 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i1'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i2'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i3'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i4'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i5'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i6'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
</i>
<i class='b-head-decor__inner b-head-decor__inner_n4'>
<div class='b-ball b-ball_n1 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n2 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n3 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n4 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n5 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n6 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n7 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n8 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n9 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i1'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i2'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i3'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i4'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i5'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i6'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
</i>
<i class='b-head-decor__inner b-head-decor__inner_n5'>
<div class='b-ball b-ball_n1 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n2 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n3 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n4 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n5 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n6 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n7 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n8 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n9 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i1'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i2'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i3'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i4'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i5'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i6'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
</i>
<i class='b-head-decor__inner b-head-decor__inner_n6'>
<div class='b-ball b-ball_n1 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n2 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n3 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n4 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n5 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n6 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n7 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n8 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n9 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i1'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i2'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i3'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i4'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i5'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i6'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
</i>
<i class='b-head-decor__inner b-head-decor__inner_n7'>
<div class='b-ball b-ball_n1 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n2 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n3 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n4 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n5 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n6 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n7 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n8 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_n9 b-ball_bounce'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i1'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i2'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i3'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i4'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i5'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
<div class='b-ball b-ball_i6'>
<div class='b-ball__right'/>
<div class='b-ball__i'/>
</div>
</i>
</i>
</div>
</div>
<!--End chuông-->
- Sau khi xong các bước trên thì lưu template lại, và kiểm tra lại thử có hiệu ứng rung chuông và phát ra âm thanh khi rê chuột vào không nhé.
Xem thêm: Cách tạo tuyết rơi cho Blogspot
Nếu có vấn đề gì khi tạo dàn chuông trang trí Giáng sinh này thì các bạn cmt ở bên dưới để mình giúp xử lý vấn đề nhé. Chúc các bạn thành công!
Nhãn: ,

Post a Comment

Subscribe to: Post Comments (Atom)
[blogger]
Test © 2016. All Rights Reserved.
Powered by Blogger

Author Name

Contact Form

Name

Email *

Message *

Powered by Blogger.