Make a Blogger

Kích hoạt Comment phân cấp cho blogspot

noreply@blogger.com (VnAbout: Blogger) — Thu, 15 Mar 2012 02:13:00 +0000

Hôm nay, Blogger đã chính thức cho ra mắt hệ thống comment phân cấp đúng với sự kỳ vọng và chờ đợi của anh em blogger.

Comment phân cấp của Blogspot gần như là mang đầy đủ những tính năng của Wordpress như: Trả lời, thu gọn, comment của tác giả được làm nổi bật. Tuy nhiên, họ chỉ cho phép Level 2 comment điều này có nghĩa là bạn không thể trả lời một comment trả lời.

KÍCH HOẠT COMMENT PHÂN CẤP
1. Thiết kế > Cài đặt > Bài đăng và nhận xét
2. Ở phần vị trí nhận xét bạn chọn "Được nhúng" như hình.

3. Cài đặt > Khác
4. Tại phần nguồn cấp dữ liệu trang web bạn chọn "Đầy đủ"

Các bạn hãy để lại ý kiến của mình về phần comment phân cấp của blogger nhé.

theo vi-sharing – nguồn Buzz Google.

Báo chí nước ngoài sốc vì Ipad 3 ở Việt Nam

noreply@blogger.com (VnAbout: Blogger) — Thu, 15 Mar 2012 02:03:00 +0000

Việc chiếc iPad thế hệ mới bất ngờ xuất hiện tại Việt Nam trước giờ lên kệ không chỉ khiến giới công nghệ trong nước cảm thấy bất ngờ mà thậm chí các trang công nghệ nổi tiếng và uy tín thế giới cũng phải “rúng động” trước thông tin này.

Phải đến ngày 16/3, iPad thế hệ mới mới được bắt đầu bán ra trên thị trường một vài nước, còn với những người dùng đặt trước hàng trực tuyến thì phải chờ đến ít nhất ngày 19/3 mới được nhận hàng.
Tuy nhiên, chiếc iPad thế hệ mới đã bất ngờ xuất hiện tại Việt Nam vào ngày hôm qua khiến cho giới công nghệ trong và ngoài nước phải cảm thấy bất ngờ.

iPad mới xuất hiện tại Việt Nam khiến giới công nghệ trong và ngoài nước bất ngờ

Hàng loạt các trang web công nghệ lớn và nổi tiếng trên thế giới đã ngây lập tức đăng tải lại thông tin này và sử dụng lại đoạn video trải nghiệm iPad thế hệ mới tại Việt Nam, bất chấp đoạn video được thực hiện bằng tiếng Việt.
Trang công nghệ Mashable khẳng định đây là chiếc iPad mới đầu tiên được xuất hiện trước thời hạn mà Apple chính thức bày bán. Mashable cũng cho biết dựa vào các thông tin từ Việt Nam, nhiều chi tiết kỹ thuật về iPad mới đã được hé lộ thông qua phần so sánh giữa iPad mới và “người tiền nhiệm” iPad 2.
Thông tin trên cũng được xuất hiện trên các trang web công nghệ uy tín khác như Cnet, Engadget, MacRumors, SlashGear, Wired… như một sự kiện đặc biệt, khi mà iPad mới đang là sản phẩm công nghệ “hot” và đang được quan tâm nhất hiện nay.

Thông tin về iPad mới tại Việt Nam được đăng tải trên trang web công nghệ nổi tiếng Engadget

Mặc dù video trải nghiệm iPad mới được đăng tải lên Youtube hoàn toàn bằng tiếng Việt, nhưng đoạn video cũng đã nhanh chóng thu hút hàng trăm ngàn lượt xem và bàn luận trên khắp thế giới, chủ yếu bằng tiếng Anh.
Bên cạnh sự ngạc nhiên và thán phục, nhiều sự tranh cãi cũng đã nổ ra xung quanh nguồn gốc và độ xác thực về chiếc iPad mới này. Nhiều người cho rằng thực chất đây chỉ là chiếc iPad 2 “mạo danh” iPad thế hệ mới.
Để minh chứng cho điều này, độc giả Scrapple của trang mạng MacRumors đã đưa ra bằng chứng, cho thấy hộp đựng của iPad mới không có nhiều khác biệt so với iPad 2, trong khi đó hộp đựng của iPad 2 lại được làm mới hoàn toàn so với iPad thế hệ đầu tiên.

Hộp đựng iPad mới và iPad 2 có nhiều nét tương đồng

Tuy nhiên, dựa vào số serie của máy hiển thị trong đoạn clip trải nghiệm được đăng tải, sau khi kiểm tra thông tin từ trang chủ của Apple cho thấy đây chính xác là chiếc iPad thế hệ thứ 3 hỗ trợ cả Wifi lẫn 4G.

Thông tin về iPad mới được kiểm tra trên trang web của Apple

Đáng chú ý, đây không phải là lần đầu tiên một sản phẩm lộ diện tại Việt Nam trước giờ lên kệ.
Vào tháng 4 năm ngoái, một chiếc iPhone màu trắng đặc biệt, có ổ cứng lên đến 64GB bất ngờ xuất hiện tại Việt Nam, mà nguồn tin khẳng định đây chính là iPhone 5 (vào thời điểm đó, tên gọi của iPhone 4S vẫn được tin là iPhone 5), với thiết kế và kiểu dáng không có nhiều khác biệt so với iPhone 4 (phiên bản iPhone mới nhất vào thời điểm bấy giờ).
Và quả nhiên, đến tháng 10, Apple đã trình làng iPhone 4S với kiểu dáng tương tự như iPhone 4, cùng với phiên bản ổ cứng 64GB.

Chiếc iPhone “lạ” từng làm xôn xao giới công nghệ Việt Nam vào năm ngoái

Chưa hết, vào tháng 7 năm ngoái, 2 mẫu BlackBerry “độc” cũng đã bất ngờ xuất hiện tại Việt Nam trước cả khi RIM công bố về sự hiện diện của 2 mẫu sản phẩm này, và phải đến tận tháng 8, RIM mới chính thức trình làng 3 mẫu điện thoại mới, 2 trong số đó chính là các sản phẩm đã có mặt tại Việt Nam.

BlackBerry 9810 xuất hiện tại Việt Nam trước cả khi RIM công bố

Với những lần bất ngờ xuất hiện của sản phẩm “hot” như trước đây, lần này việc iPad thế hệ mới chỉ xuất hiện tại Việt Nam ít ngày trước khi được lên kệ là điều hoàn toàn có thể, và giới công nghệ Việt Nam một lần nữa có quyền tự hào về điều này.

the dan tri

Google thay thế Androi Market bằng Google Play

noreply@blogger.com (VnAbout: Blogger) — Thu, 15 Mar 2012 01:56:00 +0000

Hãng tìm kiếm Google vừa làm người dùng trên khắp thế giới vô cùng ngạc nhiên khi họ thông báo ra mắt một trung tâm giải trí cho mọi thiết bị mang tên Google Play, nơi kết hợp các dịch vụ âm nhạc, phim ảnh, sách điện tử và các ứng dụng trên Android Market thành một dịch vụ duy nhất.

Theo Google, dịch vụ mới này sẽ giúp bạn đồng bộ hóa giữa các thiết bị của bạn từ những chiếc điện thoại thông minh, máy tính bảng cho đến máy tính mà bạn đang dùng.

Dựa trên nền tảng điện toán đám mây, Google Play sẽ giúp bạn lưu trữ và chia sẻ dễ dàng những bài hát, bộ phim hay hoặc nhanh chóng truy cập vào các ứng dụng dành cho thiết bị Android mọi lúc mọi nơi và bạn không bao giờ phải lo lắng về việc mất hoặc di chuyển chúng một lần nữa.

Với Google Play. bạn có thể
- Lưu trữ đến 20.000 bài hát miễn phí và có thể mua hàng triệu ca khúc mới.
- Download hơn 450.000 ứng dụng và trò chơi cho Android.
- Khám phá kho sách điện tử lớn nhất thế giới.
- Thuê hàng trăm bộ phim yêu thích, bao gồm cả những phim HD mới nhất.

Bắt đầu từ ngay hôm nay, Android Market, Google Music và Google eBookstore chính thức trở thành một phần của Google Play tại địa chỉ trên phiên bản web là https://play.google.com. Còn ứng dụng Android Market trên các thiết bị chạy hệ điều hành Android sẽ được nâng cấp lên Google Play Store trong những ngày tới. Các ứng dụng ứng dụng âm nhạc, phim ảnh, sách được nâng cấp thành các phần tương ứng là Google Play Movies, Google Play Musics và Google Play Books tùy theo từng quốc gia mà các ứng dụng này có mặt.

Ở Mỹ, Google Play có đầy đủ các tinh năng thông qua các ứng dụng về âm nhạc, phim, sách và ứng dụng Android. Ở Canada và Anh chỉ có phim ảnh, sách và ứng dụng Android. Ở Australia có sách và ứng dụng Android và ở Nhật Bản chỉ có phim và ứng dụng. Còn ở các quốc gia còn lại, Google Play sẽ thay thế Android Market.

Để tìm hiểu thêm các thông tin về dịch vụ mới này, bạn có thể truy cập vào địa chỉplay.google.com/about hoặc theo dõi trên Google+.

Hiện tại, ở Việt Nam đã có thể sử dụng Google Play và khi bạn truy cập vào địa chỉmarket.android.com sẽ được chuyển sang địa chỉ mới tại play.google.com.

theo Google blog – nguồn: toiyeugoogle

Thủ thuật vào trang blogspot.com với mạng VNPT

noreply@blogger.com (VnAbout: Blogger) — Fri, 09 Dec 2011 13:28:00 +0000

Hiện tại các bạn sử dụng mạng VNPT không thể truy cập được vào trang blogspot.com được. Các xử lý đơn giản như sau.

Vào phần cấu hình mạng đổi DNS thành
4.2.2.3
4.2.2.4

Nhân đây mình dành vài dòng đểgiới thiệu qua về blogspot - một trong những dịch vụ cho phép tạo blog miễn phí được cung cấp bởi Google:

Chúng tôi đã tạo Blogger nhằm cung cấp cho bạn một cách đơn giản để chia sẻ suy nghĩ của mình về các sự kiện hiện thời, những gì đang diễn ra trong cuộc sống của bạn, hoặc bất kỳ điều gì khác mà bạn muốn thảo luận — với mọi người. Chúng tôi đã phát triển rất nhiều tính năng để giúp cho việc viết blog càng đơn giản và hiệu quả càng tốt.

Trình thiết kế mẫu cho blogger cung cấp nhiều mẫu, giúp bạn dễ dàng tạo nên một blog có giao diện chuyên nghiệp. Ngoài ra, Trình thiết kế Mẫu cho phép bạn tùy chỉnh mẫu của mình. Chọn từ hàng trăm hình nền, hàng chục bố cục linh hoạt và sắp xếp lại các phần tử trang thông qua giao diện kéo và thả. Thêm các tiện ích như trình chiếu, thăm dò ý kiến người dùng hoặc thậm chí các quảng cáo AdSense. Cũng thật dễ dàng thay đổi màu sắc và phông chữ. Và nếu mức độ kiểm soát như vậy vẫn chưa đủ, bạn thậm chí còn có thể chỉnh sửa CSS và HTML của blog của mình.

http://www.blogger.com/features

Nguồn: Cách vào trang blogspot.com khi sử dụng mạng VNPT

Các giải quyết khi bị Google penalty weblog

noreply@blogger.com (VnAbout: Blogger) — Thu, 27 Oct 2011 05:31:00 +0000

Rất nhiều lý do website của bạn có thể bị Google penalty ngay cả khi bạn cảm thấy mình phát triển website hoàn toàn bình thường. Đa số nguyên nhân là do các webmaster quá “ham muốn” thứ hạng, đốt cháy giai đoạn để lên được top càng sớm càng tốt.

Cũng có trường hợp các công ty làm dịch vụ SEO vì muốn có được lợi nhuận từ khách hàng nên họ đã ký những hợp đồng SEO thực hiện trong thời gian ngắn với những từ khóa độ khó trung bình trở lên. Và để lên được top nhanh chóng buộc họ phải sử dụng các thủ thuật đen để đẩy rank website lên cao. Tuy nhiên thay vì mọi việc diễn ra tốt đẹp nếu họ tuân thủ các quy tắc của Google, thì ngược lại họ làm cho sự việc ngày càng rắc rối hơn, không những cho chính mình mà còn cho cả các khách hàng ham muốn thực hiện nâng hạng trên Google trong thời gian ngắn.

Dấu hiệu nào để biết website tôi đang bị penalty ?

- Pagerank của website hầu như biến mất. Không phụ thuộc vào trang của bạn có PR bao nhiêu, nhưng nếu bị penalty một vài trường hợp sẽ mất PR ngay cả trong thời gian Google chưa cập nhật PR.

- Một số từ khóa của website rớt hạng, có khi rơi tự do làm cho lượng truy cập từ search engine giảm đi đáng kể.

- Trường hợp nặng hơn là website bị xóa luôn khỏi dữ liệu tìm kiếm của Google. Có một số site bị ban một thời gian, nhưng có một số site không bao giờ còn được xuất hiện trên Google nữa.

Tại sao Google penalty trang web của tôi ?

Có cả tá nguyên do để Google penalty website của bạn. Các nguyên nhân đó được đặt trong điều khoản của Google. Nếu bạn không vi phạm các điều khoản của Google thì khả năng bị penalty rất thấp. Bạn có thể xem các điều khoản tại đây : http://www.google.com/accounts/TOS .

Và bạn cũng có thể tham khảo một số lời khuyên của Google tại đây :http://www.google.com/support/webmas...y?answer=35769 . Qua đây chúng tôi cũng xin liệt kê một số lỗi mà các bạn hay mắc phải khi thực hiện tối ưu hóa website.

Một – Sử dụng text ẩn và link ẩn. Một số webmaster sử dụng text và link cùng màu hoặc dùng Css để dấu đi một số từ khóa trên website. Một số dùng file hình cùng màu với text nhưng do Google thường đọc tên file để đoán màu, nên một số bạn có thể lợi dụng hạn chế này của Google để chèn từ khóa lên web.

Hai – Duplicate content . Lỗi này rất thường gặp với những webmaster không có thời gian phát triển website. Thường thì họ copy các bài từ nguồn khác về web của mình. Với trường hợp này Google cũng phạt tuy nhiên mức độ nhẹ.

Ba – Link farm : Đây là cách xây link không bình thường. Ví dụ như bạn trao đổi với website hoàn toàn không liên quan, trao đổi với rất rất nhiều website. Trao đổi liên kết với website bị penalty hoặc Google cảnh báo có thể gây hại cho máy tính cũng rất nguy hiểm.

Bốn – Mật độ từ khóa trong website của bạn quá nhiều. Điều này thật sự không những làm nản lòng Google mà còn làm nản lòng cả người xem.

Năm – Sử dụng các trang Doorway – Bạn có thể tìm hiểu kỹ hơn về Doorway tại đây : http://en.wikipedia.org/wiki/Doorway_page.
Ngoài ra còn rất nhiều các thủ thuật khác nữa để đánh lừa search engine. Tuy nhiên càng ngày Google càng thông minh do đó hầu như đa số các kỹ thuật đều bị Google bắt và phạt. Mặc dù vậy cũng có những cái Google chưa bắt được vì tính nhạy cảm của nó. Nhưng Google có phát triển một report để mọi người có thể báo cáo những site sử dụng thủ thuật đen tại :https://www.google.com/webmasters/to...amreport?hl=vi .

Cuối cùng làm sao tôi có thể thoát khỏi penalty của Google ?
- Cách đơn giản nhất là đừng vi phạm các điều luật của Google
- Thứ hai là làm theo các khuyến khích của Google.
- Bạn cũng có thể tham khảo bài viết tránh rớt hạng trên những công cụ tìm kiếm được viết bởi giaiphaplienket.com.
- Còn nếu như lỡ đã bị Penalty rồi thì bạn có thể sử dụng sơ đồ sau đây của SEOmoz để thoát ra.

Hi vọng qua bài viết này, những người làm SEO sẽ đặt quy luật tự nhiên lên trên tất cả các yếu tố SEO khác. Trong SEO hãy luôn nhớ câu : “Chậm mà chắc còn hơn nhanh mà dễ bị bắt.”
Chúc các bạn thành công.

nguồn: giaiphaplienket.com

Cải thiện tốc độ Load recent posts

noreply@blogger.com (VnAbout: Blogger) — Sun, 23 Oct 2011 18:44:00 +0000

Adv recent posts đơn giản chỉ là tiện ích recent posts thông thường, nhưng được mở rộng ra hơn 1 chút là có thể hiển được nhiều tiện ích recent posts với 1 lần load so với cách cũ là mỗi lần load chỉ hiển thị 1 tiện ích recent posts. Và 1 điểm nữa là chỉ sử dụng link feeed chính của blog, mà không cần dùng link feed theo từng nhãn.

Xem DEMO

Cập nhật thêm DEMO:

Tiện ích VnE TabNews với Adv Recent Posts : XEM

Ở bài viết trước mình đã giới thiệu sơ qua về thủ thuật này rồi, nên mình sẽ không nói lại. Và 1 lưu ý nữa là : ở thủ thuật này mình sẽ chỉ giới thiệu đoạn mã javascript và cách chỉnh sửa nó, còn việc thực hiện bố cục hiển thị cũng như thiết kế giao diện cho từng tiện ích thì mình sẽ không giới thiệu.

Hình ảnh minh họa

- Trước tiên thực hiện thủ thuật, các bạn phải xác định vị trí hiển thị cho các tiện ích recent posts. Ví dụ như mình có 4 tiện ích recent posts, và mình muốn chúng hiển thị ở phần main, và có bố cục như bên dưới (như trong demo) thì mình sẽ phải tạo 1 widget HTML/javascript (ví dụ HTML1) và nó có nội dung như bên dưới :
+ Hình minh họa:

+ Code mẫu của widget HTML:

<table>
<tbody>
<tr>
<td>
<div id="a11">
<h3>Blogger Tips</h3>
<div id="label1"></div>
</div>
<div id="a22">
<h3>Thong bao</h3>
<div id="label2"></div>
</div>
</td>
</tr>
<tr>
<td>
<div id="a33">
<h3>BlOg FD</h3>
<div id="label3"></div>
</div>
<div id="a44">
<h3>jQuery</h3>
<div id="label4"></div>
</div>
</td>
</tr>
</tbody>
</table>

- Ngoài ra các bạn cũng có thể đặt 1 cái RP ở Sidebar, và 4 cái ở phần main cũng được, nhưng quan trọng là bạn hãy nhớ các id : label1, label2, ... label5. Như vậy thì ở phần sidebar ta sẽ có 1 cái widget HTML/javascript có nội dụng như sau tương tự như sau:

<div id="a55">
<h3>Film</h3>
<div id="label5"></div>
</div>

- Các bạn sẽ thắc mắc tại sao nội dung nó chỉ là các thẻ div rỗng. Thẻ div rỗng nãy sẽ là địa chỉ mà mã javascript sẽ hiển thị bài viết vào, dựa vào các id đã được đặt sẵn. Như vậy quan trọng chỉ là thẻ các thẻ div : <div id="label1"></div> , <div id="label2"></div> , ... <div id="label5"></div> .

- Phần tạo bố cục và xác định vị trí cho các tiện ích hiển thị thì mình sẽ chỉ hướng dẫn được như vậy thôi, phần còn lại (viết code CSS và HTML) thì mình để lại cho các bạn. Bởi mình có hướng dẫn cụ thể 1 bố cục hoặc 1 giao diện nào đó thì cũng khó mà "tông/tông" với blog của mỗi người.

Và bây giờ là code của thủ thuật :
- Đầu tiên các bạn sẽ chèn đoạn mã script này vào trước thẻ </head>

//<![CDATA[
function stripHtmlTags(s,max){
s=s.replace(/<br.*?>/ig, ' ');
return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,max-1).join(' ')
}
function showadvrp(json) {
img = new Array();
var n1 = 0;
var n2 = 0;
var n3 = 0;
var n4 = 0;
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm ;
var posturl;
if("media$thumbnail" in entry){
var thumburl = entry.media$thumbnail.url;
}
else{ var thumburl = "http://lh6.googleusercontent.com/-8fE2X7kBhWs/Tf96WzivFHI/AAAAAAAAB0s/fItUKGW08gY/no-image.png"};
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("thr$total" in entry) {pcm=entry.thr$total.$t;}
else {pcm="none";}
if (pcm==0) {var comment = 'No comment';}
else if (pcm=='none') {var comment = '<span style="color:#f00;">Do not comment here</span>';}
else {var comment = '<font style="color:#0082ff;">'+ pcm +'</font> Comments';}
var plabel = new Array();
var textlabel = new Array();
var cate = entry.category;
if(cate) {
for (var k = 0; k < entry.category.length; k++) {
plabel[k] = ' <a class="label-link" href="http://www.fandung.com/search/label/'+entry.category[k].term+'">'+entry.category[k].term+'</a> ';
textlabel [k]=entry.category[k].term;
}
var condlabel=textlabel.join(" ");
}
else {plabel = "No label";}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else postcontent = "";
s = postcontent; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {img[i] = d;} else {img[i]="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";}
var advrc = '<li class="adv-rc-list"><img src="'+thumburl+'" style="width:40px; float:left;padding:1px; border:1px solid #ccc;margin-right:5px;" /><a href="'+posturl+'">'+posttitle+'</a><br/><i style="color:#888;">('+comment+')</i></li>';
var advrc_0 = '<li class="adv-rc-list-0"><img src="'+img[i]+'" style="width:100px;height:90px; float:left;padding:1px; border:1px solid #ccc;margin-right:5px;" /><a href="'+posturl+'"><b>'+posttitle+'</b></a><br/><i style="color:#888;">('+comment+')</i><br/>'+stripHtmlTags(postcontent,32)+' ...<p style="border-bottom:1px dashed #f80;margin:7px 0;"></p></li>';
var advrc_01 = '<li class="adv-rc-list-01"><a href="'+posturl+'"><b>'+posttitle+'</b></a> - <i style="color:#888;">('+comment+')</i><br/><img src="'+img[i]+'" style="width:100px;height:90px; float:left;padding:1px; border:1px solid #ccc;margin-right:5px;" />'+stripHtmlTags(postcontent,32)+' ...</li><p style="border-bottom:1px dashed #f80;margin:7px 0;"></p>';
var advrc_1 = '<li class="adv-rc-list-1"><a href="'+posturl+'"><b>'+posttitle+'</b></a><br/><i style="color:#888;">('+comment+')</i><br/><img src="'+img[i]+'" style="width:270px;height:100px;padding:1px; border:1px solid #ccc;margin-right:5px;" /><br/>'+stripHtmlTags(postcontent,32)+' ...<p style="border-bottom:1px dashed #f80;margin:8px 0;"></p></li>';
var advrc_2 = '<li class="adv-rc-list-2"><img src="http://lh5.googleusercontent.com/-cDsHnRJxQCE/Tos_-f6ok6I/AAAAAAAAB5c/XH2RE0yjqVw/large_list_icon_black.png" /> <a href="'+posturl+'"><b>'+posttitle+'</b></a> - <i style="color:#888;">('+comment+')</i></li>';
var advrc_3 = '<li class="adv-rc-list-3"><span class="listcm">'+pcm+'</span> <a href="'+posturl+'"><b>'+posttitle+'</b></a></li>';
if ((condlabel.match("Thu Thuat Blog"))&&(n1<adv_num1)) {
n1=n1+1;
if (n1==1) {document.getElementById('label1').innerHTML += advrc_0;}
else {document.getElementById('label1').innerHTML += advrc;}
}
else if ((condlabel.match("Announcement"))&&(n2<adv_num2)) {
n2=n2+1;
document.getElementById('label2').innerHTML += advrc;
}
else if ((condlabel.match("BlOgFD"))&&(n3<adv_num3)) {
n3=n3+1;
if (n3==1) {document.getElementById('label3').innerHTML += advrc_1;}
else {document.getElementById('label3').innerHTML += advrc_2;}
}
else if ((condlabel.match("jQuery"))&&(n4<adv_num4)) {
n4=n4+1;
if (n4==1) {document.getElementById('label4').innerHTML += advrc_01;}
else {document.getElementById('label4').innerHTML += advrc_3;}
}
var n1234 = n1 + n2 + n3 + n4;
var ncond = adv_num1 + adv_num2 + adv_num3 + adv_num4;
if (n1234==ncond) {break;} else if (i == json.feed.entry.length) {break;}
}
}
//]]>

- Ở đoạn script trên có các biến : advrc, advrc_0, .., advrc_3. Đây là các biến để tạo giao diện riêng cho các tiện ích recent posts. Và các biến adv_num1, ...adv_num4 là số bài viết hiển thị ở mỗi tiện ích recent posts (tương ứng với các thẻ div có id lần lượt là : label1, ... label4).
- Để hiểu rõ hơn mình sẽ mô tả cách hoạt động chính của đoạn javascript trên. Đoạn code chính của thủ thuật chính là đoạn code bên dưới :

if ((condlabel.match("Thu Thuat Blog"))&&(n1<adv_num1)) {
n1=n1+1;
if (n1==1) {document.getElementById('label1').innerHTML += advrc_0;}
else {document.getElementById('label1').innerHTML += advrc;}
}
else if ((condlabel.match("Announcement"))&&(n2<adv_num2)) {
n2=n2+1;
document.getElementById('label2').innerHTML += advrc;
}
else if ((condlabel.match("BlOgFD"))&&(n3<adv_num3)) {
n3=n3+1;
if (n3==1) {document.getElementById('label3').innerHTML += advrc_1;}
else {document.getElementById('label3').innerHTML += advrc_2;}
}
else if ((condlabel.match("jQuery"))&&(n4<adv_num4)) {
n4=n4+1;
if (n4==1) {document.getElementById('label4').innerHTML += advrc_01;}
else {document.getElementById('label4').innerHTML += advrc_3;}
}
var n1234 = n1 + n2 + n3 + n4;
var ncond = adv_num1 + adv_num2 + adv_num3 + adv_num4;
if (n1234==ncond) {break;} else if (i == json.feed.entry.length) {break;}
}

- Bắt đầu vòng lặp, đoạn secript sẽ kiểm tra bài viết có nhãn Thu Thuat Blog hay ko (đây là giá trị bạn cần thay đổi), nếu bài viết có nhãn này, thì bài viết đó sẽ được hiện thị trong thẻ div có id="label1". Và nếu là bài viết đầu tiên thì sẽ với style biến advrc_0, ngoài ra thì sẽ hiển thị kiểu advrc. Cứ tiếp tục như thế, sang bài viết thứ 2 nếu bài viết ko có nhãn Thu Thuat Blog thì lập tức nó sẽ kiểm tra sang các nhãn khác như Announcement, BlOgFD, jQuery.
- Ở các kiểu hiển thị advrc, advrc_0, .., advrc_3, mình dùng các thẻ <li> để tạo giao diện cho các tiện ích. Các bạn có thể thay đổi giá trị của các biến này để tạo ra các giao diện khác nhau cho mỗi tiện ích.
- Ví dụ như :

advrc ='<li> ... Mã HTML để tạo giao diện cho mỗi bài viết ở mỗi tiện ích ... </li>

- Ở đoạn javascript trên chỉ có 1 label2 (Announcement) là các bài viết trong tiện ích có chung 1 kiểu hiển thị, ngoài ra 3 label còn lại thì được hiển thị theo kiểu nổi bật bài đầu tiên.
- Ở code mẫu trên là chỉ sử dụng cho việc hiển thị 4 tiện ích, nếu muốn hiển thị thêm nhiều tiện ích nữa thì các bạn thêm mã tương tự như đoạn code highlight như bên dưới :

if ((condlabel.match("Thu Thuat Blog"))&&(n1<adv_num1)) {
n1=n1+1;
if (n1==1) {document.getElementById('label1').innerHTML += advrc_0;}
else {document.getElementById('label1').innerHTML += advrc;}
}
else if ((condlabel.match("Announcement"))&&(n2<adv_num2)) {
n2=n2+1;
document.getElementById('label2').innerHTML += advrc;
}
else if ((condlabel.match("BlOgFD"))&&(n3<adv_num3)) {
n3=n3+1;
if (n3==1) {document.getElementById('label3').innerHTML += advrc_1;}
else {document.getElementById('label3').innerHTML += advrc_2;}
}
else if ((condlabel.match("jQuery"))&&(n4<adv_num4)) {
n4=n4+1;
if (n4==1) {document.getElementById('label4').innerHTML += advrc_01;}
else {document.getElementById('label4').innerHTML += advrc_3;}
}
else if ((condlabel.match("Nhãn thứ 5"))&&(n5<adv_num5)) {
n5=n5+1;
if (n5==1) {document.getElementById('label5').innerHTML += advrc_01;}
else {document.getElementById('label5').innerHTML += advrc_3;}
}
var n1234 = n1 + n2 + n3 + n4 + n5;
var ncond = adv_num1 + adv_num2 + adv_num3 + adv_num4 + adv_num5;
if (n1234==ncond) {break;} else if (i == json.feed.entry.length) {break;}
}

- Và tất nhiên phải điều chỉnh thêm ở phần đầu của code javascript như bên dưới:

function showadvrp(json) {
img = new Array();
var n1 = 0;
var n2 = 0;
var n3 = 0;
var n4 = 0;
var n5 = 0;

- Như vậy cơ bản đã hoàn thành, bây giờ là phần cuối cùng. Ở phần cuối cùng này sẽ là phần truy xuất link feed. Để thủ thuật chạy được, phần cuối cùng này phải đặt sau cùng. Tức là phải đặt sau các thẻ div có id : label1, label2,... label5. Tốt nhất là đặt nó ở dưới cùng trong phần nội dung của tiện íchHTML/javascript chứa thẻ div cuối cùng, ví dụ như thẻ div có id="label5" chẳng hạn. Và đây là đoan code sau cùng :

<script type="text/javascript">
numposts = 100;
adv_num1 = 4;
adv_num2 = 5;
adv_num3 = 4;
adv_num4 = 6;
adv_num5 = 6; // chèn thêm nếu có 5 tiện ích
</script>
<script src="http://Yourblogname.blogspot.com/feeds/posts/default?&max-results=100&orderby=published&alt=json-in-script&callback=showadvrp"></script>

- Giá trị max-results phải lớn hơn hoặc bằng giá trị numposts. Tùy theo số bài hiển thị mà bạn thay đổi 2 giá trị này cho hợp lý và cho bài viết được hiển thị đủ như mình muốn.
- Như ở bài giới thiệu trước, mình có nói tới việc nếu tỉ lệ xuất bản bài viết ở mỗi nhãn đều nhau thì tiện ích sẽ load nhanh hơn. Lấy ví dụ như, ở demo mình thực hiện trên blog của mình, do blog mình xuất bản chủ yếu là bài viết về thủ thuật blog, nên vì thế mà trong tiện ích yêu cầu hiển thị 19 bài viết, nhưng lặp đủ 100 lần mà vẫn chỉ được 18 bài, tức là vẫn còn thiếu 1 bài. Như hình minh họa bên dưới :

- Tuy nhiên nếu các bạn xuất bản đều đặn ở mỗi nhãn thì cho dù bạn set vòng lặp là 100 hay 200 thì khi đã lấy đủ bài viết thì vòng lặp sẽ dừng lại. Và đây là đoạn mã đó :

var n1234 = n1 + n2 + n3 + n4 + n5;
var ncond = adv_num1 + adv_num2 + adv_num3 + adv_num4 + adv_num5;
if (n1234==ncond) {break;} else if (i == json.feed.entry.length) {break;}

biến n1234 là số bài viết mà lấy được qua các lần lặp (thay đổi), còn biến ncond(cố dịnh) là tổng số bài mà bạn chọn hiển thị ở tất cả các tiện ích. Như đã set ở trên. Nếu đã lặp đủ, tức là giá trị của 2 biến n1234, ncond bằng nhau thì vòng lặp dừng lại.

Nguồn: Blog Fandung

Làm cân bằng chiều cao giữa main và sidebar

noreply@blogger.com (VnAbout: Blogger) — Sat, 22 Oct 2011 22:54:00 +0000

Khi thiết kế Blogger, đôi khi chúng ta gặp trường hợp phần main và phần sidebar của trang blog ở một số template không có chiều cao bằng nhau, khiến cho blog thiếu sự cân đối.

Việc điều chỉnh chiều cao của phần main và phần sidebar có thể được thực hiện bằng việc sử dụng javascript khá đơn giản. Bạn chỉ việc đặt đoạn code bên dưới vào trước thẻ </head> là có thể giúp cho phần main và phần sidebar có cùng chiều cao rồi.

<script type='text/javascript'>

</script>

Ở đây sử dụng code đã được mã hóa để tránh trường hợp Blogger gặp lỗi đối với các Template dạng Layout.

Ý nghĩa của code trên như sau: mh biểu thị chiều cao của phần main-wrapper (main height). Biến sh thể hiện giá trị chiều cao của phần sidebar-wrapper.

Nếu sh cao hơn mh thì chỉ định chiều cao của phần cao hơn (cao hơn phần main một giá trị pixel nào đó) bằng với chiều cao của phần main cộng với giá trị pixel ở trên. Như vậy script này giúp kiểm tra chiều cao của hai phần và gán cho chiều cao của hai phần đều bằng nhau khi có một phần cao hơn.

theo Thuthuat blogger

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

noreply@blogger.com (VnAbout: Blogger) — Sat, 22 Oct 2011 21:05:00 +0000

Thông thường trên các vị trí hiển thị quảng cáo của blog như header, sidebar bạn chỉ có thể đặt 1 banner quảng cáo. Tuy nhiên với sức mạnh của ngôn ngữ Script bạn có thể tạo ra hiệu ứng chạy luân phiên các banner.

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

Tùy biến pro với sidebar cho Blogger

noreply@blogger.com (VnAbout: Blogger) — Fri, 21 Oct 2011 22:50:00 +0000

Phần sidebar trên Template của Blogger cũng có nhiều biến thể khác nhau. Có Template chỉ 1 cột, có Template 2 cột, thậm chí có thể thêm thành 3, 4 cột…

Một số trường hợp phức tạp hơn, đặc biệt đối với dạng 1 cột, thì có thể chia thành 2 phần: phần trên gồm 1 cột, phần dưới chia thành 2 cột hoặc ngược lại, phần trên gồm 2 cột, phần dưới gồm 1 cột.

Lấy ví dụ, nếu sidebar trên Template của tôi có 1 cột thì cấu trúc HTML trong Template sẽ có dạng:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>

Nếu tôi muốn chia thành 2 phần mà phần trên gồm 1 cột và phần dưới chia thành 2 cột thì tôi phải thiết lập cấu trúc HTML trong Template như sau:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
<div id='2columns'>
<div class='col-left'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>
<div class='col-right'>
<b:section class='sidebar' id='sidebar3' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div>
</div>
</div>

Sau đó cần thêm thuộc tính CSS cho phần 2 cột, thêm đoạn code sau đây vào trước dòng ]]></b:skin>.

.col-left {
float:left;
width:47%;
}
.col-right {
float:right;
width:48%;
}

Như vậy toàn bộ đoạn code CSS cho kiểu sidebar này có dạng như sau:

#sidebar-wrapper {
float:right;
margin-right:40px;
margin-top:-9px;
overflow:hidden;
width:296px;
word-wrap:break-word;
}
h2 {
border-bottom:1px solid #CCCCCC;
font:$headerfont;
color:$sidebarcolor;
letter-spacing:0;
margin:0 -10px;
padding:0 10px 5px;
text-transform:none;
}
.sidebar {
color:$sidebartextcolor;
font-size:90%;
line-height:1.5em;
}
.sidebar ul {
list-style:none outside none;
margin:0;
padding:0;
}
.sidebar li {
line-height:1.5em;
margin:0;
padding:0 0 0.25em 15px;
text-indent:-15px;
}
.sidebar .widget {
border-bottom:1px dotted #CCCCCC;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.col-left {
float:left;
width:47%;
}
.col-right {
float:right;
width:48%;
}

Giải đáp thắc mắc

trong blog có 2 cột sidebar, Làm cách nào tạo thêm một cột sidebar ở phía dưới 2 sidebar đó nhưng có chiều rộng gấp 2 (bằng chiều rộng 2 cột trên)

Khi đó chỉ phải đặt một id có tên rightcol để chứa toàn bộ các cột sidebar, sau đó thêm vào một id có tên sidebar3, đặt code HTML như sau:

<div id='rightcol'>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Archives' type='BlogArchive'/>
</b:section>
</div>
<div id='sidebar-wrapperL'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='Label2' locked='false' title='Categories' type='Label'/>
</b:section>
</div>
<b:section class='sidebar' id='sidebar3' preferred='yes'>
<b:widget id='HTML100' locked='false' title='HTML' type='HTML'/>
</b:section>
</div>

Những phần được đánh dấu màu đỏ là phần thêm vào, những phần còn lại có thể không còn giống như trên Template của bạn bởi vì bạn đã thêm đủ thứ tiện ích vào đó rồi (ở đây chỉ giới thiệu nguyên gốc của Template lúc chưa chỉnh sửa).

Ở phần CSS thêm vào như sau (những phần được đánh dấu màu đỏ là phần thêm vào).

#rightcol {
float:right;
margin-top:182px;
overflow:hidden;
width:350px;
word-wrap:break-word;
}
#sidebar-wrapper {
float:right;
margin-right:20px;
overflow:hidden;
width:150px;
word-wrap:break-word;
}
h2 {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://3.bp.blogspot.com/_qJFbsMHBJNg/SnFdY2vIBLI/AAAAAAAAAEE/81UBGmzjv6o/s1600/bg_sb_head1.gif) no-repeat scroll center top;
color:#000000;
font-family:'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;
font-size:78%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
height:32px;
letter-spacing:0;
line-height:1.4em;
margin:1.5em 0 0.75em;
padding-left:20px;
padding-top:7px;
text-transform:uppercase;
}
.sidebar {
color:#666666;
font-family:georgia;
line-height:1.5em;
}
.sidebar ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
.sidebar li {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://4.bp.blogspot.com/_qJFbsMHBJNg/SnFdjHawKRI/AAAAAAAAAEM/kBWYRh9LooI/s1600/bg_sb_arrow1.gif) no-repeat scroll 0 5px;
line-height:1.5em;
margin:0;
padding:0 0 0.25em 15px;
}
.sidebar .widget, .main .widget {
margin:0 0 1.5em;
padding:0 0 1.5em;
}
#sidebar h4 a.rsswidget {
margin-left:0;
overflow:hidden;
text-decoration:none;
}
#sidebar-wrapperL {
float:left;
overflow:hidden;
padding-left:25px;
width:150px;
word-wrap:break-word;
}
#sidebar3 {
float:right;
margin-top:0;
overflow:hidden;
padding-right:20px;
width:300px;
word-wrap:break-word;
}
#sidebar3 h2 {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(URL_hinh anh) no-repeat scroll center top;
color:#000000;}
.widget-content {
padding-left:10px;
}

Bạn cần phải tạo một background cho tiêu đề của sidebar được thêm vào, sau đó upload lên host (hoặc lên Blogger) để lấy đường link rồi thay vào dòng URL_hinh anh.

(Huynh Nhat Ha's Blog)

Tối ưu hoá Công cụ Tìm kiếm (SEO)

noreply@blogger.com (VnAbout: Blogger) — Fri, 21 Oct 2011 20:54:00 +0000

SEO là viết tắt của "tối ưu hoá công cụ tìm kiếm" hoặc "trình tối ưu hoá công cụ tìm kiếm." Quyết định thuê SEO là một quyết định quan trọng có thể cải thiện trang web của bạn và tiết kiệm thời gian, nhưng bạn cũng có thể gặp rủi ro làm thiệt hại trang web và uy tín của bạn.

Đảm bảo nghiên cứu các ưu điểm tiềm năng cũng như các thiệt hại mà một SEO tắc trách có thể mang lại cho trang web của bạn. Nhiều SEO và các hãng và cố vấn viên khác cung cấp các dịch vụ hữu ích cho các chủ sở hữu trang web, bao gồm:

Xem lại nội dung hoặc cấu trúc trang web của bạn
Trợ giúp kỹ thuật về phát triển trang web: ví dụ: lưu trữ, chuyển hướng, trang lỗi, sử dụng JavaScript
Phát triển nội dung
Quản lý các chiến dịch phát triển doanh nghiệp trực tuyến
Tìm kiếm từ khoá
Đào tạo SEO
Tư vấn chuyên môn trong các thị trường và vùng địa lý cụ thể.

Lưu ý rằng trang kết quả tìm kiếm Google thường bao gồm quảng cáo mất phí và các kết quả tìm kiếm theo hệ thống miễn phí. Lưu ý rằng trang kết quả tìm kiếm Google cũng bao gồm kết quả tìm kiếm theo hệ thống và thường là quảng cáo phải mất phí (hiện trên tiêu đề "Liên kết được Tài trợ"). Quảng cáo với Google sẽ không ảnh hưởng gì đến sự có mặt trang web của bạn trong kết quả tìm kiếm của chúng tôi. Google không bao giờ nhận tiền để đưa vào hoặc xếp hạng trang web trong kết quả tìm kiếm của chúng tôi và bạn cũng không mất gì để trang web xuất hiện trong kết quả tìm kiếm theo hệ thống của chúng tôi. Các tài nguyên miễn phí như Công cụ Quản trị Trang web, blog chính thức của trang Trung tâm Quản trị Trang web và diễn đàn thảo luận của chúng tôi có thể cung cấp cho bạn nhiều thông tin về cách tối ưu hoá trang web của bạn cho tìm kiếm theo hệ thống. Nhiều nguồn miễn phí này, cũng như thông tin về tìm kiếm mất phí, có thể tìm trên Trung tâm Quản trị Trang web của Google.

Trước khi bắt đầu tìm kiếm của bạn đối với một SEO, bạn nên là một khách hàng đã được đào tạo và làm quen với cách thức hoạt động của công cụ tìm kiếm. Chúng tôi khuyên bạn bắt đầu từ đây:

Nếu đang dự định thuê một SEO, thì bạn nên làm càng sớm càng tốt. Thời điểm thích hợp nhất để thuê SEO là khi bạn đang cân nhắc việc thiết kế lại trang web, hoặc dự định khởi chạy một trang web mới. Bằng cách đó, bạn và SEO của bạn có thể đảm bảo rằng trang web của bạn được thiết kế thân thiện với công cụ tìm kiếm ngay từ đầu. Tuy nhiên, SEO tốt cũng có thể giúp cải tiến trang web hiện có.

Một số câu hỏi hữu ích để hỏi một SEO bao gồm:

Bạn có thể cho tôi ví dụ về công việc trước đây của bạn và chia sẻ một số câu chuyện thành công không?
Bạn có tuân theo Nguyên tắc Quản trị Trang web của Google không?
Bạn có cung cấp dịch vụ tiếp thị trực tuyến hoặc lời khuyên nào để bổ sung cho công việc tìm kiếm theo hệ thống của bạn không?
Bạn muốn xem loại kết quả nào và trong khung thời gian nào? Bạn đánh giá như thế nào về thành công của bạn?
Bạn có kinh nghiệm gì về ngành của tôi?
Bạn có kinh nghiệm gì trong quốc gia/thành phố của tôi?
Bạn có kinh nghiệm gì trong việc phát triển trang web quốc tế?
Kỹ thuật SEO quan trọng nhất của bạn là gì?
Bạn đã làm trong ngành bao lâu?
Tôi có thể liên hệ với bạn bằng cách nào? Bạn sẽ chia sẻ với tôi tất cả những thay đổi mà bạn đã thực hiện với trang web của tôi và cung cấp thông tin chi tiết về các khuyến nghị và giải thích lý do cho những khuyến nghị đó?

Trong khi SEO có thể cung cấp cho khách hàng những dịch vụ có giá trị, một số SEO vô đạo đức đã làm xấu bộ mặt của ngành qua nỗ lực tiếp thị có tính công kích và cố gắng điều khiển kết quả công cụ tìm kiếm theo cách không công bằng. Những hành vi vi phạm nguyên tắc có thể dẫn đến việc điều chỉnh tiêu cực sự có mặt trang web của bạn trong Google, hoặc thậm chí cả việc loại bỏ trang của bạn khỏi chỉ mục của chúng tôi. Dưới đây là một số điều cần lưu ý:

Đề phòng các công ty SEO và các chuyên gia cố vấn web hoặc các hãng gửi email cho bạn bất ngờ.
Thật ngạc nhiên, chúng tôi cũng nhận được các email spam:

"Kính gửi google.com,
Tôi đã ghé thăm trang web của bạn và thấy rằng bạn không được liệt kê trong hầu hết các công cụ và thư mục tìm kiếm chính ..."

Đồng thời, bạn cũng nên nghi ngờ đối với email không được yêu cầu về công cụ tìm kiếm như khi bạn nghi ngờ đối với thuốc giảm cân "tiêu mỡ ban đêm" hoặc yêu cầu giúp chuyển quỹ từ những kẻ độc tài đã bị phế truất.
Không ai có thể đảm bảo xếp hạng a #1 trên Google.
Cảnh giác các SEO yêu cầu đảm bảo xếp hạng, viện cớ "quan hệ đặc biệt" với Google, hoặc quảng cáo "ưu tiên gửi" cho Google. Không có ưu tiên gửi nào dành cho Google. Thực tế, cách duy nhất để gửi một trang web đến Google trực tiếp là qua trang Thêm URL của chúng tôi hoặc bằng cách gửi Sơ đồ trang web và bạn có thể tự làm mà không mất chi phí gì.
Cảnh giác nếu một công ty bí mật hoặc không giải thích rõ ràng những việc họ dự định làm.
Đề nghị giải thích nếu có điều gì không rõ ràng. Nếu SEO tạo nội dung lừa đảo hoặc gian lận nhân danh bạn, như các trang ngõ hoặc miền "không dùng nữa", trang web của bạn có thể bị loại bỏ hoàn toàn từ chỉ mục của Google. Cuối cùng, bạn phải có trách nhiệm đối với những hành động của bất kỳ công ty nào mà bạn thuê, để có thể đảm bảo rằng bạn biết chính xác họ dự định làm như thế nào để "giúp" bạn.
Bạn không nhất thiết phải liên kết đến SEO.
Tránh các SEO hay nói về sức mạnh của liên kết "miễn phí cho tất cả", kế hoạch phổ biến liên kết, hoặc gửi trang web của bạn đến hàng ngàn công cụ tìm kiếm. Đây là những bài học vô dụng điển hình không ảnh hưởng đến xếp hạng của bạn trong các kết quả của công cụ tìm kiếm chính -- ít nhất, không theo cách mà bạn muốn coi là tích cực.
Lựa chọn sáng suốt.
Trong khi bạn xem liệu có làm việc với SEO không, có thể bạn muốn thực hiện một số nghiên cứu về ngành. Tất nhiên, Google là cách để thực hiện điều đó. Bạn cũng có thể tìm một số câu chuyện cảnh giác xuất hiện trên báo, bao gồm cả bài viết này về một SEO công kích cụ thể:http://seattletimes.nwsource.com/html/businesstechnology/2002002970_nwbizbriefs12.html. Khi Google không nhận xét về các công ty cụ thể, chúng tôi gặp phải các công ty tự gọi là các SEO tuân theo những quy định nằm ngoài các hành vi kinh doanh được chấp nhận. Cẩn thận.
Chắc chắn hiểu tiền được sử dụng vào việc gì.
Trong khi Google không bao giờ bán xếp hạng tốt hơn trong kết quả tìm kiếm của chúng tôi, một số công cụ tìm kiếm khác kết hợp các kết quả mất phí cho mỗi lần nhấp hoặc mất phí cho mỗi lần thêm với kết quả tìm kiếm web thường xuyên của họ. Một số SEO sẽ hứa xếp hạng cho bạn cao trong các công cụ tìm kiếm, nhưng đặt bạn vào phần quảng cáo chứ không phải là kết quả tìm kiếm. Một số SEO thậm chí sẽ thay đổi giá chào mua trong thời gian thực để tạo ảo tưởng rằng họ "điều khiển" các công cụ tìm kiếm khác và có thể tự đặt họ vào vị trí lựa chọn. Mưu đồ này không thể thực hiện được với Google vì quảng cáo của chúng tôi được gắn nhãn rõ ràng và tách biệt với quả tìm kiếm của chúng tôi, nhưng phải chắc chắn hỏi bất kỳ SEO nào mà bạn cân nhắc về việc phí nào sẽ được dùng cho nội dung vĩnh viễn và phí nào sử dụng cho quảng cáo tạm thời.
Những lạm dụng nào là phổ biến nhất mà chủ sở hữu có khả năng sẽ gặp phải?
Một mưu đồ phổ biến là việc tạo các miền "bóng" chuyển người dùng tới một trang web bằng cách chuyển hướng gian lận. Những miền bóng này sẽ do SEO sở hữu, SEO được cho là làm việc nhân danh khách hàng. Tuy nhiên, nếu mối quan hệ này không tốt, thì SEO có thể chỉ miền tới một trang web khác, hoặc thậm chí đến một miền của đối thủ cạnh tranh. Nếu điều đó xảy ra, khách hàng đã trả tiền để phát triển một trang web cạnh tranh do SEO sở hữu hoàn toàn.

Một biện pháp cụ thể khác là đặt trang "ngõ" với đầy các từ khoá ở đâu đó trên trang web của khách hàng. SEO hứa điều này sẽ làm cho trang web phù hợp hơn đối với nhiều truy vấn hơn. Điều này vốn đã sai vì các trang cá nhân ít khi phù hợp với nhiều từ khoá. Tuy nhiên, còn xảo quyệt hơn đó là những trang ngõ này thường chứa liên kết ẩn đối với khách hàng khác của SEO. Những trang ngõ này làm mất đi tính phổ biến của liên kết của một trang web và định tuyến đến SEO và các khách hàng của SEO, những khách hàng đưa vào những trang web có nội dung bất hợp pháp hoặc vô đạo đức.
Cần cảnh giác những điều gì khác?
Có một số dấu hiệu cảnh báo mà bạn có thể gặp phải với một SEO gian giảo. Đây chưa hẳn là một danh sách tổng hợp, do vậy nếu bạn có bất kỳ nghi ngờ gì, bạn nên tin vào bản năng của bạn. Tất nhiên là bạn hãy bỏ đi nếu nếu SEO:
- sở hữu miền bóng
- đưa liên kết đến khách hàng khác của họ trên các trang ngõ.
- chào bán từ khoá trên thanh địa chỉ
- không phân biệt giữa kết quả tìm kiếm thực sự và các quảng cáo xuất hiện trên trang kết quả tìm kiếm.
- đảm bảo xếp hạng, nhưng chỉ đối với những cụm từ khoá dài, tối nghĩa mà bạn có thể có được dù thế nào đi nữa
- hoạt động bằng nhiều bí danh hoặc thông tin WHOIS giả mạo
- nhận lưu lượng truy cập từ công cụ tìm kiếm "giả mạo", phần mềm gián điệp, hoặc scumware
- có các miền bị loại bỏ từ chỉ mục của Google hoặc không được liệt kê trong Google
- yêu cầu thông tin tài khoản FTP của bạn hoặc truy cập gốc đến máy chủ của bạn
Nếu bạn cảm thấy bị lừa bởi SEO theo một cách nào đó, có thể bạn muốn báo cáo điều đó.

Tại Hoa Kỳ, Uỷ ban Thương Mại Liên bang (FTC) giải quyết các khiếu nại về hành động kinh doanh gian dối hoặc không công bằng. Để nộp khiếu nại, ghé thăm: http://www.ftc.gov/ và nhấp vào "Nộp Khiếu nại Trực tuyến," gọi 1-877-FTC-HELP, hoặc gửi thư đến:

Federal Trade Commission
CRC-240
Washington, D.C. 20580

Nếu khiếu nại của bạn liên quan đến công ty thuộc một quốc gia không phải Hoa Kỳ, hãy gửi khiếu nại tại http://www.econsumer.gov/.

được cập nhật 07/23/2011 bởi Google

SEO với Google Webmaster Tools: Phần 3. Your site on the web

noreply@blogger.com (VnAbout: Blogger) — Fri, 21 Oct 2011 08:03:00 +0000

Hạng mục You site on site on the Web cung cấp cho bạn những thông tin và biểu đồ phát triển website của bạn trong thời gian qua. Nếu bạn đang sử dụng tài khoản Google Analytics thì có lẽ những biểu đồ được cung cấp bởi Google Webmaster Tools có lẽ là sẽ không đủ và không làm hài lòng bạn. Tuy nhiên, ở mức độ nào đó nó cũng có một giá trị nhất định.

Top search Queries.

Phần thông tin này cung cấp cho bạn những thông tin về những từ khóa được người dùng sử dụng để tìm kiếm website bạn. Trước khi đi sâu tìm hiểu về Top Search Queries mình muốn nhắc các bạn rằng kết quả trả về của phần này là không chính xác hoàn toàn. Mình cũng không rõ tại sao lại có sự khác biệt này, tuy nhiên kết quả trả về của Google Analytics không giống với Google Webmaster Tools, do đó sẽ có một sự khác biệt nào đó.

Những từ khóa được liệt kê ở đây, có nghĩa là những từ khóa mà website của bạn đã được tối ưu hóa để hiển thị nó ở mức tốt nhất chứ không có nghĩa là những từ khóa khác không phải là từ khóa tiềm năng của bạn. Do đó, bạn có thể sử dụng công cụ này để tìm hiểu xem việc từ khóa bạn chọn đã được tối ưu hóa tốt hay chưa.

Ngoài ra, bạn cũng nên tìm hiểu thêm ở Google Analytics.

- Cột Impression cho bạn biết số lần người dùng tìm kiếm có thể tìm thấy kết quả từ website của bạn trên công cụ tìm kiếm.

- Cột Clicks cho bạn biết số lần người dùng nhấp vào trang web của bạn từ công cụ tìm kiếm.

- Cột CTR là tỉ lệ lần hiển thị so với số lượng Click.

Dựa vào các số liệu này, bạn có thể so sánh và đo lường được kết quả tìm kiếm, triển khai các chiến dịch tối ưu hóa từ khóa, các chiến dịch SEO… hiệu quả hơn trên công cụ tìm kiếm.

Trong mục này, bạn có thể có nhiều lựa chọn để lọc dữ liệu của mình như theo các thiết bị truy cập (điện thoại, PC, Hình Ảnh, Smartphone, search từ trang Image…). Bây giờ, bạn có thể theo dõi và xem xét các dữ liệu. Mình nghĩ rằng những kết quả được cung cấp có thể là rất có ích cho chiến lược SEO của bạn.

Những kết quả được Google Webmaster Tools cung cấp theo keyword có thể giúp bạn tìm thấy vị trí hiện tại của từ khóa trên công cụ tìm kiếm cũng như trang web mục tiêu.

Links to your site

Nếu sử dụng một query tìm kiếm :

link:vnwebmaster.com

Kết quả trả về cho bạn không thể hiển thị chính xác số lượng linkbacks về website bạn được. Nói cách khác, bạn đừng bao giờ mong chờ một kết quả chính xác các linkbacks về website của mình thông qua công cụ tìm kiếm. Tuy nhiên, với Google Webmaster Tools, bạn sẽ có được một kết quả chính xác hơn.

Không chỉ giúp bạn xác định số backlinks hiện có của website bạn, công cụ này còn cho bạn biết được số lượng liên kết cụ thể của từng trang. Tiếc một chút vì Google không cho bạn biết những backlinks này có liên hệ với PageRank của website hay không nhưng dù sao cũng thật tuyệt vời vì bạn xác định được chính xác backlinks của mình.

Để tìm kiếm thêm thông tin liên quan đến backlink cụ thể nào đó, bạn hãy nhấp vào phần thông tin chi tiết của từng backlinks. Danh sách cụ thể các trang có chứa liên kết đến trang bạn có lẽ sẽ là thông tin hữu ích cho bạn.

Keywords:

Trang này liệt kê tất cả các từ khóa được bạn sử dụng thường xuyên trên toàn bộ trang web, những từ khóa này được trình bày cùng với tỉ lệ nó xuất hiện trên website bao gồm cả những từ ngữ thông dụng như "của", "và", "nhưng"... Thông tin này cho biết những từ nào thường xuyên xuất hiện trên website của bạn.

Nếu từ khóa mục tiêu của bạn không có ở những vị trí xuất hiện nhiều nhất (nghĩa là những vị trí đầu tiên trong bản danh sách) bạn nên dành thời gian để tối ưu hóa những từ khóa này đồng thời bổ sung nội dung hơn nữa và chú ý đưa những keyword này xuất hiện thường xuyên hơn. Việc chúng xuất hiện ở bảng danh sách này có ý nghĩa rất lớn trong kế hoạch SEO

Nếu nhấp vào một keyword nào đó, bạn có thể xem được tổng số lần xuất hiện của keyword đó trên website của bạn và "Top URLs" có chứa keyword đó. Tuy nhiên, bản thân mình cũng chẳng hiểu Google sử dụng những tiêu chí nào để đánh giá "Top URLs".

Internal links

Tính năng này tương tự tính năng Links to your site. Tuy nhiên, thay vì hiển thị các liên kết từ các website khác đến website bạn nó hiển thị các liên kết trong trang web của bạn. Đây là danh sách các liên kết chéo giữa các trang trong website.

Bên trái, cũng giống như Links to your site, bạn có danh sách các URL. Còn bên phải là số lần các liên kết xuất hiện trong nội bộ trang. Bạn được cung cấp thêm một bộ lọc giúp bạn tìm kiếm các URL theo tên miền phụ hoặc tên miền chính. Nhấp vào số lượng liên kết, bạn sẽ nhận được danh sách các URL có chứa liên kết đó.
Đây là một nguồn dữ liệu quan trọng giúp bạn phân tích và đánh giá các liên kết chéo trong trang và cấu trúc nội bộ của trang. Bởi tính chất quan trọng của trang, những trang quan trọng bạn nên giành cho nó một số lượng liên kết nhiều hơn những trang khác và giảm dần đối với những trang ít quan trọng.
Nếu bạn không tìm thấy các liên kết trong các trang bạn cho là quan trọng, bạn nên giành thời gian để bổ sung các liên kết nội bộ đến trang này.

Subscriber stats

Phần này giúp bạn xem nhanh các RSS của trang mình và số lượng người dùng đăng ký sử dụng RSS của bạn qua Google. Bạn có thêm một tùy chọn submit trang này như một Sitemap nếu muốn.

Mời các bạn đọc thêm các phần tiếp theo về google webmaster tools

SEO với Google Webmaster Tools: phần 1 - Cài đặt Google Webmaster Tools

SEO với Google Webmaster Tools: phần 2 - Site Configuration

SEO với Google Webmaster Tools: Phần 3 - Your site on the web

nguồn: Phan mem SEO

Tạo Crosscol 1 hoặc 2 cột dưới Header

noreply@blogger.com (VnAbout: Blogger) — Thu, 20 Oct 2011 09:32:00 +0000

Ở một số Template của Blogger có thể thấy dưới phần Header là một thành phần bố trí một tiện ích Feature có hiệu ứng slide để tạo sự nổi bật cho blog. Thành phần đó là crosscol. Thông thường phần crosscol chỉ có một cột. Và phần này có thể được điều chỉnh để chia thành hai cột và có thể thêm một cột ở dưới hai cột này.

1. Thêm Crosscol phía dưới phần Header (trên phần Blog Posts)

Đăng nhập Blogger, vào Design >> Edit HTML.

a. Đối với các Template dạng Layout. Tìm dòng <div id='content-wrapper'> và đặt trước nó với đoạn code bên dưới.

<div id='crosscol-wrapper' style='text-align:justify'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>

b. Riêng đối với các Template mới nhất sẵn có của Blogger (như mẫu Simple) thì đã có sẳn phần Crosscol và code của nó như sau:

<div class='region-inner tabs-inner'>
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
<b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
</div>

2. Chia phần Crosscol thành hai cột.

a. Đối với Template dạng Layout. Thay đoạn code ở phần 1.a bằng đoạn code bên dưới.

<div id='crosscol-wrapper' style='text-align:justify'>
<b:section class='crosscol' id='crosscol-left' preferred='yes' showaddelement='yes'/>
<b:section class='crosscol' id='crosscol-right' preferred='yes' showaddelement='yes'/>
<div style='clear: both;'/>
</div>

b. Đối với các Template mới nhất sẵn có của Blogger thì thay đoạn code ở phần 1.b bằng đoạn code bên dưới.

<div class='region-inner tabs-inner'>
<b:section class='tabs' id='crosscol-left' maxwidgets='' showaddelement='yes'/>
<b:section class='tabs' id='crosscol-right' showaddelement='yes'/>
<div style='clear: both;'/>
</div>

3. Thêm một thành phần Crosscol có hai cột dưới một Crosscol có sẵn.

a. Đối với Template dạng Layout.
Thay đoạn code ở phần 1.a bằng đoạn code bên dưới.

<div id='crosscol-wrapper' style='text-align:justify'>
<b:section class='crosscol' id='crosscol' maxwidgets='1' showaddelement='yes'/>
<b:section class='crosscol' id='crosscol-left' maxwidgets='' showaddelement='yes'/>
<b:section class='crosscol' id='crosscol-right' showaddelement='yes'/>
<div style='clear: both;'/>
</div>

b. Đối với Template mới nhất sẵn có của Blogger.
Thay đoạn code ở phần 1.b bằng đoạn code sau đây.

<div class='region-inner tabs-inner'>
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
<b:section class='tabs' id='crosscol-left' maxwidgets='' showaddelement='yes'/>
<b:section class='tabs' id='crosscol-right' showaddelement='yes'/>
<div style='clear: both;'/>
</div>

Đối với các mục 2 và 3 thì cần phải thêm code CSS.

Đối với mục 2.a và 3.a thì thêm đoạn code CSS sau đây vào trước dòng ]]></b:skin>.

#crosscol-left {width:40%;display:inline-block;_float:left;}
#crosscol-right {width:40%;display:inline-block;float:right;padding: 15px}
#crosscol-right .widget {margin:0;}
body#layout #crosscol-left {width: 50%; float: left;}
body#layout #crosscol-right {width: 50%; float: right;}

Đối với mục 2.b và 3.b thì thêm đoạn code sau đây vào trước dòng ]]></b:skin>.

#crosscol-left {width:40%;display:inline-block;_float:left;}
#crosscol-right {width:40%;display:inline-block;float:right;padding: 15px}
#crosscol-right .widget {margin:0;}

Sau đó đặt trước dòng ]]</b:template-skin> với đoạn code bên dưới.

#layout #crosscol-left {width: 50%; float: left;}
#layout #crosscol-right {width: 50%; float: right;}

Lưu Template là OK.

theo Thuthuatblogger.com

Tăng tốc Blog bằng tối ưu hóa CSS

noreply@blogger.com (VnAbout: Blogger) — Thu, 20 Oct 2011 08:41:00 +0000

Tối ưu hóa CSS là một trong những cách giúp trang webblog của bạn load nhanh hơn. Trong phạm vi bài viết này, mình sẽ chia sẻ cùng bạn những cách tối ưu hóa CSS và kỹ thuật giảm kích cỡ file được hầu hết các nhà thiết kế web sử dụng. Tùy thuộc vào độ phức tạp của CSS trên trang của bạn mà những kỹ thuật này có thể được vận dụng linh hoạt, góp phần giảm số kylobyte cho CSS files.

1. Sử dụng file ngoài, gọp tất cả các file ngoài thành một file chung và đặt trong phần Head (ở đỉnh đầu) của trang:

Sử dụng file ngoài giúp trang load nhanh hơn do các file CSS được công cụ trình duyệt lưu giữ trong bộ nhớ cache. CSS được sắp xếp trong các tài liệu HTML được hạ tải mỗi khi tài liệu HTML được yêu cầu. Sử dụng file ngoài giúp hạn chế số HTTP requests cần thiết, nhưng tăng kích cỡ tài liệu HTML. Mặt khác, nếu CSS nằm trong các file ngoài được công cụ trình duyệt lưu nhớ cache thì kích cỡ tài liệu HTML được hạn chế mà không làm tăng số HTTP requests (Đây là quy tắc số 8 trong cuốn sách High Performance Web Sites của Steve Souders dành cho các nhà phát triển web chuyên nghiệp).

Thông thường đối với blogspot, CSS được đặt trước dòng ]]></b:skin> hoặc trước thẻ </head> như thế này:

<head>

......

......

......

<b:skin><![CDATA[/*

body {

font-family:verdana;

margin:0;

padding:0;

}

a {

text-decoration:none;

outline: none;

}

h1 {

font-weight:700;

margin:5px 0;

}

......

......

......

]]></b:skin>

<style>

......

......

......

</style>

</head>

Nếu bạn có host thì nên gọp thành file chung (đặt tên default.css) rồi upload lên host, đặt file như thế này:

<head>

......

<link rel="stylesheet" type="text/css"href="http://www.tenhost.com/css/default.css" />

......

</head>

Để hạn chế số HTTP requests, người ta còn khuyến cáo gọp các file CSS thành một file chung. Ví dụ nếu bạn có 3 file CSS trên trang web thì trình duyệt sẽ gửi 3 HTTP requests đến server. Như vậy nếu dùng chung 1 file CSS thì thời gian load trang sẽ nhanh hơn rất nhiều.
Nếu bạn có 3 file CSS như thế này:

<link rel="stylesheet" type="text/css" href="content.css" />

<link rel="stylesheet" type="text/css" href="widget.css" />

<link rel="stylesheet" type="text/css" href="comment.css" />

Thì nên gộp thành một file như sau:

<link rel="stylesheet" type="text/css" href="default.css" />

2. Rút gọn CSS:

Việc gộp chung tất cả các thuộc tính giống nhau sẽ giúp hạn chế kích cỡ CSS. Thay vì sử dụng nhiều dòng thuộc tính, tại sao chúng ta không tạo thành một dòng.
Đây là ví dụ đoạn CSS có nhiều thuộc tính giống nhau:

/* MARGIN */

h1 {margin-top:1em;

margin-right:0;

margin-bottom:2em;

margin-left:0.5em;

}

/* BORDER */

h1 {border-width:1px;

border-style:solid;

border-color:#000;

}

/* BORDER WIDTH */

h1 {border-top-width:1px;

border-right-width:2px;

border-bottom-width:3px;

border-left-width:4px;

}

/* BACKGROUND */

div {background-color:#f00;

background-image:url(background.gif);

background-repeat:no-repeat;

background-attachment:fixed;

background-position:0 0;

}

/* FONT */

h1 {font-style:italic;

font-variant:small-caps;

font-weight:bold;

font-size:1em;

line-height:140%;

font-family:"Lucida Grande",sans-serif;

}

/* LIST STYLE */

ul {list-style-type:square;

list-style-position:inside;

list-style-image:url(image.gif);

}

/* OUTLINE */

h1 {outline-color:#f00;

outline-style:solid;

outline-width:2px;

}

Chúng ta nên rút gọn thành như sau:

/* MARGIN */

h1 {margin:1em 0 2em 0.5em;}

/* BORDER */

h1 {border:1px solid #000;}

/* BORDER WIDTH */

h1 {border-width:1px 2px 3px 4px;}

/* BACKGROUND */

div {background:#f00 url(background.gif) no-repeat fixed 0 0;}

/* FONT */

h1 {font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;}

/* LIST STYLE */

ul {list-style:square inside url(image.gif);}

/* OUTLINE */

h1 {outline:#f00 solid 2px;}

Rõ ràng bạn thấy đã giảm kích cỡ rất đáng kể cho CSS.

3. Gộp các định dạng CSS giống nhau:

Đôi khi chúng ta khai báo các định dạng CSS giống nhau mà chúng ta vô tình không nhận ra. Tốt nhất nên xem và phân tích lại. Hãy gộp chúng lại với nhau cho đơn giản hơn.
Ví dụ sau đây là đoạn CSS có các định dạng giống nhau:

h1 {padding:5px 0; font-family:verdana; font-weight:700;}

#box1 .heading {padding:5px 0; font-family:verdana; font-weight:700;}

#box2 .heading {padding:5px 0; font-family:verdana; font-weight:700;}

#nav a.home {padding:5px 0; font-family:verdana; font-weight:700; background:#fff url(home.gif) no-repeat 5px 5px}

#nav a.portfolio {padding:5px 0; font-family:verdana; font-weight:700; background:#fff url(portfolio.gif) no-repeat 5px5px}

#nav a.contact {padding:5px 0; font-family:verdana; font-weight:700; background:#fff url(contact.gif) no-repeat 5px 5px}

#nav a.about {padding:5px 0; font-family:verdana; font-weight:700; background:#fff url(about.gif) no-repeat 5px 5px}

Chúng ta nên gộp lại như sau:

h1, #box1 .heading, #box2 .heading {padding:5px 0; font-family:verdana; font-weight:700}

#nav a {padding:5px 0; font-family:verdana; font-weight:700;background:#fff no-repeat 5px 5px}

#nav a.home {background:url(home.gif)}

#nav a.portfolio {background:url(portfolio.gif)}

#nav a.contact {background:url(contact.gif)}

#nav a.about {background:url(about.gif)}

4. Nén CSS:

- Hạn chế xuống dòng và bỏ dấu chấm phẩy (;) cuối cùng:
Ví dụ đối với đoạn CSS này:

h2 {

font-family:verdana;

padding:0;

margin:5px 0;

color:#333;

text-decoration:underline;

}

Nên nén lại thành một dòng như sau:

h2 {font-family:verdana;padding:0;margin:5px 0;color:#333;text-decoration:underline}

- Sử dụng chú thích đơn giản:
Ví dụ đối với một đoạn chú thích phức tạp như thế này:

/************************************/

/* Content Styles */

/************************************/

Thì nên đơn giản hóa lại như sau (hoặc có thể bỏ luôn chú thích):

/* content styles */

- Loại bỏ 0px:
Ví dụ đối với đoạn CSS này:

h2 {padding:0px; margin:0px;}

Thì nên sửa lại như sau:

h2 {padding:0; margin:0}

5. Sử dụng mã màu đơn giản:

Đối với một số mã màu như thế này: #FFFFFF, #113344, #AABBCC, #FF0000
Thì chúng ta nên giản lượt lại như sau: #FFF, #134, #ABC, #F00

6. Loại bỏ các đoạn CSS không cần thiết:

Trong quá trình thiết kế webblog, do nhiều khi thay đổi giao diện hoặc tháo các tiện ích, một số lớp/ID đã được tạo trước đây thì nay không còn dùng đến nữa. Chúng ta nên kiểm tra và loại bỏ chúng.

Dust-Me Selector và CSS Roundup là hai Addon của Firefox giúp phân tích trang để tìm ra những phần CSS không được dùng đến. Bạn có thể cài đặt một trong hai tiện ích này để giúp bạn làm thay công việc này (tuy nhiên hai tiện ích này chưa hoạt động được với phiên bản mới nhất của FireFox, chỉ dùng được với các phiên bản từ FF6+ trở về trước).

7. Sử dụng các công cụ tối ưu hóa và nén CSS online để giúp bạn đỡ mệt nhọc hơn:

CSS Optimizer
Flumpcakes CSS Optimizer
Clean CSS
CSS Drive CSS Compressor
Online YUI Compressor
Style Neat

8. Sử dụng CSS Sprite:

CSS Sprite là phương pháp tối ưu để hạn chế số lượng HTTP requests về hình ảnh. Kết hợp các ảnh nền thành một ảnh duy nhất và sử dụng các thuộc tính background-image và background-position để hiển thị ảnh theo ý muốn. Phương pháp này rất hữu ích cho các trang có lượng khách truy cập đông. CSS Sprite là một phạm trù kiến thức nâng cao, bạn có thể tham khảo ở một bài viết khác sau này.

nguồn: Huynh Nhat Ha Blog

Chú thích riêng cho nhận xét của chủ blog

noreply@blogger.com (VnAbout: Blogger) — Tue, 18 Oct 2011 23:55:00 +0000

Một thủ thuật khá hay giúp tạo sự khác biệt cho comment của chủ blog. Ta có thể thêm chú thích vào sau tên chủ blog là admin chẳng hạn. Giống như việc chú thích chức vụ của mod trong forum vậy.

CÁCH THỰC HIỆN

1. Đăng nhập Blogger Dashboard (Bảng điều khiển)
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML)
3. Đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)
4. Chèn script

Bước 1: Tìm dòng code

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

- Thêm vào sau nó đoạn code sau:

<!-- Thêm chú thích cho nhận xét của tác giả bài viết (1)-->
<b:if cond='data:comment.adminClass == data:post.adminClass'>
 <span class='admin-comment'>(Admin)</span>
</b:if>

Thay “Admin” thành Chủ blog, Tác giả bài viết,… hay bất cứ gì bạn muốn gán.

Bước 2: Nếu blog có nhiều người viết bài, có lẽ bạn muốn thêm ghi chú khác nhau sau mỗi tên.

Ví dụ như: Cộng tác viên, khách mời,.v.v

- Trong đoạn code ở bước 1, tìm thẻ đóng </b:if>

- Thêm vào trước nó đoạn code sau:

<b:else/>
<b:if cond='data:comment.authorClass == "blog-author"'>
 <b:if cond='data:comment.authorUrl == "http://www.blogger.com/profile/04825632223752574790"'>
  <span class='author-comment'>(Cộng tác viên)</span>
 </b:if>
</b:if>

Thay http://www.blogger.com/profile/04825632223752574790 thành link profile của bạn muốn đưa vào.

- Nếu muốn thêm nhiều chú thích tác giả nữa thì cứ lặp lại code trên.

- Hoặc chú thích chung cho các tác giả được mời cùng viết blog, ta dùng code sau:

<b:else/>
<b:if cond='data:comment.authorClass == "blog-author"'>
   <span class='author-comment'>(Cộng tác viên)</span>
</b:if>

Bước 3: Tìm dòng

]]></b:skin>

- Thêm vào trước nó đoạn code sau:

/* Thêm chú thích cho nhận xét của tác giả bài viết (2)*/
/*Admin*/ 
.admin-comment{
    background:#FCFCE5; /*Màu nền*/ 
    color:#339966; /*Màu chữ*/ 
}

/*Cộng tác viên*/ 
.author-comment{
    background:#fff; /*Màu nền*/ 
    color:#3366ff; /*Màu chữ*/ 
}

Bạn có thể thêm các thuộc tính khác như: đường viền, font chữ, cỡ chữ,v.v

Bước 4: Save template. (Lưu mẫu)

Copy theo caytamgui từ Nguồn: duypham

Tiện ích Popular Posts pro không dùng JS

noreply@blogger.com (VnAbout: Blogger) — Tue, 18 Oct 2011 10:34:00 +0000

Thêm 1 style mới cho tiện ích bài đăng phổ biến, ưu điểm của style này là giúp tiết kiệm không gian, và không sử dụng javascript mà dùng các lệnh CSS3 để làm đẹp nên rất nhẹ.

Demo

Đầu tiên bạn chèn đoạn CSS sau phía trên ]]></b:skin> trong template:

#PopularPosts1{max-width:300px} #PopularPosts1 dd{float:left;border-bottom:none;margin:8px 8px 0 8px;background:none;display:block;padding:0} #PopularPosts1 img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);} #PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}

Tiếp theo, bạn tạo một tiện ích bài đăng phổ biến (nếu trong blog đã có tiện ích Popular Posts thì bỏ qua bước này), rồi chỉnh như sau:

Cuối cùng, bạn vào phần chỉnh sửa HTML, không click mở rộng tiện ích, tìm đoạn sau:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>

Thay thế nó bằng đoạn sau:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <dd> <b:if cond='data:showThumbnails == "false"'> <b:if cond='data:showSnippets == "false"'>  <a expr:href='data:post.href'><data:post.title/></a> <b:else/>  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == "false"'>  <div class='item-thumbnail-only'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> </div> <div style='clear: both;'/> <b:else/>  <b:if cond='data:post.thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img expr:alt='data:post.title' expr:src='data:post.thumbnail' height='60px' width='60px'/></a> <b:else/> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' height='60px' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png' width='60px'/></a> </b:if> </b:if> </b:if> </dd> </b:loop> </ul> <div class='clear'/> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

Lưu lại mẫu và kiểm tra kết quả.

nguồn: noct-land Blog

Tiện ích Recent Posts có hình tốc độ cao cho Blog

noreply@blogger.com (VnAbout: Blogger) — Tue, 18 Oct 2011 04:59:00 +0000

Tiện ích Recent Posts với hình ảnh thu nhỏ - đây là tiện ích mà mình không dùng vì muốn xem bài viết mới mình thường có thói quen quay về trang chủ. Tiện ích được viết ra chỉ cho đủ bộ tiện ích về Bài đăng bởi cũng không tìm được thêm tính năng nào được coi là mới.

Có chăng là tính năng nhận biết bài viết nào đã tắt Nhận xét, hình ảnh hỗ trợ cho cả video trên Youtube và gần đây mình thấy ảnh ở Photobucket cũng được lưu trữ, số lượng bài viết được tải về từ feed lấy đủ cho số bài viết bạn muốn hiển thị để tránh dư thừa.

DEMO

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

#recent-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}

Nếu đã áp dụng tiện ích Bài viết ngẫu nhiên tốc độ cao cho Blogger thì bạn bỏ qua bước này và thay #random-posts img{ thành #random-posts img,#recent-posts img{ cho đồng bộ khi muốn chỉnh sửa.

Bước 2: Thêm 1 widget HTML/Javascript tại nơi muốn hiển thị Recent Posts.

Hiệu chỉnhTiêu đề và dán đoạn mã dưới đây vào phần Nội dung rồi chọn LƯU.

<div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts=5;
var rcp_info='yes';
var rcp_comment='Nhận xét';
var rcp_disable='Tắt Nhận xét';
function recent_posts(json){var dw='';dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png"}}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>');
</script>
</div>

Thay 5 bằng số bài viết bạn muốn hiển thị. Nếu không muốn hiển thị thông tin ngày tháng đăng bài và số nhận xét hãy thay yes thành ký tự bất kỳ khác.

nguồn: Duy phạm

Top7 mẫu phân trang PageNavi cho Blogspot

noreply@blogger.com (VnAbout: Blogger) — Mon, 17 Oct 2011 22:53:00 +0000

Chúng ta đều đã biết rằng Blogger vốn chỉ cung cấp 2 link "Previous" và "Next" để chuyển bài, điều đó hiển nhiên không làm thỏa mãn người dùng. Vì thế có nhiều hack cho Blogger ra đời. Hack lần này trình bày về cơ bản không khác các hack trước, chức năng cũng không nổi bật hơn nhiều, chỉ có duy nhất 1 điểm là nó được viết lại hoàn toàn theo phong cách của 1 plugin nổi tiếng cho WordPress - WP-PageNavi.

Xem thêm: >>> Phân trang phong cách Google cho Blogspot - New !!

CÁCH THỰC HIỆN

Bước 1: Tìm dòng code có dạng tương tự sau:

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

- Thêm vào sau nó đoạn code sau:

<b:includable id='page-navi'> <!-- Tiện ích phân trang PageNavi (1)-->
    <div class="pagenavi">
        <script type="text/javascript">
        var pageNaviConf = {
            perPage: 8, // Số bài viết hiển thị trên một trang
            numPages: 7, // Số trang hiển thị
            firstText: "First",
            lastText: "Last",
            nextText: "Next",
            prevText: "Prev"
        }
        </script>
<script type='text/javascript'>
//<![CDATA[
function pageNavi(o){var m=location.href,l=m.indexOf("/search/label/")!=-1,a=l?m.substr(m.indexOf("/search/label/")+14,m.length):"";a=a.indexOf("?")!=-1?a.substr(0,a.indexOf("?")):a;var g=l?"/search/label/"+a+"?updated-max=":"/search?updated-max=",k=o.feed.entry.length,e=Math.ceil(k/pageNaviConf.perPage);if(e<=1){return}var n=1,h=[""];l?h.push("/search/label/"+a+"?max-results="+pageNaviConf.perPage):h.push("/?max-results="+pageNaviConf.perPage);for(var d=2;d<=e;d++){var c=(d-1)*pageNaviConf.perPage-1,b=o.feed.entry[c].published.$t,f=b.substring(0,19)+b.substring(23,29);f=encodeURIComponent(f);if(m.indexOf(f)!=-1){n=d}h.push(g+f+"&max-results="+pageNaviConf.perPage)}pageNavi.show(h,n,e)}pageNavi.show=function(f,e,a){var d=Math.floor((pageNaviConf.numPages-1)/2),g=pageNaviConf.numPages-1-d,c=e-d;if(c<=0){c=1}endPage=e+g;if((endPage-c)<pageNaviConf.numPages){endPage=c+pageNaviConf.numPages-1}if(endPage>a){endPage=a;c=a-pageNaviConf.numPages+1}if(c<=0){c=1}var b='<span class="pages">Pages '+e+' of '+a+"</span> ";if(c>1){b+='<a href="'+f[1]+'">'+pageNaviConf.firstText+"</a>"}if(e>1){b+='<a href="'+f[e-1]+'">'+pageNaviConf.prevText+"</a>"}for(i=c;i<=endPage;++i){if(i==e){b+='<span class="current">'+i+"</span>"}else{b+='<a href="'+f[i]+'">'+i+"</a>"}}if(e<a){b+='<a href="'+f[e+1]+'">'+pageNaviConf.nextText+"</a>"}if(endPage<a){b+='<a href="'+f[a]+'">'+pageNaviConf.lastText+"</a>"}document.write(b)};(function(){var b=location.href;if(b.indexOf("?q=")!=-1||b.indexOf(".html")!=-1){return}var d=b.indexOf("/search/label/")+14;if(d!=13){var c=b.indexOf("?"),a=(c==-1)?b.substring(d):b.substring(d,c);document.write('<script type="text/javascript" src="/feeds/posts/summary/-/'+a+'?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}else{document.write('<script type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}})();
//]]>
</script>
<div class="clear" />
</div>
</b:includable>

if(e<=1){return} // Bỏ dòng này đi, nếu muốn các bài đăng trong 1 label nào đó ít hơn "perPage" mà vẫn hiển thị được phân trang. (Nó có dạng "Pages 1 of 1" - để người đọc biết được rằng số bài đăng trong label này chỉ có thế)

Bước 2: Tìm dòng

<b:include name='nextprev'/>

- Thay thế nó bằng đoạn code sau:

<!-- Tiện ích phân trang PageNavi (2)-->
<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi'/>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi'/>
</b:if>
</b:if>

Bước 3: Tìm dòng code

]]></b:skin>

- Thêm vào trước nó một trong 7 mẫu code sau:

Mẫu 1:

/* Tiện ích phân trang PageNavi (3)*/
/*Thanh phân trang*/
.pagenavi{
     clear:both;
     margin:10px auto;
     text-align:center;
}

/*Màu link, nền các nút phân trang*/
.pagenavi span,.pagenavi a{
     padding:3px;
     margin-right:5px;
     background:#fff;
     border:1px solid #c20c0c;
}

/*Màu link đã xem qua*/
.pagenavi a:visited{ 
     color:#c20c0c;
}

/*Màu link và nền khi rê chuột*/
.pagenavi a:hover,.pagenavi .current{
     background:#c20c0c;
     color:#fff;
     text-decoration:none;
}
.pagenavi .pages,.pagenavi .current{
     font-weight:bold;
}
.pagenavi .pages{border:none}

Mẫu 2:

/* Tiện ích phân trang PageNavi (3)*/
/*Thanh phân trang*/
.pagenavi{
     clear:both;
     margin:10px auto;
     text-align:center
}

/*Màu link, nền các nút phân trang*/
.pagenavi span,.pagenavi a { 
     font-size:12px;
     padding: 2px 4px 2px 4px;
     margin: 2px;
     border: 1px solid #dfdfdf;
     color:#000;
}
.pagenavi a:visited{}

/*Màu link và nền khi rê chuột*/
.pagenavi a:hover,.pagenavi .current{
      color:#FFF;
      background-color:#e81d1d;
      border: 1px solid #fb1515;
      text-decoration:none;
}

Mẫu 3:

/* Tiện ích phân trang PageNavi (3)*/
/*Thanh phân trang*/
.pagenavi{
     clear:both;
     margin:10px auto;
     text-align:center;
}

/*Màu link, nền các nút phân trang*/
.pagenavi span,.pagenavi a {
     background:#0e0f10;
     font-size:12px;
     padding: 3px 5px;
     margin: 2px;
     border: 1px solid #333;
     color:#fff;
}

.pagenavi a:visited{}

/*Màu link và nền khi rê chuột*/
.pagenavi a:hover,.pagenavi .current{
     color: #FFF;
     background-color: #33393f;
     border: 1px solid #444;
     text-decoration:none;
}

Mẫu 4:

/* Tiện ích phân trang PageNavi (3)*/
/*Thanh phân trang*/
.pagenavi{
    clear:both;
    margin:10px auto 20px;
    text-align:center;
}

/*Màu link, nền các nút phân trang*/
.pagenavi span,.pagenavi a{
    background:#24bde2;
    border:1px solid #4adcff;
    padding:3px 8px;
    color:#fff;
    margin:2px;
    font-size:12px;
}

/*Màu link và nền khi rê chuột*/
.pagenavi a:hover,.pagenavi .current{
    color:#fff;
    background:#ff6734;
    border:1px solid #ddd;
    text-decoration:none;
}
.pagenavi .pages{display:none}

Mẫu 5:

/* Tiện ích phân trang PageNavi (3)*/
/*Thanh phân trang*/
.pagenavi{
    background:#f1f1f1;
    clear:both;
    margin:12px auto 20px;
    text-align:center;
    border:1px solid #bfbfbf;
    padding:3px 0;
}

/*Màu link, nền các nút phân trang*/
.pagenavi span,.pagenavi a{
    border:1px solid #f1f1f1;
    padding:1px 4px;
    color:#000;
    margin:2px;
    font-size:12px;
}

/*Màu link và nền khi rê chuột*/
.pagenavi a:hover,.pagenavi .current{
    border:1px solid #bfbfbf;
    background:#fffdf0;
    color:#000;
    text-decoration:none;
}

Mẫu 6:

/* Tiện ích phân trang PageNavi (3)*/
/*Thanh phân trang*/
.pagenavi{
    background:#3498b9;
    clear:both;
    margin:12px auto 20px;
    text-align:center;
    border:1px solid #2f7a93;
    padding:4px 0;
}

/*Màu link, nền các nút phân trang*/
.pagenavi span,.pagenavi a{
    font-weight:bold;
    padding:7px 8px;
    color:#fff;
    margin:1px;
    font-size:11px;
}

/*Màu link và nền khi rê chuột*/
.pagenavi a:hover,.pagenavi .current{
    background:#236e8f;
    color:#fff;
    text-decoration:none;
}

Mẫu 7:

/* Tiện ích phân trang PageNavi (3)*/
/*Thanh phân trang*/
.pagenavi{
    clear:both;
    text-align:right;
    margin:25px 0 10px 0;
    font-size:.714em;
    font-weight:600;
    line-height:1.4em;
}

/*Màu link, nền các nút phân trang*/
.pagenavi span,.pagenavi a{
    background:#e1e1e1;
    color:#555;
    border:1px solid #555;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -moz-box-shadow:0 1px 0 #FFF;
    -webkit-box-shadow:0 1px 0 #FFF;
    box-shadow:0 1px 0 #FFF;
    margin-left:5px;
    padding:4px 6px 3px;
    text-shadow:0 1px 0 #C2C2C2;
}

/*Màu link và nền khi rê chuột*/
.pagenavi a:hover,.pagenavi .current{
    background:#29A07C;
    border:1px solid #00203B;
    text-shadow:0 -1px 0 #00203B;
    color:#fff;
    text-decoration:none;
}

.pagenavi .pages{background:none;border:none}

Bước 4: Save template. (Lưu mẫu)

Copy từ Caytamgui - Nguồn: Noct & Hỗn tạp

Tự động chia sẻ Youtube với Google+

noreply@blogger.com (VnAbout: Blogger) — Mon, 17 Oct 2011 03:49:00 +0000

Hiện tại, với tài khoản YouTube của mình bạn có thể kết nối tài khoản với các dịch vụ yêu thích khác của bạn để tự động chia sẻ hoạt động của bạn và xem hoạt động từ bạn bè trên các trang web khác trên trang chủ YouTube.

Danh sách các trang web được YouTube hỗ trợ kết nối bao gồm Facebook, Twitter, Orkut, MySpace, Google Reader và mới nhất là mạng xã hội Google+.

Hiện tại khả năng Tự động chia sẻ ( AutoShare ) của YouTube vẫn chưa được tự động kích hoạt mà bạn phải thực hiện bật chúng bằng cách truy cập vào Settings > Sharing ( hayhttp://www.youtube.com/account_sharing?hl=vi ) sau đó bấm “Kết nối” ở mục Google+. Bên cạnh đó bạn còn có thể chọn thêm các tác vụ khác muốn chia sẻ với bạn bè ở cộc Activity Sharing. Cuối cùng bấm Lưu thay đổi là xong.
Có thể bạn phải đợi một vài giờ để YouTube bắt đầu hiển thị những đoạn video được chia sẻ từ những người bạn follow trên Google+ và cũng không thể theo dõi các video được chia sẻ theo thời gian thực.

Google OS

Tiện ích random posts có hình ảnh load nhanh cho Blog

noreply@blogger.com (VnAbout: Blogger) — Sun, 16 Oct 2011 03:12:00 +0000

Một trong những tiện ích mình kiêng kỵ nhất là Random Posts, bởi tiện ích này tải toàn bộ dữ liệu từ feed về, không những làm chậm tốc độ cho blog mà còn không chính xác với blog có trên 500 bài viết - đây là con số bài viết tối đa được feed tải về.

Trong tiện ích mình giới thiệu sau đây thay vì 1 lần tải toàn bộ feed thì mình tải lần lượt theo số bài viết muốn hiển thị và chỉ lấy duy nhất 1 bài trong 1 lần tải. Trước đó sẽ có 1 lần tải dữ liệu đầu tiên từ feed để xác định tổng số bài viết hiện có, 1 hàm lấy ngẫu nhiên 5 số khác nhau từ 1 đến tổng số bài viết.

Ví dụ muốn hiển thị 5 bài viết ngẫu nhiên thì sẽ có 6 lần tải feed, mặc dù số lần lấy nhiều nhưng dung lượng 1 lần lấy lại nhỏ. Khối lượng chỉ tương đương với blog bạn có tổng số bài viết là 6, so sánh vậy để thấy nếu blog càng nhiều bài viết thì tiện ích này có tốc độ nhanh hơn kiểu tải toàn bộ feed rất nhiều lần.

DEMO

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}

Bước 2: Thêm 1 widget HTML/Javascript tại nơi muốn hiển thị Random Posts. Hiệu chỉnhTiêu đề và dán đoạn mã dưới đây vào phần Nội dung rồi chọn LƯU.

<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_info='yes';
var rdp_comment='Nhận xét';
var rdp_disable='Tắt Nhận xét';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

Thay 5 bằng số bài viết bạn muốn hiển thị. Nếu không muốn hiển thị thông tin ngày tháng đăng bài và số nhận xét hãy thay yes thành ký tự bất kỳ khác.

nguồn: Blog DuyPham

Phân trang phong cách Google cho Blogspot

noreply@blogger.com (VnAbout: Blogger) — Sat, 15 Oct 2011 00:58:00 +0000

Kiểu phân trang giống trang tìm kiếm Google sẽ là một trong những kiểu phân trang mới trong vô vàn kiểu phân trang khác nhau cho blogspot.

Mỗi kiểu đều có nét đẹp và ưu điểm riêng cho nên bạn cần lựa chọn kiểu nào phù hợp nhất để cài đặt cho blog của mình.

Script cho các kiểu phân trang dường như có những điểm na ná giống và cách cài đặt cũng vậy. Ở đây mình xin giới thiệu một kiểu phân trang theo phong cách Google.

Tránh trường hợp các file JS bị die do hết bandwitch mình sẽ chèn thẳng vào nên code có vẻ dài.

Để cài đặt kiểu phân trang này, bạn hãy thực hiện như sau.

Bước 1.

Đăng nhập tài khoản Blogger >> thiết kế (Design) >> Chọn chỉnh sửa HTML (Edit HTML)
Đặt đoạn code dưới đây vào trước dòng ]]></b:skin>.

#nav a,#nav a:visited,.blk a{color:#000}
#nav a{display:block}
#nav .b a,#nav .b a:visited{color:#20c}
#nav .i{color:#a90a08;font-weight:bold}
.csb,.ss{background:url(http://lh5.googleusercontent.com/-avTxlwCp9Ow/TmBl_H9Im_I/AAAAAAAACNo/8AaL9j2IzBg/Vatinam.png) no-repeat 0 0;height:26px;display:block}
.ss{background-position:0 -88px;position:absolute;left:0;top:0}
.cps{height:18px;overflow:hidden;width:114px}
.mbi{width:13px;height:13px;background-position:-91px -74px;margin-right:3px}
#nav td{padding:0;text-align:center}

Bước 2.

Đặt đoạn code bên dưới vào trước thẻ </body>.

<script type='text/javascript'>
var home_page_url = location.href;
var pageCount=10;
var displayPageNum=6;
var upPageWord ='Previous';
var downPageWord ='Next';
function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
htmlMap[htmlMap.length]='/';
postNum++;
for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
}
var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};
for(var p =0;p< banyaknomer;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = '<a href="/"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
}else{
upPageHtml = '<a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
}
fFlag++;
}
if(p==(thisNum-1)){
if(p==0){
html += '<span class="csb" style="background-position: -26px 0pt; width: 18px;"></span></td><td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
}else{
html += '<td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
}
}else{
if(p==0){
html += '<td><a href="/"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>1</a></td>';
}else{
html += '<td><a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>'+ (p+1) +'</a></td>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<td class="b"> <a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -76px 0pt; margin-right: 34px; width: 66px;"></span>'+ downPageWord +'</a></td>';
eFlag++;
}
}
}
if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}
html2 = '<table id="nav" style="margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;" align="center"><tbody><tr valign="top"><td class="b">Page ('+(postNum-1)+') </td><td class="b">';
html3 = '</tr></tbody></table>';
html = html2+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}else{
html += '<td class="b"><span class="csb" style="background-position: -76px 0pt; width: 42px;"></span></td>';
}
if(postNum==1) postNum++;
html += html3+ '</div>';
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
function showpageCount2(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var labelHtml = '<a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;
htmlMap[htmlMap.length]=labelHtml;
postNum++;
for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;
itemCount++;
}
var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};
for(var p =0;p< banyaknomer;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = labelHtml +'<span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
}else{
upPageHtml = '<a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
}
fFlag++;
}
if(p==(thisNum-1)){
if(p==0){
html += '<span class="csb" style="background-position: -26px 0pt; width: 18px;"></span></td><td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
}else{
html += '<td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
}
}else{
if(p==0){
html = '<td>'+labelHtml+'<span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>1</a></td>';
}else{
html += '<td><a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>'+ (p+1) +'</a></td>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<td class="b"> <a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -76px 0pt; margin-right: 34px; width: 66px;"></span>'+ downPageWord +'</a></td>';
eFlag++;
}
}
}
if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}
html2 = '<table id="nav" style="margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;" align="center"><tbody><tr valign="top"><td class="b">Page ('+(postNum-1)+') </td><td class="b">';
html3 = '</tr></tbody></table>';
html = html2+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}else{
html += '<td class="b"><span class="csb" style="background-position: -76px 0pt; width: 42px;"></span></td>';
}
if(postNum==1) postNum++;
html += html3+ '</div>';
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
</script>
<script type='text/javascript'>
var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}
var home_page = "/";
if (thisUrl.indexOf("?q=")==-1 && thisUrl.indexOf(".html")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</script>

Bạn có thể điều chỉnh số bài viết hiển thị ở mỗi trang tại tham sốpageCount=10.

Bước 3.

Tìm bất kỳ dòng nào như thế này 'data:label.url'.
Rồi thay thế nó bằng dòng 'data:label.url + "?&max-results=10"'.
Cuối cùng lưu (Save Templates) lại là ok.

Nguồn – Tiếng anh : Abu Farhan

Tạo màu nền xen kẽ cho Comment trong Blog

noreply@blogger.com (VnAbout: Blogger) — Fri, 14 Oct 2011 19:42:00 +0000

Với phần comment phía dưới các bài viết của blogspot bạn hoàn toàn có thể tủy biến tạo ra những hiệu ứng bắt mắt, theo hướng dẫn dưới đây bạn có thể tạo màu nền xen kẽ cho nhận xét.

1. Phiên bản Huỳnh Nhật Hà

theo như hình minh họa dưới:

Xem DEMO thủ thuật Tạo màu nền xen kẽ cho các Nhận xét

Việc áp dụng thủ thuật này có liên quan đến thủ thuật tạo số đếm nhận xét vì thế kết hợp hai thủ thuật lại với nhau để đơn giản hóa code, theo các bước sau đây:

Bước 1.

Đăng nhập Blogger, vào Design >> Edit Template, chọn Expand Widget Templates. Đặt kịch bản gán lớp nhận xét chẳn và lẻ vào trước thẻ </head>.

<script type='text/javascript'>
//<![CDATA[
function counterComments(strx) {
var therest;
therest = CommentsCounter % 2;
if (therest == 0) {
document.getElementById(strx).className='evenComments';
} else {
document.getElementById(strx).className='oddComments';
}
}
//]]>
</script>

Bước 2.

Tìm dòng <b:loop values='data:post.comments' var='comment'>
Và thay nó bằng đoạn code bên dưới:

<script type='text/javascript'>var CommentsCounter=0;</script>
<b:loop values='data:post.comments' var='comment'>

<div class='' expr:id='data:comment.id'>

Tiếp tục tìm dòng code: <data:commentPostedByMsg/> (dòng này hiển thị chữ says/said/nói, tùy theo Template bạn có thể đặt đoạn code bên dưới theo ý muốn) rồi chèn bên dưới nó bằng đoạn code sau:

<span class='comment-counter'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

Tiếp theo tìm đến thẻ đóng </b:loop> cho thẻ <b:loop values='data:post.comments' var='comment'> rồi đặt trước nó bằng đoạn code bên dưới:

<script type='text/javascript'>
counterComments('<data:comment.id/>')
</script>
</div>

Bước 3.

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

/* số đếm nhận xét */

.comment-counter {

float: right;

display: block;

width: 40px;

margin-top: -30px;

text-align: right;

font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;

font-size: 28px;

font-weight: normal;

}

.comment-counter a:link, .comment-counter a:visited {color:#445566 !important;}

.comment-counter a:hover, .comment-counter a:active {color:#FF9933 !important;}

/* thuộc tính phân biệt nhận xét chẳn và lẻ */

.evenComments { /* nhận xét chẳn */

margin: 10px 0px;

padding: 5px 20px 0px;

background-color: #F0F0F9;

border:1px solid #DDD;

}

.oddComments { /* nhận xét lẻ */

margin: 10px 0px;

padding: 5px 20px 0px;

background-color: #F0F8FF;

border:1px solid #DDD;

}

Về style cho CSS bạn có thể tự tùy biến và vận dụng linh hoạt cho blogspot của mình. Lưu Template là hoàn thành.

2. Phiên bản Duy Phạm

theo như hình minh họa dưới:

Bước 1:

Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

.bgc1{background:#BFF}
.bgc2{background:#F4F4F4}

Bước 2:

Thêm đoạn mã dưới đây vào trước thẻ </head> (nếu blog bạn đã có jQuery rồi thì bỏ qua bước này).

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

Bước 3:

Thêm đoạn mã dưới đây vào trước thẻ <b:loop values='data:post.comments' var='comment'>.

<script type='text/javascript'>var cCounter=0;</script>

Bước 4:

Thêm đoạn mã dưới đây vào sau thẻ <b:loop values='data:post.comments' var='comment'>.

<script type='text/javascript'>
cCounter=cCounter+1;
var du=cCounter%2;
function addclass(a){
if(du==0){
$(document).ready(function(){
$("."+a).addClass("bgc2");
});
}
else{
$(document).ready(function(){
$("."+a).addClass("bgc1");
});
}
};
</script>
<script type='text/javascript'>addclass('<data:comment.anchorName/>');</script>
<div expr:class='data:comment.anchorName'>

Bước 5:

Tìm thẻ kết thúc </b:loop> tương ứng của <b:loop values='data:post.comments' var='comment'> và thay thế thành:

</div>
</b:loop>

Thay thế #BFF và #F4F4F4 thành mã màu theo ý bạn.

cCounter là biến đếm số comments, nếu áp dụng thủ thuật tạo số đếm cho comments bạn có thể ghép 2 thủ thuật làm 1 để giảm bớt code.

theo blog Huỳnh Nhật hà và Duypham

Thủ thuật giấu bài viết trên Popular Posts

noreply@blogger.com (VnAbout: Blogger) — Thu, 13 Oct 2011 22:46:00 +0000

Nếu bạn không muốn hiển thị một bài viết nào đó trên tiện ích bài viết xem nhiều (Popular Posts) được cung cấp bởi Blogger, nơi hiển thị các bài viết nhiều nhất trên blog thì bạn hoàn toàn có thể ẩn nó đi 1 cách dễ dàng.

Thủ thuật cũng khá đơn giản nên mình sẽ đi ngay vào hướng dẫn.

- Đầu tiên các bạn phải xác định được link của bài viết cần ẩn.

- Sau đó vào Thiết kế -> vào chỉnh sửa HTML -> nhấp chọn mở rộng mẫu tiện ích, rồi tìm đến đoạn code của tiện ích Bài viết xem nhiều (Popular posts). Rồi thêm các đoạn code highlight như bên dưới :

<b:widget id='PopularPosts1' locked='false' title='Bài đăng Phổ biến' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.href != "LINK BÀI VIẾT CẦN ĐƯỢC ẨN"'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>

<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>

<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>

<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>

<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:if> 
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

- Thay dòng LINK BÀI VIẾT CẦN ĐƯỢC ẨN thành link bài viết là được.
- Cuối cùng save template lại.

Tùy biến nút Readmore cho Blogger

noreply@blogger.com (VnAbout: Blogger) — Thu, 13 Oct 2011 04:41:00 +0000

Những ai đang dùng chức năng Read More (đọc thêm) mặc định của Blogger sẽ nhận ra là nó không được đẹp cho lắm, vì vậy trong bài này bạn sẽ được hướng dẫn cách tùy biến sao cho trông bắt mắt hơn.

Xem Demo

Đăng nhập vào phần dashboard >> thiết kế >> chỉnh sửa HTML >> đánh dấu chọn mở rộng mẫu tiện ích.

Tìm dòng sau:

<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a> </div> </b:if>

Thay thế toàn bộ đoạn ở trên bằng:

<b:if cond='data:post.hasJumpLink'> <a class='jump-link' expr:href='data:post.url + "#more"'>Đọc tiếp</a><b:else/> <b:if cond='data:blog.pageType == "index"'> <a class='jump-link' expr:href='data:post.url' rel='nofollow'>Đọc tiếp</a> </b:if></b:if><div class='clear'/>

Tiếp theo, chèn đoạn CSS sau phía trên thẻ </b:skin>

a.jump-link {color:#fff;text-decoration:none} .jump-link { float:right; padding:6px 12px; margin:20px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; text-align: center; display:inline-block; background: #f48423; background: -moz-linear-gradient(top, #ffdf9e, #f5b026 5%, #f48423); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffd683), color-stop(.03, #f5b026), to(#f48423)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5b026', EndColorStr='#f48423'); /* IE6,IE7 only */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5b026', EndColorStr='#f48423')"; /* IE8 only */ -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; border:1px solid #e6791c; border-bottom:1px solid #d86f15; color:#FFF; text-shadow: 0 1px 1px #6f3a02; } .jump-link:hover { background: #eb7d1d; background: -moz-linear-gradient(top, #ffdf9e, #f1a91a 5%, #f07810); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffdf9e), color-stop(.03, #f1a91a), to(#f07810)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1a91a', EndColorStr='#f07810'); /* IE6,IE7 only */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1a91a', EndColorStr='#f07810')"; /* IE8 only */ border-bottom:1px solid #d86f15; } .jump-link:focus { padding:7px 13px; color:#FFF; text-shadow: 0 -1px 1px #894906; border:none; background: #e47412; background: -moz-linear-gradient(top, #f07810, #f1a91a 95%, #f07810); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f07810), color-stop(.9, #f1a91a), to(#f07810)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f07810', EndColorStr='#f1a91a'); /* IE6,IE7 only */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f07810', EndColorStr='#f1a91a')"; /* IE8 only */ box-shadow: inset 0px 2px 5px #9b5901, 0 1px 0px #e0d5c7; -webkit-box-shadow: inset 0px 2px 5px #9b5901, 0 1px 0px #e0d5c7; -moz-box-shadow: inset 0px 2px 5px #9b5901, 0 1px 0px #e0d5c7; }

Save template lại và xem kết quả. Bạn dễ dàng nhận ra là thủ thuật này không dùng bất cứ image nào nhằm tăng tốc độ tải trang web, ngoài ra thì các blog đang sử dụng Auto-readmorescript cũng hoàn toàn có thể áp dụng code này.

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

Nguồn : noct-land.blogspot.com

Tiện ích Next - Previous Post hiển thị tên bài viết cho blogspot

noreply@blogger.com (VnAbout: Blogger) — Wed, 12 Oct 2011 21:28:00 +0000

Khi lướt xem một số blog được xây dựng trên nền tảng Wordpress, kéo xuống đáy trang hẳn bạn sẽ thấy các liên kết Next Post, Previous Post lần lượt hiển thị tiêu đề bài viết kế tiếp và bài viết trước . Đặc điểm này rất cần thiết song đối với blogspot thì dường như chưa phổ biến. Liệu blogspot có thể làm được điều này chăng?

Tiện ích này đã đước thử nghiệm thành công trên Thủ thuật Blogger như bạn có thể thấy ở phần đáy trang vậy. Nếu các bạn thấy thật cần thiết phải có tính năng này cho blogspot thì hãy làm theo hướng dẫn sau.

Để dễ dàng áp dụng rộng rãi hơn cho các blog, tác giả đã chia ra 2 trường hợp: đối với blogspot tiếng Việt và đối với blogspot tiếng Anh (do đối với blogspot mình có thể sử dụng thêm cách dùng Javascript mà không dùng jQuery).

Hình minh họa thủ thuật:

Để cài đặt tính năng này, bạn hãy Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates. Dùng từ khóa blog-pager tìm đến đoạn code liên quan đến thuật phân trang như bên dưới:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</div>
<div class='clear'/>
</b:includable>

Trường hợp 1: Đối với blogspot tiếng Việt.

Bước 1: Thay đoạn code ở trên bằng đoạn code bên dưới:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<b:if cond='data:blog.pageType == "item"'>

<div class='prev_next'>

<p class='next'>

<span>Next post:</span> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl'>

<data:newerPageTitle/>

</a></p>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function(){

var newerLink = $("a.blog-pager-newer-link").attr("href");

$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {

var newerLinkTitle = $("a.blog-pager-newer-link").text();

$("a.blog-pager-newer-link").text(newerLinkTitle);

});

});

//]]>

</script>

</div>

<b:else/>

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' title='Về trang trước'>« Prev</a>
</b:if></b:if>
<b:if cond='data:blog.pageType == "index"'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
<b:if cond='data:olderPageUrl'>

<b:if cond='data:blog.pageType == "item"'>

<div class='prev_next'>

<p class='previous'>

<span>Previous post:</span> <a class='blog-pager-older-link' expr:href='data:olderPageUrl'>

<data:olderPageTitle/>

</a></p>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function(){

var olderLink = $("a.blog-pager-older-link").attr("href");

$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {

var olderLinkTitle = $("a.blog-pager-older-link").text();

$("a.blog-pager-older-link").text(olderLinkTitle);

});

});

//]]>

</script>

</div>

<b:else/>

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' title='Đến trang sau'>Next »</a>
</b:if> </b:if>
</div>
<div class='clear'/>
</b:includable>

Bước 2. Dùng từ khóa blog-pager tìm đến code CSS liên quan đến phân trang, cắt hết chúng rồi đặt đoạn code như sau vào sau dòng ]]></b:skin>.

<b:if cond='data:blog.pageType == "item"'>
<style>
#blog-pager {margin:0px;padding:10px 0 20px;float: left;}
.prev_next p {float:left;text-align:left}
.prev_next span {font-size:12px;text-transform: uppercase;}
.prev_next a{text-decoration: none;color: #069;}
</style>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<style>
#blog-pager {display:none}
</style>
<b:else/>
<style>
Đặt code CSS vừa bị cắt vào đây nha

</style>
</b:if></b:if>

Lưu Template là xong.

Trường hợp 2: Đối với blogspot tiếng Anh.

Riêng đối với blogspot tiếng Anh, ngoài phương pháp ở trên, có thể sử dụng thêm một phương pháp khác. Mình có thể sử dụng javascript để chuyển hóa URL bài viết thành tiêu đề bài viết, áp dụng theo các bước sau đây:
Bước 1. Đặt đoạn code sau đây vào trước thẻ </head>.

<script type='text/javascript'>
function writeTitle(navURL) {
var parts = navURL.split('/');
auxiliar=parts[parts.length-1]
auxiliar = auxiliar.replace(/-/g," ");
namePagi = auxiliar.replace(".html","");
var firstLetter = namePagi.substring(0, 1).toUpperCase();
var theRest = namePagi.substring(1, namePagi.length).toLowerCase();
namePagi = firstLetter + theRest;
document.write(namePagi);
}
</script>

Bước 2. Thay đoạn code phân trang bằng đoạn code bên dưới:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<b:if cond='data:blog.pageType == "item"'>

<div class='prev_next'>

<p class='next'>

<span>Next post:</span> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl'>

<data:newerPageTitle/>

<script language='javascript'>

var navURL = "<data:newerPageUrl/>";

writeTitle(navURL)

</script>

</a></p>

</div>

<b:else/>

<a class='blog-pager-newer-link'
expr:href='data:newerPageUrl'
expr:title='data:newerPageTitle'>
<data:newerPageTitle/>
</a>
</b:if></b:if>
<b:if cond='data:blog.pageType == "index"'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
<b:if cond='data:olderPageUrl'>

<b:if cond='data:blog.pageType == "item"'>

<div class='prev_next'>

<p class='previous'>

<span>Previous post:</span> <a class='blog-pager-older-link' expr:href='data:olderPageUrl'>

<data:olderPageTitle/>

<script language='javascript'>

var navURL = "<data:olderPageUrl/>";

writeTitle(navURL)

</script>

</a></p>

</div>

<b:else/>

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' title='Back to Previous Page'>« Prev</a>
</b:if></b:if>
</div>
<div class='clear'/>
</b:includable>

Chúc các bạn thành công hơn với tiện ích này.

nguồn "www.thuthuatblogger .info"