Thursday, November 18, 2010

Cách tạo một trang chuyên biệt cho Blogger

Như các blogger đều biết kể từ khi Blogger ra đời, nếu bạn muốn tạo một trang blog thì chỉ có một cách duy nhất là tạo một bài viết (trang item). Gần đây Blogger đã thêm tính năng mới là tạo trang tĩnh (static page) với số lượng tối đa cho mỗi Blog là 10 trang. Tính năng này phần nào giúp bạn dễ dàng hơn trong việc tạo các trang About, Contact, Terms of Use, Forum,… Tuy nhiên con số 10 trang không phải là nhiều mà đôi khi bạn còn muốn nhiều hơn thế nữa.

Thông thường trong phần thân của Blogspot có hai phần chính là phần Main-wrapper/Content và phần Sidebar (đối với Template chuẩn gồm 2 cột). Đôi khi bạn muốn tạo một trang nào đó thật nổi bật với không gian thiết kế rộng để bạn tha hồ sáng tạo ý tưởng thì bạn phải dấu đi phần Sidebar và nới rộng phần Main. Để làm được như vậy bạn cần phải làm gì?

Tại Việt Nam có blogger Phan Dũng đã giới thiệu cách tạo 1 trang cho blogspot với một số thủ thuật kết hợp khá phức tạp (đối với người mới chân ước chân ráo tìm hiểu Blogger). Thủ thuật này hiệu quả tuy nhiên phải can thiệp vào Template và sử dụng tiện ích HTML/Javascript. Bạn có thể tham khảo bài viết này tại đây.

Hôm nay tôi tin giới thiệu một cách tạo trang chuyên biệt đơn giản hơn mà hiệu quả thật lớn.

Bước đầu tiên là bạn cần tạo ý tưởng cho trang chuyên biệt mà bạn muốn tạo. Cần xác định một số thành phần trên trang phải dấu đi để có diện mạo khác những trang thông thường (item). Những phần cần ẩn đi như: sidebar, ngày đăng, phần chân bài viết, nhận xét, phân trang. Ngoài ra cần định dạng chiều rộng phần Main-wrapper (trong một số Template là Content) bằng với chiều rộng của toàn bộ phần Outer-wrapper. Lấy ví dụ phần Outer-wrapper trong Template của bạn là 900px thì bạn đặt chiều rộng phần Main-wrapper ở đây là 900px. Tựu trung lại, bạn thiết lập code cho bài viết của bạn như sau:
<p>

Nội dung code cho bài viết chuyên biệt nằm ở đây

</p>
<style>#main-wrapper {width:900px;background:white} #sidebar, .post-footer, #blog-pager, #comments,.date-header {display:none;}</style>
Bạn có thể đưa phần CSS vào trong Template theo kiểu như dưới đây, đặt sau dòng ]]></b:skin>.

<b:if cond='data:blog.url == "URL_trang chuyen biet"'>
<style>#main-wrapper {width:900px;background:white} #sidebar, .post-footer, #blog-pager, #comments,.date-header {display:none;}</style>
</b:if>

Bằng cách này bạn có thể tạo nhiều trang chuyên biệt tùy ý mà không cần phải động nhiều đến Template và không cần phải tốn nhiều thời gian loay hoay với CSS, HTML…

Hy vọng bài viết này sẽ giúp nhiều cho các blogger.

No comments:

Post a Comment