[ Hướng Dẫn ] Tạo Khung Chứa Code Chuyên Nghiệp Cho Blogspot

     TẠO KHUNG CHỨA CODE ĐẸP CHO BLOGSPOT

Nếu bạn là người hay viết các code hướng dẫn thì việc tìm ra một số code đẹp cho blogspot là hoàn toàn cần thiết. Để cung cấp cho độc giả một số mẫu mã đa dạng thì mình sẽ liệt kê ra vài  Khung Chứa Code Chuyên Nghiệp Cho Blogspot để bạn lựa chọn. Và cũng hướng dẫn chi tiết cách chèn code vào bài viết một cách nhanh nhất. Bắt đầu nào.

 𑁣 Cách tiến hành:

1- Đăng nhập (Login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sửa HTML (Edit HTML)

 Tìm đến thẻ  ]]></b:skin> ( bấm ctrl + F để tìm )  và chèn đoạn mã sau vào trước nó .

.code {
border-radius:20px 0;
max-height:250px;
min-height:50px;
margin : 10px;
padding : 10px;
clear : both;
list-style-type : none;
overflow:auto;
background: #E6E6E6;
background: -moz-linear-gradient(top, #FFF, #f5f5f5 5%, #e2e2e2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFF), color-stop(.03, #f5f5f5), to(#e2e2e2));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f5f5', EndColorStr='#e2e2e2'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f5f5', EndColorStr='#e2e2e2')"; /* IE8 only */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border:1px solid #d0d0d0;
border-bottom:1px solid #b5b5b5;
color:#5e5e5e;
text-shadow: 1px 1px 1px #FFF}

            Chèn xong thì bấm lưu lại là được, Đây là khung mình thường dùng.

tạo khung chứa code

          LƯU Ý : Cách sử dụng khi chèn code!

Sau này mỗi lần trình bày code thì bạn vào phần HTML của bài viết , chèn vào nơi bạn muốn code hiển thị sử dụng cấu trúc như dạng sau:

<div class="code">
 Nội dung đoạn code
 </div>

           Một số khung chứa code khác 

.code {
border-radius:20px 0;
max-height:250px;
min-height:50px;
margin : 10px;
padding : 10px;
clear : both;
list-style-type : none;
overflow:auto;
color:#FFF;
text-shadow: 0 -1px 1px #0d3474;
border:none;
background: #3675da;
background: -moz-linear-gradient(top, #4986e8, #76b8fc 95%, #4986e8);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4986e8), color-stop(.9, #76b8fc), to(#4986e8));
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#4986e8', EndColorStr='#76b8fc'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#4986e8', EndColorStr='#76b8fc')"; /* IE8 only */
box-shadow: inset 0px 2px 5px #1c4c7d, 0 1px 0px #c9d5e8;
-webkit-box-shadow: inset 0px 2px 5px #1c4c7d, 0 1px 0px #c9d5e8;
-moz-box-shadow: inset 0px 2px 5px #1c4c7d, 0 1px 0px #c9d5e8;}