Hiển thị code trên bloger (1)

Có rất nhiều cách để trang trí khung hiển thị đoạn code trên blog, có những cách rất cực hỳ không đơn giản (nhưng đẹp) nhưng cũng có những các rất đơn giản.
Bái viết trang trí khung hiển thị code trên Blogger của bạn Huỳnh Nhật Hà giới thiệu một số cách làm đẹp code, mình đăng lại và bổ sung thêm một số cách làm đẹp code để bạn tham khảo.


Dạng 1.

Bước 1.

 Trước tiên tiến hành chèn một đoạn mã vào phần CSS của Template.

 Vào Thiết kế (Design) - Chỉnh sửa HTML (Edit HTML) rồi chèn code của các kiểu bên dưới lên trên dòng code ]]></b:skin> trong Template (chỉ chọn 01 kiểu).

 Kiểu 1:

Code:

.codeview { 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; }

Kiểu 2:

Code:

.codeview { 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; }

Kiểu 3:

Code:

.codeview { 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; }

Bước 2.

Tạo một class riêng cho đoạn mã, có thể đặt tên là "codeview" và đặt đoạn mã vào trong thẻ div, theo như bên dưới vào bài đăng nơi muốn hiển thị đoạn code:

<div class="codeview"> {dán code đơn giản hoặc code đã mã hóa vào đây. } </div>

Dạng 2.
Cách nầy cực kỳ đơn giản hiện mình đang sử dụng cách nầy.Với dạng nầy thì chỉ chèn đoạn code sau đây vào trược tiếp trên bài viết nơi muốn hiển thị nội dung.

Kiểu 1.

<div align="left"> <textarea cols="65" name="code" onclick="this.select()" rows="3">Đây là đoạn văn bản hay code cần hiển thị</textarea></div>

Người xem chỉ cần click và vùng hiển thị code và copy (Ctrl C) toàn bộ đoạn code được hiển thị.

Chú ý:

rows="6" biểu thị chiều cao của vùng hiển thị, bạn có thể tuỳ ý thay đổi chỉ số này tuỳ thuộc vào chiều cao cần thiết cho vùng hiển thị.

cols="40" biểu thị chiều rộng của đoạn văn bản, chỉ số này được thay đổi tuỳ thuộc vào chiều rộng mà bạn cần thể hiện.

Kiểu 2.

Tạo vùng hiển thị văn bản với nút "Highlight" để khi click vào nút này thì đoạn văn bản hay code cần hiển thị sẽ được bôi đen để bạn copy. Tiện ích này rất hữu ích, đặc biệt là đối với đoạn văn bản hay code dài . Để tạo vùng văn bản hay code kiểu này, bạn có thể copy đoạn mã HTML sau:

<div> <form name="copy"> <div align="left"> <input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div> <div align="left"> </div> <p align="left"> <textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55"> Đây là đoạn văn bản hay code cần hiển thị </textarea></p> </form> </div>

Chú ý:
Width: 300px là chiều rộng có thể tùy chỉnh.
Height: 144px là chiều cao có thể tùy chỉnh
Chúc bạn chọn được 1 kiểu theo ý thíchcủa mình.
Bạn có thể xem thêm "Hiển thị code trên bloger (2)"