Saturday, August 6, 2011

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

Thursday, August 4, 2011

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/AVvXsEiKLI0umqxa8tt7oSYQQVOzigcZnRdw2rfEbX4lJg7S-9mGxnz0parqFc6CRmbMBDfzNTr8ThU06h77MwMtjzzlpQOv0cIYlGIrNwS0LmCGmN5dIvpT5y5hasidMpl1ws8g4g17P1IQcpc/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.vntai.com

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.vntai.com.

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.



Wednesday, August 3, 2011

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.vntai.com
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.

Tuesday, August 2, 2011

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

Monday, August 1, 2011

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.vntai.com
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.vntai.com
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/AVvXsEhTZWNLP5zXKw3-0tPd70lTUtGT8FIHUB-iz79lPGOSEi0fKSXHAfpm8YydCYhBrSJmGoYskHil7_OGfmASdHUTFPOTfdyMGUqMSbhs5ckLx44RZuUPzGF9MDuv5tiyO0MHW67S6acY4elP/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/AVvXsEhTZWNLP5zXKw3-0tPd70lTUtGT8FIHUB-iz79lPGOSEi0fKSXHAfpm8YydCYhBrSJmGoYskHil7_OGfmASdHUTFPOTfdyMGUqMSbhs5ckLx44RZuUPzGF9MDuv5tiyO0MHW67S6acY4elP/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/AVvXsEhTZWNLP5zXKw3-0tPd70lTUtGT8FIHUB-iz79lPGOSEi0fKSXHAfpm8YydCYhBrSJmGoYskHil7_OGfmASdHUTFPOTfdyMGUqMSbhs5ckLx44RZuUPzGF9MDuv5tiyO0MHW67S6acY4elP/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/AVvXsEhTZWNLP5zXKw3-0tPd70lTUtGT8FIHUB-iz79lPGOSEi0fKSXHAfpm8YydCYhBrSJmGoYskHil7_OGfmASdHUTFPOTfdyMGUqMSbhs5ckLx44RZuUPzGF9MDuv5tiyO0MHW67S6acY4elP/s1600/Nha+hat+Opera.jpg" /></a><cap>Nhà hát Opera Sydney</cap></div>

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