trang web chia se thong tin9

Wednesday, July 27, 2011

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

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

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

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

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

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

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

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

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'/>.

<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 == "item"'>
<meta expr:content='data:blog.pageName' name='Description'/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<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'/>

<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 == "item"'>
<meta expr:content='data:blog.pageName' name='Description'/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<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 Thuthuatblogger.info

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 Thuthuatblogger.info để đả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ị Thuthuatblogger.info đ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 Thuthuatblogger.info 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ị Thuthuatblogger.info 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 Thuthuatblogger.info.

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 Thuthuatblogger.info sẽ không tránh khỏi thiếu sót. Rất mong nhận được ý kiến đóng góp để Thuthuatblogger.info 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ị Thuthuatblogger.info theo số điện thoại: 0909841270, Email: webmaster@thuthuatblogger.info hoặc bloggerismwebmaster@gmail.com.

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

Thay mặt Ban Quản trị Thuthuatblogger.info

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

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

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

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

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

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content'>

<div class='blog-list-container' expr:id='data:widget.instanceId + "_container"'>
<ul expr:id='data:widget.instanceId + "_blogs"'>
<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 == "true"'>
<span class='item-title'>
<b:if cond='data:item.itemUrl != ""'>
<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 == "true"'>
<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/AVvXsEjBQvGqzutgH1MftjMv-7aJaSAa_PHtYEs_17Na_aKM4qu48Q_7HSzGYvN0DlgB958AkjH-lLHD5-sVvQ4KDUWmGsoEVzxKYI7iSeP11jwW8l4wT0X9N6yBgx2J2egBKD_EHb1qza8bksE/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/AVvXsEj1d8tyvQBU2DX39lac351fXpv0DT-IInn1fCTlUm6BZuCYKpeu-O3EyVRvd0UvMa4wGOLAe5w1GLkColDwdBT7RMkMYx454-KR8WJuJd6PorrpF0RLcZTeos8sXsXKgDWG6yOPMM0MFKs/s45/avatar100.png";
cm_avatar['duypham'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOlLUu9hAbJPW8mZzyWxXbxOHvxHE3GpqHifOytk_y4sXeOpATHAPCVxBW7Up4HsgkZ1SMvB6oDil_S7cyZs0WCaBnu7OC2AHwJ35puMhDUNidGMAbtY77Epk98IoV8Gz3v1iSDWpAtXA/s45/duypham.jpg";
cm_avatar['vietutd'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge7VnIk3CU2i1AUuZtyWwmAWMIRkIoFT-E8bfhgXHoq4NGCUCFei6-GSACuME040iW3CkVQSeEjtwTLkonjjYbZnICT0E84jVTbllN_nCcrZiVZZ_UJpZjNCebv1PqGnyhdTTAU5NF8azc/s45/images%3Fq=tbn:-1iWiTbjJUd_dM:b";
cm_avatar['ngonluanhoblog'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixZcWVFYHzdJ3QsQ_1r-XdACo1DTd97exOPV9GdU7IYfiY81DIIZOh0oWlrKrfZ-OYkoaZfEsdj-AWVavGiMleJ9DwS8uamGd6SG1h4rWilt1gj3z-fqjCOkYBrFyTSUJmmnmklyuLHIo/s45/tl-Jesus1.gif";
cm_avatar['noctblog'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdtnigXQQvGE7A5PGs96i86MgJVuCaUbvCv0jjy7KIQhgG5rpKO5mVWuzul4rHDb8WSlrIJ30qIYBLW-NJWL_a_PiGBDGIeUH2Tbs9qBqnj8RQG3Wy4kLdiZ5p2GvwsaXGbd1lfyiNQGM/s45/noct.png";
cm_avatar['pikarock'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRQLljJ-h58JJGPO3ullRaItVF29jhe_gAKdMtictezx1doOQ9if01HOCR6DohyphenhyphentUZ1znZJKEq9Nl4U-nLfCS6PK5-zGtOyU24OchmXbJdcOLXsx0Gps-4GZRKI2-w6sdShzLqLeqNseU/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/AVvXsEjVXfB-EhUriQI0egnLWrPHMRig0hvGdDsaTq-6l-kz2VkI_Kghj_AjKflWgxO9Q0LL12dvyxg2d7169FHjePO4uPNXhH6xYa_U3eiX9fLERcjHEHQFmV3XzFvAHHYgwwyr9pnBVkGCDao/s45/llogo.PNG";
cm_avatar['peace1981'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeMSm6g6ZFTwN6DKEIjMGOPh8Rn1MV5jZZuSbD9ZFLYAVkLFrLuqGxtR93t2mKRLczUG_X_TjL6vdEKL3WBNMIXFUNl-0rdzB0L1Qc3io6kQz3uJ01OuvCtZko_cnStT3s5neln0A2cawJ/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/AVvXsEiP1pORIzqsBBhCYL0kt4YtXSFKNLutlwS3koC8Qyuv2eSZv4dwGwmMYatq7JveJI3lCkkuMGChiQT4DxpKvgtUa6X5ZKfYnH6eq9bH5vaDrr7VPFi0f6SuF0tHXzMh-bnbt7iFIjL8N9gS/s45/75.gif";
cm_avatar['choiblogtk'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR4o6oVnR-2BGlcq9i8EyYOp5VrQpEqSKm6th95Q-AfQecxvjLquj3L1rr8HALQ7d5YBJbneOz0lqAdkSX5TZV9rVWF4PFjrRFpgW4_5mneB-NIQTWKS44qrDXz542QMH8uvmEbYefhEbu/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/AVvXsEhwxkNxxWxBXOhgeNcdLlWMYI0444gbmOmOpoQZXtQrERvwF4Cm7L90G1aWiv2lwWM_T71vSmSQen6rQXDYfHKiqoYIvcOaVVJ9RdOlqYlKGYHP6fY8QAFMl6mHH2c8rNIHh38rjvHnj2g/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/AVvXsEgYpVNQJ8fMXvPgBUg9wtZW9vuj9qNlbYBwfsEkAggHZaCeOg4Ef2FaxqhJ4S2Mn5faAXB4fe2RTvneHXlkumP2Krwbu6kDZu4jE3JAHJ0H54-TL3oy-bRofdMI_uRcDDqpC-OMvGsxko1S/s45/meoblog_logo.jpg";
cm_avatar['dnh'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEA4yFCfui9pCx1s3Ct8xszu99witQ1dTzUvMlLPEjZlwyQdjLLoobdv83czDFRv785w64zRvldNOPCASdf-tjZVtq-ZQ9_ztEGsO0m8mVbJVN88bO65nWy2a7BidkMMeX4WsuKAUL5wI/s45/tem_phu_thuy_%252525286%25252529.jpg ";
cm_avatar['quocvinh'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-em6Sq6z7jgdSROTZm2d_5TAiZobiqH4Fw4-EyNEPhMVa73tuINPz-L90cW76vcSs7_M4e_0l7I787oDetWChJK0WZ5doTJFhEqm7rdijluct0K8FnNqxi9QRk5eCxqZDdv3zxjDoNe1q/s45/Picture%25252B003.jpg";
cm_avatar['yolks'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5THmoRkIq2omi4PHNL3COf9Gxtb3T0AsoNsFhc1zyuqIC1kpswb8TWdB7NR3NZWxVdSC1dRqIljFR8drUXDt-CM7Jbc5aEvR0u5u2aYqKrx4ckl3HgTy7U0WA4Re6vMt-PkEHo6BjXZE/s45/IMG_1431.jpg";
cm_avatar['ruabien'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxdznUvXZl0cgEcZ1Qbn3wj98t9vmkUrQ2Lr6yWOptVlndqqjimnoHjL3In9C28-RfEI4Xd6WvRt80aZUWu7iGhWSNsk1ghOczvxbVrb2xKoz1Baam5ZWrl7hsENi85B3RyQsHPtpaLFo/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/AVvXsEgwSr_6V88n_yqx_Os2AzF0NKP_mQOx__Fi6MfuKstwIEYxQDvUHPMvLdF3LxbDgv0hpdP1rnUUXF60kuqaTZ_lEZWm7bJLIMaDA_BMBEWFRfszgqIX4_RlN9V1tgETLgyrf6EoXwcMQrm_/s45/1799078.gif";
cm_avatar['ltvinhtrung'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1STQHs2TWqmcH6WxGmlo0t0faGMOQaPqZOsfN5G6FlROv_PX7aOpBz5OGf4ulPCaWe9fTVsMZLDKnQsL53gtp7pyXaGVVd2U4NpPkNCiFT1SxY3eylXOSd_3Beyn7ofGfdKSRq13VyXmw/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/AVvXsEgSkDONSAzPMmcT221_sr-RhsW725M_Qak2-VaxgReewQwuKgPrZkAZrk-KrS6PuKEquOWSLOaSMMN5jTYMF-sngcL9TGcIsBH9N55TXNr6QuBitrSZM-iS9A0TJHdGQlCR3-J2hfnDZhE/s45/favavatar.png";
cm_avatar['NAD'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoFR0JeTnwt74-HfhVVv2D6Xj0GcFIi1s7OON7Ef6UT65CXvSHtCC0Rwcv85rWQwjl-w18u0yoVubYTpcgh1RKY6zRFgHtMQZ0rAfqMNwYhp5HL1S0-z9iAwqWcxw6M4NH1DsaMrxVcGU/s45/1.jpg";
cm_avatar['sieudan'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQdYs6yHve6w1v2uwO2yLHeWOYcFDyz4mzGeZzW40b9QvORoQya53IiMMyFlqJ5eX29HBEe6cqn1joQPcGwSwM9iV89OlTe79l59ctJHzUeXN7PPidlM7SoXIz_s7rNAPy5Fhf6CYaPCMQ/s45/sm7green29.gif";
cm_avatar['FPT'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKGhdUr0PACjryaTJ4tCiyliG9o788sTDdOcL-H-2rUO_gWJmJqc2qwKEA6sRWAfyjQZXta_k4MomYbodqkFQdcD0PsRfvp0pUqOjL0Xk9ZGwIhcc5i2UVrcWd5AaCgUtj0stS82HUijY/s45/fdt.png";
cm_avatar['dvdhay'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhumoGM8yafJXDTgbg8KD5c-iwqGex9EPEp5YZUjkaru-gjjnCaLlW8HcZe2sc7cfKMYeHj2_-xOwUy8DRMlkaGIGarpBIoPFEuxAVf5ByX-Ci_f5LhKcDIdlU9uG2J5MtP6wnJXoXPZyg/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.

Friday, July 8, 2011

Tạo banner quảng cáo hiển thị luân phiên

Nói đến quảng cáo trên trang web, thông thường tại một không gian web cố định bạn chỉ có thể đặt 1 banner, lấy ví dụ trên phần Header về bên phải bạn chỉ có thể đặt 1 banner có kích thước 468x60. Script sau đây sẽ giúp tạo hiệu ứng chạy luân phiên các banner, từ đó trang web của bạn sẽ trở nên sinh động hơn.

Bạn có thể xem Demo bên dưới.

Để thực hiện thủ thuật này, bạn hãy sử dụng code như bên dưới (đặt trong một tiện ích HTML/Javascript đối với Blogger).

<script type="text/javascript">
// Banner Rotation Script by Bloggerism
var ban = new Array();
var link = new Array();
var index = 0;

ban[0] = new Image();
ban[0].src = "URL_banner_0";
link[0] = "URL_link_0";

ban[1] = new Image();
ban[1].src = "URL_banner_1";
link[1] = "URL_link_1";

ban[2] = new Image();
ban[2].src = "URL_banner_2";
link[2] = "URL_link_2";

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

function rotator()
{if (index == ban.length) index = 0;
if (document.images) {
document.images.rotation.src = ban[index].src;
}
else {
document.getElementById('rotation').src=ban[index].src;
}
index++;
setTimeout('rotator()',3000);
}
function go() {window.open(link[index-1]);}
</script>

<img id="rotation" style="cursor:pointer;" src="" onclick="go();"/>
<script type="text/javascript">rotator();</script>

Trong đoạn code trên bạn lần lượt thay thế URL_banner tương ứng với URL_link.

Chú ý số 3000 ám chỉ 3000 mili giây, tương đương 3 giây chỉ khoảng cách giữa các lần chuyển banner. Bạn có thể điều chỉnh con số này tùy ý.

Tuesday, July 5, 2011

Tiện ích Blogroll tiết kiệm không gian web

Tiện ích Blogroll đối với blogspot dùng để liệt kê danh sách các liên kết blogspot, đó là một phần trong việc trao đổi liên kết giúp kết nối cộng đồng blogspot đồng thời tăng lượng truy cập cho blogspot của bạn. Blogger vốn đã có sẵn tiện ích này nhưng ở dạng cơ bản. Qua bài viết này mình giới thiệu một kiểu Blogroll theo dạng menu đóng mở giúp tiết kiệm không gian web, đặt các liên kết blogpsot phân loại theo chủ đề, như bạn có thể thấy trên phần sidebar của Bloggerism vậy. Ưu điểm của tiện ích này là dễ cài đặt, dễ tùy biến, gọn nhẹ, load nhanh, dễ quản lý các nhóm liên kết, có thể áp dụng cho blogspot, wordpress, nền tảng web khác.

Hướng dẫn cài đặt:

Bước 1. Đăng nhập Blogger >> Design >> Edit HTML. Đặt code CSS vào trước thẻ ]]></b:skin>.

#downmenu{padding-left:3px}
#downmenu ul li {list-style: disc url(…/iconslist.gif) inside; vertical-align: top; padding-left: 20px;margin: 0;}
#downmenu ul li:hover {list-style: disc url(…/iconslisthover.png) inside; vertical-align: top;padding-left: 20px;margin: 0;}
a.levelmenu{line-height:20px;color:#111;background:url(…/vista.gif) left center;background-repeat:no-repeat;padding-left:10px;font-weight:normal;font-size:110%}
a.levelmenu:hover{line-height:20px;color:#111;background:url(…/plus.png) left center;background-repeat:no-repeat;padding-left:47px;z-index:100;font-weight:normal;font-size:110%}

Tải các file ảnh bên dưới về rồi upload lên Blogspot của bạn, lấy URL rồi đặt đúng thứ tự vào cấu trúc CSS ở trên. Sau đó lưu Template.

iconlist
iconlisthover
vista
plus

Bước 2. Vào Page Elements. Thêm một tiện ích HTML/Javascript và đặt đoạn code bên dưới vào phần nội dung tiện ích.

<script type="text/javascript">
var desplegable = 0

function menudesplegable(id)
{
if (desplegable != 0 && desplegable != id) document.getElementById(desplegable).style.display = 'none'
if (document.getElementById(id).style.display == 'none')
document.getElementById(id).style.display = 'block'
else
document.getElementById(id).style.display = 'none'
desplegable = id
}
</script>
<div id="downmenu" style=" width: 100%;">
<a href="#" class="levelmenu" onclick="menudesplegable('topic1');return false">Chủ đề 1:</a><br />
<ul id="topic1" style="display:block">
<li><a href="#" target="_blank">Topic1 Text Link 1</a></li>
<li><a href="#" target="_blank"> Topic1 Text Link 2</a></li>
</ul>

<a href="#" class="levelmenu" onclick="menudesplegable('topic2');return false">Chủ đề 2:</a><br />
<ul id="topic2" style="display:block">
<li><a href="#" target="_blank"> Topic2 Text Link 1</a></li>
<li><a href="#" target="_blank"> Topic2 Text Link 2</a></li>
</ul>

<a href="#" class="levelmenu" onclick="menudesplegable('topic3');return false">Chủ đề 3:</a><br />
<ul id="topic3" style="display:block">
<li><a href="#" target="_blank"> Topic3 Text Link 1</a></li>
<li><a href="#" target="_blank"> Topic3 Text Link 2</a></li>
</ul>

<a href="#" class="levelmenu" onclick="menudesplegable('topic4');return false">Chủ đề 4:</a><br />

<ul id="topic4" style="display:none">
<li><a href="#" target="_blank"> Topic4 Text Link 1</a></li>
<li><a href="#" target="_blank"> Topic4 Text Link 2</a></li>
<li><a href="#" target="_blank"> Topic4 Text Link 3</a></li>
<li><a href="#" target="_blank"> Topic4 Text Link 4</a></li>
</ul>

</div>

Công việc của bạn là liệt kê các liên kết blogspot của bạn rồi phân loại theo chủ đề để dễ quản lý, sau đó tùy biến theo cấu trúc HTML ở trên sao cho phù hợp.

Monday, July 4, 2011

Tạo thanh điều hướng bài viết chuẩn cho blogspot

Thanh điều hướng bài viết (breadcrumbs) có vai trò rất quan trọng, giúp người đọc dễ dàng lướt đến những bài viết khác trong cùng một chuyên mục hoặc xác định được bài viết đang đọc thuộc chuyên mục nào. Hẳn bạn từng biết và sử dụng kiểu thanh điều hướng cổ điển mà dân Blogspot thường sử dụng. Cách cổ điển này có thể nói là hơi phức tạp về các bước thực hiện đối với một blogger mới. Nếu xét về nội dung thì nó có những điểm thừa, tức là trong phần Breadcrumbs vốn dĩ đã có tiêu đề bài viết (post-title), cùng với tiêu đề bài viết sẵn có của phần post dẫn đến việc trùng lặp.

Từ lâu mình đã để ý đến vấn đề này và đã nghĩ ra một cách để khắc phục nhược điểm này để cho ra thủ thuật tạo thanh điều hướng bài viết chuẩn cho blogspot, như Bloggerism đang sử dụng. Bên dưới là hình ảnh minh họa so sánh 2 kiểu Breadcrumbs, một là kiểu truyền thống và một là kiểu mà Bloggerism tạo ra.

Để 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 HTML, chọn Expand Widget Templates. Tìm đến đoạn code như bên dưới:

<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>

Đoạn code này định dạng tiêu đề bài viết ỏ các kiểu trang (trang index, trang item và trang static_page). Việc của bạn cần làm là thay toàn bộ đoạn code nói trên bằng đoạn code bên dưới.

<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> »
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + "?max-results=10"' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>
</b:if>
</b:loop>
<b:else/>
</b:if>
» <span><h2 class='post-title entry-title'><data:post.title/></h2></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
</b:if>

Ý nghĩa của đoạn code này: Chỉ định thanh điều hướng dạng Home >> Tên nhãn >> Tiêu đề bài viết (không URL) ở các trang item, còn ở các kiểu trang khác (trang chủ, trang nhãn, trang tĩnh…) thì chỉ định tiêu đề bài viết mặc định bình thường.

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

.breadcrumbs{
float:left;
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:15px;font-weight:bold;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

Nếu bạn rành về CSS thì có thể tùy biến CSS theo ý thích của mình.

Hy vọng thủ thuật này sẽ giúp ích rất nhiều cho blogspot của bạn.

Friday, July 1, 2011

Tiện ích Nhận xét mới nhất không dùng Javascript

Để một blogspot có tốc độ load trang nhanh nhất trong một chừng mực nào đó thì việc sử dụng các tiện ích không dùng đến hoặc hạn chế dùng javascript là một giải pháp tối ưu nhất. Mình đã từng giới thiệu các tiện ích Bài viết mới nhất cho cả blog và Bài viết mới nhất cho từng nhãn, Auto Readmore không dùng javascript. Để thêm vào bộ tiện ích không javascript này, hôm nay xin giới thiệu tiếp một tiện ích không dùng javascript, đó là tiện ích Nhận xét mới nhất không dùng javascript (Recent Comments without Javascript).

Để 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 Expadn Widget Templates. Tìm đến một thẻ đóng </b:widget> tại khu vực một tiện ích nào đó mà bạn định đặt tiện ích Nhận xét mới nhất gần với tiện ích đó. Đặt sau thẻ </b:widget> với đoạn code bên dưới.

<b:widget id='BlogList100' locked='false' title='Nhận xét mới nhất' type='BlogList'>
<b:includable id='main'>


<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:items' var='item'>
<li>
<a expr:href='data:item.itemUrl' expr:title='data:item.itemSnippet' target='_blank'><data:item.itemTitle/></a>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>

Lưu Template.

Bước 2. Vào Page Elements, tìm đến widget có tiêu đề Nhận xét mới nhất, chọn Edit để chỉnh sửa. Nhấn ADD TO LIST rồi lần lượt dán các URL theo thứ tự bên dưới:

http://huynh-nhat-ha.blogspot.com/feeds/comments/default?start-index=1

http://huynh-nhat-ha.blogspot.com/feeds/comments/default?start-index=2

http://huynh-nhat-ha.blogspot.com/feeds/comments/default?start-index=3

http://huynh-nhat-ha.blogspot.com/feeds/comments/default?start-index=4

http://huynh-nhat-ha.blogspot.com/feeds/comments/default?start-index=5

http://huynh-nhat-ha.blogspot.com/feeds/comments/default?start-index=6

http://huynh-nhat-ha.blogspot.com/feeds/comments/default?start-index=7

Chú ý thay huynh-nhat-ha bằng tên blogspot của bạn. Nhấn SAVE để lưu tiện ích.

Đến đây có thể hoàn thành một tiện ích Nhận xét mới nhất không dùng javascript, tiện ích này hiển thị một list các tiêu đề nhận xét với thuộc tính title hiển thị đoạn trích dẫn nhận xét (khi rê trỏ vào tiêu đề nhận xét).

Bạn có thể so sánh 2 URL sau đây để xác định một vấn đề quan trọng:

http://huynh-nhat-ha.blogspot.com/feeds/posts/default (1)

http://huynh-nhat-ha.blogspot.com/feeds/comments/default (2)

So sánh 2 URL trên bạn có thể thấy URL (1) là feed của bài viết, trong feed này có thumbnail, URL (2) là feed của nhận xét, trong feed này không có thumbnail. Chính vì vậy mà tiện ích Nhận xét mới nhất không dùng javascript không thể hiện thị thumbnail. Nếu sau này trong feed của nhận xét trên blogspot có sự cải tiến để hiển thị Avatar thì lúc đó tiện ích Nhận xét mới nhất không dùng javascript này có thể hiện thị Avatar.

Nếu bạn muốn tiện ích Nhận xét mới nhất không dùng Javascript có hiệu ứng màu sắc và đánh số như trên trang chủ của Bloggerism thì bạn có thể áp dụng thêm Bước 3.

Bước 3. Vào Edit HTML. Đặt đoạn code dưới đây vào trước thẻ </head>.

<style type='text/css'>
#BlogList100 {
width:280px;
margin: 40px 0 0;
}
#BlogList100 ul{
list-style-type: none;
margin: 0 0 10px;
padding: 0;
}
#BlogList100 ul li {
width:280px;
height:50px;
margin: 5px 0 ;
padding: 10px;
list-style:none;
}
.red1 { background: #8787ff; }
.red2 { background: #9797ff;width:97% !important;}
.red3 { background: #a7a7ff;width:94% !important;}
.red4 { background: #b7b7ff;width:91% !important;}
.red5 { background: #c7c7ff;width:88% !important;}
.red6 { background: #d7d7ff;width:85% !important;}
.red7 { background: #e7e7ff;width:82% !important;}
.red8 { background: #f0f0ff;width:79% !important;}
.num {font-size:60px; margin: 15px 5px 15px -5px; float:left; color:#f5f5f5;}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js ' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$('#BlogList100 ul').children('li').addClass(function (i) {
return 'red' + (i+1);
});
$("#BlogList100 ul").each(function() {
$("li", this).each(function (i) {
$(this).prepend("<span class='num'>" + (i+1) + "</span>");
});
});
});
</script>

Ở đây mình dùng thêm jQuery để tạo hiệu ứng màu sắc cho tiện ích thêm vẻ độc đáo. Hy vọng tiện ích này sẽ giúp bạn hài lòng với tiêu chí vừa nhẹ mà vừa đẹp lại vừa đủ tính năng (ráng chờ Blogger cải tiến để thêm Avatar nhé bạn).

Thursday, June 30, 2011

Hiển thị thời gian ước tính để đọc bài viết

Tính được thời gian ước tính để đọc một bài viết là một cách thú vị để cho người đọc phần nào hiểu sơ qua về độ dài của bài viết mà không cần phải đọc lướt qua. Người ta ước tính rằng con người chúng ta trung bình cứ mỗi một phút có thể đọc được 300 từ và cứ mỗi 2 giây là có thể xem một hình ảnh. Như vậy dựa vào căn cứ trung bình này, bằng một thuật toán tính đến số từ, các khoảng trắng và hình ảnh trong một bài viết, chúng ta có thể ước tính được thời gian cần để đọc toàn bộ một bài viết.

Qua bài viết này, nhờ sử dụng javascript để tạo những thuật toán cơ bản, mình sẽ giúp bạn hiển thị được thời gian ước tính để đọc một bài viết dưới mỗi tiêu đề bài viết để người đọc bớt phần mệt nhọc đoán chừng độ dài bài viết của bạn.

Để làm được như vậy, bạn hãy thực hiện theo các bước sau đây:

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

<script type='text/javascript'>
//<![CDATA[
// Estimate-time-to-read-blogspot-post Script by Huynh Nhat Ha
var wordsperminute = 300;
var imagesperminute = 30;

function timeperpostreading(id) {
var postcontent = document.getElementById(id);

var img = postcontent.getElementsByTagName("img");
var numimg = img.length;

var strx = postcontent.innerHTML;
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("");
}

var blankfirst = /^ /;
var blankfinal = / $/;
var blanktotal = /[ ]+/g;
strx = strx.replace(blanktotal," ");
strx = strx.replace(blankfirst,"");
strx = strx.replace(blankfinal,"");

var words = strx.split(" ");
var numwords = words.length;

var minutes = parseInt((numwords/wordsperminute)+(numimg/imagesperminute));
var seconds = parseInt((((numwords/wordsperminute)+(numimg/imagesperminute))-minutes)*60);
minutes=("0" + minutes).slice (-1);
seconds=("0" + seconds).slice (-2);

var forreturn = "Thời gian ước tính để đọc bài viết này: "+minutes+":"+seconds;
document.getElementById("timeperpost").innerHTML = forreturn;
}
//]]>
</script>

Bước 2. Tìm đến dòng <div class='post-header-line-1'/> và đặt trước nó bằng dòng code bên dưới.

Tiếp tục tìm dòng <data:post.body/> (hoặc <p><data:post.body/></p>) rồi thay thế nó bằng đoạn code bên dưới.

<div expr:id='data:post.id'>
<p><data:post.body/></p>
</div>
<script type='text/javascript'>
timeperpostreading("<data:post.id/>");
</script>

Lưu Template là OK. Hy vọng thủ thuật nhỏ này sẽ tạo thêm nét độc đáo cho blogspot của bạn.

Tuesday, June 28, 2011

Cài đặt plugin Lightwindow cho blogspot

Hẳn bạn từng nhìn thấy hiệu ứng phóng đại hình ảnh sau khi được click bằng cách sử dụng plugin Lightbox. Có một plugin khác có thể tạo hiệu ứng tương tự, ngoài ra có thể vận dụng cho các liên kết văn bản (Lightbox không có chức năng này), đó là Lightwindow. Lưu ý Lightwindow có sử dụng thư viện Scriptaculous nên sẽ gặp xung đột với thư viện jQuery. Nếu bạn vốn sùng jQuery thì k nên áp dụng plugin này. Nếu bạn thích dùng plugin này thì có thể áp dụng bởi vì sau này mình sẽ giới thiệu nhiều ứng dụng rất độc đáo từ Lightwindow cho blogspot.

Demo.

Để cài đặt plugin, bạn hãy thực hiện theo các bước sau đây.

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

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js'/>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8/scriptaculous.js'/>
<script src='/lightwindow.js' type='text/javascript'/>
<style type='text/css'>
#lightwindow_overlay {display: none; visibility: hidden; position: absolute; top: 0px; left: 0px; width: 100%; height: 100px; z-index: 500;}
#lightwindow {display: none; visibility: hidden; position: absolute; z-index: 999; line-height: 0px;}
#lightwindow_container {display: none; visibility: hidden; position: absolute; padding: 0; margin: 0;}
* html #lightwindow_container {overflow: hidden;}
#lightwindow_contents, #lightwindow_loading {-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0 0 40px #DDD inset;-webkit-box-shadow:0 0 40px #DDD inset;box-shadow:0 0 40px #DDD inset;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF000000', EndColorStr='#FF333333');}
#lightwindow_contents {background-color:transparent;overflow:hidden;padding:15px;position:relative;z-index:0;}
#lightwindow iframe {background-color:#EEE;}
#lightwindow_loading {background-color:#333;height:100%;left:0;position:absolute;top:0;width:100%;z-index:9999;}
#lightwindow_loading img {float:left;margin:30px 0 0 50px;}
#lightwindow_loading span {color:#DDD;float:left;font-size:14px;margin:42px 0 0 5px;}
#lightwindow_loading span a {color:#FFF;cursor:pointer;}
#lightwindow_loading_shim {display: none; left: 0px; position: absolute; top: 0px; width: 100%; height: 100%;}
#lightwindow_navigation {position: absolute; top: 0px; left: 0px; display: none;}
#lightwindow_navigation_shim {display: none; left: 0px; position: absolute; top: 0px; width: 100%; height: 100%;}
#lightwindow_navigation a, #lightwindow_navigation a:link, #lightwindow_navigation a:visited, #lightwindow_navigation a:hover, #lightwindow_navigation a:active {}
#lightwindow_previous, #lightwindow_next {width: 49%; height: 100%; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2zSl2YdeNONlLglUVlOmrVlT0WmZEcF4bzGx4AsRbPjviWcvnEpZ7hq3Igh6CrD-Cn3mQJ5OhQgFodlXW0yiOxm5KJ4CdvYRD5QqzMNLNTRYohcqkCgZbVMbPWNTQeq3Dw4Wx8EUzJnA/s0/blank.gif) no-repeat; display: block;}
#lightwindow_previous {float: left; left: 0px;}
#lightwindow_next {float: right; right: 0px;}
#lightwindow_previous:hover, #lightwindow_previous:active {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCL3eOnXaNJTW-8wsHCgsbj-KxBJrfGRjdZT5w564skYL_iOgmdCwC_EATPqz7RzNBKfj6fZ8eCJ51oTxArGuhn4azvnuWFgtnm4mx3yfSJo5-7c2JvWQHzUHPTSNHBvQ1yP5dsj0WXls/s0/LWicoleft.png) no-repeat 20% 50%;}
#lightwindow_next:hover, #lightwindow_next:active {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqWNUZ26aNAZrhpKNC8iZS2Sih3UMzKmZBmVBl58ljRKjsJ3EMlLffgFI7UW-IRxfxGRG1R8eQoL-fDK69R-3LoTOEgNm57YA27Ll8FtbhYSTnbIEuvCEgCB5r9LlFaRd6d4UmAWL9UPA/s0/LWicoright.png) no-repeat right 50%;}
#lightwindow_previous_title, #lightwindow_next_title {display: none;}
#lightwindow_galleries {display:none !important;}
#lightwindow_data {position: absolute;}
#lightwindow_data_slide {display:none !important;}
#lightwindow_title_bar {height: 25px; overflow: hidden;}
#lightwindow_title_bar_title {color:#DDD;float:left;font-size:14px;line-height:25px;margin-left:20px;text-align:left;}
a#lightwindow_title_bar_close_link, a#lightwindow_title_bar_close_link:link, a#lightwindow_title_bar_close_link:visited {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;-moz-box-shadow:0 0 17px #FFF inset;-webkit-box-shadow:0 0 17px #FFF inset;box-shadow:0 0 17px #FFF inset;background-color:#000;color:#AAA;cursor:pointer;display:block;float:right;font-family:Verdana;font-weight:bold;height:22px;line-height:22px;padding:0 30px;text-align:right;text-transform:lowercase;}
a#lightwindow_title_bar_close_link:hover {color:#FFF;background-color:#222}
#lightwindow p {color: #000; padding-right: 10px;}
a.lightwindow {cursor:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA5d5sKJrApUuB24ZxQJF-BOW37UkxGppSNd_h3kogcxJBoqKW6IHqLUBpQIoaws4nLroBD_f-VOKgQ4PSq-X_QcQTNKj6dbjRiX37FyPXnmM7u0XjRNg6mh_kv_hXlY97FDWHTsxJdUU/s0/magplus.gif), pointer !important;}
a.lightwindow img {cursor:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA5d5sKJrApUuB24ZxQJF-BOW37UkxGppSNd_h3kogcxJBoqKW6IHqLUBpQIoaws4nLroBD_f-VOKgQ4PSq-X_QcQTNKj6dbjRiX37FyPXnmM7u0XjRNg6mh_kv_hXlY97FDWHTsxJdUU/s0/magplus.gif), pointer !important;}
</style>

Bạn nên tải về file js lighwindow.js sau đó upload lên host hoặc lên googlecode để sử dụng cho blogspot của bạn.

Lưu Template.

Bước 2. Thiết lập cấu trúc HTML cho các liên kết như sau:

<a class='lightwindow' href='#' params='lightwindow_width=600,lightwindow_height=600,lightwindow_loading_animation=true' rel='nofollow' title='Title Text'>Text Link</a>

Chú ý điều chỉnh width (600) và height (600) tương ứng với chiều rộng và chiều cao của cửa sổ hiệu ứng sao cho tương thích với từng trường hợp áp dụng.

Để áp dụng plugin này cho hình ảnh, bạn có thể sử dụng cấu trúc HTML như sau:

<a class="lightwindow" href="URL_hình ảnh"><img src="URL_hình ảnh" width="350px" height="250px"/></a>

Monday, June 27, 2011

Bài viết mới nhất cho nhãn không dùng Javascript

Dạo này do bận viết bài phân tích tiền tệ nên mình không còn nhiều thời gian dành cho Blogspot. Tuy nhiên niềm đam mê lĩnh vực này cứ mãi thôi thúc mình cố gắng đóng góp chút gì đó cho cộng đồng. Và mình quyết định trở lại để cùng chia sẻ những thủ thuật về Blogspot với những người bạn thân mến trong cộng đồng Blogger Việt. Để kỷ niệm ngày trở lại, mình xin chia sẻ một thủ thuật, tuy không mới song cũng không cũ, đó là tiện ích Bài viết mới nhất cho nhãn không dùng Javascript.

Thực ra, tiện ích này được áp dụng từ thủ thuật Tiện ích Bài viết mới nhất không dùng Javascript áp dụng cho toàn blogspot mà mình đã vận dụng trước đây từ ý tưởng sử dụng tiện ích BlogList để tạo tiện ích bài viết mới nhất có ảnh đại diện.

Bạn có thể xem Demo tại trang chủ của blog này. Để 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 Page Elements >> trên sidebar, nhấn Add a Gadget chọn Blog List (Danh sách Blog).

Tại mục Title, bạn hãy đặt theo tên nhãn cần áp dụng tiện ích.

Tick chọn vào các mục Title of most recent item, Snippet of most recent item, Thumbnail of most recent item.

Nhấn ADD TO LIST.

Sau đó dán vào mục Add by URL với địa chỉ sau đây:

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Tên nhãn1?start-index=1

Rồi tiếp tục Add by URL thứ 2

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Tên nhãn1?start-index=2

rồi thứ 3

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Tên nhãn1?start-index=1

cứ thế cho đến khi nào bạn cần dừng lại (1,2,3,4… là số bài viết mới nhất hiển thị cho nhãn).

Bạn cần thay huynh-nhat-ha bằng tên blogspot của bạn và Tên nhãn1 bằng tên của nhãn cần áp dụng, rồi nhấn SAVE để lưu tiện ích.

Bước 2. Vào Edit HTML, chọn Expand Widget Templates.

Dùng từ khóa BlogList1 (nhấn Ctrl +F) tìm đến đoạn code tương tự như sau.

<b:widget id='BlogList1' locked='false' title='Tên nhãn 1' type='BlogList'>
<b:includable id='main'>

…. Phần nằm giữa này là code trọng tâm của tiện ích …

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

Ở đây bạn cần chú ý thẻ <b:includable id='main'> và thẻ </b:includable> chứa code trọng tâm của tiện ích, nói chung đoạn code nằm giữa 2 thẻ này rất dài. Việc bạn cần làm tiếp theo là thay đoạn code nằm giữa 2 thẻ đó bằng đoạn code dưới đây.

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content'>

<div class='recentposts-ha-main' expr:id='data:widget.instanceId + "_container"'>
<ul expr:id='data:widget.instanceId + "_blogs"'>
<b:loop values='data:items' var='item'>
<li>
<div class='RPcontent'>

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

.recentposts-ha ul{list-style-type:none;margin:0;padding:0}
.recentposts-ha ul li{background-color:transparent;clear:both;list-style:none}
.recentposts-ha ul li:hover{background-color:#e2fcef}
.recentposts-ha .RPcontent{padding:5px}
.recentposts-ha .RPtitle{height:30px}
.recentposts-ha .RPtitle a{color:#069;font-family:Arial;font-size:12px;font-weight:bold}
.recentposts-ha .RPtitle a:hover{color:#AC0101;text-decoration:none}
.recentposts-ha .RPthumbnail{float:left;margin:0 5px 0 0}
.recentposts-ha img{height:50px;width:50px}

Lưu Template là OK.

Cứ như vậy bạn có thể áp dụng cho nhiều nhãn và bạn sẽ sử dụng BlogList2, BlogList3, BlogList4, BlogList5…

Lưu ý nếu bạn áp dụng thủ thuật này tại những vùng có chiều rộng khá lớn (ví dụ phần Main) thì có thể bố trí các bài viết thành 2 cột, bạn chỉ cần thêm code CSS như thế này:

.recentposts-ha ul li {float: left;margin-right: 10px;width: 48%}

Friday, April 15, 2011

Tạo Sitemap đẹp cho blogspot

Sơ đồ site (sitemap) rất quan trọng cho một website cũng như cho webblog. Nó giúp người lướt web dễ dàng tìm đến những chuyên mục trong toàn site để tìm một bài viết nào đó, ngoài ra còn giúp cho webmaster quản lý chặt chẽ nội dung site. Đối với cộng đồng Blogger, lâu nay các blogspotter vẫn hay dùng Table of Contents bằng script của Abu Farhan. Kiểu sitemap này có một điểm yếu là liệt kê tất cả các nhãn trên blogspot. Tuy nhiên các blogspotter thì lại thích liệt kê bài viết của một số nhãn nào đó (tức là nếu không thích liệt nhãn nào thì nhãn đó sẽ không nằm trong Sitemap, điểm này rất cần thiết). Giải pháp tối ưu là phải làm sao có một sitemap đáp ứng được nhu cầu tùy biến của blogspotter. Sau khi nghiên cứu vấn đề này, mình đã nghĩ ra ý tưởng vận dụng cách liệt kê các bài viết của một nhãn, một script rất phổ biến trên cộng đồng Blogger, để tạo ra Sitemap, kết hợp CSS tạo hai cột, vừa tiết kiệm không gian web, vừa giúp người dùng dễ dàng tùy biến theo ý thích, như Sitemap của Thủ thuật Blogger vậy.

Để tạo Sitemap như vậy, bạn hãy thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Posting (Đăng bài viết) để tạo một bài viết có tiêu đề là Sitemap (để trống phần nội dung), xuất bản bài viết để lấy URL cho trang Sitemap.

Bước 2. Vào Design >> Edit HTML. Đặt đoạn code sau đây vào trước thẻ </head>.

<b:if cond='data:blog.url == "URL_trang_Sitemap"'>
<script type='text/javascript'>
//<![CDATA[
function allpostslist(json) {
document.write('<ul>');
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {

if (json.feed.entry[i].link[j].rel == 'alternate') {

break;

}

}

var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";

document.write(item);
}

document.write('</ul>');
}
//]]>
</script>
<style type='text/css'>
#sitemap{width:900px;margin:0;padding-bottom:15px;background:#ffffff;float:left;}
#sitemap ul li {list-style: disc url(/iconslist.gif) inside; vertical-align: top; padding-left:10px;margin: 0;}#sitemap ul li:hover {list-style: disc url(/iconslisthover.png) inside; vertical-align: top;padding-left:10px;margin: 0;}
.sm-left{float:left;width:45%;margin:0 20px 0px 20px;font-size:14px;tex-align:justify}
.sm-right{float:right;width:45%;;margin:0 20px 0px 20px;font-size:14px;tex-align:justify}
p.smtitle {border-bottom:1px dotted #789;clear:both;color: #2554C7;font-family:Century Gothic;font-size:25px;padding:10px 50px 5px 0;text-align:right;text-shadow:2px 2px 1px #789;text-transform:lowercase;}
#content-wrapper{display:none}
</style>
</b:if>

Trong đoạn CSS ở trên, chú ý thuộc tính display:none để ẩn đi một số ID và CLASS cần thiết. Tải 2 file icon về áp dụng cho blogspot của bạn, tránh dùng chung file: iconslist.gif và iconslisthover.png.

Lưu Template.

Bước 3. Tìm dòng <div id='content-wrapper'> và đặt trước nó bằng đoạn code bên dưới.

<b:if cond='data:blog.url == "URL_trang_Sitemap"'>
<div id='sitemap'>
<div class='sm-left'>
<p class='smtitle'><a href='/search/label/Nhãn 1?max-results=10'>Nhãn 1</a></p>
<script src='/feeds/posts/summary/-/Nhãn 1?max-results=500&alt=json-in-script&callback=allpostslist'/>

<p class='smtitle'><a href='/search/label/Nhãn 2?max-results=10'>Nhãn 2</a></p>
<script src='/feeds/posts/summary/-/Nhãn 2?max-results=500&alt=json-in-script&callback=allpostslist'/>

<p class='smtitle'><a href='/search/label/Nhãn 3?max-results=10'>Nhãn 3</a></p>
<script src='/feeds/posts/summary/-/Nhãn 3?max-results=500&alt=json-in-script&callback=allpostslist'/>

</div>

<div class='sm-right'>

<p class='smtitle'><a href='/search/label/Nhãn A?max-results=10'>Nhãn A</a></p>
<script src='/feeds/posts/summary/-/Nhãn A?max-results=500&alt=json-in-script&callback=allpostslist'/>

<p class='smtitle'><a href='/search/label/Nhãn B?max-results=10'>Nhãn B</a></p>
<script src='/feeds/posts/summary/-/Nhãn B?max-results=500&alt=json-in-script&callback=allpostslist'/>

<p class='smtitle'><a href='/search/label/Nhãn C?max-results=10'>Nhãn C</a></p>
<script src='/feeds/posts/summary/-/Nhãn C?max-results=500&alt=json-in-script&callback=allpostslist'/>

<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.huynh-nhat-ha.blogspot.com/2011/04/sitemap-for-blogspot.html" target="_blank">Add to your blogspot ?</a></p>
</div>
</div>
<div style='clear: both;'/>
</b:if>

Chú ý: Ở đây phần nằm sau thẻ <div class='sm-left'> là cột bên trái, phần nằm sau thẻ <div class='sm-right'> là cột bên phải. Tùy theo số lượng nhãn và số lượng bài viết trên blogspot mà bạn phân phối và bố trí thêm bớt các nhãn sao cho cân đối, theo định dạng như trên.

Lưu Template là OK. :47)