[FD's BlOg] - Bài viết này dành cho những người mới bắt đầu làm quen với blogspot, và nâng cao hơn nữa là hướng dẫn cách tiếp cận bố cục của blog theo phương pháp tiếp cận từ trên xuống để đơn giản mã CSS.

►Phương pháp tiếp cận top-down (từ trên xuống)

Cách tốt nhất để thiết kế một tập tin CSS là sử dụng phương pháp tiếp cận từ trên xuống, nói cách khác là xác định các phần tử chính của blog. Vì vậy, bạn có thể tiến hành để viết mã của bạn trong một cấu trúc chặt chẽ hơn theo cách không cần thiết tránh mã. Trong thực tế, để xác định các thành phần chính trong bố cục của 1 blog cũng đơn giản. Sự xuất hiện các "mã không cần thiết" sẽ xảy ra khi bạn xác định các chi tiết của yếu tố đó. Để đơn giản hóa các mã CSS này, bạn cần tuân thủ 2 "quy tắc" sau:
1. Giảm thiểu số lượng các yếu tố CSS
2. Sử dụng các thẻ HTML chuẩn(P, H1, UL, LI ...) thay vì tạo các class mới.

- Ví dụ : trong blog của bạn, để thiết kế style cho tiêu đề bài viết, bạn có thể sử dụng thẻ <h1> thay vì dùng class mới ".post-title" .

►Bây giờ ta làm quen với các thành phần chính trong bố cục của blog:

Trước khi bắt đầu viết mã CSS của bạn, bạn phải có hình dung rõ ràng trong đầu bạn các mục chính trong bố cục của 1 blog. Lấy ví dụ 1 blog có 2 cột, bạn có thể xác định những phần chính như hình bên dưới:

Bố cục có 4 phần cơ bản như bên dưới:
1. Header (#header) 2. Main content (#main-content) 3. Sidebar (#sidebar) 4. Footer (#footer)

►Bước kế tiếp, là xác đinh các thành phần có trong từng mục chính đó.

1. Header :
- Phần Header gồm có 2 thành phần cơ bản là Logo và thanh Navbar.(xem hình bên dưới)

- Bạn có thể thay đổi lại logo theo cách bên dưới:

#header {
background:url(YOUR-LOGO.gif) no-repeat;
}

- Đối với thanh Navbar, bạn nên sử dụng các thẻ <ul> <li> để tạo .(xem hình bên dưới)

Làm thế nào ta có thể thấy chúng, bạn không nhất thiết phải tạo một class mới như là "#navigation-bar", bởi vì nó đã được xác định bằng cách sử dụng thẻ <ul> trong phần Header (#header ul, #header ul li). Bằng cách này đọan mã CSS của bạn sẽ gọn gàng hơn, đơn giản hơn, dễ quản lý hơn.

2. Main content :
- Ở trong phần main, chủ yếu là chứa nội dung bài viết, như : tựa đề, nội dung, các nhãn... , có thể xem minh họa bên dưới:

- Vì vậy cách tốt nhất để thiết kế các mã CSS là sử dụng các thẻ chuẩn (bên dưới) vào class #main-content :
+ Post section paragraph(nội dung bài viết) (<p>)
+ Post title (tựa đề bài viết) (<h1>)
+ Post date (ngày post)(<h2>)
+ Post tag (nhãn) (<small>)

Và nó trông như thế này:

3. Thanh Sidebar:
- Sẽ rất đơn giản nếu dùng các thẻ <h1> , <p> (xem hình minh họa)

- Và code CSS sẽ trông như thế này:

4. Footer:
- Tùy bạn thiết kế. hòan tòan tương tự.

Như vậy mình đã giới thiệu xong, hy vọng với bài viết này các bạn sẽ nắm rõ hơn về bố cục của 1 blog, và tự tay mình modify code CSS cho nó đơn giản hơn.

Chúc các bạn thành công.

Read more…

[FD's BlOg] - Thay đổi 1 chút không khí với những câu châm ngôn.
☼ Báo lá cải có ích ở chỗ chúng dạy ta không nên tin vào chúng.
☼ Trí tuệ nhân tạo chẳng là gì so với sự ngốc nghếch tự nhiên.
☼ Chỉ cần một ly rượu thôi là đủ thấy cuộc sống thay đổi.

1. Chỉ những gì không thay đổi được mới là sai lầm.

2. Thà là nhà kinh điển còn sống hơn là làm người đương thời đã chết.

3. Chúng ta thường thích nghe lời người khác, đặc biệt nếu đó là người đã quá cố.

4. Người có thể cười được trong tình huống khó khăn chắc đã tìm ra hình nhân thế mạng.

5. Tình yêu như mạng nhện, chạm vào là dính liền.

6. Tại sao chúng ta cứ hay tưởng rằng vợ người và xe bơi của người hay bơn? Vì cả hai đều dễ khởi động hơn.

7. Thật tốt khi có điều để mà nhớ lại, nhưng tốt hơn nếu không có gì để phải quên cả.

8. Đẹp trai để thương nhớ, còn giàu có để lấy làm chồng.

9. Không cần tự mình sinh ra những ý tưởng thông minh. Hãy tìm kẻ thông minh để anh ta “đau đẻ".

10. Đàn ông cần có tương lai, còn đàn bà cần có quá khứ.

11. Chỉ cần một ly rượu thôi là đủ thấy cuộc sống thay đổi.

12. Không quan trọng là với ai, quan trọng là như thế nào.

13. Tôi cưỡng lại được trước mọi thứ, trừ những cám dỗ.

14. Có tiền thì sướng hơn là nghèo, nếu xét về mặt tài chính.

15. Tôi nghĩ là tôi nên bắt đầu đọc thơ Shakespeare. Nhưng rồi tôi nghĩ lại, tại sao tôi phải làm thế? Hắn ta chưa bao giờ đọc một bài thơ nào của tôi cả.

16. Tôi từng có nhiều ham muốn, ham muốn quá nhiều thứ. Bây giờ tôi chỉ có một ham muốn, là làm sao loại bỏ được những ham muốn đó.

17. Vì tình yêu, người phụ nữ sẵn sàng hy sinh mình, còn đàn ông thì sẵn sàng hy sinh những người phụ nữ khác.

18. Nếu ta phải trả tiền cho người đẹp thì người đẹp ấy chẳng đáng giá một xu.

19. Tôi không hiểu dịch cúm gia cầm có ảnh hưởng thế nào tới những tin vịt?

20. Câu nói "không" vẫn là phương tiện tránh thai truyền thống tốt nhất.

21. Cái cười thành thực nhất là cười ruồi.

22. Thà để họ cười ta hơn là để họ khóc ta.

23. Thà nhận một ít tiền hơn là lời "cảm ơn nhiều".

24. Rượu vang có lợi cho sức khỏe, còn sức khỏe cần để uống rượu vodka.

25. Tất cả những gì báo chí viết đều là sự thật trăm phần trăm, ngoại trừ những sự cố mà quý vị trực tiếp chứng kiến.

26. Báo chí nói cho độc giả biết điều mà người ta không hiểu và dạy cho hiểu điều mà người ta không biết.

27. Báo lá cải có ích ở chỗ chúng dạy ta không nên tin vào chúng.

28. Trí tuệ nhân tạo chẳng là gì so với sự ngốc nghếch tự nhiên.

29. Người thông thái viết những câu châm ngôn, kẻ ngu dốt lặp lại chúng.

30. Người hiểu biết thì nói chuyện với anh, người thông thái thì lắng nghe anh.

31. Cho anh ta một con cá, anh ta sẽ ăn trong một ngày. Dạy anh ta câu cá, anh ta sẽ không làm phiền anh suốt một tuần.

32. Mỗi khi tôi buộc phải chọn lựa giữa hai tật xấu, tôi thường chọn cái mà tôi chưa bao giờ được thử.

Sưu tầm

Read more…

[FD's BlOg] - Tiếp tục lọat bài modify form comment, bài này mình sẽ giới thiệu một thủ thuật nhỏ để tạo một thông báo nho nhỏ khi bài viết chưa có ai comment.

Các bạn có thể xem hình minh họa:

Để tạo thông báo nhỏ này, ta chỉ cần 1 vài dòng lệnh nho nhỏ.

► Bắt đầu:
1. Đăng nhập blog
2. Vào bố cục (Layout)
3. Vào chỉnh sửa code HTML (chọn mở rộng mẫu tiện ích)
4. Tìm đọan code HTML như bên dưới (hoặc tương tự)

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<data:post.numComments/> <data:commentLabelPlural/>
</b:if>
</h4>

5. Thêm đọan code màu đỏ & xanh như bên dưới.

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>

<b:if cond='data:post.numComments == 0'>
Bài viết hiện chưa có nhận xét nào.
<b:else/>

<data:post.numComments/> <data:commentLabelPlural/>
</b:if>
</h4>

Lưu ý:
- Với dòng thông báo(code màu xanh) bạn có thể thay đổi tùy ý bạn. Bạn có thể trang trí cho nó trông đẹp hơn, ví dụ : tạo màu nền, ảnh nền, hiệu ứng ...

6. Save template lại là ok.

Chúc các bạn thành công.

Read more…

[FD's BlOg] - Hôm nay mình sẽ tiếp tục loạt bài Modify Form Comment. Bài hôm nay mình sẽ hướng dẫn tạo một bảng nội quy nho nhỏ cho form comment.

Như ta đã biết, có 1 cách để tạo một nội quy nho nhỏ cho form comment đó là vào trong phần Nhận xét (Đăng nhập blog ► Vào Cài đặt ► Vào phần nhận xét), ta sẽ thấy 1 khung sọan thảo nho nhỏ, đó là nơi ta có thể viết 1 vài nội quy vào đó.

hình minh họa

Tuy nhiên ở đây khung chỉ cho phép ta sử dụng các thẻ HTML cơ bản như <b> , <i> , <a> mà không được phép sử dụng bất kì thẻ HTML nào khác. Như thế trông bảng nội quy hơi đơn điệu.

Vì thế, hôm nay mình sẽ giới thiệu cho các bạn 1 thủ thuật, đó là tạo nội quy vào ngay trong code THML của template. Với việc này bạn hòan tòan có thể sử dụng màu sắc hay hình ảnh cho bảng nội quy của mình.

Ở đây mình sẽ đưa ra một ví dụ mẫu cho các bạn xem. Với ví dụ này mình sẽ lại áp dụng kĩ thuật bo góc cho khung. Khác với các kĩ thuật bo góc mình đã giới thiệu, ở kĩ thuật này mình cũng áp dụng ảnh để bo góc, nhưng ảnh này không trùng với nền của bảng nội quy mà lại trùng với nền của blog.

Ở ví dụ này mình sẽ tạo 1 bảng nội quy có chiều rộng là 413px.

►Bắt đầu:
1. Đăng nhập blog
2. Vào bố cục
3. Vào chỉnh sửa code HTML (chọn mở rộng tiện ích)
4. Chèn đọan code CSS vào ngay trên dòng ]]></b:skin>

#fd-comment {
}
#fd-comment dl {
width: 413px;
margin: 0 0 20px 20px;
padding: 0;
background: #c99 ;
}

#fd-comment dt {
width: 397px;
margin: 0 0 10px 0;
padding: 8px;
font-size: 130%;
color: #fff;
border-bottom: 1px solid #fff;
background: #933 url(http://farm4.static.flickr.com/3595/3499761869_db520cc444_o.gif) no-repeat top left;
}

#fd-comment dd { width: 393px;
margin: 0 0 0 10px;
padding: 0 10px 10px 10px;
color: #666;
font-family: Verdana, sans-serif;
font-size: 90%;
background: url(http://www.alistapart.com/d/mountaintop/arrow.gif) no-repeat 0 3px;
}

► Đọc code:
- width: 413px; : đây chính là độ rộng của bảng nội quy, và cũng bằng độ rộng của ảnh bo 2 góc trên (http://farm4.static.flickr.com/3595/3499761869_db520cc444_o.gif) , nếu bạn không thích bo góc thì có thể bỏ ảnh này đi.
- width: 397px; : là độ rộng của tiêu đề nội quy (397px = 413px - 8px x2), với 8px là căn lề (padding: 8px)
- width: 393px; : là độ rộng của khung sọan thảo nội quy (393px= 413px -20px), với 20px là căn lề trái. (margin: 0 0 20px 20px;)

- background: #c99 ; : màu nền của bảng nội quy
- background: #933; : màu nền của tiêu đề nội quy

- Ở ví dụ này mình chỉ bo 2 góc trên, nếu bạn nào muốn bo 2 góc dưới nữa thì down gói hình ảnh bên dưới về, rồi fix lại kích thước cho phù hợp với khung nội quy.

Ảnh tạo bo 2 góc trên : box_top.gif
http://www.alistapart.com/d/mountaintop/box_top.gif

Ảnh tạo bo 2 góc dưới : box_bottom.gif
http://www.alistapart.com/d/mountaintop/box_bottom.gif

- Nếu muốn bo thêm 2 góc bên dưới thì chỉ việc thêm đọan code màu đỏ vào đọan code CSS trên (như bên dưới):

#fd-comment dl {
width: 413px;
margin: 0 0 20px 20px;
padding: 0;
background: #c99 url(link ảnh box_bottom.gif(đã fix) của bạn ) no-repeat bottom left ;
}

5. Tiếp tục tìm đến đọan code sau:

<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>
<data:post.iframeColorizer/>

</div>
</b:includable>

Chú ý: đọan code màu đỏ là tiêu để của bảng nội quy, sau này ta sẽ xóa nó đi, và tạo một tựa đề cho bảng nội quy theo ý mình.

6. Bây giờ ta sẽ thêm các đọan code màu đỏ & xanh vào đọan code trên như hình bên dưới:

<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>

<div id='fd-comment'>
<dl>
<dt>
<h4 id='comment-post-message'>FD's BlOg - Nội Quy Comment </h4>
</dt>
<b> Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:</b>
<dd>Điều 1.</dd>
<dd>Điều 2.</dd>
<dd>Điều 3.</dd>

</dl>
</div>

<div style='padding: 0 0 0 20px;'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>
<data:post.iframeColorizer/>

</div>
</div>
</b:includable>

Chú ý:
- Sửa lại code màu xanh theo ý mình.
- Code màu cam là để căn trái cho form sọan thảo, lý do khi ta đặt bảng nội quy vào, có thể bảng nội quy và form sọan thảo bị lệch, nên dòng code màu cam dùng để căn lề lại cho khung sọan thảo.

7. Save template lại là xong.

Xem hình minh họa:

Chúc các bạn thành công.

Read more…