Điều hướng blogspot theo chuẩn Google SEO 2010

Trong website hay webblog, thanh điều hướng cực kỳ quan trọng và hữu ích, với mục đích giúp người truy cập di chuyển từ trang này qua trang khác một cách nhanh chóng và dễ dàng. Một số hướng dẫn dưới đây theo chuẩn Google SEO 2010 sẽ cho bạn biết làm thế nào để việc điều hướng trang web của bạn được dễ dàng hơn.

Điều hướng rất quan trọng đối với các công cụ tìm kiếm

Điều hướng trang web rất quan trọng trong việc giúp khách truy cập nhanh chóng tìm thấy nội dung mà họ muốn. Điều này cũng có thể giúp các công cụ tìm kiếm hiểu nội dung mà người quản trị web cho là quan trọng. Mặc dù các kết quả tìm kiếm của Google được cung cấp ở cấp độ trang, Google cũng muốn biết trang đóng vai trò gì trong bức tranh lớn hơn của trang web.

Phát họa điều hướng dựa trên trang chủ

Tất cả các trang web đều có trang chủ hoặc trang "gốc", trang này thường là trang có tần suất truy cập nhiều nhất trên trang web và là nơi bắt đầu để điều hướng cho nhiều khách truy cập. Trừ trường hợp trang web của bạn chỉ có một số trang, bạn nên xem xét việc khách truy cập sẽ đi từ trang tổng quát (trang gốc của bạn) tới trang chứa nội dung cụ thể hơn như thế nào. Bạn có đủ trang về lĩnh vực chủ đề cụ thể để có thể tạo trang mô tả cho các trang liên quan này (ví dụ: trang gốc -> danh sách chủ đề liên quan -> chủ đề cụ thể) không? Bạn có hàng trăm sản phẩm khác nhau cần được phân loại theo nhiều trang danh mục và danh mục con không?

Đảm bảo sự thuận tiện hơn cho người dùng bằng cách sử dụng kiểu điều hướng breadcrumb

Breadcrumb là một hàng các liên kết bên trong ở đầu hoặc cuối trang cho phép khách truy cập nhanh chóng điều hướng trở lại phần trước hoặc trang gốc (1). Nhiều breadcrumb có trang tổng quát nhất (thường là trang gốc) là phần thứ nhất, bên trái là hầu hết liên kết và liệt kê các phần cụ thể hơn ở bên phải.



(1) Các liên kết breadcrumb xuất hiện ở trang bài viết sâu hơn trên trang web của chúng tôi

Xem xét khả năng một phần URL của bạn bị xóa

Xem xét điều sẽ xảy ra khi người dùng xoá một phần URL của bạn - Một số người dùng có thể điều hướng trang web của bạn một cách kỳ quặc và bạn nên dự đoán điều này. Ví dụ: thay vì sử dụng các liên kết breadcrumb trên trang, người dùng có thể bỏ đi một phần URL với hy vọng tìm được nội dung tổng quát hơn. Người đó có thể đang truy cập http://www.brandonsbaseballcards.com/news/2008/upcoming-baseball-card-shows.htm, nhưng sau đó nhập http://www.brandonsbaseballcards.com/news/2008/ vào thanh địa chỉ của trình duyệt và cho rằng điều đó sẽ giúp hiển thị tất cả tin tức từ năm 2008. Liệu trang web của bạn có được chuẩn bị để hiển thị trong tình huống này không hay nó sẽ hiển thị lỗi 404 (lỗi "không tìm thấy trang") với người dùng? Nếu di chuyển lên một cấp thư mục nữa http://www.brandonsbaseballcards.com/news/ thì sẽ thế nào?

Chuẩn bị 2 sơ đồ trang web, một cho người dùng và một cho các công cụ tìm kiếm

Sơ đồ trang web (viết thường) là trang đơn giản về trang web, hiển thị cấu trúc trang web và thường chứa danh sách phân tầng các trang trên trang web của bạn. Khách truy cập có thể truy cập trang này nếu họ gặp vấn đề khi tìm các trang trên trang web của bạn. Mặc dù các công cụ tìm kiếm cũng sẽ truy cập trang này, việc có phạm vi thu thập dữ liệu bao quát của trang web của bạn chủ yếu hướng tới những người khách truy cập.

Tệp Sơ đồ trang web XML (viết hoa) mà bạn có thể gửi thông qua Công cụ Quản trị Trang web của Google làm Google dễ dàng khám phá các trang trên trang web của bạn hơn. Sử dụng tệp Sơ đồ trang web cũng là cách thức (mặc dù không được đảm bảo) để báo cho Google biết phiên bản URL nào bạn muốn là URL chuẩn (ví dụ: http://brandonsbaseballcards.com/ hoặc http://www.brandonsbaseballcards.com/; thông tin thêm về tên miền ưa thích là gì). Google giúp tạo ra tập lệnh Trình tạo Sơ đồ Trang web nguồn mở để giúp bạn tạo ra tệp Sơ đồ trang web cho trang web của mình. Để tìm hiểu thêm về Sơ đồ trang web, Trung tâm Hỗ trợ Quản trị Trang web cung cấp hướng dẫn hữu ích tới các tệp Sơ đồ trang web.

Các biện pháp tốt cho điều hướng trang web

1. Tạo cấu trúc phân tầng trôi chảy một cách tự nhiên - Làm cho người dùng đi từ nội dung tổng quát đến nội dung cụ thể hơn mà họ muốn trên trang web của bạn càng dễ dàng càng tốt. Thêm các trang điều hướng khi hợp lý và hoạt động hiệu quả các trang này để đưa chúng vào cấu trúc liên kết bên trong của bạn. Bạn cần tránh:

• Tạo mạng lưới liên kết điều hướng phức tạp, ví dụ: liên kết mọi trang trên trang web của bạn đến mọi trang khác
• Nhiệt tình với việc chia cắt nội dung của bạn (cần hai mươi lần nhấp để đến được nội dung sâu)

2. Sử dụng hầu hết văn bản để điều hướng - Kiểm soát hầu hết điều hướng từ trang này sang trang khác trên trang web của bạn thông qua các liên kết văn bản làm cho các công cụ tìm kiếm dễ dàng thu thập dữ liệu và hiểu trang web của bạn hơn. Nhiều người dùng cũng ưa thích cách này hơn các cách khác, đặc biệt trên một số thiết bị có thể không thể xử lý Flash hay JavaScript. Bạn cần tránh:

• Có điều hướng dựa trên toàn bộ các trình đơn thả xuống, hình ảnh, hoặc hình ảnh động (nhiều công cụ tìm kiếm, nhưng không phải tất cả, có thể khám phá các liên kết đó trên trang web, nhưng nếu người dùng có thể truy cập tất cả các trang trên trang web qua các liên kết văn bản thông thường, điều này sẽ cải tiến khả năng truy cập trang web của bạn, thông tin thêm về cách Google xử lý các tệp không phải văn bản)

3. Đặt trang sơ đồ trang web HTML trên trang web của bạn và sử dụng tệp Sơ đồ trang web XML - Trang sơ đồ trang web đơn giản cùng với các liên kết đến tất cả các trang hoặc các trang quan trọng nhất (nếu bạn có hàng trăm hoặc hàng nghìn) trên trang web của bạn có thể hữu ích. Tạo tệp Sơ đồ trang web XML cho trang web của bạn giúp đảm bảo cho các công cụ tìm kiếm khám phá các trang trên trang web của bạn. Bạn cần tránh:

• Làm cho trang sơ đồ trang web HTML của bạn trở nên lỗi thời với các liên kết hỏng
• Tạo sơ đồ trang web HTML chỉ liệt kê các trang mà không sắp xếp trang, ví dụ như theo chủ đề

4. Có trang 404 hữu ích - Người dùng đôi khi sẽ đi tới trang không tồn tại trên trang web của bạn, bằng cách truy cập liên kết hỏng hoặc nhập URL sai. Có trang 404 tuỳ chỉnh hướng dẫn tận tình người dùng quay trở lại trang đang hoạt động trên trang web của bạn có thể nâng cao đáng kể trải nghiệm của người dùng. Trang 404 của bạn có lẽ nên có liên kết quay lại trang gốc và cũng có thể cung cấp các liên kết đến nội dung phổ biến hoặc có liên quan trên trang web của bạn. Google cung cấp tiện tích con 404 mà bạn có thể nhúng vào trang 404 để tự động đưa nó vào với nhiều tính năng hữu ích. Bạn cũng có thể sử dụng Công cụ Quản trị Trang web của Google để tìm nguồn các URL gây ra lỗi "không tìm thấy". Bạn cần tránh:

• Cho phép các trang 404 được lập chỉ mục trong các công cụ tìm kiếm (đảm bảo rằng máy chủ web của bạn được định cấu hình để hiển thị mã trạng thái HTTP 404 khi trang không tồn tại được yêu cầu)
• Chỉ cung cấp thông báo mơ hồ như "Không tìm thấy", "404" hoặc không có trang 404 nào
• Sử dụng thiết kế cho các trang 404 của bạn không thống nhất với phần còn lại của trang web.

Lý thuyết điều hướng trang web là như vậy theo chuẩn Google SEO 2010, vậy chúng ta có thể vận dụng cho blogspot như thế nào. Theo kinh nghiệm tích lũy được, mình có thể nêu ra hai vấn đề có thể áp dụng, đó là tạo thanh điều hướng breadcrumb và tạo sơ đồ site (sitemap) cho blogspot. Về thanh điều hướng, bạn có thể áp dụng thủ thuật liên quan đến breadcrumb. Để thanh điều hướng breadcrumb được nhất quán và thân thiện với SEO thì nên đặt một tên nhãn duy nhất cho mỗi bài viết để tránh sự phức tạp cho thanh điều hướng, đồng thời tránh sử dụng các hình ảnh trong thanh điều hướng.

Về sơ đồ site, bạn nên tạo một sitemap tại trang blogspot như Thủ thuật Blogger vậy. Nó giúp người dùng dễ tìm kiếm thông tin bao quát trên trang. Tiếp đến bạn cần submit một sitemap có dạng xml lên công cụ tìm kiếm để giúp việc đánh chỉ mục được nhanh chóng. Để làm điều này bạn hãy đăng nhập Google Webmaster Tools đến trang quản trị rồi thêm một sitemap cho trang blogspot của bạn dưới dạng như sau:



Nếu số bài viết trên blogspot của bạn bắt đầu cao hơn con số 500 thì tiếp tục submit sitemap có dạng như sau:

/atom.xml?redirect=false&start-index=501&max-results=500.

Tiện ích Bài viết mới nhất dành cho đối tác VIP

Trong quá trình phát triển chương trình cộng tác viên, mình đã nghĩ ra cách tạo tiện ích Bài viết mới nhất dành cho đối tác VIP với mục đích vinh danh công sức của cộng tác viên và cuối cùng mình đã thử nghiệm thành công. Hôm nay xin giới thiệu với bạn đọc, một là chia sẻ một thủ thuật mới, hai là dành tặng cho cộng tác viên đầu tiên của Thủ thuật Blogger, đó là blogger có biệt danh peace19812006 vì sự nhiệt tình của anh ấy cùng sự tin cậy của anh ấy đối với Thủ thuật Blogger.

Đặc điểm của tiện ích này là bố trí bài viết đầu tiên dưới dạng: ảnh đại diện, tiêu đề bài viết và phần trích dẫn; các bài viết tiếp theo chỉ hiển thị tiêu đề. Ngoài ra có thể đặt ảnh đại diện chỉ định riêng cho một số nhãn phổ biến trong blogspot (dùng cho trường hợp bài viết không có ảnh). Trong tiện ích này có phần logo cho trang. Bạn có thể xem Demo bên dưới.

Để cài đặt tiện ích này bạn hãy thực hiện như sau:

Đăng nhập Blogger, vào Page Elements. Đặt toàn bộ đoạn code sau đây vào một tiện ích HTML/Javascript.

<style type="text/css">
#rcp-VIP {width: 300px;}
#rcp-VIP a:hover {color: #AC0101}
#rcp-VIP h4 {font-family:Arial,serif;font-size: 14px;font-weight: normal;line-height: 1;}
#logo {margin-bottom:15px;text-align:center;font-size: 18px;}
#rcp-VIP table {border-spacing: 0;height: 80px;margin-bottom: 10px;width: 290px;}
#rcp-VIP table td {vertical-align: middle;}
#rcp-VIP table a {color: #069;text-decoration:none}
#rcp-VIP table.first td.title {padding-top: 3px;border-bottom: 1px solid #202931;border-top: 1px solid #202931;height: 20px;}
#rcp-VIP table td.thumb {padding-top: 3px;text-align: center;width: 50px;}
#rcp-VIP table.first h4 {text-align: center;}
#rcp-VIP table.any h4 {border-bottom: 1px solid #202931;border-top: 1px solid #202931;margin-left: 10px;padding: 5px;}
#rcp-VIP table img {border: 1px solid #202931;height: 50px;width: 50px;}
#rcp-VIP table.first td.text {color: #000000;font-family: Tahoma;font-size: 14px;height: 60px;line-height: 1;padding-left: 10px;width: 240px;}
#rcp-VIP div.single li {background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBttichO20FcvhWliv2yEo3rJl-DvP5orXgxRuKOb4bf-ITZxl1LHFRx1Vv5KZUhxizezbo4HPL3bxd6fUVqeq3bkuEdROyTTLXwiLcj-EghIxQExfyG1yYCEV4rDs6G9Iy3OawLQPEa4/s1600/arrow_right.png) no-repeat scroll left 50%;height: 20px;line-height: 20px;padding-left: 20px;list-style:none}
#rcp-VIP div.single li a {height:50px;color: #069;font-family:Arial,serif;font-size: 14px;text-decoration:none}
#rcp-VIP div.single li a:hover{color: #AC0101}
#rcp-VIP div.single {height:45px}
</style>
<script type='text/javascript'>
//<![CDATA[
// Recent Posts from VIP Blogspot Widget by www.thuthuatblogger.info

function getTitle(entry,res) {
var t = entry.title.$t;
if(res) {
t = t.substring(0,res);
}
return t;
}

function getUrl(entry) {
var url;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
url = entry.link[k].href;
break;
}
}
return url;
}

function getContent(entry,res) {
var c = "";
if ("content" in entry) {
c = entry.content.$t;
} else if ("summary" in entry) {
c = entry.summary.$t;
}
if(res) {
c = removeHtmlTag(c,res);
}
return c;
}

function getThumbnail(entry) {
var t = "";
var s, a, b, c, d;
s = entry.content.$t;
a = s.indexOf("<img");
b = s.indexOf("src=\"",a);
c = s.indexOf("\"",b+5);
d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) { t = d; }
return t;
}

function removeHtmlTag(strx,chop){
var r = strx.split("<");
for(var i=0;i<r.length;i++){
if(r[i].indexOf(">")!=-1){
r[i] = r[i].substring(r[i].indexOf(">")+1,r[i].length);
}
}
r = r.join("");
var sss = "", p;
var r2 = r.split(" ");
for(var i=0;i<r2.length;i++){
p = sss + r2[i] + " "
if(p.length>=chop) {break;}
sss = p;
}
if(sss!=" ") {
sss += "&hellip;"
} else {
sss = "";
}
return sss;
}

function showrecentpostVIP(json) {
var entry, posttitle, posturl, postcontent, cat, strx_out;
var numposts = 6;
strx_out = "<div id='logo'><a title='' target='_blank' href='http://www.kienthucblogspot.info/'>KIENTHUCBLOGSPOT</a></div>"; // Bạn cần tùy biến chỗ này - có thể đặt URL_logo
for (var i = 0; i < numposts; i++) {
if (i == json.feed.entry.length) { break; }
posturl = "";
postcontent = "";
entry = json.feed.entry[i];
cat = entry.category[0].term;
posttitle = getTitle(entry);
posturl = getUrl(entry);
if(i==0) {
postcontent = getContent(entry,150); // Thay 150 chỉ số ký tự cho đoạn trích dẫn
postthumb = getThumbnail(entry); // Dưới đây đặt URL ảnh đại diện cho một số nhãn
if(postthumb=="") {
if(cat=="Tên nhãn 1"){postthumb = "URL_ảnh đại diện nhãn 1"}
if(cat=="Tên nhãn 2"){postthumb = "URL_ảnh đại diện nhãn 2"}
if(cat=="Tên nhãn 3"){postthumb = "URL_ảnh đại diện nhãn 3"}
if(cat=="Tên nhãn 4"){postthumb = "URL_ảnh đại diện nhãn 4"}
}
if(postcontent!="") {
strx_out += "<table class='first'>";
strx_out += "<tr><td class='title' colspan='2'><h4><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h4></td></tr>";
strx_out += "<tr>";
strx_out += "<td class='thumb' ><img src='" + postthumb + "' /></td>";
strx_out += "<td class='text'>" + postcontent + "</td>";
strx_out += "</tr>";
strx_out += "</table>";
} else {
strx_out += "<table class='any'>";
strx_out += "<tr>";
strx_out += "<td class='thumb' ><img src='" + postthumb + "' /></td>";
strx_out += "<td class='title'><h4><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h4></td>";
strx_out += "</tr>";
strx_out += "</table>";
}
} else {
strx_out += "<div class='single'><li><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></li></div>";
}
}
document.write(strx_out );
}
//]]>
</script>
<div id="rcp-VIP">
<script src="/feeds/posts/default?max-results=6&alt=json-in-script&callback=showrecentpostVIP"></script>
</div>

Trong đoạn code trên, bạn có thể tùy biến CSS khá dễ dàng sao cho phù hợp với blogspot của bạn. Đối với các bạn mới, nếu áp dụng gặp khó khăn gì, xin vui lòng nêu vấn đề bên dưới để cùng giải quyết.

Trang Author Profile của Lý Thanh Bình

Peace19812006 vốn là một giáo viên Anh văn. Anh ấy tên thật là Lý Thanh Bình, sống tại Bạc Liêu, một vùng gần cực Nam của Tổ quốc. Có người cứ thắc mắc về nick peace19812006 của anh. Thật ra chẳng có gì là lạ. Anh vốn sinh năm 1981, bắt đầu lập mail vào năm 2006 nên lấy nick vậy luôn cho dễ nhớ.

Anh vốn rất đam mê đọc sách, đặc biệt là truyện kiếm hiệp. Trước đây cũng đã gia nhập vào thế giới blog và viết blog trên nền tảng Yahoo, nhưng chỉ trong một thời gian anh đã không còn hứng thú với blog Yahoo vì thấy rằng khả năng tùy biến của nó rất là hạn chế.

Nhưng cơ duyên run rủi, một lần tình cờ search trên mạng, anh thấy một số trang rất ấn tượng, hỏi ra mới biết được thiết kế trên nền tảng Blogspot. Như “tiếng sét ái tình” trong lần gặp mặt đầu tiên, anh hoàn toàn bị cuốn hút vào nó. Anh bắt đầu viết blog trên nền tảng Blogspot. Cứ như thế, ngày nào anh cũng dành một lượng thời gian nhất định cho việc viết blog.

Anh viết blog miệt mài nhưng hầu như đều tìm kiếm những thông tin hay trên mạng rồi copy vào blog của mình. Thời gian cứ trôi qua, anh vẫn viết blog đều đặn nhưng cảm giác không còn hứng thú như lúc ban đầu vì những bài viết của mình chỉ là những mẫu sao chép từ các blog khác. Có lúc anh nghĩ chắc sẽ không viết blog nữa vì nó quá nhàm chán.

May mắn thay, có một dạo vì muốn thêm tiên ích vào blog, anh tìm hết chỗ này đến chỗ kia rồi cuối cùng anh đã tìm được một số trang chuyên viết về thủ thuật Blogspot. Càng đọc anh càng thấy hấp dẫn. Một ý nghĩ thoáng lướt qua trong đầu anh: “Tại sao mình không viết về đề tài Blogspot?”

Nghĩ thì nghĩ vậy nhưng trong đầu anh vẫn chưa có một khái niệm hay phạm trù nào cụ thể để viết về đề tài Blogspot. Viết về thủ thuật thì quả là một điều ngoài tầm với của anh vì anh thuộc hạng “dốt đặc cán mai, dốt dài cán cuốc” về code trong Blogspot.

Chẳng lẽ đối với đề tài Blogspot chỉ có thể viết về thủ thuật thôi hay sao? Không, bạn vẫn có thể viết cảm nhận về Blogspot đó chứ; đó là lời gợi ý và là lời khuyên từ anh Huỳnh Nhật Hà, admin của trang www.thuthuatblogger.info.

Peace19812006 rất đỗi vui mừng vì đã tìm thấy hướng đi cho riêng mình. Anh bắt đầu viết cảm nhận về các Blogger Việt, về các thủ thuật hay và xuất bản trên trang của anh tại www.kienthucblogspot.info. Một điều thật bất ngờ, anh đã nhận được nhiều sự động viên từ các Blogger khác, điều này đã giúp anh tự tin hơn trên con đường viết blog của mình.

Nhưng không phải nói cứ muốn viết cảm nhận là viết. Muốn viết về một vấn đề nào phải nghiên cứu thật kỹ về vấn đề đó. Điều này đã giúp cho anh có một chút kiến thức nho nhỏ về kỹ thuật viết code trong Blogger. Từ đó anh cũng bắt đầu viết một số thủ thuật con con nhằm chia sẻ với các Blogger gần xa.

Ai cũng vậy, khi bắt đầu làm một việc gì đó đều phải có phương châm cho riêng mình. Và phương châm viết blog của anh là “Vì blogspot quên thời gian, vì commentators phục vụ”. Anh hy vọng rằng những bài viết của mình dẫn dần sẽ cải thiện về số lượng cũng như về chất lượng để phục vụ bạn đọc ngày càng tốt hơn.

Các bạn có thể bình luận và góp ý cho anh ấy ở đây.

Gắn tem Avatar cho bài viết của tác giả ở trang nhãn

Chúng ta đã từng biết đến cách tạo Author Panel giới thiệu sơ nét về tác giả bài viết và khung tác giả thường được đặt ở cuối bài viết ở các trang item. Thế thì liệu chúng ta có thể làm điều tương tự ở trang chủ và trang nhãn hay không. Mình sẽ giúp bạn làm được điều này bằng cách gắn tem Avatar cho tác giả bài viết hiển thị ở trang chính (index) gồm trang chủ, các trang nhãn và trang lưu trữ. Thủ thuật này có thể áp dụng cho blogspot có nhiều tác giả làm cộng tác viên viết bài.

Xem Demo.

Thật thú vị phải không các bạn. Bây giờ còn chờ gì nữa nào, chúng ta cùng thực hiện theo các bước đơn giản để cài đặt vào blogspot của bạn. Xin lưu ý là scipt của mình rất đơn giản ngắn gọn nên không ảnh hưởng gì nhiều đến tốc độ load trang blogspot.

Bước 1. Đăng nhập Blogger, vào Design >> Edit Template. Chọn Expand Widget Templates. Đặt đoạn code sau đây vào trước thẻ </head>.

<script type='text/javascript'>
//<![CDATA[
// Adding Author Avatar Stamp to Label Posts Script by www.thuthuatblogger.info
function author_avatar_stamp (author) {
avatar = new Array()
avatar[0] = ""
avatar[1] = "<img border='0' style="display:block;float:right;width:35px;height:35px;margin:0 auto" src='URL_avatar_tác giả 1'/>"
avatar[2] = "<img border='0' style="display:block;float:right; width:35px;height:35px;margin: 0 auto" src='URL_avatar_tác giả 2'/>"
avatar[3] = "<img border='0' style="display:block;float:right; width:35px;height:35px;margin: 0 auto" src='URL_avatar_tác giả 3'/>"

if (author == "Tên tác giả 1")
{document.write(avatar[1]);}

if (author == "Tên tác giả 2")
{document.write(avatar[2]);}

if (author == "Tên tác giả 3")
{document.write(avatar[3]);}

}
//]]>
</script>

Trong đoạn code trên, bạn cần thay URL dẫn đến Avatar cho các tác giả tương ứng với tên tác giả (có thể thêm số lượng tác giả theo đúng định dạng ở trên), đồng thời có thể tùy biến CSS cho Avatar phù hợp với blogspot của bạn.

Bước 2. Dưới đây là đoạn scipt để gọi avatar ra:

<script type='text/javascript'>
author_avatar_stamp("<data:post.author/>");
</script>

Đặt đoạn code nới trên vào một trong những vị trí bạn có thể cần hiển thị tem avatar như sau:

<div class='post-header-line-1'>

VỊ TRÍ 1 -->

</div>
<div class='post-body entry-content'>

VỊ TRÍ 2 -->

<p>VỊ TRÍ 3 -->
<data:post.body/></p>

Lưu Template là xong.

Ý tưởng thành lập Bệnh viện Blogspot

Có thể nói cộng đồng Blogspot Việt Nam đã và đang phát triển không ngừng qua từng ngày. Để Blogspot Việt phát triển hơn nữa và có những bước tiến ổn định, vững chắc; mình có ý tưởng thành lập Bệnh viện Blogspot (Blogspot Hospital) là nơi tiếp nhận những ca bệnh đủ hình thái của các bệnh nhân là người sử dụng Blogspot. Bệnh viện Blogspot hoạt động dựa trên nguyên tắc phi lợi nhuận với sự tham gia tự nguyện của các thành viên. Đã là bệnh viện thì phải có bác sỹ, điều dưỡng và bệnh nhân; vì thế ý tưởng Bệnh viện Blogspot như sau:

Sứ mệnh và tôn chỉ của Bệnh viện Blogspot

1. Sứ mệnh:

• Lấy bệnh nhân làm trọng tâm, chữa lành tất cả các bệnh nan y và bệnh thông thường của Blogspot.
• “Chiêu hiền đã sĩ” phát triển nguồn nhân lực bác sĩ blogspot trong cộng đồng Blogger Việt Nam.

2. Tôn chỉ:

Với phương châm “Tận tụy – Sáng tạo – Y đức” Blogger Hospital khuyến khích mọi thành viên luôn nêu cao:

• Lòng tận tụy hết mình vì bệnh nhân.
• Tính sáng tạo, tìm tòi học hỏi, đổi mới tiên phong.
• Tinh thần y đức không làm ngơ trước người bệnh.

Ứng cử và đề cử các chức danh chủ chốt của Bệnh viện Blogspot

1. Chủ tịch Hội đồng Quản trị
2. Phó Chủ tịch HĐQT kiêm Giám đốc điều hành
3. Phó Giám đốc
4. Bác sỹ Trưởng khoa Thiết kế Template
5. Bác sỹ Trưởng khoa Tùy biến Template
6. Bác sỹ Trưởng khoa SEO Template
7. Bác sỹ Trưởng khoa Đồ họa Template
8. Bác sỹ Trưởng khoa Bảo trì Template.
9. Điều dưỡng kiêm Thư ký Bệnh viện.

Trên đây là công bố thông tin ứng cử và đề cử vào các chức danh chủ chốt của Bệnh viện Blogspot, trân trọng đề nghị quý bạn đọc tùy vào khả năng của mình có thể tự ứng cử hoặc đề cử người khác vào các chức danh nói trên. Trong vòng 1 tháng kể từ ngày ra thông báo này, Ban Quản trị Thủ thuật Blogger sẽ thống kê và ra thông báo chính thức về danh sách dự kiến và tổ chức cuộc bỏ phiếu bầu cử trực tuyến cho các chức danh chủ chốt của Bệnh viện Blogspot.

Kính mong quý bạn đọc gần xa nhiệt tình ủng hộ!

Thủ thuật yêu cầu: Script liệt kê và gọi script

Trong quá trình thiết kế weblog trên nền tảng Blogspot, hẳn bạn đã, đang và sẽ vọc rất nhiều script, dẫn đến thực tế là gắn nhiều script vào Template sẽ gây ảnh hưởng đến tốc độ load trang. Có một yêu cầu của bạn đọc về việc làm sao có script gọi được script, tức là gom các file script vào một chỗ rồi đến lúc nào cần script đó hoạt động thì mới gọi nó ra, chứ không cho nó load hết toàn bộ trong trang. Mình viết thủ thuật này theo yêu cầu của bạn MrWinni.

Mình có thể mô tả thủ thuật này như sau: Trước hết mình tạo một tiện ích để chứa các file script và mình đặt tiện ích này lên trên tiện ích Header để dễ bề quản lý, sau đó mình dùng script liệt kê tất cả các file js cần dùng trong Template rồi đặt vào tiện ích này; mỗi khi cần bất kỳ một file js nào hoạt động thì chỉ cần dùng lệnh gọi script đó ra là được, như vậy sẽ không load tất cả các file js ra cùng một lúc. Nói như thế nghĩa là giả sử mình sử dụng đến 1000 file js trong Template song vẫn không hề ảnh hưởng đến tốc độ load trang của Template.

Đến đây, mình tin rằng bạn sẽ cần đến thủ thuật này hơn bao giờ hết. Vậy thì hãy thực hiện như sau:

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates. Tìm sau thẻ <body> rồi đến thẻ <div id='header'> hoặc thẻ <div id='topnavbar'> (nếu Template của bạn có thanh menu đỉnh) và đặt trước thẻ đó bằng đoạn code bên dưới:

<b:section class='scripcontainer' id='scriptcontainer'>
<b:widget id='HTML100' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>

Lưu Template.

Bước 2. Vào Page Elements, kéo đến đầu Layout, sát trên phần Header, chọn Edit để chỉnh sửa tiện ích HTML/Javascript rồi đặt đoạn code như bên dưới vào đó:

<script type="text/javascript">
// ScriptListing&Reading Script by www.thuthuatblogger.info
function readScript(index) {

URLBase="http://tenban.googlecode.com/files/";
scriptLIST=new Array(

0,"",
1,"code1.txt",
2,"code2.txt",
3,"code3.txt",
4,"code4.txt",
5,"code5.txt",
6,"code6.txt",
7,"code7.txt",
8,"code8.txt",
9,"code9.txt",
10,"code10.txt",

1000,""
);

regNum = index * 2 +1;
document.write('<script src="' + URLBase + scriptLIST[regNum] + '"><\/script>');
}
</script>

Trong trường hợp này, bạn upload các file js có đuôi .js hoặc .txt vào cùng một nguồn lưu trữ file (ví dụ googlecode hoặc host riêng của bạn), đặt URL ngồn (URLBase) cho script. Cứ mỗi lần dùng thêm file js thì bạn chỉ cần thêm số thứ tự theo định dạng như trên.

Mỗi khi bạn muốn một script nào đó hoạt động tại vị trí theo ý bạn thì chỉ cần sử dụng lệnh gọi script như sau:

<script>readScript(1);</script>

Hoặc <script>readScript(2);</script>

Hoặc <script>readScript(3);</script>

Cứ như thế chỉ cần thay số thứ tự cho file js cần gọi ra là được.

Nếu bạn upload các file js (lưu tên lộn xộn theo đuôi .js và .txt) lên các host khác nhau thì ở Bước 2, bạn sử dụng code như sau:

<script type="text/javascript">
// ScriptListing&Reading Script by www.thuthuatblogger.info
function readScript(index) {
scriptLIST=new Array(
// Đây là danh sách các URL dẫn đến nguồn script
0,"",
1,"http://www.tenmien1.com/files/code1.js",
2,"http://www.tenmien2.com/files/code2.txt",
3,"http://www.tenmien3.com/files/code3.js",
4,"http://www.tenmien4.com/files/code4.txt",
5,"http://www.tenmien5.com/files/code5.js",
6,"http://www.tenmien6.com/files/code6.txt",
7,"http://www.tenmien7.com/files/code7.txt",
8,"http://www.tenmien8.com/files/code8.js",
9,"http://www.tenmien9.com/files/code9.txt",
10,"http://www.tenmien10.com/files/code10.txt",

1000,""
);
regNum = index * 2 +1;
document.write('<script src="' + scriptLIST[regNum] + '"><\/script>');
}
</script>

Tuy code này đơn giản song vẫn hy vọng rằng hiệu quả nó đem lại là vô cùng lớn đối với các bạn.

Tạo chú thích cho ảnh trong bài viết blogspot

Bạn có dịp tham quan những danh lam thắng cảnh trên thế giới và đã chụp lại rất nhiều ảnh đẹp. Bạn muốn chia sẻ những tấm ảnh đó với bạn của mình trên blog. Nhưng không phải ai cũng biết địa danh hay tên gọi của những nơi đó nên khi post ảnh lên bạn phải tạo chú thích cho ảnh.

Bây giờ bạn thử ngắm 2 hình ở trang DEMO này. Lưu ý: không thấy hiệu ứng khi xem ở IE.

Bạn thích kiểu ghi chú của hình 1 hay hình 2, nếu thích hình 1 thì bạn làm theo cách bình thường, upload ảnh lên xong thì viết ghi chú bên dưới nó. Nhưng nếu bạn thích kiểu ghi chú ở hình 2 thì sao?

Thủ thuật đơn giản sau sẽ giúp bạn có kiểu ghi chú ấn tượng này.

Các bạn đặt code này vào trướcdòng ]]></b:skin>.

.imgcaption {
padding-bottom:10px;
padding-top:30px;
position:relative;
}
.imgcaption cap {
position:absolute;
left:0%;
right:0%;
padding:10px;
background:#dddddd;
color:ffffff;
opacity:0.8 !important;
bottom:6%;
}

Xong rồi bạn lưu template lại.

Trong bài đăng, khi bạn upload ảnh thì ảnh thường có dạng như thế này:

<div class="separator" style="clear: both; text-align: center;"
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGJ4TLU0z2-GwnHBaam3c-9nnVW7n2vmFpM6K3xP0rFxi5bUd5EMgv7HIXFXlDMgX-q9bbvtcN6shlmDbBBwYPuHzzelBSL1LTEjZoKkqcMgN9evTu786xcRB5-cPe1rpongKK0YMMTSXH/s1600/Nha+hat+Opera.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGJ4TLU0z2-GwnHBaam3c-9nnVW7n2vmFpM6K3xP0rFxi5bUd5EMgv7HIXFXlDMgX-q9bbvtcN6shlmDbBBwYPuHzzelBSL1LTEjZoKkqcMgN9evTu786xcRB5-cPe1rpongKK0YMMTSXH/s1600/Nha+hat+Opera.jpg" /></a></div>

Bây giờ bạn chỉ cần nhìn vào code bên dưới, lưu ý "seperator" đã được thay bằng "imgcaption" và trước thẻ </div> chúng ta thêm vào dòng code màu đỏ là OK.

<div class="imgcaption" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGJ4TLU0z2-GwnHBaam3c-9nnVW7n2vmFpM6K3xP0rFxi5bUd5EMgv7HIXFXlDMgX-q9bbvtcN6shlmDbBBwYPuHzzelBSL1LTEjZoKkqcMgN9evTu786xcRB5-cPe1rpongKK0YMMTSXH/s1600/Nha+hat+Opera.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGJ4TLU0z2-GwnHBaam3c-9nnVW7n2vmFpM6K3xP0rFxi5bUd5EMgv7HIXFXlDMgX-q9bbvtcN6shlmDbBBwYPuHzzelBSL1LTEjZoKkqcMgN9evTu786xcRB5-cPe1rpongKK0YMMTSXH/s1600/Nha+hat+Opera.jpg" /></a><cap>Nhà hát Opera Sydney</cap></div>

Chúc các bạn thành công.

Thủ thuật yêu cầu: Gắn tem cho bài viết đang chờ duyệt

Chắc hẳn một khi blogspot của bạn đã phát triển ổn định và có một chỗ đứng nhất định trong cộng đồng, hơn nữa bạn không có nhiều thời gian để viết bài trong khi bạn vẫn muốn duy trì bài viết đều đặn cho blogspot của mình; bạn sẽ nghĩ đến việc tìm cộng tác viên viết bài cho bạn. Từ nhu cầu này, nảy sinh việc cần phải gắn tem bài đang chờ duyệt (Pending Post Stamp) cho bài viết mới của cộng tác viên. Thủ thuật này mình viết theo yêu cầu của bạn Minh Quân tại trang ICTSOFT.

Tính năng của thủ thuật này là gắn tem Bài này đang chờ duyệt cho bất kỳ một bài viết nào đó của cộng tác viên, theo đó các bài được gắn tem khi được hiển thị ở trang index (trang chủ, trang nhãn và trang lưu trữ) sẽ được nhìn thấy song không thể click vào link dẫn đến nội dung bài viết. Trong trường hợp blogspot của bạn có gắn tiện ích Bài viết mới nhất (hoặc link bài viết xuất hiện trên kết quả các công cụ tìm kiếm) thì một khi link bài viết được click vẫn không thể nhìn thấy nội dung bài viết (bởi một lý do là bài viết đang được admin kiểm duyệt trước khi xuất bản chính thức); tuy nhiên bạn đọc vẫn có thể chém gió tại phần Comments của bài viết này. Định dạng này sẽ tạo sự thú vị cho trang bài viết đang được duyệt, theo đó người đọc có thể bàn tán, đưa ra quan điểm, ý kiến, cảm nghĩ của mình về bài viết sắp được xuất bản chính thức.

Xem Demo 1 và Demo 2.



Để thực hiện thủ thuật này, bạn hãy thực hiện như sau:

Bước 1. Đăng nhập Blogger, vào Design >> Edit Template, chọn Expand Widget Templates (mở rộng mẫu tiện ích). Tìm đến dòng <b:include data='post' name='post'/> và thay nó bằng đoạn code bên dưới:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt&quot;'>
<div class='pendingpost-stamp'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<b:include data='post' name='post'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt&quot;'>
<div class='pendingpost-message'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<div style='display:none'>
<b:include data='post' name='post'/>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
</b:if>

Ở đoạn code trên bạn cần thay URL cho bài viết đang chờ duyệt.

Bước 2. Đặt code CSS bên dưới vào trước dòng ]]></b:skin>.

.pendingpost-stamp {
z-index: 200;
width: 550px; // chỉnh chiều rộng tương thích với phần Main
height: 150px;
position: absolute;
color:#ed0000; // màu chữ của dòng tem thông báo ở kiểu trang index
text-align: right;
font: bold 15px Arial;
background:#d7d7ff;
opacity: 0.5;
filter: alpha(opacity=50);
margin:0;
padding:2px;
}
.pendingpost-message {
float:center;
color: #2B65EC; // màu chữ của dòng thông báo ở kiểu trang item
font: bold 15px Arial;
text-align:center
}

Đoạn code CSS này giúp vô hiệu hóa link ở các kiểu trang index (không thể click vào tiêu đề bài viết). Bạn có thể tùy biến CSS theo các chú thích ở trên.

Sau đó lưu Template là xong.

Trong trường hợp bạn cần dán tem cho một số bài viết đang chờ duyệt thì sử dụng code ở Bước 2 theo kiểu như sau:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt 1&quot;'>
<div class='pendingpost-stamp'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<b:include data='post' name='post'/>
<b:else/>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt 2&quot;'>
<div class='pendingpost-stamp'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<b:include data='post' name='post'/>
<b:else/>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt 3&quot;'>
<div class='pendingpost-stamp'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<b:include data='post' name='post'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if> </b:if> </b:if>
<b:else/>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt 1&quot;'>
<div class='pendingpost-message'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<div style='display:none'>
<b:include data='post' name='post'/>
</div>
<b:else/>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt 2&quot;'>
<div class='pendingpost-message'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<div style='display:none'>
<b:include data='post' name='post'/>
</div>
<b:else/>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt 3&quot;'>
<div class='pendingpost-message'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<div style='display:none'>
<b:include data='post' name='post'/>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if></b:if></b:if>
</b:if>

Bạn cần thay các URL cho các bài viết đang chờ duyệt tương ứng nhé. Lưu ý một khi bất kỳ bài viết nào đó đã được bạn duyệt rồi thì bạn chỉ cần xóa URL của bài viết đang được duyệt ấy ra khỏi code thủ thuật hoặc làm ngược lại các bước trên để trở về trạng thái bình thường. Thủ thuật này không dùng Javascript nên rất nhẹ nhàng. Nếu bạn gặp khó khăn trong việc cài đặt, xin vui lòng để lại lời nhắn dưới đây.

Cảm giác của bạn ra sao nếu Blogger đóng cửa trong tương lai?

Blogger dự định sẽ đóng cửa vào ngày ... tháng ... năm ... nếu ... Cảm giác của bạn ra sao nếu Blogger đóng cửa trong tương lai?

Thủ thuật yêu cầu: Ẩn hiện tiện ích trên sidebar

Thủ thuật này được viết theo yêu cầu của bạn Blue79blog, với ý tưởng tạo hiệu ứng ẩn hiện tiện ích trên phần sidebar của blogspot. Thủ thuật này lấy cảm hứng từ style ở trang cokhi-hui.net (xin lưu ý, ở đây chỉ lấy cảm hứng theo yêu cầu của bạn đọc chứ script không liên quan đến trang cokhi-hui.net).

Xem Demo.

Bây giờ chúng ta cùng bắt đầu thực hành nhé.

Bước 1. Sử dụng javascript bên dưới để tạo hiệu ứng, đặt code trước thẻ </head>.

<script type="text/javascript">
//<![CDATA[
// Hide and Show Toggle Effect Script. Please keep www.thuthuatblogger.info source for your using in any ways
function toggle( targetId )
{
var state = 0;
var blockname = "block" + targetId;
var blockimage = "blockcollapse" + targetId;
if ( document.getElementById ) {
target = document.getElementById( blockname );
if ( target.style.display == "none" ) {
target.style.display = "";
state = 1;
}
else {
target.style.display = "none";
state = 0;
}
document.getElementById( blockimage ).src = state ? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGHJvG00Ej6tE2Vk7tFbwhoh2ocC9xRt9jKomQS4Hvh87J1Up3L8LJ9Po-hopPxvW3e8JrM2ri0KCdQYDYFLmhJ6RrpdNeL4-G37GURKHmMFh_9GzbHcPlIWBt0LHoi4sX3VcOt5yo_fL_/s1600/minus.gif" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3AgaAi5fs5_aBwA9FYYgTuKnehD_788fucS4D47VCFeleI4aaCxxiCBYEUL7jiX1Sdho9UTujFJ9YCT6KzyfCStKi0gktLzUeOInRYLI2esGw_I4T0sgfEVVyUSZYYS0wY_QYoNnVsmp7/s1600/plus.gif";
}
}
//]]>
</script>

Bước 2. Thiết lập cấu trúc HTML theo các trường hợp sau đây (áp dụng chung cho website và blogspot):

Trường hợp 1: Nội dung được ẩn, nhấn nút show/hide để hiện nội dung, nút show/hide nằm nằm bên trái tiêu đề.

<a href="javascript: void(0);" onclick="toggle(&quot;1&quot;); return false">
<img border="0" id="blockcollapse1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3AgaAi5fs5_aBwA9FYYgTuKnehD_788fucS4D47VCFeleI4aaCxxiCBYEUL7jiX1Sdho9UTujFJ9YCT6KzyfCStKi0gktLzUeOInRYLI2esGw_I4T0sgfEVVyUSZYYS0wY_QYoNnVsmp7/s1600/plus.gif" style="margin-right: 5px;" />Đây là một tiêu đề</a>
<div id="block1" style="display: none;">
Đây là một đoạn văn bản hoặc một hình ảnh …
</div>

Đây là một tiêu đề

Thủ thuật Blogger là nơi bạn vừa học tập vừa thực hành về thiết kế website/webblog. Chúng tôi hy vọng sẽ trở thành một ngôi trường nhỏ để bạn góm ghém hành trang bước vào những ngôi trường lớn hơn.

Trường hợp 2: Nội dung được hiện, nhấn nút show/hide để ẩn nội dung, nút show/hide nằm bên trái tiêu đề

<a href="javascript: void(0);" onclick="toggle(&quot;2&quot;); return false">
<img border="0" id="blockcollapse2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGHJvG00Ej6tE2Vk7tFbwhoh2ocC9xRt9jKomQS4Hvh87J1Up3L8LJ9Po-hopPxvW3e8JrM2ri0KCdQYDYFLmhJ6RrpdNeL4-G37GURKHmMFh_9GzbHcPlIWBt0LHoi4sX3VcOt5yo_fL_/s1600/minus.gif" style="margin-right: 5px;" />Đây là một tiêu đề</a>
<div id="block2">
Đây là một đoạn văn bản hoặc một hình ảnh…
</div>

Đây là một tiêu đề

Thủ thuật Blogger là nơi bạn vừa học tập vừa thực hành về thiết kế website/webblog. Chúng tôi hy vọng sẽ trở thành một ngôi trường nhỏ để bạn góm ghém hành trang bước vào những ngôi trường lớn hơn.

Trường hợp 3. Nội dung được ẩn, nhấn nút show/hide để hiện nội dung, nút show/hide nằm bên phải tiêu đề.

<a href="javascript: void(0);" onclick="toggle(&quot;3&quot;); return false">
Đây là một tiêu đề<img border="0" id="blockcollapse3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3AgaAi5fs5_aBwA9FYYgTuKnehD_788fucS4D47VCFeleI4aaCxxiCBYEUL7jiX1Sdho9UTujFJ9YCT6KzyfCStKi0gktLzUeOInRYLI2esGw_I4T0sgfEVVyUSZYYS0wY_QYoNnVsmp7/s1600/plus.gif" style="margin-left: 5px;" />
</a>
<div id="block3" style="display: none;">
Đây là một đoạn văn bản hoặc một hình ảnh…
</div>

Đây là một tiêu đề

Thủ thuật Blogger là nơi bạn vừa học tập vừa thực hành về thiết kế website/webblog. Chúng tôi hy vọng sẽ trở thành một ngôi trường nhỏ để bạn góm ghém hành trang bước vào những ngôi trường lớn hơn.

Trường hợp 4. Nội dung được hiện, nhấn nút show/hide để ẩn nội dung, nút show/hide nằm bên phải tiêu đề.

<a href="javascript: void(0);" onclick="toggle(&quot;4&quot;); return false">
Đây là một tiêu đề<img border="0" id="blockcollapse4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGHJvG00Ej6tE2Vk7tFbwhoh2ocC9xRt9jKomQS4Hvh87J1Up3L8LJ9Po-hopPxvW3e8JrM2ri0KCdQYDYFLmhJ6RrpdNeL4-G37GURKHmMFh_9GzbHcPlIWBt0LHoi4sX3VcOt5yo_fL_/s1600/minus.gif" style="margin-left: 5px;" />
</a>
<div id="block4">
Đây là một đoạn văn bản hoặc một hình ảnh…
</div>

Đây là một tiêu đề

Thủ thuật Blogger là nơi bạn vừa học tập vừa thực hành về thiết kế website/webblog. Chúng tôi hy vọng sẽ trở thành một ngôi trường nhỏ để bạn góm ghém hành trang bước vào những ngôi trường lớn hơn.

Đến đây là phần quan trọng đối với blogspot, áp dụng để tạo hiệu ứng ẩn hiện đối với tiện ích trên blogspot. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates (nhớ thực hiện Bước 1 xong). Xác định ID của một tiện ích và tìm đến đoạn code của nó, ví dụ đối với tiện ích có ID là HTML1:

<b:widget id='HTML1' locked='false' title='Đây là tiêu đề tiện ích 1' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Chỉnh code của tiện ích đó lại như bên dưới. Ở đây mình áp dụng cho trường hợp 1, các trường hợp còn lại bạn có thể tự thực hiện.

<b:widget id='HTML1' locked='false' title='Đây là tiêu đề tiện ích 1' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->

<a href='javascript: void(0);' onclick='toggle(&quot;1&quot;); return false'>

<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><img border='0' id='blockcollapse1' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjPipEAqbTLCqutswGZj7DdL-ClmdfEeT4A3lt5DGjRqRNY4ZD64SERnZ_eVgmwT8fxYGBJHZnC_al8n1ikARJktODHrIHUbAqPJBBdxTv3fkoaCcjJ7Et0j2BigU6TwWjBVvHVQL0XUY4/s1600/mas.gif' style='margin-right: 5px;'/><data:title/></h2>
</b:if></a><div id='block1' style='display: none;'>
<div class='widget-content'>
<data:content/>
</div> </div>
</b:includable>
</b:widget>

Lưu Template là xong. Bạn có thể sử dụng cấu trúc tương tự như trên để vận dụng cho nhiều tiện ích khác nhau nhé.

Về việc Thủ thuật Blogger tuyển cộng tác viên

Bạn muốn chung sức cùng Thủ thuật Blogger chia sẻ kinh nghiệm và góp phần xây dựng cộng đồng Blogger Việt? Bạn muốn có cơ hội quảng bá các sản phẩm của chính bạn với sự tài trợ của Thủ thuật Blogger?

Bạn có thể trở thành cộng tác viên tại Thủ thuật Blogger để có những trải nghiệm mới. Nếu bạn muốn tham gia viết bài cho Thủ thuật Blogger, bạn hãy gửi thư đăng ký đến địa chỉ email: webmaster@thuthuatblogger.info.

Sau khi bạn được chọn làm cộng tác viên (nếu đủ tiêu chuẩn) tại Thủ thuật Blogger, chúng tôi sẽ gửi thư mời bạn gia nhập và từ đó bạn có quyền viết bài cho Thủ thuật Blogger.

I. Tiêu chuẩn trở thành cộng tác viên tại Thủ thuật Blogger

1. Tác giả bài viết phải có họ tên hoặc bút danh rõ ràng, không mang ngôn ngữ xấu;

2. Tác giả bài viết phải có một webblog;

3. Chủ đề các bài viết thuộc về các lĩnh vực thủ thuật Blogger, Blogger Template, kỹ thuật photoshop, kinh nghiệm SEO, cảm nhận về blogspot và blogging;

4. Nội dung các bài viết không mang yếu tố chính trị, tôn giáo, văn hóa đồi trụy;

5. Các bài viết không mang nội dung quảng bá cá nhân hay quảng cáo các chương trình kiếm tiền;

6. Bài viết phải có tính độc nhất, nghĩa là không được đăng ở webblog của tác giả là cộng tác viên;

7. Giới hạn số bài viết mỗi tháng: tối thiểu là 02 và tối đa là 10 bài viết. Nếu trong tháng cộng tác viên không viết đủ tối thiểu 02 bài thì sẽ bị tước quyền cộng tác viên.

II. Quyền lợi của cộng tác viên

1. Được đặt Author Panel ngay dưới bài viết với đầy đủ thông tin: Avatar, backlink đến trang nhà của tác giả (góp phần tăng traffic đến webblog của tác giả), link đến các mạng xã hội (twitter, facebook, …); được gắn tem Author cho các bình luận và gắn tem Avatar cho các bài viết (hiển thị ở trang nhãn) của tác giả;

2. Nếu một cộng tác viên có thời gian viết bài cho Thủ thuật Blogger đạt mốc 03 tháng, cộng tác viên đó sẽ được dành một trang Author Profile trên Thủ thuật Blogger giới thiệu thông tin cá nhân và blog của tác giả (riêng 03 cộng tác viên đầu tiên được đặc cách có trang này sau bài viết đầu tiên). Cộng tác viên có thời gian viết bài 05 tháng thì được quyền mở cửa hàng trưng bày và kinh doanh sản phẩm của mình tại www.thuthuatblogger.info.

3. Hàng quý, các cộng tác viên được quyền tham gia vào chương trình trúng thưởng may mắn, cộng tác viên nào trúng giải sẽ được nhận giải bằng quyền đặt banner quảng cáo (kích cỡ 125x125) tại Thủ thuật Blogger trong quý (03 tháng) kế tiếp.

III. Nghĩa vụ của cộng tác viên

1. Cộng tác viên có nghĩa vụ đầu tư chất xám cho bài viết của mình, chú trọng trau chuốt câu từ, bởi vì bài viết nâng cao thương hiệu cho cộng tác viên;

2. Cộng tác viên không được phép sao chép bài viết của người khác để đăng tại Thủ thuật Blogger. Các tài nguyên (hình ảnh, video, script, …) không phải do cộng tác viên sáng tạo thì phải ghi rõ nguồn tác giả và được sự cho phép của tác giả đó;

3. Tác giả bài viết phải cam kết chịu trách nhiệm về nội dung bài viết được đăng tải và trả lời các bình luận của bạn đọc liên quan đến bài viết.

IV. Quyền hạn của Thủ thuật Blogger

1. Ban Quản trị Thủ thuật Blogger có quyền chỉnh sửa bài viết của cộng tác viên về mặt ngôn từ, văn phong nếu cần thiết; đặt bài viết của cộng tác viên ở chế độ đang kiểm duyệt nếu bài viết chưa đủ điều kiện để xuất bản;

2. BQT Thủ thuật Blogger có quyền xóa bài viết của cộng tác viên nếu bài viết vi phạm Tiêu chuẩn Cộng tác viên;

3. BQT Thủ thuật Blogger có quyền cập nhật các tiêu chuẩn, quyền lợi và nghĩa vụ của cộng tác viên tùy theo tình hình.

V. Kỳ hạn cộng tác viên

Cộng tác viên phải cam kết thực hiện kỳ hạn cộng tác viên tại Thủ thuật Blogger kéo dài 03 tháng. Sau thời hạn 03 tháng này, cộng tác viên có quyền đăng ký kỳ hạn kế tiếp hoặc tuyên bố kết thúc quyền cộng tác viên.

VI. Số lượng cộng tác viên

1. Giới hạn số cộng tác viên tối đa tại Thủ thuật Blogger là 03 CTV cho mỗi kỳ hạn.

2. Nếu số cộng tác viên đăng ký vượt mức 03, BQT Thủ thuật Blogger sẽ chọn lựa ngẫu nhiên.

VII. Công bố kỳ hạn cộng tác viên

1. Kỳ hạn 1: Từ ngày 01/8/2011 đến ngày 31/10/2011.

Thời gian đăng ký cộng tác viên kỳ hạn 1: 07 ngày (30/7/2011 – 05/8/2011); gia hạn thêm 07 ngày (06/8/2011 - 12/8/2011)

DANH SÁCH CỘNG TÁC VIÊN KỲ HẠN 1

(1) Peace19812006

(2) [ND]o[SKT]

Trân trọng thông báo!

Phân tích các thẻ dữ liệu trong bố cục Template

Trong cấu trúc bố cục XML của Blogger Template, có nhiều thẻ khác nhau bạn có thể sử dụng để gộp các mảng dữ liệu riêng biệt trong Template. Tất cả chúng được định dạng là <data:name/> hoặc <data:name1.name2/>, trong đó name là tên của mảng dữ liệu riêng biệt mà bạn muốn sử dụng. Trong ví dụ name1.name2, thì name2 là một hạng mục riêng trong một bộ dữ liệu được gọi là name1, ví dụ trong thẻ <data:post.body/> thì body là phần nói về thân chứa của bài viết.

Dưới đây là danh sách các dữ liệu được chia thành các phần theo thành phần trang, do các kiểu tiện ích khác nhau thì sử dụng các dữ liệu khác nhau:

• Globally Available Data (Dữ liệu tổng thể)
• Page Header (Tiêu đề đầu trang)
• Blog Posts (Bài đăng Blog)
• Blog Archives (Lưu trữ Blog)
• Profile (Hồ sơ)
• Text / HTML / JavaScript (Tiện ích Text/HTML/Javascript)
• Feed (Nguồn cấp dữ liệu)
• Picture (Ảnh)
• Labels (Nhãn)
• Blog List (Tiện ích danh sách blog)
• Link List (Tiện ích danh sách liên kết)
• Logo (Tiện ích logo)

1. Dữ liệu tổng thể

Thông tin này áp dụng cho toàn bộ trang vì thế bạn có thể sử dụng nó ở bất cứ đâu, không giống như các dữ liệu khác chỉ có thể được dùng trong một tiện ích riêng biệt. Dưới đây là danh sách các thẻ dữ liệu tổng thể:

• <data:blog.title/>: tiêu đề blog
• <data:pageType/>: kiểu trang hiện hành, như các kiểu trang 'item', 'archive', 'index'.
• <data:blog.pageName/>: tên trang
• <data:blog.pageTitle/>: tiêu đề trang hiện hành
• data:blog.url: URL của trang hiện hành
• data:blog.homepageUrl: trang chủ của blog
• <data:blog.encoding/>: mã hóa để sử dụng cho blog, ví dụ UTF-8
• data:blog.languageDirection: định dạng ngôn ngữ từ trái sang phải (ltr) hoặc từ phải sang trái (rtl)
• <data:blog.feedLinks/>: các đường dẫn nguồn cấp tự phát hiện cho tiêu đề trang.

2. Tiện ích Tiêu đề đầu trang

Tiêu đề đầu trang là một tiện ích đơn giản chỉ với hai mảng dữ liệu chính, đó là:

• <data:title/>: tiêu đề blog
• <data:description/>: phần mô tả blog

3. Tiện ích Bài đăng Blog

Đây là phần trung tâm của blog và là phần phức tạp nhất. Dưới đây là danh sách các dữ liệu trong tiện ích này:

• data:feedLinks: Danh sách nguồn cấp cho trang. Trên trang chính, nó chứa nguồn cấp cho cả blog; trên các trang item, nó chứa các nguồn cấp nhận xét. Mỗi hạng mục chứa các phần sau:
  
  • data:feedLinks.url: URL của nguồn cấp
  • <data:feedLinks.name/>: tên nguồn cấp (ví dụ 'Posts' hoặc 'Comments').
  • <data:feedLinks.feedType/>: kiểu nguồn cấp (Atom hay RSS).
  • <data:feedLinks.mimeType/>: kiểu biểu thị nguồn cấp
• data:olderPageUrl: nếu có các bài đăng cũ hơn so với trang hiện hành thì đây là URL đến các bài đăng đó (không phải trang nào cũng có đường dẫn này)
• <data:olderPageTitle/>: tiêu đề đường dẫn đến trang các bài đăng cũ hơn
• data:newerPageUrl: nếu có các bài đăng mới hơn so với trang hiện hành thì đây là URL dẫn đến các bài đăng đó
• <data:newerPageTitle/>: tiêu đề đường dẫn đến trang cái bài đăng mới hơn
• <data:homeMsg/>: dòng text liên kết đến trang chủ (Home)
• <data:commentLabel/>: thẻ dùng để hiển thị số nhận xét (Comments)
• <data:authorLabel/>: thẻ dùng để chỉ người viết bài (Posted by)
• <data:timestampLabel/>: thẻ dùng để chỉ thời gian bài được đăng (posted at)
• <data:postLabelsLabel/>: thẻ để giới thiệu danh sách các nhãn bài viết (labels for this post)
• <data:backlinksLabel/>: thẻ để mô tả liên kết ngược đến bài viết (links to this post)
• data:posts: danh mục tất cả bài viết trong trang. Mỗi bài viết chứa các phần sau đây:
  
  • <data:post.dateHeader/>: ngày tháng xuất bản bài viết, chỉ có mặt nếu bài đầu tiên trong danh sách được đăng trong ngày hiện hành
  • <data:post.id/>: chuỗi số ID cho bài viết
  • <data:post.title/>: tiêu đề bài viết
  • <data:post.body/>: nội dung bài viết
  • <data:post.author/>: tên hiển thị tác giả bài viết
  • data:post.url: liên kết cố định của bài viết
  • <data:post.timestamp/>: định dạng thời gian bài viết, tồn tại ở mọi bài viết
  • data:post.labels: danh mục các nhãn cho bài viết. Mỗi nhãn chứa các phần sau đây:
    
    •  <data:label.name/>: dòng text biểu thị tên nhãn
    •  data:label.url: URL của trang liệt kê tất cả các bài viết trong blog thuộc nhãn hiện hành
    •  data:lable.isLast: true hoặc false/ chỉ định nhãn có phải là nhãn cuối cùng trong danh mục (sử dụng các dấu phẩy giữa các nhãn)
  • <data:post.allowComments/>: dùng 'True' nếu bài viết cho phép các nhận xét
  • <data:post.numComments/>: số nhận xét trên bài viết
  • <data:post.showBacklinks/>: có hay không hiển thị liên kết ngược đến bài viết
  • <data:post.numBacklinks/>: số liên kết ngược cho bài viết
  • data:post.addCommentUrl: URL của dòng 'add a comment' cho bài viết
  • data:post.emailPostUrl: URL của dòng 'email this post' cho bài viết
  • data:post.editUrl: URL cho liên kết chỉnh sửa nhanh bài viết
  • <data:post.feedLinks/>: danh mục các nguồn cấp riêng biệt cho bài viết (khác với nguồn cấp chung cho cả blog), có thể chứa cả nguồn cấp cho phần nhận xét của bài viết. Mỗi nguồn cấp chứa các phần sau đây:
    
    • data:f.url: URL nguồn cấp
    • <data:f.name/>: tên nguồn cấp ('Posts' hay 'Comments')
    • <data:f.feedType/>: kiểu nguồn cấp (Atom hay RSS)
    • <data:f.mimeType/>: kiểu biểu thị nguồn cấp
  • <data:post.comments/>: danh mục tất cả các nhận xét trong bài viết (chỉ trên các trang item). Mỗi nhận xét chứa các phần sau đây:
    
    • <data:comment.id/>: số ID của nhận xét
    • <data:comment.body/>: phần nội dung nhận xét
    • <data:comment.timestamp/>: thời gian tạo nhận xét
    • <data:comment.author/>: tên hiển thị tác giả nhận xét
    • data:comment.authorUrl: URL đến trang hồ sở của tác giả nhận xét, nếu nhận xét không phải nặc danh
    • data:comment.deleteUrl: URL để xóa nhận xét
    • data:comment.isDeleted: liệu nhận xét đã bị xóa hay chưa

4. Tiện ích Lưu trữ Blog

Tiện ích này gồm một số thẻ dữ liệu chính như sau:

• <data:title/>: tiêu đề tiện ích
• data:style: kiểu bố trí liệt kê các bài viết lưu trữ theo dạng 'MENU', 'FLAT', hoặc 'HIERARCHY'.
• data:data: danh mục của mỗi đơn vị lưu trữ, chứa các phần sau:
  
  • <data:i.name/>: tên của các khoảng thời gian lưu trữ (ví dụ "August 2010"
  • data:i.url: đường dẫn đến trang chứa các bài viết từ khoảng thời gian lưu trữ
  • <data:i.post-count/>: bao nhiều bài viết có trong khoảng thời gian lưu trữ

5. Tiện ích Hồ sơ

Đối với blog chỉ có một tác giả thì tiện ích Hồ sơ chứa những thông tin sau đây.

• <data:title/>: tiêu đề tiện ích
• data:userUrl: URL đến hồ sơ của tác giả
• data:location: vị trí từ hồ sơ của tác giả
• data:aboutme: thông tin "About Me" từ hồ sơ
• <data:displayname/>: tên hiển thị tác giả
• data:photo: ảnh hồ sơ người dùng, gồm tác phần sau đây
  
  • data:photo.url: URL đến ảnh
  • data:photo.width: chiều rộng ảnh (đơn vị pixel)
  • data:photo.height: chiều cao ảnh (đơn vị pixel)
  • data:photo.alt: dòng text chỉ thuộc tính "alt" cho ảnh

Đối với các blog nhóm (team blogs), tiện ích hồ sơ chứa ít thông tin hơn về các tác giả, như sau:

• <data:title/>: tiêu đề tiện ích
• data:authors: danh sách các tác giả, mỗi tác giả chứa các phần sau đây:
  
  • data:displayname: tên hiển thị tác giả
  • data:userURL: URL đến trang hồ sơ của tác giả

Nếu bạn muốn thiết kế Template dùng cho cả blog một tác giả và blog nhiều tác giả thì bạn có thể sử dụng biến data:team để phân biệt giữa hai trường hợp. Ví dụ:

<b:if cond='data:team == "true"'> <!-- team blog profile -->
<ul><b:loop values='data:authors' var='i'> <li><a expr:href='data:i.userUrl'><data:i.display-name/></ a></li> </b:loop></ul>
<b:else/> <!-- normal blog profile -->
<b:if cond='data:photo.url != ""'><a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a></b:if>
<dl class='profile-datablock'> <dt class='profile-data'><data:displayname/></dt>
<b:if cond='data:showlocation == "true"'> <dd class='profile-data'><data:location/></dd> </b:if>
<b:if cond='data:aboutme != ""'><dd class='profile- textblock'><data:aboutme/></dd></b:if> </dl>
<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
</b:if>

6. Tiện ích Text / HTML / JavaScript

Tiện ích Text và tiện ích HTML/JavaScript hoạt động giống nhau và có cùng hai mảng dữ liệu:

• <data:title/>: tiêu đề tiện ích
• <data:content/>: nội dung tiện ích

7. Tiện ích Nguồn cấp

Nội dung tiện ích nguồn cấp được load bằng cách sử dụng Google AJAX API sau khi blog được trình diễn trong công cụ trình duyệt. Bạn chỉ có thể định dạng nó bằng cách sử dụng CSS. Tiện ích này gồm 2 mảng dữ liệu sau:

• <data:title/>: tiêu đề tiện ích
• data:feedUrl: URL của nguồn cấp

8. Tiện ích Ảnh

Một tiện ích ảnh chứa một ảnh riêng biệt, cung cấp tất cả các dữ liệu liên quan đến ảnh này.

• <data:title/>: tiêu đề tiện ích
• data:sourceUrl: URL nguồn ảnh
• data:width: bề rộng của ảnh (đơn vị pixel)
• data:height: chiều cao ảnh (đơn vị pixel)
• data:caption: chú thích ảnh

9. Tiện ích Nhãn

Tiện ích Nhãn gồm danh mục tất cả các nhãn được sử dụng trong blog. Gồm các mảng dữ liệu sau đây:

• <data:title/>: tiêu đề tiện ích
• data:labels: danh mục các nhãn, mỗi nhãn chứa các phần sau:
  
  • <data:label.name/>: text biểu thị tên nhãn
  • <data:label.count/>: số bài viết có trong nhãn
  • data:label.url: đường dẫn đến trang hiển thị tất các các bài viết trong nhãn

10. Tiện ích Danh sách blog

Tiện ích này chứa danh sách các hạng mục chỉ là các URL riêng biệt.

• <data:title/>: tiêu đề tiện ích
• data:items: danh sách các hạng mục, gồm các phần sau đây:
  
  • data:displayStyle: định dạng hiển thị là display:block
  • <data:timePeriodSinceLastUpdate/>: khoảng cách thời gian kể từ lúc cập nhật bài viết mới
  • <data:blogTitle/>: tiêu đề blog
  • data:blogUrl: URL đến blog
  • data:blogIconUrl: URL đến favicon của blog
  • <data:itemTitle/>: tiêu đề bài viết
  • <data:itemSnippet/>: đoạn trích dẫn bài viết
  • data:itemUrl: URL đến bài viết
  • data:itemThumbnail: ảnh đại diện bài viết
  • data:itemThumbnail.height: chiều cao ảnh đại diện
  • data:itemThumbnail.width: chiều rộng ảnh đại diện
  • data:itemThumbnail.url: URL của ảnh đại diện

11. Tiện ích Danh sách liên kết

Tiện ích này gồm danh sách các liên kết, mỗi liên kết có hai phần: text và link.

• <data:title/>: tiêu đề tiện ích
• data:links: danh mục các liên kết, mỗi liên kết chứa các phần sau:
  
  • <data:link.name/>: dòng text biểu thị liên kết
  • data:link.target: URL của liên kết

12. Tiện ích Logo

Tiện ích này đơn giản nhất, chỉ có một mảng dữ liệu:

• data:fullButton: URL của nút Blogger mà bạn chọn.

Toàn bộ cấu trúc XML của nút Blogger như thế này:

<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'>
<b:includable id='main'>
<div class='widget-content'>
<a href='http://www.blogger.com'><img alt='Powered By Blogger' expr:src='data:fullButton'/></a>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Hy vọng với phân tích chi tiết về các thẻ dữ liệu trong bố cục Template, bạn sẽ hiểu sâu hơn về cấu trúc XML của Blogger Template, hỗ trợ thêm cho bạn kiến thức về thiết kế Template.

Về việc lập chuyên mục Hỏi và Đáp

Kể từ khi Thủ thuật Blogger đã có một vị trí nhất định trong lòng quý bạn đọc thì mình đã nhận được rất nhiều câu hỏi liên quan đến việc thiết kế webblog trên nền tảng Blogger. Những câu hỏi thuộc những cấp độ khó dễ khác nhau, có câu hỏi mình đã giải đáp, có câu hỏi vì nhiều lý do khách quan khác nhau mà mình chưa thể giải đáp được. Chính vì vậy, mình quyết định lập ra mục Hỏi và Đáp (Q & A) với mục đích tạo ra một diễn đàn mini để quý bạn đọc cùng nhau đàm đạo, chia sẻ kinh nghiệm thiết kế blogspot, nêu ra những câu hỏi, những vấn đề khúc mắc về blogspot từ đơn giản nhất đến phức tạp nhất. Mục Hỏi và Đáp không giới hạn đối tượng người tham gia, mọi người ai cùng đều có quyền đưa ra câu hỏi, thảo luận và đưa ra cách giải quyết theo hướng xây dựng.

Các chủ đề Hỏi và Đáp có thể kể ra như: Template, CSS, HTML, Javascript, jQuery, Mootools, Scriptaculous, SEO, tiện ích blogspot, lỗi mắc phải khi thiết kế blogspot …

Các ý kiến của bạn luôn được tôn trọng vì thế khi đưa ra câu hỏi bạn cần thể hiện tính xây dựng và nghiêm túc. Ngoài ra bạn không nên ngại đưa ra câu hỏi cho dù câu hỏi đó có đơn giản như thế nào đi nữa. Đối với việc trả lời các câu hỏi, nếu bạn biết lời giải đáp thì bạn được khuyến nghị mạnh dạn nêu ra quan điểm của mình, dù đúng hay sai thì quan điểm của bạn đều được tôn trọng và đánh giá cao.

Cải tiến cấu trúc URL theo chuẩn Google SEO 2010

Nếu bạn muốn website/webblog của mình có một thứ hạng cao trên các trang kết quả công cụ tìm kiếm (SERPs), bạn hãy chắc chắn rằng trang web của bạn đã được tối ưu hóa, trong đó URL là một yếu tố không thể thiếu. Tại sao phải tối ưu hóa URL? Nguyên do đầu tiên phải tối ưu hóa URL đó là sẽ giúp bạn tăng thứ hạng trên bảng SERPs, kế đến là khi người dùng đọc được URL của bạn, tỷ lệ nhấp chuột sẽ cao hơn và cuối cùng một khi URL được tối ưu hóa, người dùng có thể nhớ và gõ lại URL đó nếu họ muốn quay trở lại.

Các URL đơn giản dễ hiểu sẽ truyền tải nội dung thông tin một cách dễ dàng

Việc tạo các danh mục và tên tệp cho các tài liệu trên trang web của bạn không chỉ có thể giúp bạn giữ cho trang web được sắp xếp tốt hơn mà còn dẫn đến việc thu thập dữ liệu các tài liệu của bạn tốt hơn bằng các công cụ tìm kiếm. Nó cũng có thể tạo ra các URL dễ dàng hơn, "thân thiện hơn" cho những người muốn liên kết tới nội dung của bạn. Khách truy cập có thể bị bối rối trước các URL cực kỳ dài và khó hiểu chỉ chứa rất ít từ có thể nhận ra.

Các URL như trường hợp (1) có thể gây bối rối và không thân thiện. Người dùng sẽ gặp khó khăn khi gợi lại URL từ trí nhớ hoặc tạo liên kết đến nó. Người dùng cũng có thể cho rằng một phần của URL không cần thiết, đặc biệt nếu URL hiển thị nhiều tham số không thể nhận ra. Họ có thể bỏ lại một phần, phá vỡ liên kết.



(1) URL đến trang trên trang web về thẻ bóng chày của chúng tôi mà người dùng có thể gặp khó khăn

Một số người dùng có thể liên kết đến trang của bạn bằng cách sử dụng URL của trang đó làm chuỗi ký tự liên kết. Nếu URL của bạn chứa các từ liên quan, điều này cung cấp cho người dùng và các công cụ tìm kiếm nhiều thông tin về trang hơn lượng thông tin mà ID hoặc tham số có tên kỳ quặc có thể cung cấp (2).



(2) Các từ được tô sáng ở trên có thể thông báo cho người dùng hoặc công cụ tìm kiếm biết trang đích có nội dung gì trước khi truy cập liên kết

Các URL được hiển thị ở các công cụ tìm kiếm

Cuối cùng, hãy nhớ rằng URL đến tài liệu được hiển thị dưới dạng một phần của kết quả tìm kiếm trong Google, bên dưới tiêu đề và đoạn trích của tài liệu. Giống như tiêu đề và đoạn trích, các từ trong URL trong kết quả tìm kiếm được in đậm nếu chúng xuất hiện trong truy vấn của người dùng (3). Dưới đây là ví dụ khác hiển thị URL trên tên miền của chúng tôi cho trang chứa bài viết về các thẻ bóng chày hiếm nhất. Các từ trong URL có thể cuốn hút với người dùng tìm kiếm hơn là một số ID như "www.brandonsbaseballcards.com/article/102125/".



(3) Người dùng thực hiện truy vấn [baseball cards]. Trang chủ của chúng tôi xuất hiện dưới dạng kết quả, với URL được liệt kê bên dưới tiêu đề và đoạn trích

Google thực hiện tốt việc thu thập dữ liệu đối với tất cả các loại cấu trúc URL, ngay cả khi các cấu trúc đó khá phức tạp, nhưng việc dành thời gian làm cho URL của bạn càng đơn giản càng tốt cho cả người dùng và công cụ tìm kiếm có thể trợ giúp cho Google. Một số người quản trị web cố gắng đạt được điều này bằng cách viết lại các URL động của mình thành các URL tĩnh; mặc dù Google không phản đối việc này, chúng tôi muốn lưu ý rằng đây là quy trình nâng cao và nếu không được thực hiện đúng cách, có thể gây ra sự cố thu thập dữ liệu với trang web của bạn. Để tìm hiểm thêm nữa về cấu trúc URL tốt, chúng tôi đề xuất trang Trung tâm Trợ giúp Quản trị Trang web này về tạo các URL thân thiện với Google.

Các biện pháp tốt cho cấu trúc URL

1. Sử dụng các từ trong URL: URL chứa các từ liên quan đến nội dung và cấu trúc trang web của bạn sẽ thân thiện với khách truy cập hơn khi điều hướng trang web của bạn. Khách truy cập sẽ nhớ chúng tốt hơn và có thể sẵn sàng liên kết đến chúng hơn. Bạn cần tránh:

• Sử dụng các URL dài dòng với các tham số và các ID phiên không cần thiết

• Chọn tên trang chung chung như "trang1.html"

• Sử dụng quá nhiều từ khoá như "baseball-cards-baseball-cards-baseball-cards.htm"

2. Tạo cấu trúc thư mục đơn giản: Sử dụng cấu trúc thư mục tổ chức tốt nội dung của bạn và giúp khách truy cập dễ dàng biết vị trí của họ trên trang web của bạn. Thử sử dụng cấu trúc thư mục của bạn để chỉ định loại nội dung được tìm thấy tại URL đó. Bạn cần tránh:

• Có cấu trúc lớp thư mục con sâu như ".../dir1/dir2/dir3/dir4/dir5/dir6/page.html"

• Sử dụng tên thư mục không liên quan đến nội dung trong thư mục đó

3. Cung cấp phiên bản URL để liên kết đến tài liệu: Để ngăn người dùng liên kết tới phiên bản URL và ngăn những người khác liên kết tới phiên bản khác (điều này có thể chia cắt uy tín của nội dung đó giữa các URL), tập trung vào việc sử dụng và tham chiếu tới URL trong cấu trúc và liên kết bên trong trên trang của bạn. Nếu bạn phát hiện rằng mọi người đang truy cập cùng một nội dung thông qua nhiều URL, việc thiết lập 301 chuyển hướng từ các URL không ưa thích đến URL vượt trội là giải pháp tốt cho vấn đề này. Bạn cần tránh:

• Có các trang từ các tên miền phụ và thư mục gốc (ví dụ: "domain.com/page.htm" và "sub.domain.com/page.htm") truy cập cùng một nội dung

• Lẫn lộn các phiên bản URL có www. và không có www. trong cấu trúc liên kết bên trong của bạn

• Sử dụng cách viết hoa URL kỳ quặc (nhiều người dùng mong đợi các URL được viết thường và nhớ chúng tốt hơn).

Với những kiến thức cơ bản nói trên, chúng ta phải tối ưu hóa URL như thế nào cho blogspot? Nào chúng ta cùng thực hành theo một số điểm mấu chốt như sau:

Khi đăng bài viết, nên đặt tiêu đề bài viết ở dạng tiếng Anh hoặc tiếng Việt không dấu có khoảng trắng giữa các từ, để khi xuất bản bài viết rồi thì URL sẽ có dấu gạch ngang (-) để phân cách giữa các từ khóa, giúp công cụ tìm kiếm dễ dàng hiểu được cấu trúc URL của bạn là gì, và hiểu được chính xác từ khóa được bắt đầu và kết thúc như thế nào.

Ví dụ: http://www.thuthuatblogger.info/2011/07/ky-thuat-toi-uu-hoa-url.html.

Trong trường hợp lúc đăng bài, đặt tiêu đề tiếng Việt không dấu, sau khi xuất bản lần thứ nhất, bạn trở lại chỉnh sửa bài viết rồi đặt lại tiêu đề bằng tiếng Việt có dấu sau đó xuất bản lại bài viết. Làm như vậy sẽ tạo được URL tĩnh giúp tăng tốc độ đánh chỉ mục của công cụ tìm kiếm, tỷ lệ người dùng click nhiều hơn.

Bạn cần giới hạn số lượng ký tự trong URL. Công cụ tìm kiếm sẽ giới hạn tìm kiếm nếu URL của trang quá dài và có quá nhiều từ khóa. Nói chung là các URL không nên vượt qua 10 từ hoặc 96 ký tự. Các công cụ tìm kiếm thích URL ngắn và có tính mô tả; tính mô tả ở đây tức là URL có nội dung liên quan đến bài viết, người đọc nhìn qua là có thể hiểu ngay chủ đề của bài viết. Vì thế bạn cần tránh việc đặt tiêu đề bài viết bằng tiếng Việt có dấu để xuất bản lần đầu. Ngoài ra cần giữ trong URL của bạn có 1 từ khóa chính và loại bỏ bớt các từ không cần thiết để tránh làm tăng chiều dài URL.

Sử dụng 1 định dạng URL duy nhất có hoặc không có www. Nếu không thì công cụ tìm kiếm sẽ phạt bạn vì tội lặp nội dung. Mặc dù 2 URL (có và không có www) này đều trỏ về trang chủ, nhưng công cụ tìm kiếm sẽ đối xử 2 URL này khác nhau.

Ví dụ: http://thuthuatblogger.info và http://www.thuthuatblogger.info

Để sử dụng 1 định dạng URL duy nhất, bạn có thể sử dụng phương pháp chuyển hướng URL trang chủ dạng tenmien.com sang www.tenmien.com lúc cài đặt tên miền tùy chỉnh trong Blogger hoặc sử dụng Google Webmaster Tool để xác định sự ưu tiên với tên miền có www hay không có www.

Qua phân tích trên có thể thấy rằng việc tối ưu hóa URL là cực kỳ cần thiết cho bất kỳ một website hay webblog nào.

Về việc yêu cầu thủ thuật Blogger

Blogspot là một kho kiến thức vô cùng, vô bờ bến; có thể nói cả đời người khám phá vẫn chưa hết. Kiến thức thì vô tận nhưng sức người có hạn, dù mình có sung sức đến đâu thì cũng có ngày mạch cảm hứng bất tận dạo này bỗng đứt bóng. Mình hy vọng rằng mọi người trong cộng đồng sẽ chung tay góp ý tưởng về thủ thuật Blogger để cùng nhau phát triển, hỗ trợ lẫn nhau cùng tiến bộ.

Mình lập ra mục “Yêu cầu thủ thuật Blogger” để các bạn đóng góp và chia sẻ ý tưởng. Mỗi người một ít gộp lại sẽ thành kho kiến thức phong phú cho tất cả chúng ta, trở thành tài sản chung của chúng ta. Nếu ý tưởng nằm trong phạm vi hiểu biết của mình thì mình sẽ cố gắng thử nghiệm demo, nếu thành công thì mình sẽ công bố tại đây và sẽ xuất bản thành bài viết hướng dẫn. Nếu ý tưởng vượt tầm kiến thức của mình thì sẽ kêu gọi các blogger cùng hợp lực để phát triển.

Chứa đựng những ý tưởng hay ắt không bao giờ cảm thấy cô đơn - (P.Sidney).

Thế thì, bạn hãy để lại ý kiến/yêu cầu của mình bên dưới nếu bạn có ý tưởng mới về thủ thuật Blogger. Các yêu cầu cần liên quan đến blogspot và nêu rõ nội dung ý tưởng. Những yêu cầu thủ thuật được thực hiện thành công sẽ được gom vào mục “Thủ thuật yêu cầu” để các bạn tiện theo dõi.

DANH SÁCH THỦ THUẬT YÊU CẦU

1. Blue79blog - đã xuất bản thủ thuật.
- Tạo hiệu ứng ẩn hiện tiện ích trên sidebar ( Chi tiết >>)

2. ICTSoft - đã xuất bản thủ thuật.
- Gắn tem cho bài viết đang chờ duyệt ( Chi tiết >>)

3. MrWinni - đã xuất bản thủ thuật.
- Script liệt kê và gọi script ( Chi tiết >>)

4. Yolks - đã xuất bản thủ thuật.
- Ẩn nhận xét của Nặc danh ( Chi tiết >>)

5. Lee Peace - đã xuất bản thủ thuật.
- Xem một bài viết trong nhãn bất kỳ thì tiện ích Bài viết mới nhất xuất hiện gồm những bài mới đăng trong nhãn ( Chi tiết >>)

Tạo khung nội quy nhận xét đóng tự động

Như các bạn có thể thấy ở phần nhận xét theo các bài viết trên Thủ thuật Blogger có khung nội quy nhận xét khá lạ so với các blogspot khác, nếu để ý, sau 2 phút bạn sẽ thấy khung nội quy nhận xét này tự động đóng và biến mất. Với tính năng này, blogspot của bạn sẽ trở nên lạ hơn, gây trí tò mò hơn đối với người đọc. Lấy giả thuyết tính trung bình để đọc một bài viết trên blogspot của bạn phải mất 1,5 phút thì bạn có thể cài đặt sau 2 phút thì khung nội quy nhận xét sẽ biến mất, tức là người đọc có 30 giây để lướt qua nội quy nhận xét nếu có ý định để lại nhận xét. Và điều thật bất ngờ là sau khi nhận xét được xuất bản thì khung nội quy nhận xét bổng dưng biến mất mà không có sự tác động nào.

Xin bật mí một chút, ý tưởng tạo khung nội quy nhận xét này có định dạng CSS từ trang đăng nhập Blogger, mình chỉ linh hoạt áp dụng và tạo thêm hiệu ứng đóng tự động cho nó.

Để cài đặt khung nội quy nhận xét như vậy, bạn hãy thực hiện như sau:

Bước 1. Đăng nhập Blogger, vào Settings (Cài đặt) >> Comments (Nhận xét) kéo xuống mục Comment Form Message rồi dán vào đó đoạn văn bản nội quy nhận xét, sau đó nhấn SAVE SETTINGS để lưu cài đặt.

Bước 2. Vào Design (Thiết kế) >> Edit HTML (Chỉnh sửa HTLM), chọn Expand Widget Templates (Mở rộng mẫu tiện ích).

Tìm đến đoạn code:

<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

Rồi đặt trước nó bằng đoạn code bên dưới.

<style>
#comrule {padding:5px 0;width:550px}
.comrule-container{padding:5px;background:#fff;border:1px solid darkgray}
.comrule-header{padding:5px 10px;background:#a2bf89;white-space:nowrap;color:#fff}
.comrule-body{width:580px;padding:5px 10px;background:#cddebe}
.comrule-body a{color:#036300}
.comrule-close{float:right;margin-right:-5px}
.comrule-text{text-align:justify;font-size:14px;line-height:19px;font-weight:normal;text-case:sentence;color:#069}
</style>
<script type='text/javascript'>
function closediv() {
document.getElementById(&quot;comrule&quot;).style.display=&quot;none&quot;;
}
setTimeout(closediv, 120000);
</script>

<div id='comrule'>
<div class='comrule-container'>
<table cellpadding='0' cellspacing='0'><tr><td class='comrule-header'><b>Nội quy!</b></td>
<td class='comrule-body'><a class='comrule-close' href='#' onclick='closediv()'><img alt='Đóng lại' src='http://www.blogger.com/img/close.png'/></a>
<span class='comrule-text'><data:blogCommentMessage/></span></td></tr></table>
</div>
</div>

Trong đoạn code trên bạn có thể thấy dòng <data:blogCommentMessage/> chính là phần nội quy nhận xét. Số 120000 tượng trưng cho 2 phút (1 phút = 60000 mili giây) đóng tự động khung nội quy nhận xét, bạn có thể đổi con số theo ý thích. Ngoài ra có thể tùy biến CSS cho phù hợp với tông màu trên blogspot của bạn.

Xong rồi bạn hãy lưu Template là được.

Về việc chính thức khai trương Thuthuatblogger.info

Thân chào các bạn!


9 tháng là một khoảng thời gian đủ dài để mình trải nghiệm khá đầy đủ những thành công và thất bại trong sự nghiệp viết blog. 9 tháng với bao thăng trầm trên đường đời ngược xuôi song vẫn không ngăn cản nổi nhiệt huyết cống hiến cho cộng đồng Blogger Việt. Có nhiều lúc tưởng chừng không đủ sức và thời gian để tiếp tục viết blog nhưng vì những điều còn trăn trở và dang dở mà mình chưa thể thực hiện được cũng như những tình cảm chân thành của quý bạn đọc đã thôi thúc mình trở lại và tiếp tục với sự nghiệp viết blog.

Khai trương trang tin ThuthuatBlogger.info đã là một thành công nhất định đối với mình sau 9 tháng viết blog và xây blogspot tạm bợ trên “đất gốc” blogspot cũng như “đất sỏi” dot.tk. Sang nhà mới, mục tiêu của mình là “Liên tục phát triển website này biến nó thành một kho lưu trữ thủ thuật blogspot cho mọi đối tượng quan tâm đến công nghệ thiết kế blog trên nền tảng Blogger.”

Để website này hoạt động hiệu quả cho riêng cá nhân mình và cho cả người dùng, mình mong muốn rằng sẽ tiếp tục nhận được những ý kiến đóng góp quý báu về kinh nghiệm thực tế sử dụng thông tin tại Thủ thuật Blogger. Hy vọng rằng website này không phái chỉ là của riêng mình mà là của chúng ta; là một môi trường, ngôi trường thuận lợi giúp chúng ta thành công hơn nữa trong quá trình học tập, nghiên cứu, công việc và giải trí.

Nhân dịp khai trương trang tin ThuthuatBlogger.info, xin chúc quý bạn bè và bạn đọc dồi dào sức khỏe, tràn trề nhiệt huyết trong sự nghiệp viết blog. Trong thời gian tới, mình sẽ thường xuyên ghé thăm và góp ý cho blogspot của các bạn nhiều hơn. Đặc biệt, nhân dịp này, các bạn có thể tha hồ “chém gió” và yêu cầu hoặc đề xuất ý tưởng thủ thuật blogspot tại đây, đồng thời có thể đề nghị liên kết (Kết nối Blogger Việt) để chúng ta cùng tạo sự kết nối giữa các thành viên trong cộng đồng blogspot Việt Nam.

Mình xin tuyên bố trang tin http://www.thuthuatblogger.info/ chính thức khai trương và hoạt động kể từ ngày 28/7/2011.

Trân trọng thông báo!