Test: Blogspot

Showing posts with label Blogspot. Show all posts

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

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.

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

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.

Đấy, đơn giản thì Google Tag Manager là để quản lý tất cả các code theo dõi cần được thêm vào website.

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'?'&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 ^_^

Làm thế nào để thêm Facebook Pixel vào Blogspot?

Tran ba Dat April 26, 2016 3 Blogspot , Facebook , Thủ thuật Blogspot

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.

Làm thế nào để thêm Facebook Pixel vào Blogspot?

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):

<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='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','//connect.facebook.net/en_US/fbevents.js');
fbq('init', '4841001684355681');
fbq('track', 'PageView');
</script>
<noscript><img height='1' src='https://www.facebook.com/tr?id=4841001684355681&ev=PageView&noscript=1' style='display:none' width='1'/></noscript>

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é.

Hướng dẫn hiển thị đúng số bài viết ở trang chủ Blogspot

Tran ba Dat April 17, 2016 2 Blogspot , Thủ thuật Blogspot

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.

Hướng dẫn hiển thị đúng số bài viết ở trang chủ Blogspot

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ướng dẫn tạo pháo hoa mừng năm mới cho Blogspot

Tran ba Dat December 30, 2015 1 Blogspot , Thủ thuật Blogspot

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 mừng năm mới cho Blogspot

Cách tạo pháo hoa cho Blogspot

Nghĩ đến pháo hoa, tại sao lại không tạo pháo hoa mừng năm mới trang hoàng cho các trang blog, web, mà cụ thể ở đây là cho Blogspot của mình chứ. Chính vì ý tưởng này, hôm nay mình sẽ hướng dẫn các bạn cách tạo pháo hoa cho Blogspot để chào mừng năm mới. Cũng như cho trang blog, web của các bạn đẹp hơn, có không khí năm mới hơn.

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

Đơn giản, dễ làm và ai cũng làm được, đó là tất cả những gì cần nói về thủ thuật tạo pháo hoa cho Blogspot này. Cùng theo dõi nhé:

- Truy cập vào trang quản trị blog của các bạn.

Nên đọc: Cách tạo hộp thoại theo dõi qua email cho Blogspot

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

- Sau đó click vào vùng code, và bấm Ctrl + F để mở hộp tìm kiếm, sau đó tìm đến thẻ này:

</head>

- Thêm đoạn code sau vào ngay bên trên nó, đây chính là đoạn code để tạo ra pháo hoa:

<script type="text/javascript">
// <![CDATA[
var bits=80;
var speed=40; // Tốc độ như thế nào, càng nhỏ càng nhanh
var bangs=10; // Số pháo hoa có thể xuất hiện cùng lúc (Nhiều quá sẽ có thể gây lag cho trình duyệt)
var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cf", "#f93", "#f0c");
// Xanh Đỏ Xanh lá Tía Xanh cyan Cam Hồng
var bangheight=new Array();
var intensity=new Array();
var colour=new Array();
var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var stars=new Array();
var decay=new Array();
var swide=800;
var shigh=600;
var boddie;
window.onload=function() { if (document.getElementById) {
var i;
boddie=document.createElement("div");
boddie.style.position="fixed";
boddie.style.top="0px";
boddie.style.left="0px";
boddie.style.overflow="visible";
boddie.style.width="1px";
boddie.style.height="1px";
boddie.style.backgroundColor="transparent";
document.body.appendChild(boddie);
set_width();
for (i=0; i<bangs; i++) {
write_fire(i);
launch(i);
setInterval('stepthrough('+i+')', speed);
}
}}
function write_fire(N) {
var i, rlef, rdow;
stars[N+'r']=createDiv('|', 12);
boddie.appendChild(stars[N+'r']);
for (i=bits*N; i<bits+bits*N; i++) {
stars[i]=createDiv('*', 13);
boddie.appendChild(stars[i]);
}
}
function createDiv(char, size) {
var div=document.createElement("div");
div.style.font=size+"px monospace";
div.style.position="absolute";
div.style.backgroundColor="transparent";
div.appendChild(document.createTextNode(char));
return (div);
}
function launch(N) {
colour[N]=Math.floor(Math.random()*colours.length);
Xpos[N+"r"]=swide*0.5;
Ypos[N+"r"]=shigh-5;
bangheight[N]=Math.round((0.5+Math.random())*shigh*0.4);
dX[N+"r"]=(Math.random()-0.5)*swide/bangheight[N];
if (dX[N+"r"]>1.25) stars[N+"r"].firstChild.nodeValue="/";
else if (dX[N+"r"]<-1.25) stars[N+"r"].firstChild.nodeValue="\\";
else stars[N+"r"].firstChild.nodeValue="|";
stars[N+"r"].style.color=colours[colour[N]];
}
function bang(N) {
var i, Z, A=0;
for (i=bits*N; i<bits+bits*N; i++) {
Z=stars[i].style;
Z.left=Xpos[i]+"px";
Z.top=Ypos[i]+"px";
if (decay[i]) decay[i]--;
else A++;
if (decay[i]==15) Z.fontSize="7px";
else if (decay[i]==7) Z.fontSize="2px";
else if (decay[i]==1) Z.visibility="hidden";
Xpos[i]+=dX[i];
Ypos[i]+=(dY[i]+=1.25/intensity[N]);
}
if (A!=bits) setTimeout("bang("+N+")", speed);
}
function stepthrough(N) {
var i, M, Z;
var oldx=Xpos[N+"r"];
var oldy=Ypos[N+"r"];
Xpos[N+"r"]+=dX[N+"r"];
Ypos[N+"r"]-=4;
if (Ypos[N+"r"]<bangheight[N]) {
M=Math.floor(Math.random()*3*colours.length);
intensity[N]=5+Math.random()*4;
for (i=N*bits; i<bits+bits*N; i++) {
Xpos[i]=Xpos[N+"r"];
Ypos[i]=Ypos[N+"r"];
dY[i]=(Math.random()-0.5)*intensity[N];
dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25;
decay[i]=16+Math.floor(Math.random()*16);
Z=stars[i];
if (M<colours.length) Z.style.color=colours[i%2?colour[N]:M];
else if (M<2*colours.length) Z.style.color=colours[colour[N]];
else Z.style.color=colours[i%colours.length];
Z.style.fontSize="13px";
Z.style.visibility="visible";
}
bang(N);
launch(N);
}
stars[N+"r"].style.left=oldx+"px";
stars[N+"r"].style.top=oldy+"px";
}
window.onresize=set_width;
function set_width() {
var sw_min=999999;
var sh_min=999999;
if (document.documentElement && document.documentElement.clientWidth) {
if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
}
if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
}
if (document.body.clientWidth) {
if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
}
if (sw_min==999999 || sh_min==999999) {
sw_min=800;
sh_min=600;
}
swide=sw_min;
shigh=sh_min;
}
// ]]>
</script>

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ả!

Như thế là chỉ với vài bước ngắn gọn là đã có thể tạo pháo hoa cho Blogspot để mừng năm mới đến cũng như để trang trí thêm cho Blogspot. Chúc các bạn thành công và nhớ theo dõi để nhận những thủ thuật Blogger mới nhé.

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

Tran ba Dat December 21, 2015 Blogspot , Thủ thuật Blogspot

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEJPIRhomKBqCVDvHuAqVjjLfgAT6Th5XR6Cr3TBD1qM7qbSZef1laN-pv8FWNbG7iJ05pStpJIwree2L79D6jHAKvI65mdFKsArxQteHJ83EtzP6qcTGrkEKz_Z73O5fOmKJz3glEgPzC/s1600/giang-sinh.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1quc3SENFdE9vHtJbS61CnLek7vPo-1RFkNRdpUt73fZqScg1EQoaWBGmXaE7_1v1hg4lrqUEmwVPnH8jATHfOiES4hmKFgP3cwaU37t-qLgO4VpYPw69xfk4iFeH4UFD5337KhqnsUU/s1600/b-ball_n1.png') no-repeat; }
.b-ball_n2 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-UjRadE80UMnqoJ19WuDSkPNSq0B-i5CchO0_81pmZ6B2WO5h1mQELXNJFPyJK9N5Hgvsqf4ZO9SOl50kC-iHpmfxpNrwQLVE4EGD-QflhB3yuDi0EkKdUYAWZooWpB53UmkqGE-Rcbc/s1600/b-ball_n2.png') no-repeat; }
.b-ball_n3 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnZUPaisr4y99Fk-F_FDZX4Ua_pWpkH3Oy6QWcuzHdgpGj0XbzPyQuK0wWg0SDISs3_w_yIhfzBPvBFWRzxMFMUF926LiuXsAiwZBPhJp_GPvsu3MPHo8KU0u30uVLJLPkfzV6Q_llXCY/s1600/b-ball_n3.png') no-repeat; }
.b-ball_n4 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6M7QJ9tG5Vl2pQ_RkwbnCQcU7gu35w6AW_7Ota3rvyXIBhQMBy8pdJbkUZmPHuoI4co-7Jl-RGJg46WuxOXrVPCgatMOqDZiPPQMEiadWS9Yjgfs63p30gPO71fj4H-E2weyvaw4Gv18/s1600/b-ball_n4.png') no-repeat; }
.b-ball_n5 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzQP13KqmBdX9qeWXOLB3208Jr_JMGhSSGWGpbv24TdKSPWs1gl3RrKF39Vu-x8Dx1CQMEBILUnEbdp1gptexz55PUdggkH7iq5Ith4H1t_h76GdXD2IEfEsu4wRa-iQ9j8RJsunb6Gvs/s1600/b-ball_n5.png') no-repeat; }
.b-ball_n6 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNdrp7XRtYZgLzwAHyRLCtIfhBuLQ4FT4DkEy7zINS_dS_eVCmgFdXDXNRgeLNyXaWy8WIdTv7sHFMaoxVlVqCdx2ef9sgWW2wXKxZVXgB4PTaRm6RTCP6EuBn1_PhbyTF1qQcA1Rem5w/s1600/b-ball_n6.png') no-repeat; }
.b-ball_n7 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHXF6IW-zBU1ohg5CUku72_8_LeO4zpX56Xqku92G1MdWOva-YHWJEPtZECHx8GvL7pyUmTeabihUBKeDHtBDRr_9oCx3n6Q6fh-prvrHTQCT1MHLYGDt6gZbpfUN0bMfyPWVRvhXUuDc/s1600/b-ball_n7.png') no-repeat; }
.b-ball_n8 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5UQ9Kq9zhtKj3rEnJiBhyphenhyphenAgTogEGg5FQc1-BHsIAP9TOPgwpBVRIzwq1mS6e0NrikzoI7jZRgypznlckcGOiw_7gE_2BSRw_tD7wsidGSR1y1_36eXR7D6ro_YcFH30uxU1ciuNi2-1o/s1600/b-ball_n8.png') no-repeat; }
.b-ball_n9 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQSv7Vfrx7yvpoXp9TWS1CLx7f09_wCeXuqQ8PM97cUtd2-GP_EJXbiLHP1_Dj5mj4HbS1RwEnC6idcRw4OktIeidi9OaQWQkujZ4QpvtjIWtXhOJHFLIAtSV9zWdyWUrtQltSRQm_kxo/s1600/b-ball_n9.png') no-repeat; }
.b-ball_i1 .b-ball__i { background:url('https://lh6.googleusercontent.com/-QhhDd1SE_V0/UMB0PA61nFI/AAAAAAAACzg/CXvrLe3CRjI/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/b-ball_i3.png') no-repeat; }
.b-ball_i4 .b-ball__i { background:url('https://lh6.googleusercontent.com/-o2OZuJyWj4s/UMB0QoPX2KI/AAAAAAAACz4/JQIHqmVrhS8/b-ball_i4.png') no-repeat; }
.b-ball_i5 .b-ball__i { background:url('https://lh5.googleusercontent.com/-kG7U9F_tEx4/UMB0QYsHNLI/AAAAAAAACzw/3QInJrJIIfA/b-ball_i5.png') no-repeat; }
.b-ball_i6 .b-ball__i { background:url('https://lh4.googleusercontent.com/-TWr-kxeQTSc/UMB0UdruXgI/AAAAAAAAC0E/CS9sAXVQ_9E/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); }
</style>

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):

<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>

- 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!

Trang trí giáng sinh với Ông già Noel cho Blogspot

Tran ba Dat December 18, 2015 Blogspot , Thủ thuật Blogspot

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ứ?

Trang trí giáng sinh với Ông già Noel cho Blogspot

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

Cách tạo tuyết rơi cho Blogspot đón mừng Giáng sinh

Tran ba Dat December 12, 2015 Blogspot , Thủ thuật Blogspot

Giáng sinh cũng sắp đến rồi, không khí Noel cũng tràn ngập các con đường ở những thành phố lớn. Và cũng rất nhiều website, đã thay đổi để tạo nên một không khí noel hòa cùng với cuộc sống. Dù sự thay đổi đó là lớn như thay đổi hoàn toàn giao diện web, hay chỉ nhỏ và đơn giản như tạo tuyết rơi.

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é.

Tạo widget cố định (Sticky widget) khi cuộn trang cho Blogspot

Tran ba Dat December 09, 2015 10 Blogspot , Google-Adsense , Thủ thuật Blogspot

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?

Tạo widget cố định (Sticky widget) khi cuộn trang cho Blogspot

Hướng dẫn tạo widget cố định khi cuộn trang

Thực ra mà nói, thì việc cố định một phần widget cho Blogspot hay các website khác sẽ mang đến nhiều lợi ích khác nhau cho website đó, ví dụ như 2 lợi ích trên: Khi muốn tăng tỉ lệ click vào các banner quảng cáo, hay khi muốn làm người dùng chú ý đến những nội dung được cung cấp trên widget.

Với hướng dẫn tạo sticky widget khi cuộn trang ở bài viết này, bạn có thể dễ dàng tùy chỉnh các thông số khoảng cách để quy định khả năng trượt theo của widget cần cố định. Cùng xem nhé.

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

Để tạo được widget như vậy không khó, chỉ với vài bước cơ bản là các bạn đã hoàn thành rồi.

- Đầu tiên là vào trang quản trị Blogger

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

- Sau đó, vào bố cục, chọn Widget bạn cần cố định, và tiến hành chỉnh sửa.

- Thêm đoạn code này vào trong widget đó, nhớ đưa phần nội dung code ban đầu vào đúng vị trí nhé:

<script>
var $stickyHeight = 460; // chiều cao của banner quảng cáo
var $padding = 5; // khoảng cách top của banner khi dính
var $topOffset = 2560; // khoảng cách từ top của banner khi bắt đầu dính (tức là khoảng cách tính từ trên xuống đến vị trí đặt banner )
var $footerHeight = 100; // Định vị điểm dừng của banner, tính từ chân lên
/* <![CDATA[ */
function scrollSticky(){
if($(window).height() >= $stickyHeight) {
var aOffset = $('#sticky').offset();
if($(document).height() - $footerHeight - $padding < $(window).scrollTop() + $stickyHeight) {
var $top = $(document).height() - $stickyHeight - $footerHeight - $padding - 185;
$('#sticky').attr('style', 'position:absolute; top:'+$top+'px;');
}else if($(window).scrollTop() + $padding > $topOffset) {
$('#sticky').attr('style', 'position:fixed; top:'+$padding+'px;');
}else{
$('#sticky').attr('style', 'position:relative;');
}
}
}
$(window).scroll(function(){
scrollSticky();
});
/* ]]> */
</script>
<div id="sticky">
Đặt code quảng cáo của bạn
</div>

Trong đó, chúng ta có những thông tin được giải thích rõ như khoảng cách từ trên xuống, khoảng cách bao nhiêu thì bắt đầu áp dụng cố định widget, khoảng cách bao nhiêu từ dưới lên sẽ dừng... Các bạn tùy chỉnh cho phù hợp với website mình nhé.

Và phần "Đặt code quảng cáo của bạn" chính là vị trí cần đặt của nội dung nhé.

- Lưu lại và tận hưởng thành quả

Như vậy là chỉ với vài bước đơn giản bạn đã có thể tạo cho mình một widget cố định khi cuộn trang, hy vọng với thủ thuật nhỏ này thì các bạn sẽ tăng được ít nhiều thu nhập của mình.

Chúc các bạn thành công. Nhớ theo dõi chuyên mục "Thủ thuật Blogger" này nhé. :)

Cách tạo RSS Feedburner và thêm Feed vào Blogspot

Tran ba Dat December 02, 2015 7 Blogspot , Thủ thuật Blogspot

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.

Cách tạo RSS Feedburner và thêm Feed vào Blogspot

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.

Hướng dẫn tạo hộp Feedburner theo dõi qua email

Tran ba Dat November 27, 2015 1 Blogspot , Thủ thuật Blogspot

Nhiều bạn thường xuyên hỏi _CTPG_ cách tạo hộp Feedburner theo dõi qua email như ở thanh sidebar của mình. Hộp theo dõi qua email này nhìn rất đơn giản nhưng không kém phần đẹp mắt và hiệu quả.

Hướng dẫn tạo hộp Feedburner theo dõi qua email

Thực chất thì có nhiều cách để giúp mọi người theo dõi chúng ta khi làm bằng Blogspot, thông qua nhiều kênh hỗ trợ khác nhau, nhưng thường thì mọi người sẽ chọn RSS, hay còn gọi là Feed, bởi rất nhanh chóng, dễ dàng và tất nhiên tiện lợi hơn các kênh khác.

Xem thêm: Hướng dẫn tạo nút chia sẻ bài viết hiệu ứng trượt tuyệt đẹp

Các bước để người dùng theo dõi chúng ta sau khi có hộp theo dõi qua email này khá đơn giản, chỉ cần nhập địa chỉ email vào và chọn nút theo dõi là sẽ hoàn thành. Đơn giản và hiệu quả! Cùng xem hướng dẫn nào.

Hướng dẫn tạo hộp theo dõi qua email bằng Feedburner

Chú ý là, để tạo được hộp theo dõi qua email này thì buộc các bạn phải tạo được RSS (Cũng là Feed đó mà) trước cho mình, cách tạo RSS như thế nào thì xem ở bài viết này nhé: Cách tạo RSS Feedburner cho Blogspot. Còn ở bài này, nếu các bạn chưa tạo RSS thì một là đợi bài tiếp theo của mình, hai là Google xem bài hướng dẫn khác nha.

- Truy cập vào địa chỉ sau: https://feedburner.google.com

Đây là địa chỉ của Feed, nếu bạn đã tạo RSS cho blog của mình thì sẽ có tên blog ở đó. Hãy truy cập vào blog của bạn.

- Chuyển sang tab Publicize:

- Tiếp tục chọn tùy chọn Email Subscriptions:

- Ở mục Subscription Form Code, đây chính là đoạn code để chúng ta chèn vào Blogspot tạo hộp theo dõi qua email. Hãy copy hết đoạn code này:

- Vào Bố cục (Layout), rồi chọn vị trí muốn thêm hộp theo dõi vào, và chọn thêm tiện ích, chọn HTML/Javascript, và cho đoạn code tạo hộp theo dõi lúc nãy vào phần nội dung.

Xem thêm: Hướng dẫn tạo widget xếp hạng bình luận cho Blogspot

Sau đó lưu lại, và thế là ta đã có một hộp theo dõi qua email cho Blogspot rồi đó :)

Hướng dẫn tối ưu label thành một bài viết cho Blogspot

Tran ba Dat November 17, 2015 16 Blogspot , seo-blogspot , Thủ thuật Blogspot

Mặc dù label của Blogspot theo nhiều người dùng thì rất khó tối ưu và gần như không SEO được. Tuy nhiên, đó chỉ là vấn đề bó hẹp với kiến thức của họ mà thôi. Bạn vẫn có thể tối ưu label tốt, thậm chí biến label của Blogspot thành một bài viết, dễ dàng chỉnh sửa và tối ưu.

Ở bài viết trước, _CTPG_ đã hướng dẫn các bạn cách tối ưu label bằng cách tối ưu tiêu đề và tối ưu mô tả cho các label. Các bạn có thể xem ở đây: http://www.tranbadat.info/2015/08/toi-uu-seo-blogspot-cho-label-cuc-don-gian.html . Nhưng nếu với chỉ nhiêu đó, thì bạn cần một lượng backlink lớn hay SEO một từ khóa dễ mới có thể đưa các label này lên top dễ dàng.

Tối ưu label thành một bài viết

Còn ở bài viết này, _CTPG_ sẽ hướng dẫn các bạn một kiến thức nâng cao hơn nữa, đó là biến Label thành một bài viết, mà ở đó, bạn có thể dễ dàng tùy chỉnh, cập nhật nội dung cho bài viết label này. Nghe có hứng thú không chứ?

Các bạn có thể xem một label minh họa cho bài viết này tại label SEO BLOGSPOT này của mình. Label này thực ra đang đứng 9 từ khóa SEO Blogspot mặc dù không cần backlink, tuy nhiên, nó chỉ đứng 9 mỗi khi mình update nội dung và cập nhật lại cho Google, chứ khoảng 3-4 ngày sau nó lại biến mất, thay bằng 1 bài viết vì có 1 bài viết khác tối ưu tương đương nó và nhưng lại có traffic nhiều hơn.

Thôi, lan man đủ rồi, vào vấn đề chính thôi.

Hướng dẫn tối ưu label thành một bài viết

Ý tưởng thì chính là nó, biến label thành một bài viết. Và nếu các bạn đã đọc qua bài viết tối ưu SEO cho label mình vừa nhắc ở trên, thì bạn sẽ thấy mình tiếp tục áp dụng lại kiến thức ở bài viết đó đấy.

- Kiến thức đó chính là đoạn code này:

<b:if cond='data:blog.url == "URL của trang riêng biệt"'> nội dung sẽ hiển thị </b:if>

Với đoạn code này, bạn sẽ chỉ định nội dung hiển thị bên trong nó chỉ được hiển thị khi truy cập vào URL được chỉ định ở trên.
Có nghĩa là, mình sẽ viết 1 bài viết cho Label này, và áp dụng code trên để chỉ hiển thị nội dung bài viết khi vào label này.

Và đây chính là nội dung bài viết của label SEO Blogspot được mình viết trong code của blog:

Một định dạng cơ bản để biến label thành một bài viết (Click vào xem ảnh đầy đủ)

- Vậy, lúc này quan trọng chính là đặt đoạn code chứa bài viết trên ở vị trí nào thôi. Cái này thì tùy vào blog của các bạn. Ý tưởng luôn là đặt ngay vị trí dưới cùng của label, nếu các blog có phân trang thì ngay dưới phần phân trang. Điều này giúp đẹp blog và không ảnh hưởng nhiều tới người xem. (Như của mình đấy)

Đấy, chỉ như vậy thôi. Mình không thể chỉ cặn kẽ, vì các template khác nhau sẽ có các khu vực khác nhau để có thể chèn nội dung. Chúc các bạn tối ưu label thật tốt cho SEO :)

Cách tùy chỉnh quảng cáo Adsense trên giao diện mobile

Tran ba Dat November 14, 2015 10 Blogspot , Google-Adsense , Thủ thuật Blogspot

Cách tùy chỉnh hiển thị quảng cáo trên giao diện Mobile trên Blogspot? là câu hỏi được rất nhiều bạn giúp mình giải đáp. Do thời gian gần đây hơi bận nên chưa viết hướng dẫn được, hôm nay có rảnh tí nên viết bài này để hướng dẫn các bạn tối ưu quảng cáo Google Adsense trên cả giao diện Mobile.

Cách tùy chỉnh quảng cáo Adsense trên giao diện mobile

Vì sao phải tùy chỉnh hiển thị quảng cáo Adsense trên Mobile cho Blogspot?

Nếu bạn đang sở hữu tài khoản Google Adsense, bạn sẽ thấy rằng các kích thước quảng cáo nội dung của Google Adsense phần lớn cố định ở các kích thước, như 326x280, 720x90… Tuy nhiên, những kích thước quảng cáo này nếu được đặt lên 1 website có giao diện responsive, thì khi với những điện thoại hay màn hình có kích thước nhỏ dưới 6 inch, các kích thước quảng cáo trên sẽ bị tràn ra ngoài màn hình hay bị các thành phần khác che mất, đây là lại 1 điều cấm kỵ trong chính sách của Google Adsense. Mà đặt như thế này cũng không hề hiệu quả, mà lại làm xấu cả giao diện nữa.

Google Adsense cũng có quảng cáo Responsive, tương thích cho tất cả các kích thước màn hình. Tuy nhiên, thật sự quảng cáo này được mình sử dụng không thấy có sự hữu dụng lắm. Ví dụ như sau: Nếu mình đặt quảng cáo Responsive vào một vị trí có chiều rộng lớn nhất là 720px, thì thay vì tự động chọn kích thước hiển thị (lúc trên các màn hình máy tính) là 720x90 cho các quảng cáo, thì quảng cáo responsive này lại thường xuyên là 300x600, nhìn thật tồi tệ. Thậm chí bạn đặt 1 quảng cáo responsive lên 1 thanh sidebar có chiều rộng khoảng 300px, thì không bao giờ bạn được nhìn thấy một kích thước là 300x250px trên các màn hình máy tính, luôn là 300x600. Đó chính là những lý do mình gần như không sử dụng quảng cáo responsive.
Chính vì những lý do trên, mình luôn phải sử dụng các kích thước có sẵn của Google Adsense, nhưng sử dụng các thủ thuật blogspot để tùy chỉnh hiển thị quảng cáo trên cả máy tính và di động, để đảm bảo giao diện nhìn tốt nhất, lại không vượt quá 3 quảng cáo trên 1 trang hay bị lỗi đè giao diện.

Cách tùy chỉnh quảng cáo Adsense trên giao diện mobile cho Blogspot

Mình muốn hướng dẫn 1 bài đầy đủ, nhưng có vấn đề là mình viết ra rất khó hiểu, đến mình đọc lại cũng không dám chắc các bạn sẽ hiểu mình đang nói về gì. Chính vì thế trong bài viết mình chỉ đưa ra code và công dụng, còn làm thế nào thì là do ý tưởng của mỗi bạn nhé.

- Với các quảng cáo bị đè hay bị tràn khỏi màn hình ở giao diện mobile, cách tốt nhất là không cho quảng cáo hiển thị ở giao diện mobile. Hãy sử dụng code này để ẩn.

.HTMLxxx {display:none;}

Trong đó, .HTMLxxx là class chứa quảng cáo của các bạn. Chèn code này vào code css responsive có max-width khoảng 479px của các bạn, sẽ làm ẩn quảng cáo trên các giao diện có kích thước dưới 479px.

- Còn trường hợp lên giao diện mobile, quảng cáo xuất hiện không đúng ý (Như tụt xuống gần cuối website, quảng cáo ở header thì biến mất, hay nói chung là chẳng có tác dụng quảng cáo gì mấy). Thì các bạn có thể chèn quảng cáo vào những vị trí hiển thị tốt nhất, ví dụ ngay dưới header, trên phần body. Và chỉ cho hiển thị trên mobile. Thì sử dụng code sau:

<b:if cond='data:blog.isMobileRequest == "true"'>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-xxxxxxxxxxxxx"
data-ad-slot="4283379704"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</b:if>

Trong đó, đoạn code màu xanh là code quảng cáo Adsense có kích thước tốt với giao diện mobile (Ở trên là 300x250), còn đoạn code if bên ngoài, là code chỉ hiển thị trên giao diện Mobile, đổi true thành false thì hiển thị trên tất cả các giao diện, trừ mobile.

Ví dụ: Đoạn code quảng cáo trên mình đặt ngay bên dưới Bài đăng mới của tranbadat.info. Vậy thì...

Đây là trang chủ trên máy tính, chẳng có gì cả.

Tuy nhiên, đây là trang chủ trên điện thoại, đấy, nó nằm ngay bên dưới đấy ^_^

Hy vọng với bài hướng dẫn đơn giản như thế này, sẽ giúp các bạn tùy chỉnh tốt hơn cho quảng cáo Adsense trên website của các bạn. Chúc các bạn thành công. Nếu có cơ hội thì mình sẽ làm 1 video hướng dẫn cặn kẽ hơn nhé. Còn tạm thời nếu có thắc mắc thì cứ cmt bên dưới, mình sẽ trả lời nhé.

Labels

Head Slideshow [active]

Editorial

Set Options

Technology

Articles by "Blogspot"