Test

Bạn đã làm quen với giao diện quản trị của Blogspot qua bài viết Giới thiệu bố cục chính trang quản trị Blogspot, đồng thời nhận được lời khuyên của Học Blogspot rằng nên sử dụng Template Blogspot tùy chỉnh ngay từ đầu ở bài viết Vì sao nên dùng Template Blogspot tùy chỉnh?. Vậy thì đến với bài viết này, Học Blogspot sẽ hướng dẫn các bạn sử dụng các tính năng của phần Chủ đề, để tải lên Template Blogspot, sau lưu hay tùy chỉnh nó.

Những mục chính trong bài viết:

Cách sao lưu template Blogspot
Cách tải lên và phục hồi template
Cách tùy chỉnh template cơ bản

Đây là giao diện của trang Chủ đề của Blogspot:


Tại đây, chúng ta có thể thực hiện tất cả các thao tác bao gồm tải lên template, sao lưu template hay tùy chỉnh giao diện Blogspot từ đơn giản đến chuyên sâu. Chúng ta sẽ đi từng bước để tìm hiểu các tính năng này:

Sao lưu template Blogspot

Việc sao lưu template blogspot là rất quan trọng, vì vậy đã được Học Blogspot hướng dẫn riêng ở một bài viết khác. Các bạn có thể tham khảo đầy đủ các ý về sao lưu template blogspot tại đây: Tại sao chúng ta cần sao lưu template Blogspot?

Cách tải lên, phục hồi template Blogspot

Tại sao ở đây mình sử dụng từ phục hồi đi kèm với tải lên, là bởi vì 2 hành động này là giống nhau và ở bên trên bạn đã tìm hiểu cách sao lưu template Blogspot, khi cần thiết, thì tải lên cũng chính là để phục hồi lại template của bạn.

- Để tải lên template, các bạn vào trang quản trị Blogger, phần Chủ đề, sau đó lựa chọn tùy chọn Sao lưu/Khôi phục (như ảnh phía trên).

- Sau đó nhấp vào tùy chọn Chọn tệp, một cửa sổ bật ra, bạn cần chọn template mình muốn tải lên hoặc bản backup bạn muốn phục hồi. Sau đó chọn tiếp Tải lên. Và đợi 1 tí là việc tải lên sẽ hoàn thành.


Tuy nhiên, đôi khi việc tải lên theo cách truyền thống như thế này sẽ bị báo lỗi. Lúc này thì bạn cần sử dụng cách tải template Blogspot lên bằng cách này:

- Chuột phải vào template mà bạn muốn tải lên, sau đó chọn Open with -> Notepad:


- Copy toàn bộ code bên trong:

- Tại trang quản trị Blogspot, các bạn vào Chủ đề, sau đó chọn Chỉnh sửa HTML

- Chọn tất cả các code trong đó, và paste code đã copy ở trên vào. Sau đó lưu lại.


Vậy là xong, chỉ cần 1 trong 2 cách là đủ, bạn đã tải lên được giao diện template mới hoặc phục hồi lại template cũ của bạn.

Cách tùy chỉnh giao diện template cơ bản

Như đề mục nói, đây chỉ là chỉnh sửa cơ bản giao diện template, chủ yếu chỉ thay đổi được font chữ, cỡ chữ, màu sắc các phần trong template mà thôi.

- Để chỉnh sửa giao diện template cơ bản, các bạn vào Chủ đề -> Tùy chỉnh.

- Sau đó chuyển xuống tab Nâng cao:


Tại đây các bạn có thể chỉnh sửa được các chi tiết như Học Blogspot nói ở trên, gồm màu sắc, font chữ và cỡ chữ các thành phần trên trang web.

Trên đây là toàn bộ hướng dẫn về cách tải lên Blogspot, cách sao lưu cũng như tùy chỉnh cơ bản template Blogspot. Để học được nhiều hơn, bạn có thể theo dõi chuyên mục: Thủ thuật Blogspot nhé.

Blogspot sau khi tạo ra (Được hướng dẫn ở bài viết: Cách tạo Blogspot cho người mới bắt đầu) sẽ có một tên miền khá dài, làm mất tính thẩm mỹ của tên miền cũng như khó nhớ cho người dùng, bởi nó phải có đuôi là .blogspot.com. Điều này chắc chắn sẽ ảnh hưởng đến người xem của bạn. Tuy nhiên, Blogspot lại có tùy chọn cho chúng ta sử dụng tên miền của bên thứ 3, giúp giải quyết hạn chế này của nó.

Thông thường, ai làm blog bằng Blogspot với mục đích phục vụ cá nhân và tận dụng tốt nhất những gì nó mang lại, cũng muốn mình sở hữu một tên miền riêng, thể hiện được nội dung của website mình. Hiện nay, bạn có thể mua tên miền quá dễ dàng và khá nhiều lựa chọn. Chỉ với vài phút truy cập các trang web bán tên miền thông dụng hiện nay như Godaddy, Zcom, Mắt Bão… thì bạn đã có ngay tên miền để sử dụng.

Bạn đã có tên miền, và muốn trỏ nó vào blog của mình trên hệ thống Blogspot? Đơn giản thôi, hãy làm theo hướng dẫn của mình nhé.

Cách trỏ tên miền về Blogspot

Ở bài viết này, Học Blogspot đã sử dụng tên miền qua dịch vụ CloudFlare (Dịch vụ DNS bên thứ 3, sẽ có bài viết giải đáp: Vì sao nên dùng CloudFlare cho Blogspot?), nên giao diện sẽ hơi khác so với các trang web bán tên miền khác (Thật ra thì thằng bán tên miền nào cũng có giao diện quản trị tên miền khác nhau cả), vì thế, mọi hoạt động chỉnh sửa của mình bây giờ đều trên CloudFlare, các bạn sẽ làm tương tự ở trên các trang bán tên miền mà mình mua.

Trong bài viết này, Học Blogspot làm hướng dẫn với tên miền www.hocblogspot.com luôn nhé:

- Đầu tiên, bạn truy cập vào trang quản trị Blogspot ở đường dẫn sau: https://www.blogger.com

- Sau đó, vào Cài đặt rồi đến Cơ bản, và bạn tìm đến mục Địa chỉ blog. Để thêm tên miền riêng của bạn vào, hãy click vào tùy chọn + Thiết lập URL của bên thứ 3 cho blog của bạn nhé:

Sau đó, bạn cần nhập tên miền của mình vào, tên miền nhập vào yêu cầu cần có www, hoặc sử dụng subdomain. Ở đây mình dùng tên miền chính, vì vậy nhập www.hocblogspot.com:


Sau khi nhập tên miền vào, thì bạn bấm Lưu như trên ảnh.

- Sẽ nhận được một thông báo lỗi như sau:


Các bạn cần làm theo hướng dẫn là thêm 2 CNAME trong thông báo ở trên vào DNS tên miền của mình. Vì vậy, giờ mình sẽ vào trang quản trị tên miền của mình để cài đặt 2 tên miền này. Mình dùng CloudFlare như đã nói ở trên nha.

- Mở tab mới. Vào CloudFlare, mình vào phần DNS (Hầu hết các trang bán tên miền đều có giao diện DNS na ná nhau như bên dưới cả):


Sau đó nhập 2 CNAME như yêu cầu của Google vào.

Đây là CNAME sau khi đã nhập chính xác:


- Giờ thì quay trở trang Blogspot nãy bạn đang nhập tên miền. Bấm Lưu lần nữa. Thông thường DNS của các trang tên miền cập nhật khá nhanh, vì vậy, bạn lưu sẽ thành công ngay thôi. Còn nếu lưu chưa được nữa, thì đợi ít phút để được cập nhật DNS rồi bấm Lưu lại lần nữa nhé.


Đây là khi bạn đã lưu lại thành công. Lúc này, trang web của bạn đã được chuyển hẳn tên miền Blogspot sang tên miền riêng của bạn. Tuy nhiên, bạn nên làm thêm 1 công đoạn, đó là mở chỉnh sửa tên miền ra, như ảnh dưới:


Sau đó tick thêm vào dấu tick chuyển hướng tên miền từ non-www sang www để tránh trường hợp người khác gõ tên miền bạn không có chữ www thì báo lỗi không tồn tại:

Lưu ý: Hoạt động của nút tick chuyển hướng này thật sự không tốt, vì vậy, lời khuyên cho các bạn là hãy thực hiện redirect tên miền từ non-www sang www trong trang quản trị tên miền của mình.

Vậy là xong rồi đó. Với cách trỏ tên miền Blogspot cặn kẽ ở trên mà Học Blogspot đã hướng dẫn cho các bạn, thì các bạn đã có cho mình một blog với tên miền riêng, vừa mang tính cá nhân hóa, vừa dễ nhớ với người dùng.

Mặc định ban đầu sau khi tạo Blogspot sẽ sử dụng ngôn ngữ tiếng Anh làm ngôn ngữ chính. Tuy nhiên, không phải ai cũng giỏi tiếng Anh hay cho dù bạn giỏi tiếng Anh ở một lĩnh vực nào đó, nhưng có thể vẫn không hiểu những nội dung tiếng Anh liên quan đến internet.

Vì vậy, để có giao diện thân thiện hơn với các bạn, thì Học Blogspot xin hướng dẫn các bạn cách chuyển ngôn ngữ tiếng Anh sang tiếng Việt trong trang quản trị Blogspot.

Cách cài tiếng Việt cho trang quản trị Blogspot

Để cài tiếng Việt, tại giao diện quản trị Blogspot theo đường link:

- Các bạn vào Settings, tiếp tục vào User settings. Tại đây, bạn sẽ thấy mục Language, trong ảnh bên dưới, nó đang mặc định sử dụng ngôn ngữ English (United States):


- Để thay đổi ngôn ngữ, các bạn chỉ cần click vào đó, tìm và chọn Vietnamese - Tiếng Việt như trong ảnh bên dưới. Hệ thống sẽ tự đổi refresh trang và chuyển đổi ngôn ngữ sang tiếng Việt.


- Chỉ đơn giản vậy thôi là bạn đã chuyển ngôn ngữ tiếng Anh mặc định của Blogspot sang tiếng Việt cho dễ dùng. Nếu các bạn muốn sử dụng ngôn ngữ nào khác, cũng có thể làm tương tự vậy.

Các bạn nhớ theo dõi Series bài viết Học Blogspot cho người bắt đầu nhé.

Bạn đã thử thêm Google Tag Manager vào Blogspot nhưng khi lưu thì gặp lỗi? Không sao, hôm nay _CTPG_ sẽ hướng dẫn và cùng bạn khắc phục ngay vấn đề này nhanh chóng giúp bạn theo dõi blog của mình một cách dễ dàng.

Google Tag Manager là gì?

Nếu những bạn lần đầu tiên nghe đến từ khóa “Google Tag Manager”, thì chắc hẳn sẽ thắc mắc Google Manager là gì phải không?

Nếu bạn tìm hiểu tại chính trang hỗ trợ của Google thì sẽ được giải thích một cách cặn kẽ như thế này:

Google Tag Manager của Google là hệ thống quản lý thẻ cho phép bạn dễ dàng và nhanh chóng cập nhật thẻ và đoạn mã trên trang web hoặc ứng dụng dành cho thiết bị di động của mình, chẳng hạn như các thẻ và đoạn mã dùng cho phân tích lưu lượng truy cập và tối ưu hóa tiếp thị. Bạn có thể thêm và cập nhật AdWords, Google Analytics, Firebase Analytics, Floodlight và thẻ của bên thứ 3 hoặc thẻ tùy chỉnh từ giao diện người dùng của Trình quản lý thẻ thay vì chỉnh sửa mã trang web. Việc này sẽ giảm lỗi và giúp bạn không phải nhờ đến nhà phát triển khi định cấu hình thẻ.

Google đã giải thích rất đầy đủ, tuy nhiên, đọc rất khó hiểu phải không :)) Thực sự là khá khó hiểu nếu đọc theo giải thích “như Google dịch” của Google. Vì thế, mình sẽ giải thích đơn giản hơn, như sau:

• Để sử dụng các công cụ theo dõi như Analytics, Adwords, Facebook… thì hầu hết các bạn phải thêm code theo dõi vào website, ở đây là vào code của Blogspot. Điều này có thể khiến bạn khó quản lý các đoạn code này, và thậm có thể làm web load chậm hơn vì chạy quá nhiều js cho mỗi code.
• Với Google Tag Manager, thì nó sẽ giúp bạn quản lý tất cả các code theo dõi trên mà chỉ với 1 đoạn code duy nhất được thêm vào.

Cách thêm Google Tag Manager vào Blogspot mà không bị lỗi

Hệ thống mã nguồn của Blogspot hơi khác các hệ thống khác 1 tí, nên việc thêm các code theo dõi như Facebook Pixel hay bây giờ là Google Tag Manager vào thường bị lỗi. Tuy nhiên tất cả các vấn đề trên đều có thể giải quyết. Ở bài này sẽ hướng dẫn cách để bạn thêm Google Tag Manager vào Blogspot, Facebook Pixel thì vui lòng xem ở bài viết Cách thêm Facebook Pixel vào Blogspot.

Cách thêm rất đơn giản:

Bạn copy code Google Tag Manager thêm vào thẻ <head>, và thay đoạn code sau đây:

dl=l!='dataLayer'?'&l='+l:'';

Bằng đoạn code này:

dl=l!='dataLayer'?'&amp;l='+l:''

Sau đó lưu lại là xong.

Đấy, việc thêm các đoạn code theo dõi như Google Tag Manager hay Facebook Pixel vào Blogspot thực sự không khó. Nếu có khó, hãy cứ hỏi tranbadat.info ^_^

Có phải bạn đang gặp khó khăn khi không thể thêm Facebook Pixel vào trang Blogspot của mình để theo dõi đối tượng người dùng của blog? Không sao, ở bài viết này mình sẽ hướng dẫn các bạn cách khắc phục vấn đề không thêm được Facebook Pixel vào Blogspot cũng như chi tiết hướng dẫn thêm Facebook Pixel vào blog của bạn.

Thêm Pixel Facebook cho Blogspot

Các bạn tìm đến bài viết này thì đồng nghĩa đã biết về Facebook Pixel, mình sẽ không đề cập đến nó hoặc đề cập ở một bài viết khác. Còn bây giờ thì tập trung vào cách thêm Facebook Pixel vào blog của bạn thôi.

Các bước để thêm Facebook Pixel vào Blogspot

- Trước tiên chúng ta cần phải lấy mã Pixel này đã, để tạo được Pixel thì bạn cần có một tài khoản quảng cáo. Sau đó hãy truy cập vào đường dẫn sau đây: https://www.facebook.com/ads/manager/pixel/facebook_pixel/


Trong này, chúng ta sẽ có 2 tab, là Pixel Facebook và Pixel theo dõi chuyển đổi (cũ). Nhưng tốt nhất, bạn chỉ nên sử dụng Pixel Facebook mà thôi, bởi Pixel theo dõi chuyển đổi kia sắp được Facebook bỏ đi vào khoảng giữa năm 2016 này, vì những tính năng đã lỗi thời.

- Tiếp tục, ở khu vực Hành động, hãy xổ xuống và chọn Xem mã Pixel nhé:


- Đây, tại đây, khu vực "Thêm mã Pixel (Bắt buộc)" chính là mã Pixel bạn sử dụng để thêm vào trang web, blog của mình.


+ Nếu, bạn chỉ sử dụng Pixel này để thêm vào các website đơn thuần, thì có thể lấy và thêm vào phần thẻ <head> hay khu vực muốn theo dõi luôn.

Đọc thêm:

• Tổng hợp tất cả các icon Facebook

• Các Reactions tuyệt đẹp cho Facebook

+ Còn nếu, bạn sử dụng Pixel này để thêm vào một trang web, blog được làm bằng Blogspot, thì khi thêm vào lưu lại sẽ báo lỗi đó. Vì thế, thay vì sử dụng code Pixel đó, bạn sử dụng code Pixel dưới đây, và thay id Pixel của bạn vào id Pixel hiện tại trong code (Được tô xanh):

<!-- Facebook Pixel Code -->
 <script>
 !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
 n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
 n.push=n;n.loaded=!0;n.version=&#39;2.0&#39;;n.queue=[];t=b.createElement(e);t.async=!0;
 t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
 document,&#39;script&#39;,&#39;//connect.facebook.net/en_US/fbevents.js&#39;);
 fbq(&#39;init&#39;, &#39;4841001684355681&#39;);
 fbq(&#39;track&#39;, &#39;PageView&#39;);
 </script>
 <noscript><img height='1' src='https://www.facebook.com/tr?id=4841001684355681&amp;ev=PageView&amp;noscript=1' style='display:none' width='1'/></noscript>
 <!-- End Facebook Pixel Code -->

Nhớ thay id Pixel của bạn vào id Pixel của đoạn code Facebook Pixel ở trên nhé.

- Sau đó truy cập vào trang quản trị blogspot:  https://www.blogger.com

- Vào Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML):

- Thêm đoạn code Facebook Pixel trên vào trong thẻ <head> và lưu lại.

Lúc này thì bạn đã có thể lưu lại mà không gặp vấn đề gì cả, công việc bây giờ chỉ là theo dõi Pixel để rút ra tệp đối tượng tùy chỉnh của bạn mà thôi.

Các bạn chú ý là mỗi tải khoản quảng cáo Facebook chỉ có thể tạo và sử dụng một Facebook Pixel thôi nhé.

Có phải bạn đang gặp phải lỗi Blogspot không hiển thị đúng số bài viết ngoài trang chủ không? Như bạn cài đặt là hiển thị 6 bài viết nhưng khi kiểm tra ở trang chủ thì số bài viết hiển thị chỉ là 1-5.

Phần lớn các bạn mắc lỗi này là những bạn mới tiếp xúc Blogspot và ít kinh nghiệm trong việc viết bài cũng như sử dụng tối ưu Blogspot. Những bạn đã tiếp xúc nhiều và có kinh nghiệm, hẳn ai cũng biết rằng lỗi này là do đâu, dù là ở bất kỳ template nào được các bạn sử dụng, thì nguyên nhân lỗi vẫn chỉ có 1:

Lỗi không hiển thị đúng số bài viết ở trang chủ Blogspot là do bài viết các bạn quá dài, trong khi giới hạn hiển thị của Blogspot lại ngắn. Ví dụ, bạn có 6 bài viết rất dài, cài đặt hiển thị 6 bài, nhưng do giới hạn hiển thị ở trang chủ Blogspot chỉ có thể hiển thị được nội dung của 4 bài, thì lúc này trang chủ chỉ hiển thị 4 bài.

Cách khắc phục lỗi không hiển thị đúng số bài viết

Cách khắc phục lỗi này cũng cực kỳ đơn giản. Không khó hay rườm rà gì cả. Các bạn chỉ cần chú ý trong quá trình viết bài là được:
- Để khắc phục lỗi này, như đã nói, lỗi là do bài viết quá dài. Thì blogspot cung cấp một công cụ trong trình soạn thảo bài viết, đó là "dấu ngắt nhảy".

Dấu ngắt nhảy

Công dụng của dấu ngắt nhảy này là để cắt phần bài viết hiển thị ở trang chủ, label; còn phần sau dấu ngắt nhảy sẽ được ẩn vào trong "Readmore", điều này sẽ giải quyết được vấn đề bài viết quá dài làm cho trang chủ không hiển thị đúng số bài viết.

Chèn dấu ngắt nhảy vào bài viết

- Vì thế, mỗi khi viết bài, xong đoạn đầu của nội dung, các bạn nên chèn dấu ngắt nhảy này vào. Còn những bạn đã viết bài rồi và mắc phải lỗi ở bài viết này, có thể vào sửa các bài viết gần nhất của bạn và chèn dấu ngắt nhảy này vào để hiển thị lại đúng như số bài viết đã cài đặt.

Đọc thêm:

• Tạo widget cố định khi cuộn trang Blogspot

• Cách tối ưu Adsense trên giao diện Mobile của Blogspot

Công dụng khác của dấu ngắt nhảy trong bài viết

Ngoài công dụng là để ngắt bài viết giúp hiển thị đúng số bài viết ở trang chủ. Thì dấu ngắt nhảy còn có công dụng khác. Đó là:

Giúp bạn tạo Auto Readmore trong RSS và sẽ giúp bạn giảm thiểu tình trạng bị người khác sử dụng các tool để ăn cắp nội dung các bài viết.

Như ảnh dưới đây, trong RSS sẽ tạo thành Read more, khi người khác sử dụng các thủ thuật tự động copy nội dung bài viết của bạn thì chỉ có thể copy đến "Read more" mà thôi.

Chống copy bài viết kết hợp dấu ngắt nhảy

Hôm nay là ngày 30-12-2015 rồi, 1 ngày nữa là sang năm mới tức là tết tây; ngoài ra nay cũng đã là cuối tháng 11 âm, còn hơn 1 tháng nữa là tới Tết của người Việt chúng ta. Không khí tết rộn ràng thì ai cũng thích, và cũng là lúc mọi người tranh thủ thời gian đi ngắm pháo hoa tại các địa điểm trên cả nước.

Hướng dẫn tạo pháo hoa cho Blogspot

</head>

Sau khi thêm vào thẻ <head> và tùy chỉnh các thông số như mong muốn rồi thì có thể lưu lại rồi. Tận hưởng thành quả!

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

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!

Trời dần chuyển lạnh như đang chào đón những ngày Noel sắp đến. Chúng ta đã dần cảm thấy cuộc sống xung quanh như đang chuẩn bị chào đón ngày Giáng sinh này. Các bạn có thể thấy ở rất nhiều cửa hàng, trung tâm thương mại đã trang hoàng để chào đón giáng sinh. Đó là ở bên ngoài, bước lên mạng internet, sẽ không có gì lạ khi bắt gặp những trang web đã thay đổi một giao diện tràn ngập giáng sinh. Vậy những Blogger như chúng ta cũng phải theo cho kịp xu thế chứ?

Tạo ông già Noel bay trong Blogspot

Vì vậy hôm nay, _CTPG_ sẽ hướng dẫn các bạn cách tạo Ông già Noel bay trên trang Blogspot của mình để góp phần trang trí website chào đón ngày Giáng sinh sắp đến. Cách thực hiện vô cùng đơn giản, chẳng tốn nhiều công sức hay gây khó khăn cho bất kỳ Blogger nào. Cùng theo dõi nhé:

Hướng dẫn tạo Ông già Noel cho Blogspot

- Truy cập vào trang quản trị Blogger, tiếp tục vào Mẫu (Template), chọn Chỉnh sửa HTML (Edit HTML)

- Click vào vùng code, tìm đoạn code sau:

</body>

- Sau đó thêm đoạn code này vào ngay bên trên nó, đây chính là đoạn code tạo Ông già Noel với đàn tuần lộc bay qua bay lại trên blog của các bạn:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(function(){
    $('html').append('<img id="halo" title="Happy Noel" style="cursor:pointer;position:fixed;z-index:99999" height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPSqVEaGdFkGZs5XBm80DmZ_i32mynvztU8K-VhHfd1JPiFRb5q8QaT97vQTffC3bZ3Sb62m8jBi8o5PAvDBw7iCoD1VPX235yn2guXNV20Ml5yxhzsoUQHNF_8rJWEsSEqF7XWAEuQsA/s1600/tuan_loc_cho_qua_cua_ong_gia_noel_anh.gif"/>')
    setInterval(function(){
       var $X=Math.ceil(Math.random()*$(window).width())
       var $Y=Math.ceil(Math.random()*$(window).height())
       $('img#halo').animate({'left':$X,'top':$Y},5000)
    },5000)
    $('img#halo').click(function(){
        window.open('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPSqVEaGdFkGZs5XBm80DmZ_i32mynvztU8K-VhHfd1JPiFRb5q8QaT97vQTffC3bZ3Sb62m8jBi8o5PAvDBw7iCoD1VPX235yn2guXNV20Ml5yxhzsoUQHNF_8rJWEsSEqF7XWAEuQsA/s1600/tuan_loc_cho_qua_cua_ong_gia_noel_anh.gif','')
    })
 })
//]]>
</script>

Chú ý, nếu blog của bạn đã có 1 đoạn js tương tự (không cần giống phiên bản 1.10.2) thì bạn nên bỏ đoạn js màu xanh của mình đi.

- Lưu lại
Cũng trong chủ đề giáng sinh, ở bài viết trước mình đã hướng dẫn cách tạo tuyết rơi rồi, kết hợp với bài viết tạo Ông già Noel này thì cơ bản chúng ta đã có một số thay đổi chào đón giáng sinh rồi đó. Sắp tới mình sẽ hướng dẫn cách tạo dàn trang trang trí Noel cùng với nhạc và hiệu ứng như phần trên cùng của mình nhé, nhớ đón đọc nha! ^_^

Bài nên đọc: Template Giáng sinh tuyệt đẹp cho Blogspot

Vì thế, cũng nên hưởng ứng Giáng sinh, nhưng ở cấp độ nhỏ hơn, chỉ là tạo tuyết rơi trên chính Blogspot của các bạn. Vì thế, hôm nay mình sẽ hướng dẫn các bạn cách tạo tuyết rơi cho blog của mình để chào đón mùa Noel sắp đến. Cùng theo dõi nhé:

Cách tạo tuyết rơi cho Blogspot

_CTPG_ sẽ đưa ra nhiều định dạng tuyết rơi khác nhau cho các bạn tùy ý lựa chọn. Thích cái nào thì chọn cái đó.

Hiệu ứng tuyết rơi 1

Hiệu ứng tuyết rơi này khá đơn giản, chỉ là những cục tuyết rơi nhỏ không góc cạnh, nhìn như chấm tròn màu trắng vậy đó.

- Thêm đoạn code js sau vào bên trong thẻ <head>:

<script src='http://static.tumblr.com/2w7y46r/xtmlvfnoc/snowstorm.js'/>

Và lưu lại, chỉ đơn giản như vậy là bạn đã có tuyết rơi trên web của mình rồi đó.
- Ngoài ra, nếu muốn tùy chỉnh nhiều hơn thì các bạn có thể thêm đoạn code nhỏ bên dưới đây vào sau nó và tùy chỉnh theo ý muốn:

<script type="text/javascript">
snowStorm.snowColor = '#fff'; // Màu của tuyết rơi
snowStorm.flakesMaxActive = 96; // Số lượng tuyết tối đa trên màn hình
snowStorm.snowStick = true; // Nếu chuyển thành false thì tuyết sẽ không đọng ở cuối trang web
</script>

Xem thêm: Trang trí giáng sinh với Ông già Noel bay

Hiệu ứng tuyết rơi 2

Đây là hiệu ứng tạo ra tuyết hình sao, tuyết nhỏ, rơi khá chậm và không dày đặc.

- Thêm đoạn code này vào bên trong thẻ <body>:

<SCRIPT type="text/javascript">
//<![CDATA[
// Số bông tuyết (Không khuyến khích nhiều hơn 30-40)
var snowmax=35
// Tùy chọn màu sắc cho tuyết, có thể nhiều màu khác nhau như bên dưới
var snowcolor=new Array("#aaaacc","#ddddff","#ccccdd","#f3f3f3","#f0ffff")
// Thiết lập font chữ để tạo ra tuyết, vì các font chữ khác nhau thì hình dạng dấu * cũng khác nhau
var snowtype=new Array("Times","Arial","Times","Verdana")
// Thiết lập ký tự tạo ra tuyết (Khuyến khích: *)
var snowletter="*"
// Thiết lập tốc độ rơi xuống (Đề nghị trong khoảng 0.3-2)
var sinkspeed=0.6
// Kích thước tối đa của bông tuyết
var snowmaxsize=30
// Kích thước tối thiểu của bông tuyết
var snowminsize=8
// Thiết lập vùng tuyết rơi
// 1 cho toàn bộ trang web, 2 cho phần bên trái
// 3 cho phần trung tâm, 4 cho phần bên phải
var snowingzone=1
///////////////////////////////////////////////////////////////////////////
// OK
///////////////////////////////////////////////////////////////////////////
// Không được chỉnh code ở bên dưới
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera
function randommaker(range) {
        rand=Math.floor(range*Math.random())
    return rand
}
function initsnow() {
        if (ie5 || opera) {
                marginbottom = document.body.scrollHeight
                marginright = document.body.clientWidth-15
        }
        else if (ns6) {
                marginbottom = document.body.scrollHeight
                marginright = window.innerWidth-15
        }
        var snowsizerange=snowmaxsize-snowminsize
        for (i=0;i<=snowmax;i++) {
                crds[i] = 0;
            lftrght[i] = Math.random()*15;
            x_mv[i] = 0.03 + Math.random()/10;
                snow[i]=document.getElementById("s"+i)
                snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
                snow[i].size=randommaker(snowsizerange)+snowminsize
                snow[i].style.fontSize=snow[i].size+'px';
                snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
                snow[i].style.zIndex=1000
                snow[i].sink=sinkspeed*snow[i].size/5
                if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
                if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
                if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
                if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
                snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)
                snow[i].style.left=snow[i].posx+'px';
                snow[i].style.top=snow[i].posy+'px';
        }
        movesnow()
}
function movesnow() {
        for (i=0;i<=snowmax;i++) {
                crds[i] += x_mv[i];
                snow[i].posy+=snow[i].sink
                snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+'px';
                snow[i].style.top=snow[i].posy+'px';
                if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
                        if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
                        if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
                        if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
                        if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
                        snow[i].posy=0
                }
        }
        var timer=setTimeout("movesnow()",50)
}
for (i=0;i<=snowmax;i++) {
        document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
        window.onload=initsnow
}
//]]>
</SCRIPT>

Các thông số các bạn có thể điều chỉnh theo ý thích của mình dựa vào mấy cái chú thích mình ghi trong đoạn code trên nhé.

Xem thêm: Template Giáng sinh cho Blogspot

Hiệu ứng tuyết rơi 3

Đây là hiệu ứng tạo tuyết rơi nhanh, dày đặc và rất to. Có thể thiết lập tự động tắt hiệu ứng sau một thời gian chỉ định. Và có thể tùy ý cấu hình hình dạng của bông tuyết khi rơi xuống.

- Thêm đoạn code bên dưới đây vào thẻ <body>:

<SCRIPT type="text/javascript" language="JavaScript1.2">
//<![CDATA[
//Pre-loads your image/s below
//Thay đổi đường dẫn hình ảnh tuyết nếu bạn muốn tuyết hình khác
grphcs=new Array(6)
Image0=new Image();
Image0.src=grphcs[0]="http://rainbow.arch.scriptmania.com/scripts/bg/snow1.gif";
Image1=new Image();
Image1.src=grphcs[1]="http://rainbow.arch.scriptmania.com/scripts/bg/snow2.gif"
Image2=new Image();
Image2.src=grphcs[2]="http://rainbow.arch.scriptmania.com/scripts/bg/snow3.gif"
Image3=new Image();
Image3.src=grphcs[3]="http://rainbow.arch.scriptmania.com/scripts/bg/snow4.gif"
Image4=new Image();
Image4.src=grphcs[4]="http://rainbow.arch.scriptmania.com/scripts/bg/snow5.gif"
Image5=new Image();
Image5.src=grphcs[5]="http://rainbow.arch.scriptmania.com/scripts/bg/snow6.gif"
//Smoothness depends on image file size,
//the smaller the size the more you can use!
// Configure below - change number of snow to render
Amount=40;
Ypos=new Array();
Xpos=new Array();
Speed=new Array();
Step=new Array();
Cstep=new Array();
ns=(document.layers)?1:0;
ns6=(document.getElementById&&!document.all)?1:0;
var Stop = false;
if (ns){
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"></LAYER>");
}
}
else{
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
}
document.write('</div></div>');
}
WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
for (i=0; i < Amount; i++){
Ypos[i] = Math.round(Math.random()*WinHeight);
Xpos[i] = Math.round(Math.random()*WinWidth);
Speed[i]= Math.random()*5+3;
Cstep[i]=0;
Step[i]=Math.random()*0.1+0.05;
}
function fall(){
if (Stop) { clearSnow(); return; }
var WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
var WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
var hscrll=(ns||ns6)?window.pageYOffset:document.body.scrollTop;
var wscrll=(ns||ns6)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < Amount; i++){
sy = Speed[i]*Math.sin(90*Math.PI/180);
sx = Speed[i]*Math.cos(Cstep[i]);
Ypos[i]+=sy;
Xpos[i]+=sx;
if (Ypos[i] > WinHeight){
Ypos[i]=-60;
Xpos[i]=Math.round(Math.random()*WinWidth);
Speed[i]=Math.random()*5+3;
}
if (ns){
document.layers['sn'+i].left=Xpos[i];
document.layers['sn'+i].top=Ypos[i]+hscrll;
}
else if (ns6){
document.getElementById("si"+i).style.left=Math.min(WinWidth,Xpos[i]);
document.getElementById("si"+i).style.top=Ypos[i]+hscrll;
}
else{
eval("document.all.si"+i).style.left=Xpos[i];
eval("document.all.si"+i).style.top=Ypos[i]+hscrll;
}
Cstep[i]+=Step[i];
}
setTimeout('fall()',20);
}
window.onload=fall;
//  *****  Delay FUNCTION HERE  *****
setTimeout("Stop=true", 20000);  //  *****  Delay 1000 = 1 second  *****
function clearSnow(){
for (i=0; i < Amount; i++){
if (ns){
document.layers['sn'+i].display='none';
}
else if (ns6){
document.getElementById("si"+i).style.display='none';
}
else{
eval("document.all.si"+i).style.display='none';
}
}
}
//-->
//]]>
</SCRIPT>

Bạn có thể tùy ý tùy chỉnh hình ảnh của bông tuyết, bằng cách thay ảnh khác vào vị trí các hình ảnh bông tuyết mình để ở trên. Và có thể cài đặt thời gian tắt hiệu ứng bằng cách thay đổi con số 20000 kia, 20000 này là 20s nhé.

Chỉ với một trong 3 cách tạo tuyết rơi cho Blogspot này, bạn đã trang hoàng cho website mình một ít không khí Noel rồi đó. Hãy trang trí một ít cho blog của mình để đón chào Noel nhé.

Bạn tham gia MMO và muốn tìm cách tạo widget cố định khi cuộn trang cho Blogspot của mình để tăng tỉ lệ click? Hay bạn muốn hướng người đọc đến những nội dung nổi bật của website mình bằng cách cố định một phần widget của mình khi cuộn trang nhằm gây chú ý cho người đọc?

Cách tạo widget cố định khi cuộn trang

Xem thêm: Cách tạo thanh menu cố định khi cuộn trang

RSS hay Feedburner là nguồn cấp dữ liệu miễn phí được Google cung cấp giúp các webmaster có thể quảng bá, quảng cáo, tối ưu hóa cũng như kiếm thêm thu nhập từ quảng cáo.

Cùng với đó, RSS hay Feed là rất cần thiết cho một website. Ví dụ, chúng ta có thể sử dụng RSS hay Feed để sử dụng làm một nguồn cấp dữ liệu qua mail cho những người dùng đăng ký. Ở bài viết trước _CTPG_ có hướng dẫn các bạn cách tạo hộp mail để người dùng theo dõi qua email, các bạn có thể xem tại đây. Đó chính là một ứng dụng của RSS -  Feed.


Một vài công cụ kiểm tra việc tối ưu SEO Onpage cũng đưa Feed vào như một yêu cầu trong onpage, thực hư việc có Feed tác động đến SEO như thế nào thì mình vẫn chưa rõ, nhưng dù sao, có Feed và RSS vẫn còn tốt hơn không. Ví dụ trên chính là một điển hình.

Hướng dẫn tạo RSS Feedburner và thêm Feed vào Blogspot

Ở bài viết này, _CTPG_ sẽ hướng dẫn các bạn sử dụng Feed của Google, cùng với đó là khai báo Feed vào chính Blogspot của các bạn.

Cách tạo Feedburner

- Đầu tiên, truy cập vào đường dẫn sau: https://feedburner.google.com

- Nếu có bắt đăng nhập tài khoản Google thì cứ đăng nhập bình thường thôi nhé. Và chúng ta sẽ có giao diện sau:


Hãy nhập đường dẫn Blogspot của bạn vào tùy chọn Burn a feed right this instant, sau đó bấm Next

Xem thêm: Tổng hợp những thủ thuật hay cho Blogspot

- Sẽ có 3 tùy chọn cho các bạn, ở đây chúng ta đang tạo RSS thì các bạn có thể chọn tùy chọn RSS, rồi bấm Next


- Tại đây, đây chính là tùy chọn cho bạn đặt đường dẫn tùy chỉnh cho RSS của mình, hãy sửa lại cho vừa ý và tiếp tục Next


- Phía trên chính là đường dẫn hoàn chỉnh Feed của bạn, OK rồi thì Next tiếp, các bước tiếp theo các bạn cứ bấm Next:


- Xong, với giao diện thông báo này tức là bạn đã hoàn thành việc tạo RSS - Feed cho blog của mình.

Và đây chính là Feed mà mình vừa tạo, các bạn có thể tham khảo:

http://feeds.feedburner.com/caucavietnam

Hướng dẫn khai báo feed cho Blogspot

Để khai báo Feed cho Blogspot, bạn truy cập vào trang quản trị Blogspot. Sau đó vào Cài đặt (Settings) -> Khác. Sau đó thêm đường dẫn feed vừa tạo vào URL chuyển hướng nguồn cấp dữ liệu bài đăng, sau đó lưu lại là xong.


Như vậy là sau bài hướng dẫn này, các bạn đã tạo RSS Feedburner cho Blogspot của mình, cũng như đã khai báo Feed cho Blogspot của bạn, giúp trang web được index nhanh hơn.

Xem thêm: Hướng dẫn tối ưu SEO Blogspot chuẩn không cần chỉnh

Nếu có khó khăn gì thì cứ cmt bên dưới nhé. Và nhớ theo dõi _CTPG_ để nhận được những bài viết hữu ích nha.