Tổng hợp khung chứa code trong bài đăng.

Lần trước mình đã giới thiệu (Xem ở đây). Bài này mình sẽ giới thiệu cho các bạn các mẫu pre code ( Khung chèn code ) đẹp cho blogspot.
Bài viết này sẽ hướng dẫn các bạn một cách khá đơn giản nhưng cũng rất chuyên nghiệp để đặt đoạn code mình cần trích dẫn vào bài đăng trên blog. Với cách làm này đoạn mã hiển thị sẽ trông dễ nhìn hơn và người đọc dễ sao chép khi muốn sử dụng.

Chúng ta sử dụng CSS để cho hiện thị thuộc tính khung hiện code.
Đây là các mẫu khung code mà mình thu thập được từ Internet.

☼ Bây giờ ta bắt đầu thủ thuật :
1. Đăng nhập blog
2. Vào bố cục (layout)
3. Vào chỉnh sửa code HTML (edit code HMTL). Search 1 trong các đoạn code tương tự.

pre {....}
code {....}
pre, code {....}

Nếu có thì bạn thay toàn bộ code css đó  bằng các code sau. Nếu tìm không có thì bạn chèn thẳng 1 trong các mẫu sau vào trước thẻ đóng ]]></b:skin>. Chèn xong bạn Save lại.
Tiếp theo,muốn sử dụng thì trong bài post bạn làm như sau :

 ....
Code của bạn
......

hoặc

<code> ......
Code của bạn
.....code>

Nếu có thắc mắc bạn có thể để lại trong comment hoặc pm trực tiếp qua Yahoo: tadaa_happy@yahoo.com

Mẫu 1 :

Code :

pre, code {
display:block;
font: 1em 'Courier New', Fixed, monospace;
font-size : 100%;
color: #666666;
background : #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvBcyLuwXou20J7mlejbOhx8IQQ1lmSPBsF6j_TV7d6V8gCi4iexdZYMsPSvB25mR04EqNNJ_VU8Ka1UnTkJJUvy9FuY4bKsit0YQaBq18dn_PGe_2GqFizJtnPMNo06wk4K95PtIOz94y/s1600/prepb3.png) repeat;
overflow : auto;
text-align:left;
border : 1px solid #99cc66; 
padding : 0px 20px 0 30px;
margin:1em 0 1em 0;
line-height:17px;}

Mẫu 2 : (Mẫu này giới hạn 100 dòng thôi nhé )

Code :

.pre, code {
display:block;
font: 1em 'Courier New', Fixed, monospace;
font-size : 100%;
color: #666666;
background : #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Ao9nu3rzUnOmSknkXXpUevlercNJFJ951ZrjfLXAqXTstjZfn4b1eSug8mFbG1tIAdKd2W03cGRMpMegtFeQVTbAV_H6B4KTYNey337Ke9-U3J4pxtxvwTDi-pfnr72v9dfOiYf3dZqo/s1600/prepb3.jpg) no-repeat left top;
overflow : auto;
text-align:left;
border : 1px solid #99cc66;
padding : 0px 20px 0 30px;
margin:1em 0 1em 0;
line-height:17px;}

Mẫu 3 :

Code :

.pre, code {
display:block;
margin:10px 0;
border:1px solid #E6DB55;
background:#FFFBCC url(http://lh5.ggpht.com/_u7a1IFxc4WI/TYhpXd5DUvI/AAAAAAAAA1c/lE_XTY6jV0E/pen.png) top left no-repeat;
padding:10px 10px 10px 40px;}

Mẫu 4 :

Code :

pre, code {
overflow:auto;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKcIzFck4Z2kNQBkIvw7D4R3jwRfOD06uwWcnCXaBwcECn7TJSk5Ky6vO0dsHlaUwinXi7N4oeM8RwCw5L8KWHEChxdSwu4KZiVfzx1mb7nYh-tQHNhbv7f-Zgti5WH1SLfUOfBHcYahwo/s1600/Note.png);
background-color:#FFF77A;
background-repeat:no-repeat;
padding-top:50px;
padding-left:5px;
padding-right:5px;
padding-bottom:5px;
border:#FF9900 thin dashed;
color:#000;}

Mẫu 5 :

Code :

pre, code {
color:#281800;
font-family:Courier New;
font-size:13px;
line-height:17px;
background-image:URL(https://lh4.googleusercontent.com/_kck7-TEWM-M/TWtvurFWTlI/AAAAAAAAAlM/qNLb07OebIw/code_tag_bg.jpg);
display: block;
padding-left: 4px;
padding-right: 4px;
border: 1px #FC0 dashed;
overflow:auto;
word-wrap:break-word;}

Mẫu 6 :

Code :

pre, code {
background-image: url(http://4.bp.blogspot.com/-QEZVbB0Gtqo/TY37IwFN1DI/AAAAAAAAAwI/dEtek7FZbZw/s1600/cm_note.gif);
background-position: 15px 15px;
background-repeat: no-repeat;
background-color: #FDD;
width: 118%;
border: #C72B2C dashed thin;
padding: 15px;
padding-left: 70px;
color: #D24E50;}

Mẫu 7 :

Code :

pre, code {
-moz-box-shadow: 0 0 10px #DDDDDD;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp0Jp8DzcVq2VM0FWugpLAvd8t_eheM4SHjCYAG2x1y0r4IAXAzM22n1guXzjcI_vXE2Vdqqx11HJ2pItNy3G4QHqjdSTpLzbHJn51foHwfDw5qrjCbpxzdcofv2T4Jw3EXQcwm3upazFI/s1600/Svip4u.png) repeat scroll 0 0 #FFFFFF;
border: 2px solid #CCCCCC;
clear: both;
color: #333333;
display: block;
font-size: 12px;
line-height: 15px;
margin: 10px auto 10px 30px;
overflow: auto;
padding: 15px;
white-space: pre;
width: 85% !important;
word-wrap: break-word;}

Mẫu 8 :

Code :

pre, code {
background:#eee;border:1px solid #ddd;clear:both;
font-family:Consolas,Monaco,"Courier New",Courier,monospace;
overflow-x:auto;
padding:10px;
white-space:pre-wrap;
word-wrap:break-word;}

Mẫu 9 :

Code :

pre, code {
display:block;
font: 1em 'Courier New', Fixed, monospace;
font-size : 100%;
color: #666666;
background : #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis8Us6YNMppOLOk-I9n6piWgwPi3AElDmq_M-jtl3dYZIW0WM3imxefLfrSpXAA8kjGYe5Gnr_BjNZkJjS6lWRptkNBox7qXwYd7GK_lHHH37i4rj-L4DT53Pj4uC0FPLqhD3Kq8PTSog/s1600/imgbg.png) repeat;
overflow : auto;
text-align:left;
border : 1px solid #99cc66; 
padding : 0px 20px 0 30px;
margin:1em 0 1em 0;
line-height:17px;}

Mẫu 10 :

Code :

pre, code {font-family:"Courier New",monospace;
font-size:16px;
display:block;
margin:10px 0 15px;
border:4px dotted #C9C9C9;
background:#E9E9E9 url(http://lh3.ggpht.com/_u7a1IFxc4WI/TYhpTf1J7bI/AAAAAAAAA1Y/h77P-jgZ0yA/code.png) top right no-repeat;padding:10px;overflow:auto;
}

Đây là các mẫu code mình thu thập được từ các blog,forum khác nhau. Do sử dụng công cụ Viewsource nên có thể đụng chạm với một số bạn. Chúc các bạn vui vẻ.

Đặt code trong khung trên bài viết của Blogger

Nguồn của bài viết này : http://www.thuthuatblog.com

Đã cập nhật: Giải pháp sử dụng tên miền miễn phí CO.CC cho Blogger và Yahoo! 360plus.

Theo yêu cầu của anh Thắng, tôi viết hướng dẫn này chia sẻ một trong những cách đơn giản nhưng không kém chuyên nghiệp để đặt code nằm trên khung trong bài đăng của Blogger. Với cách làm này đoạn mã hiển thị sẽ trông dễ nhìn hơn và người đọc dễ sao chép khi muốn sử dụng.

CSS điều khiển thuộc tính khung hiện code:

Để hiển thị code bạn cần đặt chúng giữa hai thẻ mở <pre> và đóng </pre> trong bài viết của mình. Muốn đẹp hơn bạn có thể thêm khung bằng cách sử dụng các thuộc tính về màu chữ, màu nền, font chữ, đường viền, kích thước rộng và cao, thanh trượt, cách viền ... bằng cách thêm code CSS vào thẻ mở, ví dụ:

.

Một cách chuyên nghiệp hơn chúng ta sẽ tạo ra một class mới và đặt chúng vào CSS của template (đặt vào bất kỳ vị trí nào giữa hai thẻ <b:skin><![CDATA[/* và ]]></b:skin> ). Việc làm này sẽ giúp bạn sử dụng khung hiển thị code thống nhất ở tất cả các bài viết có dùng khung và dễ chỉnh sửa thuộc tính khi muốn thay đổi. Ví dụ ở đây tôi tạo ra lớp pre-formatting có CSS như sau:

.pre-formatting{
  color: #333333;
  background: #999999;
  border: 2px solid #999999;
  overflow: auto;
  font-family: "Tahoma", Tahoma;
  padding: 10px;
}

Đương nhiên trong template nên bạn có thể sử dụng các biến lấy giá trị cho từng thuộc tính đã được định nghĩa trước đó. Ví dụ:

.pre-formatting{
  color: $textcolor;
  background: $bgcolor;
  border: 2px solid $bordercolor;
  overflow: auto;
  font: $headerfont;
  padding: 10px;
}

Cách sử dụng:

Để code xuất hiện mang thuộc tính của CSS đã lưu trước đó chúng ta sẽ sử dụng chế độ HTML để soạn bài và đặt code như sau:

Code

Câu hỏi đặt ra ở đây là chúng ta đã dùng class pre-formatting, vậy tại sao phải thêm CSS điều khiển height (chiều cao của khung), có dư thừa chăng? Câu trả lời phụ thuộc vào đoạn code mà bạn dùng. Nếu đoạn code đó ngắn bạn chọn giá trị chiều cao khung nhỏ và ngược lại, không nhất thiết phải thêm vào CSS của template vì chúng ta không biết trước đoạn code mỗi lần dùng. Không dư thừa chút nào!

Cũng xin lưu ý bạn phải chuyển đổi các ký tự đặc biệt thành mã HTML (ví dụ: < thành &lt; và > thành &gt;) trước khi đặt giữa hai thẻ trên. Và mách nhỏ hãy lưu đoạn code đó vào Post Template (Mẫu đăng bài) trong Settings (Cài đặt) | Formatting (Đang định dạng) để không cần phải gõ mỗi lần dùng.

CẬP NHẬT:

Tôi vừa biết thêm một cách chuyên nghiệp hơn và đơn giản hơn vì không phải ước lượng height cho đoạn code bạn dùng.

Bạn cũng thêm một đoạn CSS điều khiển hiển thị code như trên nhưng để chúng đi kèm thẻ pre hoặc code:

pre, code{
  color: $textcolor;
  background: $bgcolor;
  border: 2px solid $bordercolor;
  overflow: auto;
  font: $headerfont;
  padding: 10px;
}

Khi sử dụng trong post chúng ta sẽ đặt code theo một trong hai cách:

<pre>
... code ...
</pre>

Hoặc:

<code>
... code ...
code>

Với cách này người ta có thể dùng hình ảnh đánh số thứ tự làm nền để đoạn code hiển thị trông đẹp hơn. Bạn có thể chép đoạn code sau mà tôi đang dùng cho template của mình.

pre, code {
  display:block;
  font: 1em 'Courier New', Fixed, monospace;
  font-size : 100%;
  color: #666666;
  background : #fff url(http://img178.imageshack.us/img178/1307/prepb3.jpg) no-repeat left top;
  overflow : auto;
  text-align:left;
  border : 1px solid #99cc66; 
  padding : 0px 20px 0 30px;
  margin:1em 0 1em 0;
  line-height:17px;
}

Được đăng tại nhãn: Thủ thuật blog