Đặt code trong khung trên bài viết blogger

Nguồn: bongnguoilangle.blogspot.com

Đâ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à < và > , 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ẽ 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.

Bổ sung thêm 2 địa chỉ Convert Code:

http://centricle.com/tools/html-entities/

http://www.eblogtemplates.com/blogger-ad-code-converter/

Nguồn: FanDung's blog
Edited: Bóng Người Lặng Lẽ

Cách khác: đây là cách mà Bóng Người Lặng Lẽ's Blog đang sử dụng

Giới thiệu: Thủ thuật hỗ trợ chèn code vào bài viết trên blog và chèn code vào comment. Ngoài ra bạn còn có thể trang trí cho khung chứa code của blog mình theo ý thích, sao cho phù hợp với blog nhất.

CÁCH THỰC HIỆN

1. Đăng nhập Blogger Dashboard (Bảng điều khiển)

2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sửa HTML)

3. Không cần đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. Chèn script

Bước 1: Tìm dòng ]]></b:skin>

 - Thêm vào trước nó đoạn code sau:

/*chèn code vào bài viết*/
pre {
    color:#343434;
    font-family: Tahoma;
    font-size:12px;
    max-height:300px; /*chiều cao tối đa của khung*/
    line-height:17px;
    background: #FFF2C4;  /*Màu nền khung chứa code*/
    display: block; 
    padding: 4px 4px 4px 4px; 
    border: 1px #A0C4EA dashed; /*Viền khung*/
    overflow:auto;
    word-wrap:break-word;
}

Bước 2: Save template. (Lưu mẫu)

Bước 3: Sử dụng code cho bài viết. Viết bài, tới chỗ muốn chèn code thì chuyển sang HTML rồi chèn nội dung như sau:

 <pre>Nội dung đoạn code đã mã hóa </pre>

Các bạn nhớ là phải mã hóa code trước rồi mới dùng được nhé!

( Những đoạn Code ngắn không cần phải cho trong khung  <pre>Nội dung đoạn code đã mã hóa </pre> mà chỉ mã hóa là xong, vì cho đoạn code đã mã hóa vào khung trên mục đích là đóng khung đoạn code cho đẹp)