Trang chủ > New Update > Code JavaScript > Share code dàn chuông phát nhạc khi rê chuột

Posted by: Sáng VipPrao Bài viết: Share code dàn chuông phát nhạc khi rê chuột Chuyên mục: Code JavaScript Ngày đăng: 2013-12-17 100/100 cho 1 bình chọn

Share code dàn chuông phát nhạc khi rê chuột

v2 Có chuông khi rê chuột vào - Share code dàn chuông đẹp trên head thiết kế cho wap/web giang sinh noel 2013 hay. Code tự động phát tiếng nhạc khi rê chuột vào dàn chuông.
Sau khi trang trí xong diễn đàn với bộ chuông này, có rất nhiều bạn đã đề xuất nguyện vọng muốn mình share bộ chuông nhạc này để mang về trang trí cho website

Thật ra bộ chuông nhạc này đầu tiên là để áp dụng cho mã nguồn diễn đàn Xenforo (là mã nguồn mà forum chúng ta đang phát triển). Tuy nhiên nếu biết cách đặt thì các bạn có thể sử dụng cho tất cả các thể loại website khác, như diễn đàn vbb hay trang web bình thường.

Bộ code này được share bởi JacquiiDesigns thiết kế dành riêng cho giáng sinh.

Đầu tiên cho các bạn xem demo:

Tải ảnh gốc

Đặc điểm của bộ chuông này: là khi rê chuột vào có thể làm rung rinh chuông và phát ra tiếng nhạc rất vui tai. Bên cạnh đó các bạn cũng có thể gõ tay lên bàn phím và phát ra tiếng nhạc nhờ đã được hỗ trợ javascriptphát nhạc rồi :D
Hướng dẫn:

• Đầu tiên các bạn download bộ source code về tại đây: [DOWNLOAD CODE]
Sau khi download về, các bạn mở phần đã download lên và up thư mục holiday_bells lên root của host nhé (ngang hàng với index).


• Tiếp theo, sau khi đã up source lên host rồi thì các bạn sẽ thêm các đoạn code sau vào website của bạn:
Đầu tiên là thêm 2 đoạn javascript này vào header nếu là xenforo thì bạn add 2 đoạn này vào templatepage_container_js_head
<script src="holiday_bells/js/swfobject.min.js"></script><script src="holiday_bells/js/holiday_bells.js"></script>
Sau đó thêm đoạn code sau vào bất cứ chỗ nào bạn muốn hiển thị bộ chuông nhạc này: nếu là xenforo thì nên chèn vào template PAGE_CONTAINER ở gần cuối trước đoạn </body> </html>

[Bấm vào đây] lấy thẻ div

Và cuối cùng là css cho nó: (nếu là xenforo thì đặt đoạn css này ở template EXTRA.css)
[ Đây là CSS]
Thế là đã xong rồi đấy, tùy theo mã nguồn website của bạn mà đặt sao cho phù hợp nha! Sỡ dĩ ở phần hướng dẫn này mình hay đề cập đến Xenforo là vì mình đang áp dụng bộ code này cho Xenforo (diễn đàn của mình đang xài mà ).

Không có gì khó khăn đâu! Thử áp dụng liền nhé ^^ And Merry Christmas

Đánh giá của bạn là góp ý quan trọng giúp Admin nâng cao chất lượng bài viết!

Đánh giá ( - )

/ - phiếu