Noct Blog

Tạo Auto Readmore cho Blogger với Cutter.js

2012-06-11T11:21:00.004+07:00

Cách đây mấy tháng thì tôi có đọc bài giới thiệu về thư viện Cutter.js ở hỗn tạp blog, nhận thấy nó khá là thú vị. Thế là vào một ngày Chủ nhật rãnh rỗi mới thử áp dụng Cutter.js trên Blogger, kết quả thu được là một thủ thuật tạo readmore tự động mới, bèn đăng lên đây để mọi người tham khảo.

Demo

Khác với các thủ thuật auto readmore từ trước đến nay, Cutter.js giúp ta giữ lại được các thẻ HTML như in đậm, in nghiêng, màu chữ...

Đầu tiên, bạn vào phần chỉnh sửa HTML của template, chọn mở rộng mẫu rồi chèn đoạn sau phía trên </head> :

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<style type='text/css'>

.post-body img { display:block; float:left; margin-right: 10px; width:100px; height:100px }

</style>

<script src='http://noctsvn.googlecode.com/svn/trunk/cutter.js'/>

</b:if>

Tiếp tục tìm đến đoạn <data:post.body/> và thay thế nó bằng đoạn sau:

<div class='post-body'>

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<span expr:id='data:post.id'><data:post.body/></span>

<script type='text/javascript'>

var snippet = document.getElementById(&quot;<data:post.id/>&quot;);

Cutter.run(snippet, snippet, 40);

</script>

<b:else/><data:post.body/></b:if>

<div class='clear'/>

<b:if cond='data:post.hasJumpLink'>

<a class='jump-link' expr:href='data:post.url + &quot;#more&quot;'>Read More</a><b:else/>

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Read More</a>

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

</div>

Lưu lại và kiểm tra kết quả, bạn có thể thay đổi các giá trị như số kí tự (40) hoặc kích thước ảnh đại diện (100x100). Theo cơ chế hoạt động của Cutter.js thì nó sẽ cắt 40 kí tự đầu tiên trong bài đăng để hiển thị ra trang chủ và dĩ nhiên là giữ nguyên định dạng HTML. Cũng vì vậy nên nếu không có ảnh nào được chèn giữa 40 kí tự này thì sẽ không có ảnh thumbnail, bạn cần lưu ý điều này và nên đặt một tấm ảnh lên trên cùng của bài đăng để làm ảnh đại diện ở trang chủ.

Tệp Cutter.js trong bài này đã được lược bỏ một số thứ không cần thiết cho gọn bớt (4kb), bạn có thể upload sang host khác hoặc chèn thẳng vào template.

Accordion Slider

2012-04-19T18:02:00.065+07:00

Hôm nay mình sẽ giới thiệu một loại jQuery Slider mới nhưng lại không mới:

Demo

Hẳn bạn đã nhận ra đây chính là một nâng cấp của Kwicks Slider mà Noct từng đăng trước đây. Hai tính năng sáng giá nhất của Accordion Slider này chính là hỗ trợ Video và Lightbox.

Để chèn slider này vào blog thì bạn vào phần HTML của blog tìm đoạn:
<div id='content-wrapper'>
hoặc bất cứ vị trí nào trong template mà bạn thấy phù hợp, chèn phía trên nó:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

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

<script src='http://noctland.googlecode.com/files/accordion.js' type='text/javascript'/>

<b:section id='slider' maxwidgets='1' showaddelement='no'>

<b:widget id='HTML100' locked='true' title='Slider' type='HTML'/>

</b:section>

</b:if>

Lưu ý nếu trong site của bạn đang dùng các thủ thuật jQuery khác thì hãy xóa dòng màu đỏ. Đoạn code trên sẽ tạo một tiện ích HTML/Javascript mới trên blog của bạn, hãy quay lại Phần tử trang và tiếp tục chèn vào tiện ích mới .

Chỉ việc chỉnh sửa lại nội dung Slider theo ý bạn và kiểm tra kết quả.

Auto-Readmore Evolution

2012-04-13T09:17:00.003+07:00

Cái script này thì quá nổi tiếng rồi, ít nhất chúng ta đã dùng qua nó 1 lần. Hầu hết các blog thủ thuật đều ít nhiều đề cập tới Auto-readmore, vậy nên mặc dù chưa hề đăng và không hề dùng auto-readmore nhưng nó vẫn nằm trong top keyword của Noct Blog.

Do đó để vớt vát traffic thì hôm nay mình sẽ đăng cái script auto-readmore đang dùng cho mấy template gần đây, hy vọng bạn sẽ có thêm 1 lựa chọn mới khi sử dụng thủ thuật phổ biến này.

Vậy có gì mới ? Câu trả lời là không có gì sáng tạo ở đây cả, chỉ là chế biến lại cái script cũ để cải thiện tốc độ tải và dễ tùy biến hơn.

Demo

Như bạn đã thấy trong demo thì ảnh thumbnail đã được lấy một cách đẹp và nhanh hơn thay vì resize lại:

----->

Tuy vậy đối với ảnh không phải từ Picasa mà copy từ site khác thì vẫn được resize lại nhưng không được đẹp cho lắm :

----->

Trước khi thực hiện thủ thuật này thì bạn nên sao lưu lại template gốc để đề phòng, sau đó vào phần chỉnh sửa HTML rồi chèn đoạn CSS sau phía trên ]]></b:skin>

.thumb,.no-thumb{float:left;margin-right:15px;width:164px;height:164px;overflow:hidden;position:related}

.no-thumb{display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih-bNVffbitoN3LZbnFq7pZYmtQgQn75RKbQQrxtbq8SUQWI8Wr7WwYgXpS5nuUAnvhsVhevVmYLqoNAWsT5b5mPbyyDXAcI_j_UWNV6h7mOujczGHd3ndtvvsO8ioTedaTcxXu8kNzAM/) 0 0 no-repeat;}

a.jump-link{font-weight:bold}

Còn đoạn script này thì chèn bên dưới ]]></b:skin>

<script type='text/javascript'>//<![CDATA[

var snippet=60; G="s164-p";

function H(b,a){return b.replace(/<.*?>/gi,"").split(/\s+/).slice(0,a-1).join(" ")} function rm(b){var b=document.getElementById(b),a="",a=b.getElementsByTagName("img");if(1<=a.length){C=a[0].src;B=C.split("/");D=B[2];if(-1!=D.indexOf("blogspot")||-1!=D.indexOf("googleusercontent")||-1!=D.indexOf("ggpht"))F=B[7],C=-1==F.indexOf(".")?C.replace(F,G):B[0]+"//"+B[2]+"/"+B[3]+"/"+B[4]+"/"+B[5]+"/"+B[6]+"/"+G+"/"+B[7];a='<div class="thumb"><img src="'+C+'" /></div>'}else a='<div class="no-thumb"></div>';b.innerHTML=a+H(b.innerHTML,snippet)+"..."};

//]]></script>

Màu đỏ là kích thước của ảnh thumb, bạn có thể sửa lại nhưng nên để chúng có giá trị bằng nhau.
Màu xanh là url ảnh thumb mặc định khi bài đăng không chứa ảnh nào.
60 là số kí tự đoạn trích dẫn, có thể sửa lại.

Cuối cùng, chọn mở rộng tiện ích tìm đến <data:post.body/> sửa nó thành:

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<span expr:id='&quot;p&quot; + data:post.id'><data:post.body/></span>

<script type='text/javascript'>rm(&quot;p<data:post.id/>&quot;)</script><b:else/><data:post.body/></b:if>

<b:if cond='data:post.hasJumpLink'>

<a class='jump-link' expr:href='data:post.url + &quot;#more&quot;'>Read More</a><b:else/>

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Read More</a>

</b:if>

</b:if>

<div class='clear'/>

Save template lại, vậy là gần như xong, nếu trong template của bạn có đoạn dưới đây thì xóa nó đi:

<b:if cond='data:post.hasJumpLink'>

<div class='jump-link'>

<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>

</div>

</b:if>

Code này hoàn toàn tương thích với read-more mặc định của Blogger, và nếu bạn siêng chèn thẻ more cho bài đăng thì tốc độ của nó có thể gần ngang thủ thuật auto-readmore không dùng javascript, và đoạn trích dẫn thì chắc chắn là dài hơn. Về SEO thì có thể yên tâm là toàn bộ HTML của bài đăng vẫn hiển thị trong source của blog nên không ảnh hưởng.
Một lần nữa cám ơn bác Duy Pham đã góp gió

Cập nhật 15/4/2012: thay đổi cách lấy thumb đẹp hơn đối với ảnh ngoài Picasa

Newscast 1.1 Dark

2012-04-09T10:29:00.002+07:00

Newscast Template được Noct chia sẻ cách đây khá lâu và đã nhận được sự quan tâm của rất nhiều người, vì vậy nên lần này Noct tung ra bản update 1.1 sửa một số lỗi, thay Slider mới, bổ sung comment phân cấp và skin màu đen ~~sexy.~~

Demo | Download

Cách sử dụng thì y như hướng dẫn cũ, chỉ khác .

Hy vọng bạn sẽ thích Newscast 1.1

do mục hỏi đáp đã quá dài với hơn 400 comment hơi bất tiện cho mọi người nên Noct đã tạo mục mới, tự gọi là Ver. 2

Khung comment đẹp (có phân cấp)

2012-02-26T10:03:00.011+07:00

Đâ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 phía trên ]]></b:skin>
Save template lại và test.

Để chèn vào khung comment mới này thì bạn tham khảo bài viết của Duy Pham

Sửa lỗi avatar của Blogger

2012-01-31T13:32:00.000+07:00

Dạo gần đây Blogger đã tiến hành nhiều cập nhật, đây là một điều đáng mừng để nền tảng này ngày càng hoàn thiện. Nhưng có một số update gây khá nhiều phiền phức, một trong số đó là lỗi avatar (lệch khung, không đúng kích thước... )

Căn nguyên của lỗi này là do một số đoạn CSS đã được thêm vào trong file bundle.css như thế này:

.avatar-image-container {
    float: left;
    max-height: 36px;
    overflow: hidden;
    width: 36px;
}
.avatar-image-container img {width: 36px;}

Theo như trên thì kích thước avatar tối đa mà Blogger qui định là 36x36, ta có thể thay đổi lại để phù hợp với template của mình. Ví dụ trong Newcast Template, để sửa lỗi avatar thì ta thêm đoạn CSS sau phía trên ]]></b:skin>:

.avatar-image-container {  
     width: 60px !important; 
     max-height: 60px !important; 
     float:none !important;
}
.avatar-image-container img { max-width:60px !important; width: 60px !important; }

Như vậy kích thước avatar đã được đổi lại là 60x60. Hy vọng mẹo trên có ích cho những ai đang đau đầu vì vấn đề không đáng có này.

Bloggy Template

2011-12-29T18:32:00.000+07:00

Dạo này bận nhiều chuyện nên không tiện viết blog, tuy vậy vẫn cố làm một template mới để chia sẻ cho mọi người, coi như là quà năm mới.

Với bố cục đơn giản nhưng bắt mắt, Bloggy Template thích hợp cho các blog cá nhân, nhật kí...

Demo | Download

- Tác giả sẽ không trả lời các câu hỏi về vấn đề chỉnh sửa tùy biến template, chỉ nhận góp ý về các lỗi phát sinh.
- Những ai cố ý thay đổi thông tin tác giả trong template thì không nên comment ở đây, vì trước sau gì cũng bị xóa.

Dropdown menu cho Newscast Template

2011-11-23T13:52:00.000+07:00

Newscast Template vốn có sẵn menu xổ dọc (dropdown) nhưng do nó xung đột với Slider nên Noct đã tạm thời ẩn nó đi. Giờ đây vấn đề đã được giải quyết, nếu bạn muốn sử dụng đồng thời cả dropdown menu và Kwicks Slider thì làm như sau:

- Vào phần chỉnh sửa HTML của template tìm dòng:

.catnav_wrapper { ... z-index: 4; ... }

sửa thành:

.catnav_wrapper { ... z-index: 9999; ... }

Tiếp tục tìm:
<li><a href='#'><strong>Browser</strong><span>Random Stuff</span></a></li>
sửa thành

<li><a href='#'><strong>Browser</strong><span>Random Stuff</span></a>

  <ul class='sub-menu'>

   <li class='menu-item'><a href='#'><strong>Community</strong></a></li>

   <li class='menu-item'><a href='#'><strong>Browser</strong></a></li>

   <li class='menu-item'><a href='#'><strong>Slides</strong></a>

    <ul class='sub-menu'>

     <li class='menu-item'><a href='#'><strong>Tech News</strong></a></li>

     <li class='menu-item'><a href='#'><strong>Adobe</strong></a></li>

    </ul>

   </li>

  </ul>

</li>

Như vậy trong mục Browser của menu đã có thêm 2 menu con với hiệu ứng jQuery. Bạn chỉ việc sửa lại hoặc thêm/bớt cho phù hợp với nội dung site của bạn.

Tiện ích Popular Posts với CSS3

2011-10-17T22:41:00.001+07:00

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 == &quot;false&quot;'>

<b:if cond='data:showSnippets == &quot;false&quot;'>

<!-- (1) No snippet/thumbnail -->

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

<b:else/>

<!-- (2) Show only snippets -->

<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 == &quot;false&quot;'>

<!-- (3) Show only thumbnails -->

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

<!-- (4) Show snippets and thumbnails -->

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

Áp dụng PrettyPhoto Plugin cho tất cả image

2011-09-28T07:38:00.009+07:00

Nếu đang áp dụng PrettyPhoto cho blog của mình thì bạn sẽ nhận ra là phải chèn thuộc tính rel="prettyphoto" cho từng ảnh, nay sự phiền hà đó không còn nữa, chỉ cần ảnh có anchor tag (a tag) là sẽ tự động kích hoạt lightbox. Cách làm này thật ra không có gì ghê gớm, tuy vậy cũng ghi ra đây cho những ai cần.

Đoạn code của thủ thuật là như thế này:

<link href='.../prettyPhoto.css' media='screen' rel='stylesheet' type='text/css'/>

<script src='.../jquery.min.js' type='text/javascript'/>

<script src='.../jquery.prettyPhoto.js' type='text/javascript'/>

<script type='text/javascript'>

jQuery("a[rel^='prettyPhoto']").prettyPhoto();

</script>

Chỉ cần sửa đoạn màu đỏ thành thế này:
jQuery(".post-body a img").parent().prettyPhoto();
Kiểm tra kết quả, bạn nhận ra tất cả ảnh trong bài đăng đã tự động kích hoạt lightbox, bạn cảm thấy "sướng".

Template : GameNow

2011-09-16T19:50:00.000+07:00

Một free template mới của Noct, được convert từ WP theme cực kì nổi tiếng : GameNow. Template này phù hợp cho các site chia sẻ tài nguyên (game, software... ) hoặc tin tức.
- Ưu điểm: đẹp, load nhanh, SEO tốt .v.v...
- Khuyết điểm: ngoài việc thiếu comment phân cấp thì chẳng có khuyết điểm nào cả.

Demo | Download

Hãy nhanh chóng tải về và trải nghiệm GameNow Template by Noct. Chúc vui.

SimpleBlog Premium Template

2011-09-05T17:55:00.002+07:00

Xin giới thiệu với các bạn một template mới do tự tay Noct thiết kế : SimpleBlog. Đây là một template có trả phí, SimpleBlog có các đặc điểm sau:

- 2 cột (main và sidebar)
- Footer 3 cột.
- 3 màu để bạn lựa chọn.
- Tích hợp Nivo Slider.
- Menu trượt jquery...

- Tích hợp sẵn các tiện ích Popular Posts, Hot News, Related Posts (có thumbnail).
- SEO đã được tối ưu (theo khả năng của Noct).
- Tốc độ load nhanh.

Live Demo

Nếu bạn đang xây dựng website/blog (trên nền Blogspot) một cách nghiêm túc thì không thể thiếu một template thật sự chất lượng và không kém phần bắt mắt. Template này được Noct đầu tư khá nhiều công sức như bạn đã thấy, nếu đã từng trải nghiệm Newscast Template thì bạn cũng có thể dễ dàng sử dụng SimpleBlog. Giá bán là 10$ thanh toán qua Paypal (xem chi tiết ở Blogtipsworld), riêng những ai muốn thanh toán qua ATM hoặc tài khoản ngân hàng thì vui lòng liên hệ với Noct.

PS: template có sử dụng tiện ích bài viết liên quan có hình ảnh từ Duy Pham Blog.

Khung ghi chú cho blog

2011-08-10T17:26:00.001+07:00

Đây là một thủ thuật CSS đơn giản, nó cũng tương tự như khung thông báo. Do có nhiều người hỏi cái này nên bèn kiếm mẫu nào đẹp đẹp rồi đăng luôn để blog bớt mốc meo. Việc có một khung ghi chú pro sẽ khiến "đẳng cấp" của bạn được nâng cao.

Để chèn phần ghi chú giống như thế này thì trong khi đăng bài bạn chuyển sang phần HTML của bài đăng rồi copy + paste đoạn sau:

<style type="text/css">

.note{background:#FFEA97 url(http://goo.gl/w4a2f) repeat-x 0 0;color:#796100;width:83%;font-weight:normal;padding:13px 15px 0;margin-bottom:2.5em;border:1px solid #E1B500;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;-moz-box-shadow:1px 1px 2px rgba(0,0,0,.4);-webkit-box-shadow:1px 1px 2px rgba(0,0,0,.4);box-shadow:1px 1px 2px rgba(0,0,0,.4);position:relative;left:34px}.note p{margin-bottom:1.5em}.note p:last-child{margin-bottom:0}.note ul{margin-left:8px;margin-bottom:1.5em}.note ul:last-child{margin-bottom:0}.note li{background:url(http://goo.gl/6kexs) no-repeat 0 -95px;list-style-type:none;padding-left:18px;margin-bottom:.75em}.note h5{font-size:14px;font-weight:bold;margin:0 0 .65em}.note span{background:url(http://goo.gl/6kexs) no-repeat 100% 0;width:33px;height:40px;position:absolute;left:-34px;top:9px}

</style>

<div class="note"><h5>Lưu ý!</h5>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>

<ul>

<li>Vivamus mattis nibh sed purus ullamcorper mollis.</li>

<li>Phasellus egestas nulla lobortis est eleifend dapibus.</li>

<li>Morbi at nisi blandit eros rhoncus gravida et quis leo.</li>

</ul><span></span></div>

Sửa lại phần nội dung cho phù hợp là được.

Chém gió

2011-07-12T17:13:00.007+07:00

Lâu rồi không đăng bài nào mới nên bây giờ chém gió tí, nhân tiện có một số thông báo nhỏ. Việc đầu tiên muốn nói là Noct đang trong kì "nghỉ hè" và cũng đang bận một số việc riêng nên có thể bạn sẽ không thấy thủ thuật hoặc template mới trong vòng một thời gian nữa (chưa xác định).

Như đã biết, tháng vừa rồi Noct đã tung ra template Newscast và nhận được sự quan tâm của rất nhiều người, đến nỗi tài khoản Wufoo gói free của mình cũng hết "bandwidth" và phải đến 20 tháng này mới reset lại, vì vậy nên phải đăng kí thêm 1 tài khoản Wufoo nữa để tiện cho việc liên hệ. Tuy vậy vẫn cảm thấy rất vui.

Trong phần hướng dẫn cài đặt thì Noct đã từng nói là bạn phải tự upload file .js lên host khác, do lượng truy cập đến tài khoản googlecode của mình tăng đột biến nên Newscast.js sẽ bị xóa ngay lúc này để tránh bị block acc. Nếu không dùng đến Slider thì bạn không cần làm điều này và có thể xóa Newscast.js để tăng tốc blog.

Thế Noct còn giấu template nào không ?

Có nhưng lại không, có một template làm giúp người bạn cũng khá lâu rồi nhưng không đăng trên blog này, nếu bạn chưa biết thì xem ở đây. Download tại đây.

Thêm một tin vui nữa là Noct Blog đã có 3 sitelink, không nhiều nhưng cũng là thành quả của 6 tháng viết blog. Tiêu chí của blog này vẫn là chia sẻ các thủ thuật Blogger đơn giản, hiệu quả và "miễn phí". Tự hy vọng sẽ sớm trở lại viết blog :D

Update PSD Logo của Newscast cho những ai biết xài. Download tại đây.

Newscast Blogger Template

2011-06-21T05:53:00.011+07:00

Đây là template mới nhất và là template dạng Magazine đầu tiên của Noct, được convert từ Wordpress Theme cùng tên.

Screenshot

Như bạn đã thấy trong demo, Newscast Template có các tính năng sau:

- Kwicks Slider

- Page Navigation

- 125x125 Banners

- Các tiện ích Popular Posts, Recent Posts, Label Posts (không dùng javascript)

...

Nếu bạn đang cần một template có tốc độ load nhanh, SEO tốt và bắt mắt thì Newscast là một sự lựa chọn hoàn hảo. Rút kinh nghiệm lần trước, lần này Noct sẽ không post link tải trực tiếp mà sẽ share qua email. Nếu bạn thật sự quan tâm thì hãy liên hệ tại đây, tôi sẽ gởi template kèm hướng dẫn sử dụng tới địa chỉ email mà bạn đã điền. Hy vọng bạn sẽ thích template này.

Tạo Dropdown Menu đơn giản

2011-06-11T01:49:00.003+07:00

Lần trước có một bạn nào đó đã giới thiệu một Menu xổ dọc khá đẹp nhưng lại chưa biết cách áp dụng trên Blogger. Sau khi tìm hiểu thì mình thấy loại menu này bố cục khá phức tạp, hơi khó để viết hướng dẫn nên đã loại bớt một số thành phần và điều chỉnh lại CSS, được kết quả như thế này:

Demo

Đầu tiên, bạn chèn đoạn sau ngay bên dưới thẻ <body> hoặc phía trên <div id='outer-wrapper'>

<link href='http://dl.dropbox.com/u/11103024/menu.css' media='screen' rel='stylesheet' type='text/css'/>

<b:section id='menu' maxwidgets='1' showaddelement='no'>

<b:widget id='HTML91' locked='false' title='Menu' type='HTML'/>

</b:section>

Đoạn mã trên sẽ tạo một tiện ích Javascript/HTML mới trên blog của bạn, hãy quay lại Phần tử trang rồi tiếp tục chèn vào tiện ích này:

<ul class="menu">

<li class="no_drop"><a href="#">Home</a></li>

<li><a href="#" class="drop">1 Column</a>

<div class="dropdown_1column">

<div class="col_1">

<ul>

<li><a href="#">FreelanceSwitch</a></li>

<li><a href="#">Creattica</a></li>

<li><a href="#">WorkAwesome</a></li>

<li><a href="#">Mac Apps</a></li>

<li><a href="#">Web Apps</a></li>

<li><a href="#">NetTuts</a></li>

<li><a href="#">Design</a></li>

<li><a href="#">Logo</a></li>

<li><a href="#">Flash</a></li>

<li><a href="#">Illustration</a></li>

<li><a href="#">More...</a></li>

</ul>   

</div></div></li>



<li><a href="#" class="drop">2 columns</a>

<div class="dropdown_2columns">



<div class="col_1">

<h3>Some Links</h3>

<ul>

<li><a href="#">ThemeForest</a></li>

<li><a href="#">GraphicRiver</a></li>

<li><a href="#">ActiveDen</a></li>

</ul>   

</div>



<div class="col_1">

<h3>Useful Links</h3>

<ul>

<li><a href="#">NetTuts</a></li>

<li><a href="#">VectorTuts</a></li>

<li><a href="#">PsdTuts</a></li>

</ul>   

</div>



<div class="col_1">

<h3>Other Stuff</h3>

<ul>

<li><a href="#">FreelanceSwitch</a></li>

<li><a href="#">Creattica</a></li>

<li><a href="#">WorkAwesome</a></li>

</ul>   

</div>



<div class="col_1">

<h3>Misc</h3>

<ul>

<li><a href="#">Design</a></li>

<li><a href="#">Logo</a></li>

<li><a href="#">Flash</a></li>

</ul>   

</div></div></li></ul>

Lưu lại và kiểm tra kết quả. Do mã CSS của menu khá dài nên Noct đã chuyển chúng vào trong file menu.css để tiện đăng bài, bạn có thể chuyển ngược lại vào phía trên thẻ </b:skin> trong template để chỉnh sửa, và đừng quên xóa dòng màu xanh.

Kwicks Slider for Blogger

2011-05-28T15:45:00.026+07:00

Trước giờ chưa viết bài nào về jQuery Slider và cũng có một số bạn hỏi cách làm một Slider ở trang chủ nên trong bài này Noct sẽ giới thiệu một Slider khá ấn tượng, đó là Kwicks Slider.

Xem demo

Loại Slider này thường thấy ở Wordpress, nhưng có thể đây là lần đầu tiên bạn thấy nó trên Blogger. Nội dung trên Slider thường là các bài đăng mà bạn tâm đắc, như vậy sẽ thu hút thêm 1 lượng traffic cho blog của bạn và góp phần xây dựng Sitelinks theo ý muốn.

Như thường lệ, chèn đoạn CSS sau phía trên </b:skin>

#slider{height:300px;margin:auto;padding:20px 0;width:900px;position:relative}

#slider h2{display:none}

.kwicks_container{width:900px;margin:0 auto}

#top .kwicks{list-style:none;position:relative;margin:0;padding:0;width:900px;height:300px;z-index:2}

#top .kwicks li{display:block}

.kwicks li{display:block;float:left;overflow:hidden;padding:0;cursor:pointer;width:180px;height:300px;z-index:2}

.kwicks li a{outline:none;display:block;z-index:100;cursor:pointer;text-decoration:none;color:#FFF}

li#kwick{-moz-box-shadow:0 0 10px #333;-webkit-box-shadow:0 0 10px #333;box-shadow:0 0 10px #333}

.kwicks a:hover,.kwicks #active{color:#f1f1f1}

.slider{background:#222;filter:alpha(opacity=80);opacity:0.8;-moz-opacity:0.8}

.slider{width:570px;position:absolute;display:block;bottom:0;left:0;z-index:2;padding:5px 15px;font-size:12px;line-height:1em;cursor:pointer}

.sliderheading{display:block;font-size:15px;margin:10px 0}

Lưu lại, tiếp tục tìm đến đoạn sau:
<div id='content-wrapper'>
Chèn phía trên nó:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

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

<script src='http://noctland.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>

<script src='http://noctland.googlecode.com/files/jquery.kwicks-1.5.1.js' type='text/javascript'/>  

<b:section id='slider' maxwidgets='1' showaddelement='no'>

<b:widget id='HTML90' locked='true' title='Slider' type='HTML'/>

</b:section> 

</b:if>

Đoạn code trên sẽ tạo một tiện ích HTML/Javascript mới trên blog của bạn, hãy quay lại Phần tử trang và tiếp tục chèn vào tiện ích này đoạn sau:

<div class="kwicks_container">

<ul class="kwicks">



<li id="kwick">

<a href="URL">

<span class="slider">

<span class="sliderheading">Post Title 1</span></span>

<img width="600" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjENJnjeEyt4c8CVfIgcy2G0Xih4LOgj6gVRxHeQ_OxPM_zNwxkqy6tWjQ0z4LTqDAfWDoMIlQ9a-TTqkAaAVea6s0s-DjBwlJMYOezcPtwmLQzI5-rGPd6r_S29oLfO7CSOVvd01gurzE/"/></a></li>



<li id="kwick">

<a href="URL">

<span class="slider">

<span class="sliderheading">Post Title 2</span></span>

<img width="600" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Avzk9U3L9Wjy-d4ja0EKFvVhEV2OgKVaV4IR3nPzWnfw3jFcNR5BCmr_lvxPhWBE7taSeZ5RpaHEAE9klHnq8tEr0Befef3LMZ7OvEk7VrwiovaQoCsrIYipKd5qsm5C7KQVUUxDmko/"/></a></li>



<li id="kwick">

<a href="URL">

<span class="slider">

<span class="sliderheading">Post Title 3</span></span>

<img width="600" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKPWNy9RIpSkPqID_7oXpSAb6HUOtdSMHWjMSrXVbpxyGQ8ru708W20T1ahqKaMtS4MX_bIFZ8dwPenShJHmMsm8bCJ1ZOhMmmDOO-he5gEcslDw3uBT5pMt0v7QIrXAdggOgJ7Fk5Los/"/></a></li>



<li id="kwick">

<a href="URL">

<span class="slider">

<span class="sliderheading">Post Title 4</span></span>

<img width="600" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDn6y7AKsMf3QBr1haU2WlGhu9JLL_jN_YKY_QcUz7BqBQK8OMvEnptC6eVwknUsMoWsRxP7P1GbV0vHdb3v_jY8Ro-OWyfmI9whriMywGrtWUNfwsWlZ_B47KUE0V2yB4OECxeKKYWvI/"/></a></li>



<li id="kwick">

<a href="URL">

<span class="slider">

<span class="sliderheading">Post Title 5</span></span>

<img width="600" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpxWOD1afA4YRmKU0rsMFZXkmyQDG8c0PHQr2uQQH-OxCsIKMRie6WO_BxB0QzONfomLF2rCfb897XI-A0G0EBc0LF-f_OTGjFa9rzt_FQWKFIRAB0IfXZrK2IjNb9lZh4Q_D3tvjwsYQ/"/></a></li>



</ul></div>

Các dòng tô màu bạn có thể sửa lại cho phù hợp, kích thước ảnh theo mặc định là 600x300. Hy vọng bạn sẽ thích Slider này.

Blogspot : một số vấn đề thường gặp

2011-05-20T14:27:00.007+07:00

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ùng Blogger 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 + "?&max-results=10"' 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 ích Popular 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ên Picasa, 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ạn CSS 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 (Dropbox, Google 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.

jQuery là gì ?

2011-05-11T13:51:00.004+07:00

Nếu để ý bạn sẽ nhận ra trên blog này có rất nhiều thủ thuật sử dụng jQuery, vậy thực chất jQuery là cái gì và tại sao Noct lại "nghiện" nó đến vậy ?

jQuery là một Javascript Framework, một thư viện kiểu mới của Javascript hỗ trợ các nhà lập trình web tạo ra các tương tác động trên website. jQuery được khởi xướng bởi John Resig vào năm 2006 (ông này hiện đang làm trưởng dự án cho Mozzila), jQuery có mã nguồn mở và hoàn toàn miễn phí cho mọi người sử dụng. Thư viện javascript này phát triển rất nhanh, có một cộng đồng sử dụng đông đảo và được rất nhiều lập trình viên trên thế giới tham gia hoàn thiện, phát triển và viết Plugin cho nó.

Tại sao dùng jQuery ?

jQuery đơn giản hóa cách viết Javascript và tăng tốc độ xử lý các sự kiện trên trang web, giúp tiết kiệm thời gian và công sức rất nhiều so với việc ngồi viết javascript theo cách thông thường. Đúng như khẩu hiệu của nó "Viết ít hơn, làm nhiều hơn", nếu không dùng jQuery thì một chuyên gia cũng phải viết mất vài trang giấy mới làm được một nút Back to Top với hiệu ứng trượt, trong khi đó dân nghiệp dư chỉ cần vài dòng code ngắn ngủi + jQuery là đã có thể "múa rìu qua mắt thợ". Bên cạnh đó, việc sử dụng jQuery giúp giải quyết tốt vấn đề xung đột giữa các trình duyệt web.

Ngoài jQuery còn có các thư viện javascript nổi tiếng khác như mooTools, Prototype, Dojo... thế nhưng jQuery có vẻ thu hút các web designer hơn là vì nó có các ưu điểm:
- Hỗ trợ tốt việc xử lí các vấn đề thường gặp (DOM, AJAX...)
- Tương thích nhiều trình duyệt web phổ biến.
- Nhỏ gọn, dễ dùng, có nhiều tài liệu hướng dẫn sử dụng chi tiết.
- Ít xung khắc với các thư viện Javascript khác.
- Có rất nhiều Plugin.
- Nếu nắm vững CSS thì bạn có thể học nó trong một tiếng !

jQuery có thể làm được những gì ?

Hướng tới các thành phần trong HTML: nếu không sử dụng thư viện Javascript này, bạn phải viết rất nhiều dòng code mới có thể đạt được mục tiêu là di chuyển trong cấu trúc cây (Document Object Model) của một tài liệu HTML và chọn ra các thành phần liên quan. jQuery cho phép bạn chọn bất cứ thành phần nào của tài liệu để "vọc" một cách dễ dàng như sử dụng CSS.

Thay đổi giao diện của một trang web: CSS là công cụ rất mạnh để định dạng một trang web nhưng nó có một nhược điểm là không phải tất cả các trình duyệt đều hiển thị giống nhau. Cho nên jQuery ra đời để lấp chỗ trống này, vì vậy bạn có thể sử dụng nó để giúp trang web có thể hiển thị tốt trên hầu hết các trình duyệt. Hơn nữa jquery cũng có thể thay đổi class hoặc những định dạng CSS đã được áp dụng lên bất cứ thành phần nào của HTML ngay cả khi trang web đó đã được trình duyệt load thành công.

Thay đổi nội dung của tài liệu: jQuery không chỉ có thể thay đổi bề ngoài của trang web, nó cũng có thể thay đổi nội dung của chính tài liệu đó chỉ với vài dòng code. Nó có thể thêm hoặc bớt nội dung trên trang, hình ảnh có thể được thêm vào hoặc đổi sang hình khác, danh sách có thể được sắp xếp lại hoặc thậm chí cả cấu trúc HTML của một trang web cũng có thể được viết lại và mở rộng. Tất cả những điều này bạn hoàn toàn có thể làm được nhờ sự giúp đỡ của API (Giao diện lập trình ứng dụng).

Tương tác với người dùng: cho dù công cụ bạn dùng có mạnh mẽ đến mấy, nhưng nếu bạn không có quyền quyết định khi nào nó được sử dụng thì công cụ đó cũng coi như bỏ. Với thư viện javascript như jQuery, nó cho bạn nhiều cách để tương tác với người dùng ví dụ như khi người dùng nhấp chuột vào đường link thì sẽ có gì xảy ra. Nhưng cái hay của nó là không làm cho code HTML của bạn rối tung lên chính là nhờ các Event Handler.

Tạo hiệu ứng động cho những thay đổi của tài liệu: để tương tác tốt với người dùng, các web designer phải cho người dùng thấy được hiệu ứng gì sẽ xảy ra khi họ làm một tác vụ nào đó. jQuery cho phép bạn sử dụng rất nhiều hiệu ứng động như mờ dần, chạy dọc chạy ngang v.v.. và nếu vẫn chưa đủ, nó còn cho phép bạn tự tạo ra các hiệu ứng của riêng mình.

Lấy thông tin từ server mà không cần tải lại trang web: đây chính là công nghệ ngày càng trở nên phổ biến Asynchronous JavaScript And XML (AJAX), nó giúp người thiết kế web tạo ra những trang web tương tác cực tốt và nhiều tính năng. Thư viện jQuery loại bỏ sự phức tạp của trình duyệt trong quá trình này và cho phép người phát triển web có thể tập trung vào các tính năng đầu cuối, đơn giản hoá các tác vụ javascript. Ngoài những tính năng như đã nêu ở trên, jQuery còn cho phép các nhà phát triển web viết code javascript đơn giản hơn nhiều so với cách truyền thống như là các vòng lặp và điều khiển mảng.

Nếu trước đây khi chưa có nhiều Javascript Framework mạnh như jQuery, các trang web đa phần là tĩnh, tính tương tác rất kém. Việc tự phát triển mã nguồn cho trang web khá phức tạp và mất nhiều thời gian. Có thể dùng Flash để bù đắp khiếm khuyết đó, thế nhưng Flash lại không có chút giá trị nào về SEO. Chính vì vậy các thư viện javascript mở như jQuery đang rất được chú ý. Đơn cử như việc Blogger sử dụng jQuery cho tính năng Dynamic View mới ra gần đây.

Ngay trên blog này sử dụng đến 6 hiệu ứng + 2 Plugin của jQuery (đang định bổ sung vài cái nữa), tất cả đều hoạt động rất mượt và ổn định. Mình hoàn toàn có thể bỏ bớt jQuery effect để đạt được tốc độ tối ưu cho blog, nhưng nếu như vậy thì Noct Blog chẳng khác gì các trang web tĩnh chán ngắt khác và chắc là sẽ không được nhiều người chú ý.

Bạn e ngại việc sử dụng thư viện jQuery khiến giảm tốc độ tải trang web ? Đúng, jQuery khiến trang web load chậm hơn một chút nhưng mình khẳng định là nhanh hơn nhiều so với đoạn code Recent Posts mà bạn vẫn thường dùng (tải feed về, xử lí feed, hiển thị...). Nếu vẫn cảm thấy chậm, bạn cần nâng cấp phiên bản mới của trình duyệt web hoặc tốt hơn hết là thay mới cỗ PC già cỗi của mình. Khi sử dụng jQuery thì bạn được nhiều hơn là mất, trang web của bạn trông sẽ chuyên nghiệp hơn, load chậm hơn một chút nhưng sẽ có nhiều visitor hơn. Cũng giống như là bạn đi tới cơ quan của mình bằng một chiếc xe xịn, bạn được nhiều người hâm mộ, bạn cảm thấy hài lòng mặc dù biết nó tốn xăng.

Phiên bản mới nhất của jQuery là 1.6 được cung cấp free tại địa chỉ https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js bởi các server cực mạnh của Google, bạn có thể sử dụng các phiên bản cũ hơn nếu thích. Cú pháp để chèn jQuery vào trong template là như thế này:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
Đừng chần chừ e ngại, hãy trải nghiệm jQuery bằng các thủ thuật đơn giản trên blog này, có thể bạn sẽ mê nó ngay.

Tất cả các hiệu ứng của jQuery chỉ cần dùng chung một liên kết đến jquery.js là đủ, và hãy đảm bảo là nó ở vị trí trên cùng.
Ví dụ:

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

<Code thủ thuật 1>

............................

<Code thủ thuật 2>

............................

Bài viết có sử dụng tư liệu của izwebz.com

Tạo nút Add Comment với hiệu ứng trượt

2011-05-04T03:02:00.005+07:00

Theo yêu cầu của một bạn, lần này Noct sẽ hướng dẫn cách làm nút Add Comment (đăng một nhận xét), thủ thuật này thích hợp cho các blog có nhiều nhận xét, khi đó người đọc đỡ phải rê chuột xuống dưới cùng để đăng comment. Ở đây bổ sung thêm hiệu ứng trượt của Jquery, được cải tiến từ nút Back to Top.

Xem Demo

Chèn đoạn CSS sau phía trên </b:skin>

a.add_comment{text-decoration:none;color:#fff}

.add_comment{float:right;padding:6px 10px;margin:20px;text-decoration:none;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;text-align:center;display:inline-block;background:#d43131;background:-moz-linear-gradient(top,#ffaa9a,#f8674b 5%,#d54746);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffa493),color-stop(.03,#f8674b),to(#d54746));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8674b',EndColorStr='#d54746'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8674b',EndColorStr='#d54746')";-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px solid #d1371c;border-bottom:1px solid #9f220d;color:#FFF;text-shadow:0 1px 1px #6f3a02}

.add_comment:hover{background:#c92929;background:-moz-linear-gradient(top,#ff9986,#ee5f43 5%,#d04443);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fa8772),color-stop(.03,#ee5f43),to(#d04443));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee5f43',EndColorStr='#d04443'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee5f43',EndColorStr='#d04443')";border-bottom:1px solid #9f220d}

.add_comment:focus{padding:7px 11px;color:#FFF;text-shadow:0 -1px 1px #894906;border:none;background:#bc2323;background:-moz-linear-gradient(top,#d04443,#ee5f43 95%,#d04443);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#d04443),color-stop(.9,#ee5f43),to(#d04443));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#d04443',EndColorStr='#ee5f43'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#d04443',EndColorStr='#ee5f43')";box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7;-webkit-box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7;-moz-box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7}

Save lại, tiếp tục click chọn mở rộng mẫu tiện ích, tìm dòng sau:
<b:includable id='comments' var='post'>
Chèn bên dưới nó:

<b:if cond='data:post.numComments != 0'>

<a class='add_comment' href='#comment-form'>Add a comment</a>

<div class='clear' />

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

<script type='text/javascript'>$('.add_comment').click(function(){$('html,body').animate({scrollTop:$(".comment-form").offset().top},1000);});</script></b:if>

Kiểm tra kết quả. Chúc thành công.

- Thay đổi các đoạn bôi đậm màu đỏ sẽ giúp ta "trượt" đến bất cứ thành phần nào trên trang web.

Tạo playlist nhạc cho Blog

2011-04-26T04:35:00.024+07:00

Bài viết này sẽ hướng dẫn cách tạo một playlist nhạc bằng Flash để chèn vào blog, không phải từ mp3.zing.vn hay bất cứ website âm nhạc nào mà là của chính bạn. Đây là một MP3 Flash Player sử dụng tệp xml tạo track list để chơi nhạc mp3 (và chỉ định dạng .mp3 mà thôi), ngoài ra thì MP3 Player này còn cho phép hiển thị cover riêng cho từng bài.

Demo bạn có thể xem ở dưới đây.

Xem screenshot nếu Playlist không load được do lag mạng

Đầu tiên bạn download Mp3 Flash Player tại đây, tiến hành giải nén được hai file là player.swf và playlist.xml. Tiếp theo, bạn upload 2 file này lên một dịch vụ hosting nào đó mà có hỗ trợ direct link. Ở đây mình up lên DROPBOX.

Khi đã có link direct của flash rồi thì bạn thay vào đoạn code bên dưới:

<object data="http://dl.dropbox.com/u/11103024/mp3player/player.swf?autostart=true&amp;playlist=http://dl.dropbox.com/u/11103024/mp3player/playlist.xml" height="226" type="application/x-shockwave-flash" width="408" wmode="transparent"><param name="movie" value="http://dl.dropbox.com/u/11103024/mp3player/player.swf?autostart=true&playlist=http://dl.dropbox.com/u/11103024/mp3player/playlist.xml"/></object>

Đoạn code trên bạn có thể chèn vào một tiện ích HTML/Javascript hoặc ngay trên bài đăng cũng được. Để add nhạc vào playlist thì chúng ta edit playlist.xml bằng Notepad, trong file xml này bạn sẽ thấy:

<song location = "URL bài nhạc" 

cover = "URL ảnh đại diện" 

title = "tựa đề bài hát"/>

Muốn thêm bao nhiêu bài hát vào list thì bạn chèn thêm bấy nhiêu đoạn mã ở trên. Xong rồi thì save lại, DROPBOX sẽ tự động cập nhật. Chúc bạn tạo được một playlist nhạc "không đụng hàng".

- Nhạc cũng nên upload lên DROPBOX luôn cho tiện.
- Kích thước ảnh cover phải là 150x150 pixel.

Khung thông báo cho blog

2011-04-17T17:10:00.003+07:00

Đôi khi bạn muốn thông báo cho các độc giả của blog mình về một sự kiện nào đó (ví dụ như chuyển domain hoặc đăng kí nhận tin...) thì việc tạo một Notification Box là cần thiết. Có nhiều cách để làm điều này, ở đây mình giới thiệu một ứng dụng nhỏ của Jquery trong việc tạo khung thông báo. Điểm đặc biệt của khung này là người đọc có thể tắt nó đi nếu muốn, như vậy sẽ đảm bảo tính thẩm mỹ cho blog của bạn.

Xem Demo

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

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<style type='text/css'>

.notification{height:70px;width:480px;display:block;position:fixed;bottom:10px;left:10px;/*Border Radius*/border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;/*Box Shadow*/-moz-box-shadow:2px 2px 2px #cfcfcf;-webkit-box-shadow:2px 2px 4px #cfcfcf;box-shadow:2px 2px 2px #cfcfcf}

.notification span{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2gLt1cKSExUXK4u-TDS9nvzH2u9Hz5tUahAgTQfkMhdYh7AVpk8PrRqaVTkerPO1OOVMsxUD1cjTYcf5IYyCD5mJ4eGpRF85zXMKjkocaaS6Z-ymRVqNf8hMYvgc-jSWbq4ovOeFuKEU/) no-repeat right top;cursor:pointer;display:block;width:19px;height:19px;position:absolute;top:-9px;right:-8px}

.notification p{width:400px;font-family:Arial,Helvetica,sans-serif;color:#323232;font-size:14px;line-height:21px;text-align:left;float:right;margin:10px 15px 0 0;*margin-top:15px;/*for lt IE8*/padding:0;/* TEXT SHADOW */ text-shadow:0 0 1px #f9f9f9}

.warning{border-top:1px solid #fefbcd;border-bottom:1px solid #e6e837;/*Background Gradients*/background:#feffb1;background:-moz-linear-gradient(top,#feffb1,#f0f17f);background:-webkit-gradient(linear,left top,left bottom,from(#feffb1),to(#f0f17f))}

.warning:before{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNlcOpXvvpJW2t2Q6-0JtA0sEktnEJOM_npLwq6Ncju4nQMTko0CnJaDACJ5D5Cvu1pQ1agPsrVBgTxUIzLPM-jxObaGIDYGL6RuiWgE8TD-JinEhI1SsZK1_Uz6WblKLK3QIS-769cws/);float:left;margin:15px 15px 0 25px}

.warning strong{color:#e5ac00;margin-right:15px}

</style>

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

<script type='text/javascript'>

$(document).ready(function(){$(&#39;.notification&#39;).hover(function(){$(this).css(&#39;cursor&#39;,&#39;auto&#39;);});$(&#39;.notification span&#39;).click(function(){$(this).parent().fadeOut(800);});});</script>

<div class='notification warning'><span/>

<p><strong>Warning!</strong>Đây là một thông báo. Click vào button ở bên phải để tắt.</p></div></b:if>

Những đoạn được đánh dấu màu đỏ bạn có thể chỉnh sửa cho phù hợp. Khung này theo mặc định chỉ hiển thị ở trang chủ.

- Nếu đang sử dụng một thủ thuật Jquery khác, hãy xóa dòng màu xanh để tránh xung đột.
- Khung thông báo này có thể ứng dụng vào nhiều việc khác, ví dụ như nội qui comment, nhưng cần một kiến thức nhất định về CSS.

Khung comment đẹp cho Blogger

2011-04-10T03:23:00.018+07:00

Trước đây Noct từng đăng một bài hướng dẫn trang trí khung nhận xét của Blogspot, nhưng có vẻ như vẫn còn nhiều người chưa hiểu. Vì vậy nên lần này mình post luôn đoạn code của một khung comment khá đẹp, phong cách Wordpress, có sẵn nút Reply. Code này đã được chuẩn hóa để có thể áp dụng trên mọi template.

| Demo

Đầu tiên, bạn xóa hết các đoạn CSS của khung comment cũ trong template, chúng thường có dạng:

#comments-block {...}

.comment-body {...}

.comment-footer {...}

......

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

.comments-block a,.comments-block p,.comments-block a img{margin:0;padding:0;outline:none;border:none}

.comments-block{width:600px;background:#fff;padding:10px;font-family:Arial;line-height:18px}

.comments-block .arrow{float:left;margin:22px 0 0 6px;display:block;width:8px;height:16px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoPs75hX8m6pw-ejhlqmcaY82mKtD_aNGy1d9Uji77x63m6Cd1I8Udx7lesHoo44133mlpQtIz1mu4nnrYUcq0k4MA_woN2__O3OY9GTRPo8hq67HY5_iiq-m6LxbHw33yCLOtSas4PJE/) no-repeat}

#comments-box{float:right;width:510px;margin-bottom:10px;border:5px solid #e3e3e3;border-radius:8px}

.comments-avatar{float:left}

.comments-meta{padding:5px;background:#F1F1F1;border-bottom:1px solid #E3E3E3}

.comments-meta{font-size:18px}

.comments-meta a{font-size:18px;color:#0E6284;text-decoration:none}

.comments-timestamp{color:#0E6284;font-size:12px}

.comments-body{font-size:13px;padding:5px;background:#fff}

a.comments-reply{margin:10px 10px 0 0;display:block;width:68px;height:28px;float:right}

.avatar-image-container{width:60px

!important;max-height:60px !important

;padding:2px;border:1px solid #ccc}

.avatar-image-container img{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSkffvsVn9JY2EGhK9_GDDyRs5tlAv7x-PAYqp8e93QF352tRM-HQqNYESdmLj2TndvMkUNUsSwVnkt0Wt9L0Ajdz3Y-_XGAvu9DrY3BhN-QbAZGWlil7rzjaN2YQQmSnRpzbasaD72cY/) no-repeat;width:60px !important;height:60px

!important}
Tiếp tục click chọn mở rộng mẫu tiện ích, tìm đến đoạn sau:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

<b:loop values='data:post.comments' var='comment'>

...........

</b:loop>

</dl>

Đoạn code này khá dài và có thể khác đôi chút trên từng template, thay thế toàn bộ đoạn ở trên bằng:

<div class='clear'/>

<div class='comments-block'>         

<b:loop values='data:post.comments' var='comment'>

<div class='comments-avatar'>

<b:if cond='data:comment.favicon'>

<img expr:src='data:comment.favicon'/>

</b:if>

<a expr:name='data:comment.anchorName'/>

<b:if cond='data:blog.enabledCommentProfileImages'>

<data:comment.authorAvatarImage/>

</b:if>

</div>

<div class='arrow'/>

<div id='comments-box'>

<a class='comments-reply' expr:href='&quot;https://www.blogger.com/comment.g?blogID=6885746016973304322&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E%20%3A#form&quot;' onclick='javascript:window.open(this.href,&quot;bloggerPopup&quot;,&quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=650,height=450&quot;);return false;' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVo8tpMjzP1u2einSOYIG2EUUQw16L21DplLVB_J94fHWkBSbFYtX0Gsvi7wk02kj_icAD0lMmkPnpbK5Y1MWWNHU9ILh4cNAa2pXyc8lj4ROZoFcs2oB01FfGrsbvFw8OBSVXIovFAPM/'/></a>

<div class='comments-meta'>

<b:if cond='data:comment.authorUrl'>

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

<b:else/><data:comment.author/>

</b:if><data:commentPostedByMsg/>

<div class='comments-timestamp'>

<data:comment.timestamp/>

<b:include data='comment' name='commentDeleteIcon'/>

</div></div>

<div class='comments-body'>            

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'><data:comment.body/></span>

<b:else/>

<p><data:comment.body/></p>

</b:if></div>

</div>

<div class='clear'/>

</b:loop>

</div>

Thay Blog ID của bạn vào trên để kích hoạt nút Reply. Lưu lại và xem kết quả. Hy vọng khung nhận xét này thỏa mãn được phần nào nhu cầu chém gió của bạn.

Hỏi đáp Ver. 2

2011-04-09T10:13:00.002+07:00

Đây là khu vực giải đáp các thắc mắc của bạn. Trước khi đặt câu hỏi, bạn cần lưu ý những điều sau:

- Nội dung câu hỏi phải liên quan tới Blogspot.
- Hồ sơ cá nhân phải được công khai.
- Không chèn liên kết tới các trang web khác, trừ trường hợp cần xử lí lỗi trên trang đó.
- Bạn có thể yêu cầu một thủ thuật hoặc tiện ích tại đây.

Chuyên mục hỏi đáp

2011-04-06T20:13:00.007+07:00

Dạo này bận rộn với đồ án tốt nghiệp nên không có nhiều thời gian viết blog nữa, vì vậy mình mở chuyên mục hỏi đáp này để mọi người có thể tự do thảo luận, hỏi đáp các vấn đề về Blogger hoặc bất cứ vấn đề gì. Nếu bạn gặp khó khăn trong việc tùy biến template thì có thể hỏi tại đây, mình sẽ giải đáp (trong khả năng).

Ngoài ra bạn cũng có thể yêu cầu một thủ thuật bất kì,
mình sẽ tìm hộ link hướng dẫn, và nếu thủ thuật đó chưa có trên Google thì Noct sẽ viết bài hướng dẫn nếu được. Nếu có vấn đề không tiện nói ra ở đây thì bạn có thể vào trang liên hệ, nhớ điền địa chỉ email thật để nhận câu trả lời.

Mọi comment trong mục này đều được duyệt chỉ cần bạn tuân thủ nội qui comment ở đây. Hy vọng mục hỏi đáp này nhận được sự ủng hộ của các bạn.