Truyện Cười BlogTaPhiet KC

Chat Box


--------------:Search

Thứ Năm, 19 tháng 11, 2009

[Thủ Thuật] Tạo style cho bài viết giống kiểu 1 tạp chí


Có nhiều cách để làm cho bài viết của bạn trông đẹp mắt hơn, ví dụ như tạo bố cục rõ ràng, phối màu trong bài viết, chèn 1 hiệu hứng nào đó vào bài viết... Hôm nay mình sẽ hướng dẫn cho các bạn cách tạo chữ to đầu dòng bài viết. (giống như các bài báo hay tạp chí).

Đây là minh họa:
C ó nhiều cách để làm cho bài viết của bạn trông đẹp mắt hơn, ví dụ như tạo bố cục rõ ràng, phối màu trong bài viết, chèn 1 hiệu hứng nào đó vào bài viết... Hôm nay mình sẽ hướng dẫn cho các bạn cách tạo chữ to đầu dòng bài viết.

Có 2 cách để thực hiện điều này:
Cách 1: Phương pháp thủ công
- Với cách này mỗi khi bạn tạo hiệu ứng trên thì phải gõ cả đọan code vào.
- Và dưới đây là đọan code:

<span style="float:left;color: #0C3259;background:#BCBBBB;line-height:80px; padding:1px 5px 0 0; font-family:times; margin: 0px 5px 5px 0px; font-size:100px;"">{Kí tự đầu tiên}</span>

Trong đó:
- background:#fff -> màu nền của ô chữ (ở đây là màu trắng)
- line-height:80px -> độ cao của ô chữ
- font-size:100px -> độ cao của chữ

Ưu điểm của bước 1 là bạn có thể thay đổi style tùy thích bằng cách thêm hay bớt các thuộc tính của thẻ <span>

Cách 2: Tạo 1 class trong CCS
Khi đã làm ở cách 1 nhiều lần, và bạn thấy thích nhất 1 kiểu nào đó (tạo 1 style chung cho các bài viết) khi đó hãy tạo 1 class trong CCS, và mỗi khi sử dụng thì ta chỉ cần gọi class đó ra thôi, không cần phải đánh cả đọan code vào.
Dưới đây là cách làm:
1. Viết 1 code cho riêng mình, có thể tham khảo code bên dưới:

:

/* magazine drop caps */

.magazine {
float:left;
color:#000;
background:#fff;
line-height:80px;
padding-:1px 5px 0 0;
font-family:times;
font-size:100px;
}

2. Đăng nhập vào blog của bạn, vào Chỉnh sửa Code HTML
3. Tìm đọan code sau : ]]></b:skin> và copy đọan CCS bên trên ngay trên dòng code đó.
4. Save template --> xong.
5. Như vậy mỗi lần muốn tạo kiểu chữ như vậy, bạn chỉ cần làm như sau
<span class="magazine">{Kí tự đầu tiên} </span>

Chúc các bạn thành công.
[Click here to Read More]

[Thủ Thuật] Tạo style cho bài viết giống kiểu 1 tạp chí


Có nhiều cách để làm cho bài viết của bạn trông đẹp mắt hơn, ví dụ như tạo bố cục rõ ràng, phối màu trong bài viết, chèn 1 hiệu hứng nào đó vào bài viết... Hôm nay mình sẽ hướng dẫn cho các bạn cách tạo chữ to đầu dòng bài viết. (giống như các bài báo hay tạp chí).

Đây là minh họa:
C ó nhiều cách để làm cho bài viết của bạn trông đẹp mắt hơn, ví dụ như tạo bố cục rõ ràng, phối màu trong bài viết, chèn 1 hiệu hứng nào đó vào bài viết... Hôm nay mình sẽ hướng dẫn cho các bạn cách tạo chữ to đầu dòng bài viết.

Có 2 cách để thực hiện điều này:
Cách 1: Phương pháp thủ công
- Với cách này mỗi khi bạn tạo hiệu ứng trên thì phải gõ cả đọan code vào.
- Và dưới đây là đọan code:

<span style="float:left;color: #0C3259;background:#BCBBBB;line-height:80px; padding:1px 5px 0 0; font-family:times; margin: 0px 5px 5px 0px; font-size:100px;"">{Kí tự đầu tiên}</span>

Trong đó:
- background:#fff -> màu nền của ô chữ (ở đây là màu trắng)
- line-height:80px -> độ cao của ô chữ
- font-size:100px -> độ cao của chữ

Ưu điểm của bước 1 là bạn có thể thay đổi style tùy thích bằng cách thêm hay bớt các thuộc tính của thẻ <span>

Cách 2: Tạo 1 class trong CCS
Khi đã làm ở cách 1 nhiều lần, và bạn thấy thích nhất 1 kiểu nào đó (tạo 1 style chung cho các bài viết) khi đó hãy tạo 1 class trong CCS, và mỗi khi sử dụng thì ta chỉ cần gọi class đó ra thôi, không cần phải đánh cả đọan code vào.
Dưới đây là cách làm:
1. Viết 1 code cho riêng mình, có thể tham khảo code bên dưới:

:

/* magazine drop caps */

.magazine {
float:left;
color:#000;
background:#fff;
line-height:80px;
padding-:1px 5px 0 0;
font-family:times;
font-size:100px;
}

2. Đăng nhập vào blog của bạn, vào Chỉnh sửa Code HTML
3. Tìm đọan code sau : ]]></b:skin> và copy đọan CCS bên trên ngay trên dòng code đó.
4. Save template --> xong.
5. Như vậy mỗi lần muốn tạo kiểu chữ như vậy, bạn chỉ cần làm như sau
<span class="magazine">{Kí tự đầu tiên} </span>

Chúc các bạn thành công.
[Click here to Read More]

[Thủ Thuật] Tạo 1 menu ''Drop - Down'' đơn giản

Để tạo menu, bạn chỉ cần tạo 1 Widget, rồi dán code vào rồi đặt widget vào nơi muốn hiển thị.

Đây là code cho menu Drop Down:
<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu><option value=0 selected> Tên Menu </option>



<option value=" {link 1} "> Liên kết 1 </option>

<option value=" {link 2} "> Liên kết 2 </option>

</select></form>



Xem ví dụ minh họa bên dưới


Photobucket
[Click here to Read More]

[Thủ Thuật] Tạo 1 menu ''Drop - Down'' đơn giản

Để tạo menu, bạn chỉ cần tạo 1 Widget, rồi dán code vào rồi đặt widget vào nơi muốn hiển thị.

Đây là code cho menu Drop Down:
<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu><option value=0 selected> Tên Menu </option>



<option value=" {link 1} "> Liên kết 1 </option>

<option value=" {link 2} "> Liên kết 2 </option>

</select></form>



Xem ví dụ minh họa bên dưới


Photobucket
[Click here to Read More]

[Thủ Thuật] Chèn logo vào tiêu đề bài viết

Hôm nay mình xin giới thiệu cho các bạn cách chèn 1 tấm hình nhỏ trước mỗi tiêu đề bài viết. Hình này bạn có thể chèn hình gì cũng được, tùy thích, nhưng mình khuyên nên chèn những tấm hình mang phong cách riêng cho bạn, ví dụ như hình logo. Và nhỏ thôi, tầm từ 30x30 --> 50x50.


Việc này rất đơn giản, trước hết bạn có 1 tấm hình, rồi up lên host nào đó. Rồi thực hiện các bước sau:

1. Vào bố cục
2. Vào chỉnh sửa Code HTML.
3. Nhấn vào mở rộng mẫu tiện ích (Expand Widget Template).
4. Tìm đọan code sau:

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

5. Chèn Link hình của bạn như bên dưới (có thể thêm ở đằng trước hay sau đọan code <a expr:href='data:post.url'> tùy ý bạn)

<a expr:href='data:post.url'>
<img src="{LINK hình}"/>
<data:post.title/>
</a>

6. Save template --> xong.
[Click here to Read More]

[Thủ Thuật] Chèn logo vào tiêu đề bài viết

Hôm nay mình xin giới thiệu cho các bạn cách chèn 1 tấm hình nhỏ trước mỗi tiêu đề bài viết. Hình này bạn có thể chèn hình gì cũng được, tùy thích, nhưng mình khuyên nên chèn những tấm hình mang phong cách riêng cho bạn, ví dụ như hình logo. Và nhỏ thôi, tầm từ 30x30 --> 50x50.


Việc này rất đơn giản, trước hết bạn có 1 tấm hình, rồi up lên host nào đó. Rồi thực hiện các bước sau:

1. Vào bố cục
2. Vào chỉnh sửa Code HTML.
3. Nhấn vào mở rộng mẫu tiện ích (Expand Widget Template).
4. Tìm đọan code sau:

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

5. Chèn Link hình của bạn như bên dưới (có thể thêm ở đằng trước hay sau đọan code <a expr:href='data:post.url'> tùy ý bạn)

<a expr:href='data:post.url'>
<img src="{LINK hình}"/>
<data:post.title/>
</a>

6. Save template --> xong.
[Click here to Read More]
Top