Sunday, July 31, 2011

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 1Demo 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.vntai.com 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/AVvXsEisVxHokh85ZyH4_RXPgO_6PLWaQBxL0OK-IZv5bZ2Sww1vWZIT7xV7-FQVydhC05xnAaLgxg8XsrEfMmi379goGEVPYCX7_eABd2WOzGhOVBB6I5oHHM0e4DfgKcVBwwXdwVNZMYNz4y-Y/s1600/minus.gif" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIp01CQq9sMvaQYcaxq5j-FdAqhs1BgfEkL37HwaJ-xxl3bIL5L67X3pLCq4KpsHH3YwQrqjYMOz8-cqAcnZMElr3cOlOSHob911q5BlqOhNB_r7UzEZQQefks3UtXqegXqE7klDJiE7nG/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/AVvXsEjIp01CQq9sMvaQYcaxq5j-FdAqhs1BgfEkL37HwaJ-xxl3bIL5L67X3pLCq4KpsHH3YwQrqjYMOz8-cqAcnZMElr3cOlOSHob911q5BlqOhNB_r7UzEZQQefks3UtXqegXqE7klDJiE7nG/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 đề


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/AVvXsEisVxHokh85ZyH4_RXPgO_6PLWaQBxL0OK-IZv5bZ2Sww1vWZIT7xV7-FQVydhC05xnAaLgxg8XsrEfMmi379goGEVPYCX7_eABd2WOzGhOVBB6I5oHHM0e4DfgKcVBwwXdwVNZMYNz4y-Y/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/AVvXsEjIp01CQq9sMvaQYcaxq5j-FdAqhs1BgfEkL37HwaJ-xxl3bIL5L67X3pLCq4KpsHH3YwQrqjYMOz8-cqAcnZMElr3cOlOSHob911q5BlqOhNB_r7UzEZQQefks3UtXqegXqE7klDJiE7nG/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 đề


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/AVvXsEisVxHokh85ZyH4_RXPgO_6PLWaQBxL0OK-IZv5bZ2Sww1vWZIT7xV7-FQVydhC05xnAaLgxg8XsrEfMmi379goGEVPYCX7_eABd2WOzGhOVBB6I5oHHM0e4DfgKcVBwwXdwVNZMYNz4y-Y/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/AVvXsEiIJc9u7F0VRT_bEt6QmgX9ZkeObzpSePjBviU_nC1RXC-QpEoIrZV8jWQOiSwXe9FwmsJVwLo4dlqSKpehVhNq1ZxI_gHkhteRB89f6RW7nQhDAI8nOLHe7U8W3uXMI5rBGwHenkkNMXSd/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é.

Saturday, July 30, 2011

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

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

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:

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.

Friday, July 29, 2011

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.vntai.com/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://vntai.comhttp://www.vntai.com

Để 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 >>)

Thursday, July 28, 2011

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.

Wednesday, July 27, 2011

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

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 vntai.com đã 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 vntai.com, 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.vntai.com/ 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!

Sử dụng thẻ meta mô tả theo chuẩn Google SEO 2010

Bất kỳ một website hay webblog nào cũng cần phần mô tả, đó là phần tóm tắt được xác định cho mỗi trang. Nó cực kỳ quan trong theo chuẩn Google SEO 2010.



Thẻ meta mô tả của trang cung cấp cho Google và các công cụ tìm kiếm khác bản tóm tắt nội dung trang (1). Trong khi tiêu đề trang có thể là một vài từ hoặc cụm từ, thẻ meta mô tả của trang có thể là một hoặc hai câu hoặc một đoạn ngắn. Công cụ Quản trị Trang web của Google cung cấp phần phân tích nội dung hữu ích sẽ cho bạn biết về bất kỳ thẻ meta mô tả nào hoặc quá ngắn, quá dài hoặc trùng lặp quá nhiều lần (thông tin tương tự cũng được hiển thị cho các thẻ <title>). Giống như thẻ <title>, thẻ meta mô tả được đặt trong thẻ <head> của tài liệu HTML của bạn.


(1) Phần đầu của thẻ meta mô tả cho trang web của chúng tôi, cung cấp tổng quan ngắn gọn về các dịch vụ của trang web

Tầm quan trọng của các thẻ meta mô tả như thế nào?

Các thẻ meta mô tả rất quan trọng vì Google có thể sử dụng chúng làm các đoạn trích cho trang của bạn. Hãy lưu ý rằng chúng tôi nói rằng "có thể" bởi vì Google có thể chọn sử dụng phần tương ứng của văn bản hiển thị trên trang của bạn nếu nó khớp với truy vấn của người dùng. Hoặc, Google có thể sử dụng mô tả của trang web của bạn trong Dự án Thư mục Mở (ODP) nếu trang web của bạn có trong danh sách đó (tìm hiểu cách ngăn các công cụ tìm kiếm hiển thị dữ liệu ODP). Thêm các thẻ meta mô tả vào mỗi trang web của bạn luôn luôn là biện pháp tốt trong trường hợp Google không thể tìm thấy
lựa chọn văn bản tốt để sử dụng trong đoạn trích. Blog Trung tâm Quản trị Trang web có bài đăng giàu thông tin về cải tiến các đoạn trích bằng các thẻ meta mô tả tốt hơn.

Các đoạn trích xuất hiện bên dưới tiêu đề của trang và phía trên URL của trang trong kết quả tìm kiếm.

Các từ trong đoạn trích được in đậm khi chúng xuất hiện trong truy vấn của người dùng (2). Điều này giúp người dùng biết liệu nội dung trên trang có khớp với những gì mà người đó đang tìm kiếm hay không. Dưới đây là ví dụ khác (3), đây là hiển thị đoạn trích từ thẻ meta mô tả ở trang sâu hơn (lý tưởng là trang này có thẻ meta mô tả duy nhất của riêng mình) chứa bài viết.


(2) 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 một phần thẻ meta mô tả của nó được sử dụng làm đoạn trích



(3) Người dùng thực hiện truy vấn [rarest baseball cards]. Một trong số các trang sâu hơn của chúng tôi, với thẻ meta mô tả duy nhất của mình được sử dụng làm đoạn trích, xuất hiện dưới dạng kết quả

Biện pháp tốt cho các thẻ meta mô tả

1. Tóm tắt một cách chính xác nội dung của trang: Viết mô tả vừa cung cấp thông tin vừa thu hút người dùng nếu họ nhìn thấy thẻ meta mô tả của bạn dưới dạng đoạn trích trong kết quả tìm kiếm. Bạn cần tránh:
  • Viết thẻ meta mô tả không liên quan đến nội dung trên trang

  • Sử dụng các mô tả chung chung như "Đây là một trang web" hoặc "Trang về thẻ bóng chày"

  • Chỉ điền các từ khoá vào mô tả

  • Sao chép và dán toàn bộ nội dung của tài liệu vào thẻ meta mô tả

2. Sử dụng các mô tả duy nhất cho mỗi trang: Mỗi trang có một thẻ meta mô tả khác nhau giúp cả người dùng và Google, đặc biệt là trong các tìm kiếm mà người dùng có thể đưa lên nhiều trang trên tên miền của bạn (ví dụ: các tìm kiếm sử dụng cấu trúc Trang web: toán tử). Nếu trang web của bạn có hàng nghìn hoặc thậm chí hàng triệu trang, các thẻ meta mô tả được tạo thủ công có lẽ không thể khả thi. Trong trường hợp này, bạn có thể tạo tự động các thẻ meta mô tả dựa trên nội dung của mỗi trang. Bạn cần tránh:
  • Sử dụng thẻ meta mô tả cho tất cả các trang trên trang web của bạn hoặc cho số lượng trang lớn

Với kiến thức cơ bản về thẻ meta mô tả như vậy, Thủ thuật Blogger sẽ cùng bạn thực hành trên blogspot. Trong Template, Thủ thuật Blogger đặt code bên dưới vào sau dòng <b:include data='blog' name='all-head-content'/>.
<!-- Meta Tags SEO Full Pack by http://www.vntai.com for Bloggers -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Thủ thuật Blogger lưu trữ tài nguyên và mẹo thiết kế blog trên nền tảng blogspot.' name='description'/>
<meta content='Thủ thuật Blogger, Blogger tips, tricks, hacks, tutorials, Blogger, blogspot, Bloggerism, template, CSS, Javascript, HTML, jQuery, Mootools, Scriptaculous, SEO' name='keywords'/>
<meta content='index,follow' name='robots'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' name='Description'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<meta expr:content='data:blog.pageName' name='Description'/>
<b:else/>
<meta expr:content='data:blog.pageName' name='Description'/>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
</b:if>
</b:if>
Đoạn text được đánh dấu màu đỏ chính là phần mô tả. Bạn nên thay bằng một đoạn văn bản ngắn tóm tắt nội dung chủ đề trọng tâm của blogspot của bạn. Đoạn mô tả có thể là một hoặc hai câu văn, không nên là một chuỗi các từ khóa, không nên dài quá 140 ký tự.



Đoạn text được đánh dấu màu xanh là phần từ khóa. Bạn thay chuỗi các từ khóa liên quan đến chủ đề trên blogspot của bạn. Lưu ý Google không sử dụng thẻ meta từ khóa (keyword tag) để xếp hạng pagerank nên ở đây chỉ cần đặt thẻ meta từ khóa cho trang chủ là được. Gói code ở trên giúp tạo tính duy nhất cho thẻ meta mô tả ở các kiểu trang gồm trang chủ, trang item, trang tĩnh, trang nhãn và trang lưu trữ.

Riêng dòng <meta content='noindex, nofollow' name='robots'/> giúp khai báo cho Google biết bạn không muốn đánh chỉ mục các trang nhãn và trang lưu trữ để giúp tránh lặp nội dung góp phần cho trang web của bạn mau có sitelinks.

Vậy kết hợp thẻ tiêu đề và thẻ meta mô tả với nhau, chúng ta vận dụng vào blogspot như thế này:
<b:include data='blog' name='all-head-content'/>
<!-- Meta Tags SEO Full Pack by http://www.vntai.com for Bloggers -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Thủ thuật Blogger lưu trữ tài nguyên và mẹo thiết kế blog trên nền tảng blogspot.' name='description'/>
<meta content='Thủ thuật Blogger, Blogger tips, tricks, hacks, tutorials, Blogger, blogspot, Bloggerism, template, CSS, Javascript, HTML, jQuery, Mootools, Scriptaculous, SEO' name='keywords'/>
<meta content='index,follow' name='robots'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' name='Description'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<meta expr:content='data:blog.pageName' name='Description'/>
<b:else/>
<meta expr:content='data:blog.pageName' name='Description'/>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
</b:if>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<b:skin><![CDATA[/*
Đoạn code này cần được đặt sau thẻ <head> trong Template.

Về việc khai trương trang tin vntai.com

Căn cứ vào nhu cầu phát triển trong thời gian tới, sau một thời gian sử dụng tên miền tùy chỉnh miễn phí (Bloggerism.tk), quản trị blog Huynh-nhat-ha.blogspot.com đã quyết định sử dụng tên miền mới tại vntai.com để đảm bảo việc cung cấp thông suốt thông tin về thiết kế blog trên nền tảng Blogger/Blogspot.

Hiện nay, Ban Quản trị vntai.com đang hoàn thiện công tác cập nhật dữ liệu giai đoạn 1 và xuất bản trên các công cụ tìm kiếm. Theo kế hoạch, trang tin vntai.com sẽ chính thức khai trương vào lúc 08 giờ ngày 28/7/2011. Sau đó, Ban Quản trị sẽ tiếp tục cập nhật dữ liệu giai đoạn 2 để nội dung thông tin đầy đủ và hoàn thiện hơn.

Ban Quản trị vntai.com thông báo để quý bạn bè và bạn đọc gần xa biết, đến dự khai trương và thuận tiện trong việc khai thác thông tin tại vntai.com.

Do thời gian thiết kế, xây dựng và cập nhật cơ sở dữ liệu rất hạn chế (trong vòng 1 - 2 ngày) nên trang tin vntai.com sẽ không tránh khỏi thiếu sót. Rất mong nhận được ý kiến đóng góp để vntai.com tiếp tục hoàn thiện nội dung thông tin và các dịch vụ nhằm phục vụ độc giả ngày càng tốt hơn.

Mọi ý kiến đóng góp xin liên hệ với Ban Quản trị vntai.com theo số điện thoại: 0909841270, Email: webmaster@vntai.com hoặc bloggerismwebmaster@gmail.com.

Xin trân trọng cảm ơn!

Thay mặt Ban Quản trị vntai.com
Huỳnh Nhật Hà

Monday, July 25, 2011

Tạo tiêu đề trang đúng theo chuẩn Google SEO 2010

Thẻ tiêu đề (Title Tag) là một thành phần HTML quan trọng đối với SEO và kinh nghiệm người dùng, được sử dụng để mô tả ngắn gọn và chính xác chủ đề của một tài liệu web. Khi bắt đầu xúc tiến SEO cho blogspot của bạn, vấn đề cơ bản đầu tiên cần xem xét đến chính là thẻ tiêu đề. Chúng tôi sẽ giúp bạn từng bước hiểu rõ căn bản về tầm quan trọng của thẻ tiêu đề theo chuẩn Google SEO 2010.

Trình bày tiêu đề trang bằng cách sử dụng các thẻ tiêu đề

Nội dung tiêu đề trang được hiển thị ở các kết quả tìm kiếm. Thẻ tiêu đề cho người dùng và công cụ tìm kiếm biết chủ đề của trang cụ thể là gì. Thẻ <title> phải được đặt trong thẻ </head> của tài liệu HTML (1). Tốt nhất là bạn nên tạo tiêu đề duy nhất cho mỗi trang trên trang web của bạn.



(1) Tiêu đề trang chủ của trang web thẻ bóng chày của chúng tôi liệt kê tên doanh nghiệp và ba lĩnh vực hoạt động chính

Nếu tài liệu của bạn xuất hiện trong trang kết quả tìm kiếm, nội dung của thẻ tiêu đề thường sẽ xuất hiện tại dòng đầu tiên của các kết quả (nếu bạn không quen với các phần khác nhau của kết quả tìm kiếm của Google, bạn có thể muốn xem video cơ chế mổ xẻ kết quả tìm kiếm của Matt Cutts, một kỹ sư của Google và biểu đồ trang kết quả tìm kiếm của Google hữu ích này). Các từ trong tiêu đề được in đậm nếu chúng xuất hiện trong truy vấn tìm kiếm của người dùng. Điều này có thể giúp người dùng nhận ra nếu trang liên quan đến tìm kiếm của họ (2).



(2) Người dùng thực hiện truy vấn [baseball cards]. Trang chủ của chúng tôi hiển thị dưới dạng kết quả tìm kiếm với tiêu đề được liệt kê tại dòng đầu tiên (lưu ý rằng các cụm từ truy vấn người dùng đã tìm kiếm xuất hiện bằng chữ in đậm)



Nếu người dùng nhấp vào kết quả và truy cập trang, tiêu đề trang sẽ xuất hiện ở phía trên cùng của trình duyệt

Tiêu đề trang chủ của bạn có thể liệt kê tên trang web/doanh nghiệp và có thể có một số thông tin quan trọng như vị trí thực của doanh nghiệp hoặc có thể là một vài lĩnh vực hoạt động chính hoặc các mặt hàng được chào bán của doanh nghiệp (3).



(3) Người dùng thực hiện truy vấn [rarest baseball cards]. Trang liên quan, sâu hơn (tiêu đề của trang là duy nhất đối với nội dung của trang) trên trang web của chúng tôi xuất hiện dưới dạng kết quả


Các biện pháp tốt cho các thẻ tiêu đề trang 

1. Mô tả chính xác nội dung trang: Chọn tiêu đề truyền đạt hiệu quả chủ đề nội dung trang. Bạn cần tránh:
  • Chọn tiêu đề không liên quan đến nội dung trang

  • Sử dụng các tiêu đề mặc định hoặc không rõ ràng như "Untitled" hoặc "New Page 1"

2. Tạo thẻ tiêu đề duy nhất cho mỗi trang: Mỗi trang của bạn tốt nhất nên có thẻ tiêu đề duy nhất, thẻ này giúp Google biết trang này không giống như các trang khác trên trang web của bạn ở điểm nào. Bạn cần tránh:
  • Sử dụng thẻ tiêu đề duy nhất cho tất cả các trang web của bạn hoặc nhóm lớn các trang

3. Sử dụng các tiêu đề ngắn gọn, nhưng mang tính mô tả: Tiêu đề có thể vừa ngắn gọn và giàu thông tin. Nếu tiêu đề quá dài, Google sẽ chỉ hiển thị một phần tiêu đề trong kết quả tìm kiếm. Bạn cần tránh:
  • Sử dụng các tiêu đề quá dài không có ích cho người dùng

  • Bổ sung các từ khoá không cần thiết trong các thẻ tiêu đề của bạn.

Sau khi tìm hiểu kiến thức cơ bản về thẻ tiêu đề, vậy chúng ta áp dụng vào blogspot như thế nào?

Vấn đề quan trọng nhất ở đây là làm sao để tạo thẻ tiêu đề duy nhất cho mỗi trang blogspot. Để làm được như vậy bạn sử dụng code như thế này:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

(Trong Template của blogspot, bạn hãy đặt đoạn code trên trước dòng <b:skin><![CDATA[/*)

Đoạn code trên nói rằng, đối với kiểu trang chủ thì thẻ tiêu đề chính là tiêu đề blog (tên blog), còn đối với các kiểu trang còn lại sẽ gồm tên trang và tiêu đề blog; tức là các trang nhãn, trang tĩnh, trang lưu trữ, trang item đều có tên trang riêng nên sẽ tạo tính duy nhất cho thẻ tiêu đề của từng trang. Đối với trang nhãn, tên trang chính là tên nhãn. Đối với trang lưu trữ, tên trang là tháng lưu trữ> Đối với trang tĩnh và trang item thì tên trang là tiêu đề bài viết, do đó tất nhiên sẽ tạo tính duy nhất cho thẻ tiêu đề của từng trang.

Kế đến, bạn sử dụng các tiêu đề ngắn gọn, nhưng mang tính mô tả như thế nào?

Tiêu đề bài viết không nên quá dài hoặc quá ngắn. Tiêu đề bài viết chứa dưới 70 ký tự là chuẩn cho SEO. Bạn cần đặt tiêu đề bài viết có độ dài vừa phải đảm bảo sự chính xác trong việc mô tả chủ đề của bài viết, vì các công cụ tìm kiếm sẽ cắt bớt những tiêu đề quá dài.



Bạn có thể sử dụng các con số trong tiêu đề bài viết để tăng tính mô tả. Ví dụ: 10 cách để tìm nhà quảng cáo cho blog của bạn. Với một tiêu đề như vậy, trước khi người đọc lướt qua nội dung bài viết thì phần nào sẽ cảm thấy sự quan tâm và tò mò muốn đọc bài viết khi nhìn thấy một tiêu đề như vậy.

Sử dụng các từ gây chú ý cho tiêu đề bài viết để thu hút sự chú ý của người đọc. Bạn có thể sử dụng những từ như: tốt nhất, tối ưu, hiệu quả, thiết yếu, độc đáo, đỉnh, hàng đầu, miễn phí, bí quyết, thủ thuật…

Saturday, July 23, 2011

Tạo đoạn text hiển thị ngẫu nhiên và luân phiên

Trên blogspot của bạn, đôi khi bạn thích hiển thị một số dòng text thông báo hoặc một vài câu danh ngôn mà bạn tâm đắc. Hiệu ứng tạo text hiển thị ngẫu nhiên hoặc luân phiên sẽ giúp cho trang web trở nên sinh động và bớt đơn điệu hơn. Qua bài viết này mình sẽ giới thiệu bạn cách tạo 2 kiểu text như thế.

1. Hiển thị text ngẫu nhiên: Đặt đoạn code sau đây vào một tiện ích HTML/Javascript.

<div style="width:500px;height:50px;background:#DDD;padding:5px 5px 5px 5px;margin:0px auto">
<!-- RANDOM QUOTES -->
<script type="text/javascript">
quotes = new Array()
quotes[0] = "Nội dung đoạn text 1"
quotes[1] = "Nội dung đoạn text 2"
quotes[2] = "Nội dung đoạn text 3"
quotes[3] = "Nội dung đoạn text 4"
quotes[4] = "Nội dung đoạn text 5"
quotes[5] = "Nội dung đoạn text 6"

randomquote = Math.random() * (quotes.length)
randomquote = Math.floor(randomquote)
document.write(quotes[randomquote])
</script>
<!-- RANDOM QUOTES -->
</div>

Lần lượt thay nội dung các đoạn text cần hiển thị ngẫu nhiên.


2. Hiển thị text luân phiên: Đặt đoạn code sau đây vào một tiện ích HTML/Javascript.

<!-- ROTATING QUOTES -->
<script type="text/javascript">
var index = 0;
quotes = new Array();
quotes[0] = "Nội dung đoạn Text 1";
quotes[1] = "Nội dung đoạn Text 2";
quotes[2] = "Nội dung đoạn Text 3";
quotes[3] = "Nội dung đoạn Text 4";
quotes[4] = "Nội dung đoạn Text 5";
quotes[5] = "Nội dung đoạn Text 6";

index = Math.random()*(quotes.length);
index = Math.floor(index);

function rotator() {
if (index == quotes.length) {index = 0;}
document.getElementById("rotation").innerHTML = quotes[index];
index++;
setTimeout("rotator();",5000);
}
</script>
<!-- ROTATING QUOTES -->
<div id="rotation" style="width:500px;height:50px;background:#DDD;padding:5px 5px 5px 5px;margin:0px auto"></div>
<script type="text/javascript">rotator();</script>

Lần lượt thay nội dung các đoạn text cần hiển thị luân phiên. Chú ý có thể thay đổi số 5000 tượng trưng cho 5 giây chỉ khoảng cách thời gian giữa các lần hiển thị text luân phiên.




Ở 2 code trên, bạn có thể tùy biến thêm CSS để tạo bản sắc riêng khi áp dụng cho blogspot của bạn.

Thursday, July 21, 2011

Theo dõi bài viết mới nhất từ blog khác

Có một số cách để bạn theo dõi bài viết mới nhất từ các blog đó là đăng ký nhận tin cập nhật RSS qua email, đối với blogspot thì có thể theo dõi qua Google Connect. Từ phương diện này, mình sáng tạo tùy biến tiện ích Blog List (Danh sách Blog) để tạo ra tiện ích có chức năng cập nhật bài viết mới nhất của những blog bạn ưa thích. Tiện ích này hiển thị ảnh đại diện bài viết (có thuộc tính title là khoảng cách thời gian tính từ thời điểm bài viết được đăng cho đến thời điểm hiện tại), tiêu đề bài viết có thuộc tính title là đoạn trích dẫn bài viết (snippet), faviicon của blog kèm theo tiêu đề blog.

Xem Demo.

Để tạo tiện ích này, bạn 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 đến thẻ đóng </b:widget> liên quan đến một tiện ích nào đó gần vị trí bạn muốn đặt tiện ích này. Sau đó đặt sau thẻ đóng </b:widget> bằng đoạn code bên dưới.

<b:widget id='BlogList100' locked='false' title='Cập nhật từ blog khác' type='BlogList'>
<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'>
<!-- Updating the Recent Post from Other Blog widget styled by Bloggerism -->
<div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>
<span class='item-content' style='float:left;width:15%;padding:0;margin-left:5px'>
<div class='item-thumbnail' style='float:left;height:50px;padding:1px;margin:0;border:1px solid #DDD'>
<b:if cond='data:item.itemThumbnail'>
<a expr:href='data:item.itemUrl' expr:title='data:item.timePeriodSinceLastUpdate' target='_blank'><img alt='' border='0' expr:src='data:item.itemThumbnail.url' height='50' width='50'/>
</a>
</b:if></div>
</span>
<div class='blog-content' style='float:right;width:75%;padding-left:5px'>
<b:if cond='data:showItemTitle == &quot;true&quot;'>
<span class='item-title'>
<b:if cond='data:item.itemUrl != &quot;&quot;'>
<a expr:href='data:item.itemUrl' expr:title='data:item.itemSnippet' target='_blank'>
<data:item.itemTitle/></a>
<b:else/>
<data:item.itemTitle/>
</b:if>
</span>
</b:if>
<br/>
<span class='blog-icon'>
<b:if cond='data:showIcon == &quot;true&quot;'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if>
</span>
<span class='blog-title' style='padding-left:10px'>
<a expr:href='data:item.blogUrl' target='_blank'>
<data:item.blogTitle/></a>
</span>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>

</div>
</div>
</b:includable>
</b:widget>

Lưu Template.

Bước 2. Vào Page Element. Tìm đến tiện ích có tên Cập nhật từ blog khác, chỉnh sửa rồi tick chọn vào tất cả các mục Icon, Title of most recent item, Snippet of most recent item, Thumbnail of most recent item, Date of last update. Sau đó nhấn ADD TO LIST rồi lần lượt đặt các URL của các trang blog mà bạn ưa thích (ví dụ http://www.abc.com/). Sau khi add URL xong, lưu tiện ích là được.


Nếu muốn phần Favicon + Blog Name nằm trên phần Post Title thì đảo vị trí cho nhau giữa 2 phần code được đánh dấu màu xanh và màu nâu. Ngoài ra ở Bước 1, bạn có thể tìm hiểu và đặt thêm CSS để tùy biến style theo ý thích của bạn một cách dễ dàng. Hy vọng tiện ích này sẽ giúp bạn tiện theo dõi bài viết mới nhất của những blog bạn ưa thích ngay trên blog của chính bạn.

Tuesday, July 19, 2011

Tạo hộp thoại thông báo với hiệu ứng trượt

Một hộp thoại thông báo rất cần thiết cho bất kỳ website hay webblog, có tác dụng đặt một đoạn text với nội dung chào mừng bạn đọc hoặc gửi lời nhắn đến bạn đọc về một vấn đề gì đó. Có nhiều cách để tạo một thông báo như vậy, trong số đó nổi bật nhất có sử dụng thư viện jQuery để tạo hiệu ứng trượt, như bạn có thể thấy tại trang Demo (kéo xuống đáy trang).

Nếu bạn muốn tạo một hộp thoại thông báo như vậy, bạn hãy thực hiện như sau:

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code bên dưới vào trước thẻ </head>.
<style>
#slidebox{
width:400px;
height:100px;
padding:10px;
background-color:#fff;
border-top:3px solid #E28409;
position:fixed;
bottom:0px;
right:-430px;
-moz-box-shadow:-2px 0px 5px #aaa;
-webkit-box-shadow:-2px 0px 5px #aaa;
box-shadow:-2px 0px 5px #aaa;
}
</style>

Bước 2. Đặt đoạn code bên dưới vào trước thẻ </body>.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js ' type='text/javascript'></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$(window).scroll(function(){
var distanceTop = $('#last').offset().top - $(window).height();

if ($(window).scrollTop() > distanceTop)
$('#slidebox').animate({'right':'0px'},300);
else
$('#slidebox').stop(true).animate({'right':'-430px'},100);
});

$('#slidebox .close').bind('click',function(){
$(this).parent().remove();
});
});
//]]>
</script>

Bước 3. Đặt đoạn code bên dưới vào trước thẻ <div id='footer'>.
<p id='last'/>
<div id="slidebox">
<a class="close">[×]</a>
<p>Nội dung thông báo.</p>
</div>

Lưu Template.

Hy vọng bạn sẽ hài lòng với thủ thuật nhỏ này và mong nhận ý kiến góp ý của bạn đọc để có thêm ý tưởng mới.

Friday, July 15, 2011

Tiện ích Nhận xét mới nhất có Avatar


Tiện ích Nhận xét mới nhất có Avatar (Recent Comments with Avatar Widget) có thể nói là một trong những tiện ích khó hoàn thiện nhất đối với blogspot. Gần đây blogger Fan Dung đã nghĩ ra cách kết hợp PHP để lấy Avatar cho tiện ích Nhận xét mới nhất, tuy nhiên khuyết điểm lớn vẫn là tốc độ load khá chậm, một vấn đề không dễ khắc phục.

Trong lúc chờ Blogger có những cải tiến trong thời gian tới, mình đã phát triển từ script của Fandung.com để tạo tiện ích Nhận xét mới nhất có Avatar với tính năng lấy Avatar riêng cho người nhận xét với tư cách: OpenID, Tên/URL, Nặc danh, Blogger. Riêng đối với người nhận xét với tư cách đăng nhập tài khoản Blogger, hiện tại mình chưa tìm ra cách để lấy Avatar tự động (vừa tự động vừa load nhanh) cho nên phần này mình Add Avatar thủ công (ở đây đã Add Avatar cho một số người nhận xét thường xuyên trên các blogspot phổ biến hiện nay, bạn có thể tự nghiên cứu và Add thêm Avatar vào). Cho dù hơi thủ công song hiệu quả đem lại cho tiện ích vẫn là tốc độ load nhanh.

Hy vọng trong thời gian tới các cao thủ sẽ cùng nhau hợp lực để hoàn thiện tiện ích Nhận xét mới nhất có Avatar.

Bạn có thể xem Demo trên phần sidebar của Thủ thuật Blogger.

Để cài đặt tiện ích này, bạn chỉ cần đặt đoạn code bên dưới vào một tiện ích HTML/Javascript.

<style type="text/css">
img.rcavatar-photo {
float:left;
margin-right:7px;
border:solid #ddd 1px;
padding:1px;
height:50px;
width:50px;
}
.rcavatar-content {float:left;margin:0;width:220px}
</style>
<script type="text/javascript">
var cm_num = 7; // Số nhận xét được hiển thị
var cm_desc = 65; // Số ký tự thể hiện độ dài nhận xét
var homepage = "http://huynh-nhat-ha.blogspot.com"; // Bạn cần thay tên blogspot
var cm_avatar = new Array();
cm_avatar['admin'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN5f9xD57TBrDOJi0IhLsTF8II-1aHz_lwqnK78GGyxb2pPG76gScjBwVYezUFOpNYG0rFuNOyW0zYtdSw_6eI-vmF7wNCTTG5SIm9Nfz6I0-7koU1kv1IyS9aqTWt2BegjBUc6_muHJ0/s45/hnhico.JPG"; // Bạn cần thay URL_avatar_của bạn
</script>
<script type="text/javascript">
// Recent Comments with Avatar Widget Styled by Bloggerism
// This widget is developed from the origin script by Fandung.com (Many thanks to Fandung.com)
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'';
}

function showRCommentsAvatar(json){
var entry = json.feed.entry;
var str = "<div id=\"rcommentwg\"><table><tbody>";
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
for(var i=0; i < cm_num; i++){
var avatarUrl = entry[i].author[0].uri;
var avatarT = "";
cm_avatar['blogger'] = "http://sites.google.com/site/ngonngulaptrinhvn/files/blogger.gif";
cm_avatar['openid'] = "http://sites.google.com/site/ngonngulaptrinhvn/files/openid.gif";
cm_avatar['livej'] = "http://sites.google.com/site/ngonngulaptrinhvn/files/lj.gif";
cm_avatar['wp'] = "http://sites.google.com/site/ngonngulaptrinhvn/files/wp.gif";
cm_avatar['typekey'] = "http://sites.google.com/site/ngonngulaptrinhvn/files/typkey.gif";
cm_avatar['aim'] = "http://sites.google.com/site/ngonngulaptrinhvn/files/aim.gif";
cm_avatar['anon'] = "http://sites.google.com/site/ngonngulaptrinhvn/files/anon.gif";
cm_avatar['URL'] = "http://4.bp.blogspot.com/-V3oK-eTJsUY/ThRxbiluYHI/AAAAAAAAAEQ/NvbhzoGYjCk/s1600/OpenID.jpg";
cm_avatar['fandung'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV65dKq7qlI0KGMMc6rvksE57JSvpclqstwgwRutriZo9HZFvxCUQD2O11Of-YslL9RC8NFd0kfaavvp2fpJJxdMWzOrQL44S_vomXnjwU9E3gIv1HYFDdxrbL4X0jagNGeXmW6wB5wgw/s45/avatar100.png";
cm_avatar['duypham'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBfmxW2Aj2NI-DTeuYdz0bQRg9hxoD3UzZle9kHtp3lwqnnY2pzGTKASku6ffccN3dzwWv5a98x0oOy2LfEZL47MoauvybuhP8qgmmae2hEwnfgc9k9wk51wUpg4kFtljMHi3vk7fNT8o/s45/duypham.jpg";
cm_avatar['vietutd'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHFeXRkA_3ngJefvPq-X72wxd0tS439pZuW3aRVDyqzkOYVL0F22AhL_g4tTREw6oAipgdtQVYZmbQ0k9uAw3Qa9BuABdV4t_2cwGYLa1XA0BcbHuZJJVkt80yyflTZe6sX25e0SGNhJPf/s45/images%3Fq=tbn:-1iWiTbjJUd_dM:b";
cm_avatar['ngonluanhoblog'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUwsE6lXSUYBmR6DKMCqdRlzO0jPWLTZXtXq2Cjqk_CKO6f-babMhjg3HJ5mf8iwsQdimqbJqX-iO9VcPXxfLtNPirLvp94soxxH8ygKPgncVhYW_KPoTi8UDukK3S71S9cFA6qr4mB6U/s45/tl-Jesus1.gif";
cm_avatar['noctblog'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTVzpTEmosOtwTscGhoGtJ5yISf_0Mm8X99cWzPb1d8g4fjSvZcCdu5oPXy9GNGwXMw8eIoJnTBToT5tnVXM1Nc6TP7fcHwzdXBpRyAoXQLgMFh80OTNzc4XQRbie7Jmf6khyphenhyphenhCoQ4uV4/s45/noct.png";
cm_avatar['pikarock'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh25hfwjvc7Fsl15plF0bGhtPsrVctrXqSZ-PczqAcfYM_lNcAEzs0G48gDzLHht-oRAiGoHtqUpk18XiUegDGho56J5rKqN31Li0McuiChYfMRrVg_s8HI5JMDPHTeq_SibW61zvyclNw/s45/Death_Metal_by_funkyalien.jpg";
cm_avatar['ngankvn'] = "http://3.bp.blogspot.com/-gZgBoAFMErw/ThCak4Gh8MI/AAAAAAAAAFU/8cScPH7OWUE/s45/favavatar.png";
cm_avatar['linkfoci'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghqGo-DJT8DCXpgpIQEVzaQUXhyphenhyphenppJcXjE3c9Vin7JoWymKie_CFPM9O82PX16E1958Miq9yn32ouPaVMrN6DgAA8z4EaDsB6UcrD4loApDtIgT6vJtc-W06Ik_UvezNCshahDw2u_D90/s45/llogo.PNG";
cm_avatar['peace1981'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwoRQNQQpF6oOyeRsVu3c6qzmwHJc30ABZlFddQnIGphgnC33VZ0Hnqz_VyVJn8hr7RuHT1HTzHz3JrXkb_rxDWIaFT_k0VUxVb6SdCHqG7soTTMyUBLpnfUuPmp6nDhlLezgrY7NqfvO_/s45/mrBinh-2.jpgG";
cm_avatar['lamkan'] = "http://1.bp.blogspot.com/-uhdosx9r8E4/Thvt9mN9F5I/AAAAAAAAAig/wGvXuo6hcPM/s220-h/8.jpg";
cm_avatar['ngoctri'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC9x6oTrpy-MaUEpp365OvzUn-W3c378IlDEMbVllkJDjs3DZ0_NWamZPP4S-LvcJOo3u1nF6txxx7AE5ENa8FMjaLh-Um36miq6oIt_NQ6HycY7jskuMUYBZGonydSer8J0ckV6o7hXca/s45/75.gif";
cm_avatar['choiblogtk'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj65xMmldMfwjjbQi8RP7DNLQhn2CA4qpf-17K3Qx6hjL9svsNaeCVTYiITf3UNZ9XfNWm2ujoljHRZwWZiv_OxeCptd5jbevoOkoM4_sfv-KiDtzZoXeAPu3XWE6Su9pjXIcRtJ-TTYD0g/s45/choiblog.tk.jpg";
cm_avatar['jack'] = "http://2.bp.blogspot.com/-koOIGb0xFdU/TWVDOW5lbUI/AAAAAAAAADE/cBWa_NXPIs4/s45/ok.jpg";
cm_avatar['maythy'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQjYL9o7quYyzuNtU2c5ka26RmzvP5jNZWV31twEOrBlwYg_tU3zdgpQYMdu7B2OFoZEUhaXQYIvouSvSgBl6HAu7cADzxoocJfWNL62Iz35wMzbsMo4pFbUYgszh22zPLWEcdtJPb8Ag/s45/Avatar_Bocap.jpg";
cm_avatar['minhquan'] = "http://4.bp.blogspot.com/-8XgvqA_zNT4/Tdh9_v0jdBI/AAAAAAAAA84/USnRmzoNm4M/s45/Co%25252BBa%25252BLa%25252B%2525252";
cm_avatar['tiennguyen'] = "http://3.bp.blogspot.com/-Tnh6MGeZ7VY/TYoBQZdJODI/AAAAAAAAAuo/SV1sn4Kd3VQ/s45/profile.png";
cm_avatar['docchieublog'] = "http://2.bp.blogspot.com/-6vyfD1QBaz4/TejppnGNqPI/AAAAAAAAAQI/oOnBiA5noWI/s45/truong-sa-hoang-sa-la-cua-viet-nam.jpg";
cm_avatar['meoblog'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPhLLpKV2d0Y8XPM8046Z_xB0s5kymVuO8fIUo2DuGiCY9e2gC3Dl8eVL6I2WFhQ4UjBFBvtiwRYtiCg_3knpPfgGJJXpBB_buLubIn0lr7V1b1r5_fcnhCR76vjhw5kQisaVp7pOOnmHo/s45/meoblog_logo.jpg";
cm_avatar['dnh'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUBi5VHyOJ6DkXgkYPCR6hq1yDAKYAmwt-ocMIH6R-Wl7gPJ7oyDPhrYRanqRLgOXGTKOSkjpLrLuFn2G1Zf8IZu09gSuFMbZvnQFF_um-LQpcDzlfMwa0q_YVpCwMhgZzFUUW9p9u_DQ/s45/tem_phu_thuy_%252525286%25252529.jpg ";
cm_avatar['quocvinh'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjapI1je0xokSj36p4viQM5ehP5mgNcKVMss6mmeLeFJ2YIUAmf9bl8qPZfOKW0D6YmJKmWuX3Fak4U3P3sguHHyZHe5VyvibQz__x4oQBfDAiD_jc8hkNdOEspu5T0QD5P3reiJHxzRCen/s45/Picture%25252B003.jpg";
cm_avatar['yolks'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKlg7SFc-J5wsNmor8ERUusrD4EQ1x7YaSxtnjRT10HjvYM3HUUbQGzeQFUar17Nt8bSt5DuW5Y3J4ulO9nZ6IQNYC4aEaN1Txhihm2mXFFaGbKYmM4pKHEDH4IU_qlHQLkrwQOWpc3RU/s45/IMG_1431.jpg";
cm_avatar['ruabien'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP3Scrxg5ei6KtaRWeiam6w6fwtLsmdMZoXJSabD-IzmS-FZuNRBOhK6nwM-pdI9cYFrg3mk3wY5mRql6u1oe7ox2ddVoW4dj1hWMoFuTnnG6IXaVWotRt3RIHGPDZpEnbrYaAto0EC28/s45/avatar1.jpg";
cm_avatar['dakewo'] = "http://3.bp.blogspot.com/-gncJREes8_Q/Tf8Nylw_KqI/AAAAAAAAAA0/xwYwCcVp9aI/s45/avatar.jpg";
cm_avatar['friends-pc'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJbmyE_bGd5gv0B0Df0UkK45DRvR6tK_8vip5IEBde5saTuGddyCEKc6hAJ1iXVxFaIvmyRolNfMP91UcvGRMhYGqVLBKsoMZsOF_dCgm5x2fMS_4iUH_FWthXXhyOLsOeBi-zx9Tp24ZY/s45/1799078.gif";
cm_avatar['ltvinhtrung'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYgeL1mAYZGkO3wjkM8SeDus7-XJHtJAOMyZrItg1X1z29wr7Pj41JsF9Gvt50L94h1tKkjHMDRZ_jH_Q6blRP5J0SEti73fVRano52eDHeRACsvn34hHa5aMBS9sD_rsL9qZe7urCKdOz/s45/3-14.jpg";
cm_avatar['kenbin'] = "http://2.bp.blogspot.com/-aac8p5V1dNc/TYH4l373ywI/AAAAAAAAASI/s62YDZRz6n8/s45/kenbin.jpg";
cm_avatar['tronghieudo'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv_oBfDhndJAzVSd2bUKhGEg_ONqZuF19lwu1UUFPgqj9iIOTm5QG6RyfP2cQNwRPO-SYIBYKN1sxy-SXA1H2OxW1vPTRdaHTilStgwSpUZlDXFgLS711cm07SgnaX37ePmHFG0d7I3ds/s45/favavatar.png";
cm_avatar['NAD'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPezvXaE1wCRJSV7cHh-Amd9KjwWu1M1OXcQJId1i5AEB6qiYWnEub0jaA_b89p_BRqBfhFUfm8gf4O_Z44JPBPohhmdP2I03ZQouGD7e9WtBeX-jUrQQR__QiXp0HO73RGEmbNk9aFlk/s45/1.jpg";
cm_avatar['sieudan'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKxp38YW2H9jYh7Y4a19DXMpFa1t0kVS5tLB_6LYSDu6ZnSEVMtBKTgqKvL6qOOf4rfvLanpQEMoXzFPfi-Ayi1Low8dm-NSOOxcdQ2LQEDlKFwtKpEKC3pN3a19UPJJra6Gm9b2O1O3hr/s45/sm7green29.gif";
cm_avatar['FPT'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Poio_2d2vgWF3hPITA9NCDnZIS5SNLYkyYi5ql5edZbLZBPIlYwSjh6ImX5iC5VmhUVEyRswe6ji9atgs2i8RwiCMxPSFsc8YLdFw_7aurk2nFzPMTS-7zLbsd-TZYB59LIJTByFr1I/s45/fdt.png";
cm_avatar['dvdhay'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0lcf7tjMUTPGygQkXy3nhAJknUbT49841tUDUNK7-bbF8XTyHq7CX2XIr24Sbp7x-_1knuR95rCW7_kdmL1l2JNmUTXadtXYMTa1KhqZchVMO26hKg24ptfhH04S0RhUARVbdguEdtf0/s45/lion.gif";
cm_avatar['flyindream'] = "http://2.bp.blogspot.com/-G796keL4VAs/TgX-hHMaw8I/AAAAAAAAAAs/KRa1KXgpXPE/s45/jpg.JPG";
cm_avatar['CAA'] = "http://1.bp.blogspot.com/-9NHDqwvuezE/TfnQEA2NE2I/AAAAAAAAAHo/ReGrW3wZjeE/s45/caaavatar.jpg";
cm_avatar['ngvanquyet'] = "http://2.bp.blogspot.com/-C2YHmn0Froc/Tdt5qjpSyrI/AAAAAAAAAAw/OwDh0hcIpxI/s45/avui%25252B%252525282%25252529.jpg";
if(avatarUrl != undefined) {
if(avatarUrl.$t.match("openid.net")) { avatarT = cm_avatar['openid'] ;}
else if(avatarUrl.$t.match("livejournal.com")) { avatarT = cm_avatar['livej'] ;}
else if(avatarUrl.$t.match("wordpress.com")) { avatarT = cm_avatar['wp'] ;}
else if(avatarUrl.$t.match("typekey.com")) { avatarT = cm_avatar['typekey'] ;}
else if(avatarUrl.$t.match("aol.com")) { avatarT = cm_avatar['aim'] ;}
else { avatarT = cm_avatar['URL'] ;}
} else { avatarT = cm_avatar['anon'] ;}

if((avatarUrl != undefined)&&(avatarUrl.$t.match("blogger.com"))) {
if(avatarUrl.$t.match("00819429141342166010")) { avatarT = cm_avatar['admin'] ;}
else if(avatarUrl.$t.match("04749296400753058357")) { avatarT = cm_avatar['fandung'] ;}
else if(avatarUrl.$t.match("03406573641353342194")) { avatarT = cm_avatar['duypham'] ;}
else if(avatarUrl.$t.match("03463239749923138128")) { avatarT = cm_avatar['vietutd'] ;}
else if(avatarUrl.$t.match("00394797142582927042")) { avatarT = cm_avatar['ngonluanhoblog'] ;}
else if(avatarUrl.$t.match("07667678827100174942")) { avatarT = cm_avatar['noctblog'] ;}
else if(avatarUrl.$t.match("17934661533414417935")) { avatarT = cm_avatar['pikarock'] ;}
else if(avatarUrl.$t.match("08081804098876491411")) { avatarT = cm_avatar['ngankvn'] ;}
else if(avatarUrl.$t.match("09150363550015559876")) { avatarT = cm_avatar['linkfoci'] ;}
else if(avatarUrl.$t.match("08159474113157885933")) { avatarT = cm_avatar['peace1981'] ;}
else if(avatarUrl.$t.match("08859270718754508893")) { avatarT = cm_avatar['lamkan'] ;}
else if(avatarUrl.$t.match("11488199157704379781")) { avatarT = cm_avatar['ngoctri'] ;}
else if(avatarUrl.$t.match("17175170721363050062")) { avatarT = cm_avatar['choiblogtk'] ;}
else if(avatarUrl.$t.match("13455864297260715381")) { avatarT = cm_avatar['jack'] ;}
else if(avatarUrl.$t.match("17461453341115540341")) { avatarT = cm_avatar['maythy'] ;}
else if(avatarUrl.$t.match("09625147383808730119")) { avatarT = cm_avatar['minhquan'] ;}
else if(avatarUrl.$t.match("00694403864029897588")) { avatarT = cm_avatar['tiennguyen'] ;}
else if(avatarUrl.$t.match("17188553889409828971")) { avatarT = cm_avatar['docchieublog'] ;}
else if(avatarUrl.$t.match("15435536641465159793")) { avatarT = cm_avatar['meoblog'] ;}
else if(avatarUrl.$t.match("13598836957495328298")) { avatarT = cm_avatar['dnh'] ;}
else if(avatarUrl.$t.match("14277559706768218175")) { avatarT = cm_avatar['quocvinh'] ;}
else if(avatarUrl.$t.match("12370263214001932442")) { avatarT = cm_avatar['yolks'] ;}
else if(avatarUrl.$t.match("11167880363909195136")) { avatarT = cm_avatar['ruabien'] ;}
else if(avatarUrl.$t.match("08759870998954144571")) { avatarT = cm_avatar['dakewo'] ;}
else if(avatarUrl.$t.match("12666334461939360660")) { avatarT = cm_avatar['friends-pc'] ;}
else if(avatarUrl.$t.match("12625548826737813579")) { avatarT = cm_avatar['ltvinhtrung'] ;}
else if(avatarUrl.$t.match("02896728987986345766")) { avatarT = cm_avatar['kenbin'] ;}
else if(avatarUrl.$t.match("15051849591008262422")) { avatarT = cm_avatar['tronghieudo'] ;}
else if(avatarUrl.$t.match("14270963672740050413")) { avatarT = cm_avatar['NAD'] ;}
else if(avatarUrl.$t.match("11191465825758763667")) { avatarT = cm_avatar['sieudan'] ;}
else if(avatarUrl.$t.match("18218312420172917571")) { avatarT = cm_avatar['FPT'] ;}
else if(avatarUrl.$t.match("13461135698133561032")) { avatarT = cm_avatar['dvdhay'] ;}
else if(avatarUrl.$t.match("13302728342955214164")) { avatarT = cm_avatar['flyindream'] ;}
else if(avatarUrl.$t.match("14332535104546283291")) { avatarT = cm_avatar['CAA'] ;}
else if(avatarUrl.$t.match("12411025187254704157")) { avatarT = cm_avatar['ngvanquyet'] ;}
else { avatarT = cm_avatar['blogger'] ;}
}

var imgprofile ='<img class="rcavatar-photo" align="top" src="'+ avatarT +'" />';
str += '<tr>';
str += '<td width="56" valign="top">'+imgprofile+'</td>';
var pdate = entry[i].published.$t;
var m = parseInt(pdate.substring(5,7));
for(var j=0; j<month.length;j++){
if(m==month[j]){
m = month2[j]; break;
}
}
str += '<td valign="top"><div class="rcavatar-content"><div class="rcavatar-author"><a href="' + entry[i].link
[2].href + '"><b>' + entry[i].author[0].name.$t+'</b></a> - <i><a href="' + entry[i].link[2].href + '">'+ pdate.substring(11,16) + '-' + pdate.substring(8,10) + '/' + pdate.substring(5,7) + '/' + pdate.substring(2,4)+'</a></i></div><div class="rcavatar-sum">'+ removeHtmlTag(entry[i].summary.$t,cm_desc)+ ' ... </div></div></td>';

str += '</tr>';

}

str = str + '</tbody></table></div>';
document.write(str);
}
</script>
<script type="text/javascript">
document.write("<script type=\"text/javascript\" src=\""+homepage+"/feeds/comments/summary?max-results="+cm_num+"&alt=json-in-script&callback=showRCommentsAvatar\"><\/script>");
</script>

Việc bạn cần làm là điều chỉnh theo các điểm chú thích được đánh dấu màu xanh trong đoạn code ở trên. Ở phần CSS chỉnh số 220 cho tương thích với chiều rộng phần chứa nội dung nhận xét khi áp dụng trên blogspot của bạn.

Tại dòng

if(avatarUrl.$t.match("00819429141342166010")) { avatarT = cm_avatar['admin'] ;}

Thay chuỗi số được đánh dấu màu đỏ bằng chuỗi số Profile ID của bạn.

Hy vọng bạn có thể tạm thời hài lòng với tiện ích này.