Hướng dẫn tạo khung chứa code theo ý của mình

Một blog cần khung chứa code cho nó, trông gọn gàng ngăn nắp hơn. Có nhiều cách code để tạo nên những khung chứa khác nhau. Trong bài viết này giới thiệu mọi người một khung chứa code giới hạn độ cao của các dòng code trong trang của bạn ngắn, đẹp hơn. Bắt đầu nhé!

Hướng dẫn tạo khung chứa code theo ý của mình

Bước 1: Đăng nhập vào blogger => Mẫu => Chỉnh sửa template

Bước 2: Ấn Ctrl + F tìm "pre" thay toàn bộ những gì cài đặt và xóa hết chúng đi

Bước 3: Tìm tới ]]></b:skin> và patse code lên phía trên nó

pre{
 overflow:auto;
 max-height:345px;
 border: 2px dashed #02ab68;
 border-radius:4px;
 display:block;
 padding:9.5px;
 margin:0 0 10px;
 font-size:13px;
 line-height:1.42857143;
 word-break:break-all;
 word-wrap:break-word;
 color:#333;
 background-color:#f5f5f5;
 }
 pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}

Bước 4: Lưu lại, quay ra bài viết ấn vào tab HTML, bạn sẽ viết như thế này

<pre>
 Code bỏ vào đây
</pre>

Hướng dẫn tạo khung chứa code theo ý của mình

Tùy chỉnh:

•  max-height:345px; là chiều cao lớn nhất khi nội dung bên trong dài thì cũng không vượt qua 345px
• border: 2px dashed #02ab68; 2px là chiều rộng đường viền; dashed là kiểu đường viền (bạn cũng có thể thay bằng solid hoặc dottd) #02ab68 là mã màu hexa cac bạn có thể thay đổi;

• border-radius: 4px; là độ cong của 4 góc, bạn nếu muốn cong hơn thì thay đổi lên 10, 20 gì đó
• padding: 9.5px; là khoảng cách từ viền tới chữ, các bạn có thể thay đổi số lớn hoặc nhỏ hơn
• color; đây là màu chữ của khung
• background-color; màu nền của khung chứa code, các bạn tìm mã hexa phù hợp nhé

Ok trên đây là mình hướng dẫn các bạn cách tạo một khung chứa code theo ý mình rồi nhé!

Continue Reading

Tạo khung chứa code đẹp cho blogspot

Tạo khung chứa code đẹp cho blogspot, tạo khung chứa code, Thủ thuật tạo khung chứa code trong bài viết.

Xin chào mọi người trong thủ thuật blogspot có rất nhiều thủ thuật giúp blogspot của bạn trở nên gọn gàng, bóng bẩy và trở nên chuyên nghiệp hơn. Trong bài viết "Tạo khung chứa code đẹp cho blogspot" sẽ hướng dẫn mọi người cách tạo khung chứa code để cho bài viết trong blog của bạn trông dễ nhìn hơn.

Tạo khung chứa code đẹp cho blogspot

<form name="MyTextBoxForm">
<input name="button" onclick="javascript:this.form.MyTextBox.focus();this.form.MyTextBox.select();" type="button" value="Select all"/>
<textarea cols="60" name="MyTextBox" rows="19" wrap="on" style="background:#eee; color:#464646; border:1px #A0C4EA dashed;">Nội dung</textarea>

Phần tùy chỉnh như sau:

• wrap="on" - Trong một dòng chữ dài quá khung sẽ hiện thanh trượt kéo ngang qua.
• wrap="off" - Nhiều dòng chữ quá số dòng khung quy định sẽ hiện thanh trượt kéo xuống.
• rows="18" - Số dòng trong khung chứa code.
• cols="59" - Bề rộng khung chứa code.

Ok trên đây là code khung chứa code bài viết đẹp cho blogspot. Chúc các bạn thành công!

Continue Reading