1DiDong.Com: tháng 2 2011

Chủ Nhật, 27 tháng 2, 2011

Blogger Template : Perception

Đây là template thứ 3 mà Noct chia sẻ trên blog này, Perception là template được convert từ theme Wordpress của Pexeto. Nó là một theme WP đa năng, nhưng mình chỉ convert cái Blog Type của nó.

Screenshot | Demo | Download

Với tiêu chí là đơn giản nhưng hiệu quả, Perception Template có các tính năng đáng giá như:

- Jquery Dropdown menu

- Khung nhận xét "to" và "dài"

- Page Navi

- SEO Optimized

Nếu bạn sử dụng template này, vui lòng giữ nguyên thông tin tác giả.

Thứ Sáu, 25 tháng 2, 2011

Blogspot : làm sao để có một Comment Form đẹp ?

Đây là vấn đề mà khá nhiều người đã đề cập, Comment Form là thành phần quan trọng của bất cứ blog nào, việc có một khung nhận xét đẹp mắt sẽ góp phần giúp tăng lượng comment trên blog của bạn. Nếu bạn không hài lòng với Comment Form của mình, hãy tự hỏi là: tại sao nó lại chưa đẹp ? Nguyên nhân chủ yếu là do template bạn đang dùng, đa số các blogger template làm ra đều ít được chăm chút cho khung nhận xét.

Tuy vậy, vẫn có một số tác giả chịu khó trang trí cho Comment Form (mình là một trong số đó). Với kinh nghiệm "đầy mình" trong việc edit template, trong bài viết này Noct sẽ hướng dẫn bạn cách trang trí khung nhận xét của blog sao cho đẹp nhất. Lưu ý đây chỉ là hướng dẫn chứ không nêu ra code cụ thể bởi vì mỗi template có phong cách thiết kế khác nhau nên không thể dùng chung một mẫu nhận xét được.

Vào phần chỉnh sửa HTML của template, chọn mở rộng mẫu tiện ích, tìm dòng sau:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
comments-block chính là id của khung hiển thị nhận xét theo chuẩn Minima.
Trong comments-block này bạn sẽ thấy có các thành phần sau:
<b:if cond='data:comment.authorUrl'>
Đây chính là phần hiển thị tên và profile của người comment, ta đặt cho nó một class tên là comments-meta như thế này:

<div class='comments-meta'>
<b:if cond='data:comment.authorUrl'>
.....
</b:if>
</div>

Lưu ý là phải chèn thẻ đóng </div> đúng chỗ nếu không sẽ báo lỗi khi save. Tiếp theo, bạn sẽ thấy:
<b:if cond='data:comment.favicon'>
Đây là phần hiển thị avatar của người nhận xét, ta đặt cho nó một class tên là comments-avatar, bạn làm tương tự như với comments-meta.
Tiếp tục:

<dd class='comment-body'>
...
</dd>

Đây là phần hiển thị nội dung comment. Tiếp theo là:
<span class='comment-timestamp'>
Cái này chính là thời gian đăng nhận xét. Cuối cùng là khung để viết nhận xét, nó sẽ có id là comment-form.

Nếu để ý, ta sẽ thấy có các thành phần dl, dd, dt, ol... trong khung nhận xét. Đây là các thẻ kiểu list trong CSS, chúng sẽ khiến vấn đề trở nên phức tạp hơn nếu bạn chưa quen dùng. Vì vậy, ta sẽ xóa chúng đi và thay thế bằng các thẻ div quen thuộc để dễ dàng tùy biến. Tìm tất cả các chữ tô đậm màu xanh ở trên rồi đổi thành div hết, và đừng quên chèn thẻ đóng </div>. Ví dụ:

<div class='comment-body'>
.......
</div>

Từ giờ, công việc của chúng ta trở nên cực kì đơn giản, sử dụng CSS trên từng id và class của Comment Form (color, background, border, font...) để trang trí theo ý thích:

#comments-block { ... }
.comments-meta { ... }
.comments-avatar { ... }
.comment-body { ... }
.comment-timestamp { ... }
#comment-form { ... }

Để dễ hình dung thì bạn xem ảnh này.
Chúc bạn làm được một khung nhận xét đẹp.

Thứ Tư, 23 tháng 2, 2011

Mở liên kết trên blog ở tab mới trong trình duyệt

Thông thường, nếu muốn người đọc không rời khỏi blog của mình khi click vào một liên kết bất kì thì chúng ta thường thêm thuộc tính target="_blank" trong link. Cách này có vẻ thủ công nên hơi bất tiện khi thực hiện cho hàng loạt liên kết trên blog. Có một số thủ thuật giúp mở tất cả link ở cửa sổ mới nhưng nhìn chung đều dựa vào javascript và chưa cơ động lắm khi muốn tùy biến. Nay mình giới thiệu một cách làm khác không sử dụng javascript mà dùng chính thuộc tính base trong HTML. Chèn đoạn sau bên dưới thẻ <head> trong template:
<base target='_blank'/>
Save lại, thế là tất cả link trên blog của bạn sẽ được mở ở tab mới trong trình duyệt web. Quá nhanh và đơn giản.

Mở rộng ra, khi ta kết hợp với các lệnh điều kiện <b:if> của blogspot thì sẽ dễ dàng tùy biến cho thủ thuật.

Ví dụ: Mở liên kết trên tab mới chỉ ở trang chủ thì ta chèn như thế này

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<base target='_blank'/>
</b:if>

Đối với trang đọc bài thì thế này:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<base target='_blank'/>
</b:if>

Đối với một trang bất kì :

<b:if cond='data:blog.url == "URL trang bất kì"'>
<base target='_blank'/>
</b:if>

Thứ Bảy, 19 tháng 2, 2011

Blogspot - SEO với Description Meta Tag

Một trong những cách hiệu quả để cải thiện SEO cho blog là add thêm các thẻ meta như Description và Keyword. Description Tag giúp Search Engine biết được trang web nói về chủ đề gì, còn Keyword Tag là các từ khóa liên quan đến nội dung blog.

Thông thường chúng ta chèn các thẻ Meta bên dưới <head> như thế này:

<meta content='Chủ đề' name='description'/>
<meta content='Từ khóa' name='keywords'/>

Vấn đề chính là ở đây, nếu chèn như trên thì tất cả các bài đăng trên blog sẽ có cùng Description Meta Tag, điều này rất là không tốt cho SEO bởi vì:

- Google sử dụng Meta Description của blog như là một đoạn mô tả trong trang kết quả tìm kiếm (Google SERP), nếu tất cả các bài đăng của bạn đều có phần mô tả giống nhau sẽ khiến Google nhầm lẫn. Ví dụ bạn đăng một thủ thuật về SEO nhưng nó lại có cùng Description với một bài đăng khác về jQuery, kết quả là chẳng bài đăng nào được ưu tiên trên Google cả.

- Google sẽ liệt kê blog của bạn vào loại duplicate contents (trùng lặp nội dung). Webmaster Tools cũng sẽ đưa ra cảnh báo.

Chúng ta giải quyết vấn đề này bằng cách add từng Description cho mỗi bài đăng, nhưng cách này hơi bất tiện nếu blog có quá nhiều bài và khiến template trở nên nặng nề rối rắm. Cách khả thi hơn là giới hạn Description Meta Tag chỉ xuất hiện ở trang chủ, như vậy Google sẽ liệt kê phần nội dung của bài đăng thành kết quả tìm kiếm. Edit template HTML rồi thay đổi các Meta Tag như sau:

<b:include data='blog' name='all-head-content'/>
<meta content='Các từ khóa' name='keywords'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta content='Chủ đề' name='description'/>
</b:if>

Ngoài ra, ta có thể add thêm Description Meta Tag cho các Static Pages của blog để tăng khả năng có Sitelinks.

dùng đoạn mã sau:

<b:if cond='data:blog.url == "Static Page URL"'>
  <meta name='description' content='Giới thiệu'/>
</b:if>

Hy vọng thủ thuật SEO này có ích cho các thần dân Blogger.

Thứ Tư, 16 tháng 2, 2011

Tạo nút Back to Top với hiệu ứng từ jQuery

Hôm nay tình cờ ghé thăm Hư Trúc Blog thì thấy một cái Back to Top Button khá đẹp, sử dụng hiệu ứng trượt từ jQuery, và đặc biệt là nó ẩn/hiện khi cần thiết. Với những trang web có phần nội dung khá dài thì nút Back to Top này giúp người đọc tiết kiệm thời gian khi phải rê chuột lên trên cùng của trang. Đem về áp dụng thử trên Blogspot, thế là có bài đăng mới.

Xem demo

Chèn đoạn code sau phía trên </body> trong template:

<style type='text/css'>
#bttop{border:1px solid #4adcff;background:#24bde2;text-align:center;padding:5px;position:fixed;bottom:35px;right:10px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;}
#bttop:hover{border:1px solid #ffa789;background:#ff6734;}
</style>
<div id='bttop'>BACK TO TOP</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},800);});});</script>

Hope you like it !

Thứ Hai, 14 tháng 2, 2011

Lựa chọn Template cho Blogger

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 (Firefox, Chrome, IE...) để 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

Thứ Sáu, 11 tháng 2, 2011

Tiện ích 3D Flash Slider cho Blogger : PieceMaker

PieceMaker là một trong hai plugin 3D Image Slider nổi tiếng nhất của Wordpress. Trong khi cu3er chỉ dừng ở phiên bản Beta và bắt đầu thu phí trên phiên bản chính thức thì PieceMaker đã có phiên bản 2 và vẫn hoàn toàn miễn phí. Với mục đích đem đến cho Blogger các tiện ích đẹp nhằm "thay đổi cái nhìn", lần này Noct sẽ hướng dẫn cách áp dụng PieceMaker trên Blogspot.

Download PieceMaker tại đây.

Tiến hành giải nén file vừa tải về, được một thư mục, trong đó chúng ta chỉ quan tâm tới các file sau:

- swfobject.js
- piecemaker.xml
- piecemaker.css
- piecemaker.swf

Bạn upload các file này lên DROPBOX. Tiếp theo, log in vào Blogger, tạo một widget HTML/Javascript rồi paste đoạn code sau:

<script src="http://dl.dropbox.com/u/11103024/scripts/swfobject/swfobject.js" type="text/javascript">
</script>

<center><div id="piecemaker">
Put your alternative Non Flash content here.
</div></center>

<script type="text/javascript">
      var flashvars = {};
      flashvars.cssSource = "http://dl.dropbox.com/u/11103024/piecemaker.css";
    flashvars.xmlSource = "http://dl.dropbox.com/u/11103024/piecemaker.xml";  
      var params = {};
      params.play = "true";
      params.menu = "false";
      params.scale = "showall";
      params.wmode = "transparent";
      params.allowfullscreen = "true";
      params.allowscriptaccess = "always";
      params.allownetworking = "all";   
      swfobject.embedSWF('http://dl.dropbox.com/u/11103024/piecemaker.swf', 'piecemaker', '940', '300', '10', null, flashvars, params, null);
</script>

Các link màu đỏ chính là các file mà chúng ta vừa upload lên DROPBOX, các giá trị màu xanh là kích cỡ của flash. Save widget.

Để tùy chỉnh Flash thì chúng ta edit file piecemaker.xml trong thư mục Public bằng Notepad, nó sẽ có một đoạn như thế này:

<Image Source=".../piecemaker2.png" Title="Lots of new Features">
   <Text>&lt;h1&gt;New hot Features&lt;/h1&gt;&lt;p&gt;The all new Piecemaker comes with lots of ...&lt;/p&gt;</Text>
    <Hyperlink URL="http://noct-land.blogspot.com" Target="_blank" />
 </Image>

Bạn chỉ việc thay đổi link ảnh, link feature và phần miêu tả cho phù hợp rồi save lại, nó sẽ tự động được cập nhật lên DROPBOX.

Ngoài ra, ta cũng có thể tùy chỉnh các hiệu ứng Slide theo ý thích cũng bằng cách edit piecemaker.xml, chi tiết thì bạn đọc hướng dẫn trên trang chủ chứ mình cũng không thể nói hết ở đây được.

Hiện tại thì mình thấy PieceMaker rất phổ biến bên Wordpress nhưng lại khá khiêm tốn trên Blogger, hy vọng trong tương lai sẽ có nhiều designer sử dụng Flash 3D này trên Blogspot.

Thứ Tư, 9 tháng 2, 2011

Simplista Template

Mình từng giới thiệu Glow Template được convert từ theme wordpress cùng tên, tuy vậy phiên bản wordpress của nó là trả phí (premium) nên có thể dính tới vấn đề bản quyền nếu bị report. Lần này Noct chia sẻ một template khác được chính mình convert từ một theme wordpress của WPNow, đó là Simplista. Vì là theme free nên template được convert này có thể tự do sử dụng mà không lo lắng gì. Đặc biệt hơn, Simplista được làm dựa trên
template nổi tiếng Minima, nên có ưu thế vượt trội về SEO và tốc độ, đồng thời rất dễ tùy biến đối với những người đã quen thuộc với Minima.

Screenshot | Demo | Download

Để cài đặt banner ở header, click chỉnh sửa widget rồi paste đoạn code sau:

<a href="http://noct-land.blogspot.com"><img src="http://www.wpnow.com/data/banners/468x60l.jpg"/></a>

Để thay đổi chiều cao các cột footer, tìm các dòng sau:

#leftcolumn { ...height:230px; }

#middlecolumn { ...height:230px; }

#rightcolumn { ...height:230px; }

Thay đổi các giá trị màu đỏ cho phù hợp, chúng nên bằng nhau.

Nếu bạn sử dụng template này, vui lòng giữ nguyên phần credit.