Loading post navigation ...
 
 

Pro page

11
Nhận xét

Thủ thuật cho bài viết : Tạo phong cách bài viết giống như báo Tuổi Trẻ.

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

[FD's BlOg] - Bài viết này mình sẽ tiếp tục hướng dẫn cho các bạn làm đẹp bài viết của mình với CSS. Bài viết này sẽ hướng dẫn các bạn tạo một vùng nổi bật trong bài viết, nó có thể là 1 đoạn chú thích, hoặc 1 đoạn văn bản chủ đạo của bài viết... Nó sẽ trông giống như các bài viết trên báo Tuổi Trẻ.


Hình ảnh minh họa từ báo Tuổi Trẻ:



☼ Và đây là minh họa trược tiếp:

Tôi gặp em trong một buổi chiều tối và mưa (Thứ 2, ngày 23 tháng 7 năm 2007) trước bến xe buýt cổng trường tôi giờ đây (Hồi đó tôi đăng ký thi vào Trung tâm Đào tạo Lập trình viên Quốc tế Bách khoa Aptech, em là sinh viên năm thứ 2 trường Cao Đẳng Du Lịch Hà Nội).
Khi mưa một to dần trong mái che, mọi người đã đứng trật kín nên tôi đành đứng ngoài trời mưa. Tôi đang cố tìm chỗ trú mưa thì bỗng dưng em đã đến gần tôi, một giọng nói nhè nhẹ từ phía sau tôi "mưa to như thế này trong mái che không còn chỗ đứng thì anh cầm ô đi hai anh em mình cùng trú" (lời nói ấy với tôi đã hơn một năm rồi mà bây giờ vẫn còn hiện lên nguyên vẹn như là lời nói hôm qua vậy). Tôi đã cùng em trú dưới trời mưa to mà chỉ có một chiếc ô nhỏ, thật trùng hợp sao hôm đó tôi và em lại phải đợi xe lâu như vậy. Tôi và em đã nói chuyện rồi quen nhau từ đây, hai người hỏi tên nhau, quê quán rồi cho nhau số điện thoại. Khi trời tạnh mưa thì cũng đến lúc tôi và em phải ra về. Từ đó tôi và em chỉ nhắn tin cho nhau, không còn gặp nhau nữa vì khi không vượt qua kỳ thi nên tôi đã đăng ký vào học tại Trung tâm Đào tạo CNTT Hà Nội. Nhưng có điều làm tôi không biết mình vui hay buồn nữa vì giữa hôm tôi trú mưa cùng em lại chính là ngày sinh nhật em (23/7/1987), lúc đó tôi mới biết nhưng cũng không biết làm thế nào nữa chỉ biết nói lời xin lỗi tới em, chúc mừng em thôi, nhưng em đã nói chính vì em gặp tôi mà em cảm thấy đó là món quà em hạnh phúc nhất trong những món quà mà em nhận được từ người khác. Lúc đó tôi không biết là có thật không nữa nhưng trong lòng tôi lại thấy nóng bừng lên chỉ muốn gặp em thôi. Chính từ đây mà chúng tôi nhắn tin cho nhau nhiều hơn, cũng nhiều lần tôi muốn gặp em, muốn hai người có thời gian bên nhau nhiều hơn để có thể cùng nhau tâm sự nhưng không lần nào thành cả, lúc em rảnh thì tôi lại bận, lúc tôi rảnh thì em lại bận không thể đi được, chúng tôi vẫn như thế mãi.


☼ Và đây là cách thực hiện:
- Mình sẽ hướng dẫn 2 cách:

+ Cách 1: áp dụng code trược tiếp trên bài viết, với cách này bạn có thể cơ động trong việc chỉnh sửa code.
+ Cách 2 : tạo thêm một class trong code CSS của template. với cách này sẽ không thuận tiện cho việc chỉnh sửa code (khi ta muốn tùy chỉnh màu, vị trí...), nhưng với cách này sẽ gọn gàng hơn, và có thể dùng nhiều lần mà không cần soạn lại code.


A. Cách 1: chèn code trực tiếp vào bài viết
- với cách này ta chỉ việc tạo 1 thẻ <div> rồi cho đoạn văn bản cần làm nổi bật vào nó là xong.
- Nó sẽ trông giống như bên dưới:

<div style="border: #ccc 1px solid ; margin: 10px; padding: 5px; background: #CFE6F9; width: 150px; float: right; text-align: justify;">
{ĐOẠN VĂN BẢN CỦA BẠN}
</div>

- Giải thích code :

+ border: #ccc 1px solid ; : đường viền
+ background: #CFE6F9; : màu nền
+ width: 150px; : độ rộng (chiều cao thì sẽ tự thay đổi tùy theo độ dài của đoạn văn bản của bạn)
+ float: right; : vị trí trong bài viết, có thể thay đổi trái(left) hoặc phải(right) tùy bạn.
+ text-align: justify; : căn giữa cho văn bản.
+ margin: 10px; , padding: 5px; : 2 đoạn code này để căn lề.


B. Cách 2: tạo thêm một class trong code CSS của template.
- Vào bố cục
- vào chỉnh sửa code HTML
- Chèn thêm đoạn code CSS bên dưới vào trước dòng ]]></b:skin>

.s-content {
border: #ccc 1px solid ;
margin: 10px;
padding: 5px;
background: #CFE6F9;
width: 150px;
float: right;
text-align: justify;
}

- Save template.

- Như vậy mỗi lần muốn làm nổi bật 1 đoạn văn bản nào đó, bạn chỉ việc thêm thẻ <div> như bên dưới:

<div class="s-content">
{ĐOẠN VĂN BẢN CỦA BẠN}
</div>


Tóm lại: Như đã nói ở trên, đối với cách 1 ta có thể tùy chỉnh code ngay trên bài viết, còn cách 2 muốn tùy chỉnh thì ban phải vào trong code template. Ngoài ra ở cách 2, nếu bạn thay đổi các class đó sẽ làm ảnh hưởng đến tất cả các văn bản có sử dụng chung class đó. Vì thể nên tạo cố định các class này, ví dụ ta nên tạo 2 class bên trái và bên phải là đủ, và độ rộng nên lấy chuẩn luôn, không nên thay đổi lung tung. Tùy theo yêu cầu của mình mà hãy lựa chọn cho mình các cách thích hợp.

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


Enter your mail address:

11

Lê Công Tiến

Thanks vì thủ thuật hay. Mình chắc chắn sẽ áp dụng nó.

Lê Công Tiến

Ah, xém quên! Bên mình có trao đổi logo đó. Nếu FD có nhã ý muốn liên kết thì ghé blog mình để lại 1 lời comment nha. Mong gặp lại FD.

Phan Dũng

ok Tiến, để mình qua blog của bạn "rinh" logo của bạn về :D

phattrien@so

cái nì giống kiểu đặt ads vào bài viết đó hả DŨng

Phan Dũng

Cũng tương tự anh à, nhưng đặt ADs vào bài viết thì ta phải đặt trong code template, mà đặt trong code của template thì không thể đặt vào giữa bài viết được. Còn với cái này ta có thể tùy chỉnh chỗ nào cũng được.

Nói chung đây cũng là một ứng dụng nhỏ và đơn giản từ CSS thôi. Em post lên gọi là chia sẻ kinh nghiệm :D

Comedown

Good morning. Về nguyên tắc cách 1 & 2 không hề khác nhau, vẫn edit được màu sắc, vị trí, ...(overwrite lại property) và đây cũng không phải là một ứng dụng. Vài lời góp ý, mong FanDung Blog ngày càng phát triển :)

fandung

@Comedown: COmedown nói đúng. Nhưng yêu cầu sử dụng của 2 cách này khác nhau. Một cái mang tính chất riêng, không đồng nhất, một cái mang tính chung, đồng nhất trong mỗi bài viết.

Còn bạn nói cái này không phải là Ứng dụng thì chưa đúng, Theo bạn ứng dụng là gì??? Bất cứ cái gì được viết ra, và xài tới nó đều là ứng dụng. Ở đây mình có nói là 1 ứng dụng nhỏ từ CSS.
Như bạn nói thì các widget mới là ứng dụng sao???, thực ra các widget cũng đều được tạo từ CSS và Javascript (đối với blogspot), nó đều là các ngôn ngữ dùng cho thiết kế web, và một khi mình dùng tới nó đều có thể nói là ứng dụng. Và chỉ phân biệt là ứng dụng đơn giản hay phức tạp thôi.

Như việc trang trí và tạo nên bố cục của blog, hay chính thủ thuật "Tạo cửa sổ popup khi rê chuột vào ảnh" mà mình đã giới thiệu cũng đều được viết từ CSS, vậy nó không phải à ứng dụng sao?

Đó là vài lời giải thích của mình, dù sao cũng cảm ơn Comedown đã góp ý.

Ngankvn ®

Hay Tuyệt :D , Chắc chắn là mình sẽ chơi kiểu áp dụng cho Temp rồi :) - Vua lười NganKVN mà :))

Tiếc là áp dụng cho Temp thì trên feed lại ko thấy gì .....

http://360korea.com

Mình đang tìm cách để đưa ads vào giống như thế này mà không làm được, Dũng có cách nào giúp được không Dũng ơi? Cảm ơn bạn nhiều!

Phan Dũng

http://360korea.com : Muốn code của ads hiện thị khi bạn cho dán nó vào template thì bạn phải mã hóa nó lại, tức là chuyển code thành các kí tự thay thế.

Bạn có thể vào trang này đễ mã hóa nó, rồi dán code mã hóa đó vào code của template là được.
http://www.blogcrowds.com/resources/parse_html.php

http://360korea.com

Mình làm thử theo cách 1 thì không hiện gì Dũng ạ, còn cách 2 cũng như thế, Dũng có cách nào để chèn ads vào bài viết gọn gàng như kiểu này không Bạn?



☺ 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:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home