Khung chứa code cho bài viết

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ã code chúng ta đặt vào bài viết sẽ gọn gàng,dễ nhìn và chuyên nghiệp hơn!
Đây là các mẫu khung code mà mình sưu tầm từ nhiều trang 

☼ 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 :

<pre> ....
Code của bạn
......</pre>

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: jemy_viet@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/AVvXsEhaR1mEwqiPf1_ch6xxgzw9Ua4goszvBKXmVnz2mNw9zA61LOuhICEdeOiy9mtpr7KO0udsPXRkC0sUymj8vaPhmhuB74DMHKHUvJLPDf_3WB6Zx_LSiLwRzdfPVOyq2Dq3ejyr4gD0rUY/s1600/prepb3-khung-chua-code-namkna-blogspot-com.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/AVvXsEieEkg86L5lkfI-LJkQVFH0viR2hR0Y2mkgQyxUkdGW-0UGhVa-SoFvxllI4B2BDOvRYvWkvvu1p5YeXkd2PQcwvsqhwHg0f9HMCvS9EpCZZ4b72NF8beKVxgAie99zoIC7wkPEGwJ7tFM/s1600/prepb3-namkna-blogspot-com-1.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:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYE9eitnaMJUtwtwQJDr735dVB6jSXA1HkhOwkb5XO4qiXIN92bXKrszchpUEnbNyqf8YAk3G0b4_Eg45lDsICEaPfIwn-6sF9NsU9g0BUKUuk1mWDR6azM4LaSwtWgW9Z6sU8dtFTDbk/s1600/pen-namkna-blogspot-com-1.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/AVvXsEiMPI1nu4OJGRRkdXeOvKxIoYDp_XbrJ30zIrpeGyZLsgW52_XNEAsUvwjeiBz5YJWCql-T7dfmGdbTats5ET8tBzT6IG83-gCKxer_Hizefx3g1-4r22LMfctJNCVpepMYgtZGDOiyGj0/s1600/Note-namkna-blogspot-com.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:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMpK23GYzoR3dw3lWMi2ZKI0Xfbx0NsCZbYkD0Iurb4UcS2w21DsAYTIS21aVQaqIoh24PcJYTQ-mOWIpiwPSp0Yz7-Ap290Gr9n0d2WlaQDFD6TSYDZ0yl28zWJ-2KDQUyhOjimr4DqA/s1600/code-2-namkna-blogspot-com.png);
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/AVvXsEhCXlC44BbcachXcIYTec2NQeNBH3h0gKIw7BrN_kgE_ycdqHHftyqykGwFO5zDBirv0p5hXJMIUwj4EGS9DDHLUK9V5FP_IfShm2eJ9wAO0XJIbCnreMAj2CQgb8aQl4f-fyp2On9z4W4/s1600/Svip4u-namkna-blogspot-com.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/AVvXsEgoMYJUylWo4B1W0vaF8rtoDaJ3SDb1N0LlnRQGgHHxTmvVEnvBjGtN2AV9HR10jxn66ble__fd9lgPp-hyRNN7dyFJnIgrxA2TqNmQdO8jikEXam6lE8TpqmPXGYNQ64nRyW1eJxZdOuQ/s1600/imgbg-namkna-blogspot-com-hot.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBgUC1ZM2NksuYlT5QyGXBosEBZxiI9_DkoAguIwXsZGr4JsZNnuC-5iaN0gjQSb_pkTT_JqBJvkl9Ik-NkZVVIHBksIU8i04_kE_0ffELt_HJGiYRj14TOerOTH_0nAU0sxUpIQIhLCQ/s1600/code-namkna-blogspot-com.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ẻ.