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ả.
Chủ Nhật, 27 tháng 2, 2011
Blogger Template : Perception
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 ?
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
<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 == "item"'>
<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
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 == "index"'>
<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
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
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
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><h1>New hot Features</h1><p>The all new Piecemaker comes with lots of ...</p></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
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.
Để 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.
Nếu bạn sử dụng template này, vui lòng giữ nguyên phần credit.
Đăng ký:
Bài đăng (Atom)