Loading post navigation ...
 
 

Pro page

15
Nhận xét

[ Yêu cầu ] : Chèn code vào bài viết + trang trí cho khung hiển thị code

| by Phan Dũng | views

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

How to add code in your post + modify code field
[FD's BlOg] - Đây là một trong những thủ thật cơ bản mà các trang thủ thuật khác ở việt nam đều đã có đăng, tuy nhiên ở blog của mình thì chưa có bài hướng dẫn thủ thuật này. Nhân đây có người hỏi về thủ thuật này, mình cũng xin post lại.

Ở bài viết mình sẽ nói về 2 vấn đề : 1 là làm thế nào để chèn code vào bài viết, thứ 2 là trang trí cho khung hiển thị.

A. Chèn code vào bài viết:
- Như chúng ta đã biết, khung sọan thảo của blogspot cho phép hiển thị hầu hết code HTML, vì thế khi bạn chèn code vào bài viết thì code đó cũng sẽ được hiển thị.
- Để có thể hiển thị được chúng ngòai layout, bạn phải chuyển 1 vài kí tự đặc biệt trong mã code HTML thành các kí tự khác.
- Về cơ bản, ta chỉ cần thay đổi 2 kí tự đặc biệt là < > , xem bên dưới:

- Kí tự : < sẽ chuyển thành &lt;
- Kí tự : > sẽ chuyển thành &gt;

- Đó là cách thực hiện bằng tay khi code của bạn chỉ có vài dòng, nhưng đối với những đọan code dài thì sao, ta không thể ngồi đó mày thay thế tất cả chúng, rất tốn thời gian.
- Để khắc phục điều này, đã có website cho phép bạn chuyển đổi tất cả các kí tự đặc biệt của mã HTML 1 cách nhanh chóng.
- Các bạn vào địa chỉ này : http://blogcrowds.com/resources/parse_html.php, giao diện sẽ trông như bên dưới:


- dán code mà bạn cần chuyển đổi vào khung rồi nhấn Parse sau đó ta sẽ được code đã được mã hóa ở khung 1, nếu muốn mã hóa tiếp code khác, bạn chèn code vào khung thứ 2 (lưu ý: fải là khung thứ 2) (xem hình minh họa)


B. Trang trí cho khung hiển thị code :
- Để làm điều này, bạn chỉ cần tạo 1 class riêng cho code, ví dụ ta sẽ tạo class "codeview" và đặt code vào trong thẻ div, như bên dưới:

<div class="codeview">
{dán code đã mã hóa vào đây}
</div>

- Tất nhiên để làm được bạn phải chèn code CSS của class "codeview" vào trong code của template. Các bạn vào bố cục » vào chỉnh sửa code HTML » và chèn code của các style bên dưới lên trên dòng code ]]></b:skin>

- Sau đây mình sẽ giới thiệu các kiểu khác nhau cho các bạn:
1. Style 1:

Code CSS:

.codeviews {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://farm4.static.flickr.com/3415/3555944482_d0433d99fe_o.gif) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}

Hình minh họa:


2. Style 2:

Code CSS:

.codeviews {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 20px solid #CECECE;
}

Hình minh họa:


3. Style 3:

Code CSS:

.codeviews {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://farm4.static.flickr.com/3575/3555191103_7ce001f502_o.gif) no-repeat right top;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}

Hình minh họa:



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


Enter your mail address:

15

Le Thuan

oh yeah !! đúng cái em cần :D

MrHungLe

Mình thì thường chuyển từ trang: http://www.eblogtemplates.com/blogger-ad-code-converter/

Le Thuan

2 trang đó thì cũng như nhau mà bạn..có khác gì đâu...quan trọng là cái trang trí code kìa

fandung

uh, trang nào cũng dùng được thôi, chủ yếu là chuyển nó sang kí tự khác là được. :D

Yeusuckhoe

Chỗ codeview thiếu 1 dấu ngoặc kép FD ơi. :D

Phan Dũng

@Yêu Sức Khỏe : cám ơn anh đã nhắc nhơ :D

hayhay

sao tui lam y nhu tren ma khong thay hien thi nhu hinh minh hoa nhy?

hayhay

demo : http://blog.loveiu.net/2010/01/hieu-ung-tuyet-roi-cho-blogger-cool.html

Khách (ẩn danh)

cảm ơn nhé !

Lê Trương Vĩnh Trung
Lê Trương Vĩnh Trung

Mình có đoạn code khá dài mà để chung với chữ thì khá rối mắt, mình làm cách như trên mà ko ra cái khung bọc dòng code lại
______________________________

B. Trang trí cho khung hiển thị code :
________________________________

Cái đoạn code của phần này là bỏ vào bài đăng mới, phần chỉnh sửa HTML hả pác
còn cái web chuyển code thì copy dòng code nào cũng đc ah
Mong pác chỉ giáo thêm, mình cần cái này lắm

Sáng

Moi cac bac vao tham khao blog cua to: nguyenbaosang.blogspot.com nguyenbaosang.blogspot.com

6 mét vuông

sao chả thấy có trang trí gì vậy trời. Mình đã thử cả ba cách trên đều không được.
Híc
-Đầu tiên cũng vào chỉnh sửa, dán code, save
-Post bài với câu nằm trong thẻ
Vậy mà không được.
Ai cao ấn, chỉ xem mình lỗi ở bước nào jum chứ code thì copy, dán đúng chỗ, code thì để trong thẻ rồi chứ đâu để ngoài. híc

BrJX

có hoạt động đâu mà đưa lắm mẫu thế

BrJX

Không biết do bạn sơ xuất hay là copy bài của người khác chứ search google thì đa phần cũng mắc sai lầm như bạn chữ "codeview" xin thưa là có "s"
bác có thấy khai báo CSS là "codeviews" mà khi post bài lại gọi class là "codeview" thì làm sao nó hoạt động



☺ 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