Slide


Mời Ba về ăn Tết với chúng con
  • kenny

  • kenny

Trang

Thứ Ba, 1 tháng 1, 2013

Lựa chọn Template cho Blogger


Lựa chọn Template cho Blogger

blogger template
Nếu đang sử dụng nền tảng Blogspot để viết blog hẳn bạn đã từng hoặc đang gặp vấn đề về việc lựa chọn một Template (hay Theme) thích hợp cho trang web của mình. Đối các Blog Platform khác như Wordpress hay Joomla, ngoài các theme được chia sẻ miễn phí, bạn hoàn toàn có thể mua các theme Premium với thiết kế chuyên nghiệp đúng nghĩa, hoặc thậm chí bạn có thể đặt hàng các designer thiết kế riêng cho mình một mẫu theme "không đụng hàng".


Trong khi đó, các templates của Blogger lại hoàn toàn miễn phí với số lượng cực kì lớn khiến nhiều người bối rối trong việc lựa chọn, và cũng chính vì free nên bạn khó có thể đánh giá được chất lượng bên trong của một Blogger Template. Lí do mà Blogger không phải là mảnh đất màu mỡ của các web designer chuyên nghiệp chính là vì mã nguồn đóng của nó, rất hạn chế trong việc can thiệp vào SEO và phát triển các tiện ích mở rộng. Mọi thứ đều nằm trong quyền sinh sát của Google. Tuy vậy chúng ta vẫn dùng Blogger, lí do thì ai cũng biết rồi: free và dễ tùy biến.

Trong bài viết này, Noct muốn chia sẻ một ít kinh nghiệm trong việc lựa chọn một template cho blog của bạn, một số ý kiến có thể hơi chủ quan:


Bạn có thể tự thiết kế được template không ?
Template do chính bạn làm ra là phù hợp nhất, bởi chỉ có bạn mới hiểu rõ về blog của mình và chắc chắn là bạn muốn nó phải thật đẹp, thật hoàn hảo. Tuy vậy, việc tự thiết kế template không chỉ cần khiếu thẩm mỹ mà còn đòi hỏi một kiến thức nhất định về Blogspot, về CSS,HTML và biết sử dụng thành thạo ít nhất một phần mềm đồ họa, ví dụ như Photoshop. Nếu bạn chưa sẵn sàng trong việc tự thiết kế template cho riêng mình thì hãy cân nhắc việc lựa chọn một template do người khác thiết kế.

Bạn viết blog về vấn đề gì ?
Phải xác định được nội dung chủ đạo của blog thì bạn mới dễ dàng tìm được template phù hợp. Một blog nhật kí cá nhân thì không nên sử dụng các template dạng báo chí và ngược lại. Một khi đã định rõ được nội dung cần viết thì cũng dễ hình dung được bố cục phù hợp cho template. Ví dụ, blog về tranh ảnh thì chỉ nên có 2 cột, và phần đăng bài phải đủ rộng để hiển thị ảnh một cách đầy đủ


Bạn muốn template trông phải như thế nào ?
Tùy vào sở thích và gu thẩm mỹ của mỗi người mà chọn template thích hợp. Ví dụ, bạn muốn nó trông sáng sủa và màu sắc chủ đạo là màu xanh chẳng hạn. Ngoài ra, có thể bạn muốn template đó phải có một cái footer gồm 3 cột tiện ích và phải có một cái Slider ở trên cùng để thu hút độc giả .v.v.. Các yếu tố này khá quan trọng trong việc lựa chọn template, bởi nếu bạn không quan tâm tới chúng mà chọn bừa một template để rồi cảm thấy không phù hợp với sở thích và nội dung thì quả là phí công vô ích.

Một vài lưu ý khác
Khi đã chọn được template ưng ý thì chưa nên vội sử dụng nó ngay, hãy thử nghiệm nó trên một blog phụ để đảm bảo rằng mọi thứ đều ổn. Việc đầu tiên nên làm là mở blog thử nghiệm bằng tất cả các trình duyệt phổ biến (FirefoxChromeIE...) để xem có xung đột gì xảy ra hay không ? Nếu trên Firefox, template hiển thị kiểu này nhưng trên IE lại hiển thị kiểu khác thì quả là tai hại. Nếu đủ khả năng, hãy tự fix các lỗi đó còn không thì nên chọn một template khác ít xung đột hơn. Cái thứ hai cần chú ý là tốc độ trang web khi dùng template đó, nhiều template bị chèn quá nhiều script hoặc code viết chưa chuẩn dẫn đến tốc độ trang web trở nên chậm chạp khiến ảnh hưởng đến traffic và SEO. Bạn có thể truy cập địa chỉgtmetrix.com để kiểm tra tốc độ blog thử nghiệm, gtmetrix cũng đưa ra nhiều lời khuyên hữu ích để cải thiện tốc độ blog. Một vấn đề cần quan tâm nữa là khả năng SEO của template, đây là yếu tố rất khó có thể đánh giá, nhất là đối với Blogspot. Tuy vậy chúng ta vẫn dễ dàng cải thiện SEO cho template bằng nhiều thủ thuật được chia sẻ trên mạng.


Tiêu chí lựa chọn template của mình là: bố cục đơn giản, màu sắc sáng sủa, đẹp, nhiều hiệu ứng bắt mắt nhưng vẫn đảm bảo tốc độ load nhanh. Hy vọng bài viết này có ích cho bạn trong việc tìm kiếm một template thích hợp nhất với mục đích.

Một số trang web chuyên cung cấp Template cho Blogger:
-   http://btemplates.com (kho template đồ sộ nhất)
-   http://www.premiumbloggertemplates.com (nhiều template "độc")
-  http://besttheme.net (cung cấp nhiều template cực đẹp được convert từ wordpress)
-   http://www.deluxetemplates.net (thư viện template minimalist)
-   http://www.zoomtemplate.com

Lựa chọn Template cho Blogger


Lựa chọn Template cho Blogger

blogger template
Nếu đang sử dụng nền tảng Blogspot để viết blog hẳn bạn đã từng hoặc đang gặp vấn đề về việc lựa chọn một Template (hay Theme) thích hợp cho trang web của mình. Đối các Blog Platform khác như Wordpress hay Joomla, ngoài các theme được chia sẻ miễn phí, bạn hoàn toàn có thể mua các theme Premium với thiết kế chuyên nghiệp đúng nghĩa, hoặc thậm chí bạn có thể đặt hàng các designer thiết kế riêng cho mình một mẫu theme "không đụng hàng".


Trong khi đó, các templates của Blogger lại hoàn toàn miễn phí với số lượng cực kì lớn khiến nhiều người bối rối trong việc lựa chọn, và cũng chính vì free nên bạn khó có thể đánh giá được chất lượng bên trong của một Blogger Template. Lí do mà Blogger không phải là mảnh đất màu mỡ của các web designer chuyên nghiệp chính là vì mã nguồn đóng của nó, rất hạn chế trong việc can thiệp vào SEO và phát triển các tiện ích mở rộng. Mọi thứ đều nằm trong quyền sinh sát của Google. Tuy vậy chúng ta vẫn dùng Blogger, lí do thì ai cũng biết rồi: free và dễ tùy biến.

Trong bài viết này, Noct muốn chia sẻ một ít kinh nghiệm trong việc lựa chọn một template cho blog của bạn, một số ý kiến có thể hơi chủ quan:


Bạn có thể tự thiết kế được template không ?
Template do chính bạn làm ra là phù hợp nhất, bởi chỉ có bạn mới hiểu rõ về blog của mình và chắc chắn là bạn muốn nó phải thật đẹp, thật hoàn hảo. Tuy vậy, việc tự thiết kế template không chỉ cần khiếu thẩm mỹ mà còn đòi hỏi một kiến thức nhất định về Blogspot, về CSS,HTML và biết sử dụng thành thạo ít nhất một phần mềm đồ họa, ví dụ như Photoshop. Nếu bạn chưa sẵn sàng trong việc tự thiết kế template cho riêng mình thì hãy cân nhắc việc lựa chọn một template do người khác thiết kế.

Bạn viết blog về vấn đề gì ?
Phải xác định được nội dung chủ đạo của blog thì bạn mới dễ dàng tìm được template phù hợp. Một blog nhật kí cá nhân thì không nên sử dụng các template dạng báo chí và ngược lại. Một khi đã định rõ được nội dung cần viết thì cũng dễ hình dung được bố cục phù hợp cho template. Ví dụ, blog về tranh ảnh thì chỉ nên có 2 cột, và phần đăng bài phải đủ rộng để hiển thị ảnh một cách đầy đủ


Bạn muốn template trông phải như thế nào ?
Tùy vào sở thích và gu thẩm mỹ của mỗi người mà chọn template thích hợp. Ví dụ, bạn muốn nó trông sáng sủa và màu sắc chủ đạo là màu xanh chẳng hạn. Ngoài ra, có thể bạn muốn template đó phải có một cái footer gồm 3 cột tiện ích và phải có một cái Slider ở trên cùng để thu hút độc giả .v.v.. Các yếu tố này khá quan trọng trong việc lựa chọn template, bởi nếu bạn không quan tâm tới chúng mà chọn bừa một template để rồi cảm thấy không phù hợp với sở thích và nội dung thì quả là phí công vô ích.

Một vài lưu ý khác
Khi đã chọn được template ưng ý thì chưa nên vội sử dụng nó ngay, hãy thử nghiệm nó trên một blog phụ để đảm bảo rằng mọi thứ đều ổn. Việc đầu tiên nên làm là mở blog thử nghiệm bằng tất cả các trình duyệt phổ biến (FirefoxChromeIE...) để xem có xung đột gì xảy ra hay không ? Nếu trên Firefox, template hiển thị kiểu này nhưng trên IE lại hiển thị kiểu khác thì quả là tai hại. Nếu đủ khả năng, hãy tự fix các lỗi đó còn không thì nên chọn một template khác ít xung đột hơn. Cái thứ hai cần chú ý là tốc độ trang web khi dùng template đó, nhiều template bị chèn quá nhiều script hoặc code viết chưa chuẩn dẫn đến tốc độ trang web trở nên chậm chạp khiến ảnh hưởng đến traffic và SEO. Bạn có thể truy cập địa chỉgtmetrix.com để kiểm tra tốc độ blog thử nghiệm, gtmetrix cũng đưa ra nhiều lời khuyên hữu ích để cải thiện tốc độ blog. Một vấn đề cần quan tâm nữa là khả năng SEO của template, đây là yếu tố rất khó có thể đánh giá, nhất là đối với Blogspot. Tuy vậy chúng ta vẫn dễ dàng cải thiện SEO cho template bằng nhiều thủ thuật được chia sẻ trên mạng.


Tiêu chí lựa chọn template của mình là: bố cục đơn giản, màu sắc sáng sủa, đẹp, nhiều hiệu ứng bắt mắt nhưng vẫn đảm bảo tốc độ load nhanh. Hy vọng bài viết này có ích cho bạn trong việc tìm kiếm một template thích hợp nhất với mục đích.

Một số trang web chuyên cung cấp Template cho Blogger:
-   http://btemplates.com (kho template đồ sộ nhất)
-   http://www.premiumbloggertemplates.com (nhiều template "độc")
-  http://besttheme.net (cung cấp nhiều template cực đẹp được convert từ wordpress)
-   http://www.deluxetemplates.net (thư viện template minimalist)
-   http://www.zoomtemplate.com

Blogspot : MỘT SỐ VẤN ĐỀ THƯỜNG GẶP


blogger bug
Trong quá trình chỉnh sửa tùy biến Blogger hẳn không ít lần bạn mắc phải sai lầm khiến phát sinh lỗi ngoài ý muốn. Bạn không biết nên làm lại từ đâu và sửa chữa như thế nào ? Bài viết này có thể sẽ giúp được bạn, đây là tổng hợp một số vấn đề mà rất nhiều người dùngBlogger thường mắc phải, kèm theo cách giải quyết.


Điều quan trọng nhất trước khi chỉnh sửa template làsao lưu một bản gốc để có thể phục hồi lại khi cần thiết. Nếu sau khi tùy biến mà bạn nhận ra template của mình bị mất một số thành phần (avatar, label, .v.v...) thì có thể hoàn nguyên mẫu tiện ích về mặc định để "lấy lại những gì đã mất".

1/ Bị mất bài ở trang chủ
   Đây là vấn đề mà rất nhiều người mắc phải, nguyên nhân là do tính năng auto-pagination của Blogger tự động cắt bớt số bài đăng để blog của bạn load nhanh hơn. Đặc biệt nếu ở trang chủ có các bài đăng chứa nhiều hình ảnh thì khả năng mất bài là khá cao.

    Cách giải quyết: dùng tính năng read more (đọc thêm) của Blogger để thu gọn nội dung các bài đăng ở trang chủ (đừng nhầm lẫn với auto-readmore, nó chắc chắn không giúp bạn giải quyết được vấn đề này). Nếu không thấy tính năng này thì bạn vào phần cài đặt của Blogger rồi chọn cập nhật trình chỉnh sửa bài đăng.

2/ Số bài đăng của mỗi nhãn hiển thị không chính xác
Cách giải quyết : tìm trong template dòng sau
<a expr:href='data:label.url' rel='tag'>
Sửa nó thành:
<a expr:href='data:label.url + &quot;?&amp;max-results=10&quot;' rel='tag'>
10 là số bài đăng tối đa mà bạn muốn hiển thị trên từng nhãn.

3/ Mục bài đăng cũ hơn, bài đăng mới hơn không hiển thị
     Lỗi này do nhiều nguyên nhân, cách giải quyết thường là hoàn nguyên mẫu tiện ích về mặc định, nếu vẫn không được thì bạn kiểm tra trong template xem đã có dòng này hay chưa :
#blog-pager { clear : both; }
4/ Tiện ích phân trang không hoạt động
     Blog của bạn phải có một số lượng bài đăng nhất định thì tiện ích phân trang mới hoạt động. Ngoài ra nếu bạn cài đặt blog ở trạng thái chỉ có tác giả xem được thì cũng sẽ không thấy phân trang.

5/ Tiện ích Popular Posts không hiển thị ảnh thumbnail 
     Mặc dù tất cả các bài đăng phổ biến của bạn đều chứa hình ảnh nhưng tiện íchPopular Posts của Blogger vẫn không hiển thị ảnh đại diện. Khi bạn đăng bài và dùng tính năng chèn hình ảnh của Blogger thì chúng được tự động upload lênPicasa, và tiện ích Popular Posts chỉ lấy các ảnh này làm ảnh đại diện thu nhỏ. Do vậy nếu bạn copy link ảnh từ các trang web khác (không phải từ Picasa) thì sẽ không thấy ảnh thumbnail. Đây cũng là cách mà Blogger khuyến khích người dùng tự viết bài và không nên đi sao chép của người khác.

6/ Ảnh trong bài đăng quá to và lấn sang sidebar
     Bạn có thể điều chỉnh kích thước tối đa của ảnh chứa trong bài đăng bằng đoạnCSS sau:
.post img { max-width: 600px; }
Đoạn code trên có nghĩa là nếu bài nào chứa ảnh mà có kích thước quá lớn thì sẽ tự động thu nhỏ (resize) bề rộng còn 600px. Các ảnh nhỏ hơn 600px vẫn giữ nguyên kích thước.

7/ Blog load quá chậm
     Có rất nhiều nguyên nhân gây chậm, thường là do bạn không dùng tính năng đọc thêm (read-more) của Blogger mà lại dùng auto-readmore script. Việc phải tải toàn bộ nội dung của tất cả bài đăng ở trang chủ khiến tốc độ blog giảm rất nhiều. Ngoài ra, việc lạm dụng quá nhiều tiện ích bên ngoài như Bài đăng mới, Bài đăng theo nhãn, bài đăng ngẫu nhiên (có ảnh đại diện)... cũng gây chậm đáng kể. Sử dụng các tiện ích do chính Blogger cung cấp là tốt nhất. Bạn có thể tham khảo bài viết này để cải thiện tốc độ cho blog của mình.

8/ Các tiện ích có dùng js không hoạt động
     Các link .js trong template của bạn đã die, bạn cần upload chúng lên một host khác (DropboxGoogle Code...). Hoặc bạn có thể chèn trực tiếp đoạn mã trong file js vào thẳng trong template. Cách này có ưu điểm là nhanh, không phụ thuộc vào host nhưng nhược điểm là dễ khiến bọ của Google nhầm lẫn giữa nội dung bài với đoạn mã mà bạn đã chèn, ảnh hưởng tới SEO.

9/ Chuyển toàn bộ Blog sang một tài khoản khác, làm thế nào ? 
     Đăng nhập vào Blogger -> Cài đặt -> Quyền , ở mục Tác giả blog bạn nhập địa chỉ tài khoản mới (email). Cấp quyền quản trị (Admin) cho tài khoản đó, đăng nhập vào hộp thư tài khoản mới để xác nhận, cuối cùng bạn gỡ bỏ quyền quản trị của tài khoản cũ và remove nó đi. Khi bạn muốn xóa một blog nào đó mà không muốn phải đợi đến 90 ngày thì cũng có thể dùng cách này.

     Trên đây là các vấn đề thường gặp của Blogger, cách giải quyết có thể chưa phải là tối ưu. Nếu bạn có ý kiến khác thì có thể bổ sung ở dưới đây, chắc chắn nó sẽ có ích cho nhiều người. 
Nguồn: Noct Blog

XÓA CÁC PHẦN THỪA TRONG TEMPLATE BLOGGER


Trong những template mặc định của blogger có 1 số thành phần đôi khi gây khó chịu cho chúng ta vì nó hơi thừa. Ví dụ như khi nhấp vào 1 nhãn (label) thì phía trên bài viết đầu tiên sẽ xuất hiện dòng chữ "Hiển thị các bài đăng có nhãn..." hay dòng "Đăng ký: các bài đăng (Atom)" ở cuối blog... Và với bài viết này thì bạn có thể xóa bỏ được các thành phần đó 1 cách hiệu quả.

1. Xóa dòng "Hiển thị các bài đăng có nhãn..."
Vào template của bạn ở chế độ mở rộng mẫu tiện ích. Tìm và xóa dòng sau.
<b:include data='top' name='status-message'/>
2. Xóa dòng "Đăng ký: Các bài đăng (atom)"
Vào template của bạn ở chế độ mở rộng mẫu tiện ích. Tìm và xóa dòng sau.
<b:include data='feedLinks' name='feedLinksBody'/>

Nguồn: VÕ QUỐC AN

KHUNG COMMENT ĐẸP (Có phân cấp)


KHUNG COMMENT ĐẸP (Có phân cấp)

Thư tìm được trên mạng và thấy hay. Mọi người thích thì sử dụng thử nhe. Chúc vui vẻ.

Đây là khung comment cải tiến từ một bài đăng cũ, ở đây add thêm mục phân cấp. Do là threaded comment mặc định của Blogger nên chỉ được tối đa là 1 cấp mà thôi. Tuy vậy đối với những ai thích cây nhà lá vườn thì sẽ thích khung comment này. 

Demo
 
Trước tiên, hãy lưu lại một bản template gốc để đề phòng bất trắc. Sau đó vào phần chỉnh sửa HTML, chọn mở rộng mẫu, tìm các đoạn sau:
<b:include data='post' name='comments'/>
Thay thế tất cả các đoạn tìm được bằng đoạn sau:
<b:include data='post' name='threaded_comments'/>
Tiếp tục chèn đoạn code này phía trên ]]></b:skin>
Save template lại và test.


Nguồn: Noct Blog

Sửa lỗi gán nhãn Author cho Thread Comment

author comments
Trước đây trong bài Thêm chú thích cho nhận xét của tác giả bài viết mình có đề cập đến sai lầm trong việc chỉ so sánh sự giống nhau giữa tên tác giả bài viết và tên người nhận xét để gán nhãn Author. Ở Thread Comment mới Blogger đã làm việc này sẵn cho chúng ta, tuy nhiên chỉ so sánh 2 dữ liệu là tên và địa chỉ Blogger profile. Điều này có nghĩa khi người nhận xét chọn Tên/URL và nhập Tên là tên người viết bài, URL là địa chỉ Blogger profile của người đó thì nhãn Author được tự động gán?! Bài viết này giúp bạn sửa lỗi đó để việc gán nhãn Author trở nên chính xác hơn.


Bước 1Thay thế đoạn mã (function() { trong template của bạn bằng đoạn mã dưới đây: 
var items_copy=[];
(function() {
Bước 2: Thay thế đoạn mã var items = <data:post.commentJso/>; 
trong template của bạn bằng đoạn mã dưới đây:
var items = <data:post.commentJso/>;
items_copy=items;
Bước 3: Thêm đoạn mã dưới đây vào sau thẻ 
<data:post.commentHtml/> 
trong template của bạn.
 
<script type='text/javascript'>
//<![CDATA[
for(i=0;i<items_copy.length;i++)
{a=document.getElementById('c'+items_copy[i].id);
b=a.innerHTML;c=b.indexOf('icon user blog-author">');
if((items_copy[i].author.
avatarUrl=='http://img1.blogblog.com/img/blank.gif')
&&(c!=-1)){b=b.replace(/icon user blog-author">/,
'icon user">')}a.innerHTML=b}
//]]>
</script>
Nếu bạn đã áp dụng thủ thuật Đánh số thứ tự cho nhận xét 
thì chỉ cần thêm đoạn mã c=b.indexOf('icon
 user blog-author">');if((items_copy[i].author.avatarUrl == 
'http://img1.blogblog.com/img/blank.gif')&&(c!=-1))
{b=b.replace(/icon
 user blog-author">/,'icon user">')} 
vào trước a.innerHTML=b và bỏ qua các bước trên. 
 
Nguồn: Duy Phạm 

TIỆN ÍCH PHÂN TRANG PageNavi VÀ MỘT SỐ styleTIỆN ÍCH PHÂN TRANG PageNavi VÀ MỘT SỐ styleTIỆN ÍCH PHÂN TRANG PageNavi VÀ MỘT SỐ styleTIỆN ÍCH PHÂN TRANG PageNavi VÀ MỘT SỐ styleTIỆN ÍCH PHÂN TRANG PageNavi VÀ MỘT SỐ styleTIỆN ÍCH PHÂN TRANG PageNavi VÀ MỘT SỐ styleTIỆN ÍCH PHÂN TRANG PageNavi VÀ MỘT SỐ styleTIỆN ÍCH PHÂN TRANG PageNavi VÀ MỘT SỐ style


page navi blogger
Tiện ích phân trang vốn không còn xa lạ với Blogspot, bài này chỉ giới thiệu script hack phân trang mà mình đang dùng cùng với một số style khá đẹp để bạn lựa chọn. Đây là script phân trang từ hỗn tạp blog viết lại theo phong cách WordPress, bạn có thể tham khảo cách làm ở bài viết gốc hoặc xem dưới đây.

Trong template, chèn đoạn CSS sau phía trên </b:skin>
.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a{padding:3px;margin-right:5px;background:#fff;border:1px solid #c20c0c}
.pagenavi a:visited{color:#c20c0c}
.pagenavi a:hover,.pagenavi .current{background:#c20c0c;color:#fff;text-decoration:none}
.pagenavi .pages,.pagenavi .current{font-weight:bold}
.pagenavi .pages{border:none}

Tiếp tục tìm đến dòng này:
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
Chèn ngay sau nó:
<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: "First",
lastText: "Last",
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot; }
</script>
<script type="text/javascript" src="http://rilwis.googlecode.com/svn/trunk/blogger/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>

Tiếp theo, tìm trong template của bạn:
<!-- navigation -->
<b:include name='nextprev'/>

Thay thế nó bằng:
<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>

Tùy chỉnh script:
-  perPage: số bài viết hiển thị trong 1 trang
-  numPages: số trang hiển thị
-  firstText, lastText, nextText, prevText: các từ hiển thị cho các nút First, Last, Next, Prev

Cơ bản vậy là xong, sau đây là một số style, hãy chọn kiểu phù hợp nhất với template của bạn rồi thay thế vào đoạn code màu xanh phía trên:

Kiểu 1:

.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a { font-size:12px;padding: 2px 4px 2px 4px;margin: 2px;border: 1px solid #dfdfdf;color:#000;}
.pagenavi a:visited{}
.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #e81d1d;border: 1px solid #fb1515;text-decoration:none;}

Kiểu 2:

.pagenavi{clear:both;margin:10px auto;text-align:left}
.pagenavi span,.pagenavi a {background:#0e0f10;font-size:12px;padding: 3px 5px;margin: 2px;border: 1px solid #333;color:#fff;}
.pagenavi a:visited{}
.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #33393f;border: 1px solid #444;text-decoration:none;}

Kiểu 3:

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:#24bde2;border:1px solid #4adcff;padding:3px 8px;color:#fff;margin:2px;font-size:12px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{color:#fff;background:#ff6734;border:1px solid #ddd;text-decoration:none}
.pagenavi .pages{display:none}

Kiểu 4:

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:-moz-linear-gradient(center top,#96aeba,#536a75) repeat scroll 0 0 transparent;border:1px solid #616e76;padding:4px 8px;color:#fff;margin:2px;font-size:12px;-moz-border-radius:4px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{color:#fff;background:#c70e0c;border:1px solid #782f28;text-decoration:none}
.pagenavi .pages{color:#fff}

Kiểu 5: 

.pagenavi{background:#3498b9;clear:both;margin:30px auto 20px;text-align:center;border:1px solid #2f7a93;padding:4px 0}
.pagenavi span,.pagenavi a{font-weight:bold;padding:7px 8px;color:#fff;margin:1px;font-size:11px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:#236e8f;color:#fff;text-decoration:none}
.pagenavi .pages{color:#fff}

Kiểu 6:

.pagenavi{background:#f1f1f1;clear:both;margin:30px auto 20px;text-align:center;border:1px solid #bfbfbf;padding:3px 0}
.pagenavi span,.pagenavi a{border:1px solid #f1f1f1;padding:1px 4px;color:#000;margin:2px;font-size:12px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{border:1px solid #bfbfbf;background:#fffdf0;color:#000;text-decoration:none}
.pagenavi .pages{color:#666}

Kiểu 7:

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:#1dc1ff;padding:6px 6px;color:#fff;margin:2px;font-size:12px;-moz-border-radius:5px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:#ff9200;color:#fff;text-decoration:none}
.pagenavi .pages{display:none}

Kiểu 8:

.pagenavi{clear:both;text-align:right;margin:25px 0 10px 0;font-size:.714em;font-weight:600;line-height:1.4em}
.pagenavi span,.pagenavi a{background:#e1e1e1;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;color:#555;margin-left:5px;padding:4px 6px 3px;text-shadow:0 1px 0 #C2C2C2}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:-moz-linear-gradient(center top,#45bc3f,#1c6318) repeat scroll 0 0 transparent;border:1px solid #00203B;text-shadow:0 -1px 0 #00203B;color:#fff;text-decoration:none}
.pagenavi .pages{background:none;border:none}


Nguồn: Blog NOCT