Hướng dẫn đặt code trong khung bài viết đẹp cho Blogger

Nếu bạn đã từng cố gắng để dán một dòng lệnh HTML hay bất cứ code nào vào một Blogger mà bạn chưa hiểu biết nhiều về nó thì sẽ làm xấu một bài đăng trên blog của bạn. Điều này nó sẽ đồng nghĩa gây xấu với đôi mắt của độc giả và làm cho bạn trông như một thằng ngốc :d .
Bài viết này mình sẽ hướng dẫn cho các bạn tự viết cho mình một đoạn code mình cần trích dẫn vào bài đăng trên blog khá đơn giản nhưng cũng rất chuyên nghiệp. 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. Mình sẽ giới thiệu cho các bạn các mẫu pre code đẹp cho blogger. Để hiển thị code bạn cần đặt chúng giữa hai thẻ mở <pre> và </pre> trong bài viết của mình. Để cho khung code đẹp hơn chúng ta sử dụng các thuộc tính về màu chữ, màu nền, font chữ, đường viền... bằng cách thêm code CSS vào thẻ mở, ví dụ:

<pre style="color: #333333; background: #112233; width: 100%; height: 50px; overflow: auto; padding: 10px;"> code của bạn cần chèn </pre>

Nếu bạn sử dụng với code như trên thì nó khá bất tiện khi chúng ta viết 1 bài trên blog vì thế chúng ta sẽ viết theo 1 cách chuyên nghiệp hơn bằng cách thêm cúng vào một class mới và đặt chúng vào CSS của template

Không dì dòng nữa chúng ta sẽ thực hiện với các bước như sau:

- Bước 1: bạn đăng nhập vào blogger -> vào template như hình bên dưới:

 - Bước 2: bạn vào chỉnh sữa HTML như hình bên dưới:

- Bước 3: bạn bấm ctrl+f và gõ vào ]]></b:skin>  như hình bên dưới:

Bạn điền vào đoạn code sau đây:

.code {
background:#f5f8fa;
background-repeat:no-repeat;
border: solid #5C7B90;
border-width: 1px 1px 1px 20px;
color: #000000;
font: 13px 'Courier New', Courier, monospace;
line-height: 16px;
margin: 10px 0 10px 10px;
max-height: 200px;
min-height: 16px;
overflow: auto;
padding: 10px 10px 10px; width: 90%;
}

.code:hover {
background: #FAFAFA;
background-repeat:no-repeat;
}

- Bước 4: bạn lưu template lại và bạn viết 1 bài để test thử xem nó có hoạt động không? Bạn sẽ đặt code vào thẻ 

<code> và kết thúc bằng </code>

Kết quả sẽ được hiển thị như hình bên dưới:

Kết quả trả về rất đẹp và bắt mắt phải không? Và bạn cũng có thể chèn thêm vào những đoạn css khác để trang trí cho khung box code bạn thêm sinh động hơn

Mẫu 1: 

pre, code {
  display:block;
  font: 1em 'Courier New', Fixed, monospace;
  font-size : 100%;
  color: #666666;
  background : #fff url(http://img18.imageshack.us/img18/4672/3suv.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;
}

Kết quả:

Mẫu 2:

.pre, code {
display:block;
margin:10px 0;
border:1px solid #E6DB55;
background:#FFFBCC url(https://lh5.googleusercontent.com/-ebMaZeyFqCA/Uzu3mCa5TXI/AAAAAAAAFOc/xL4Vj2cWWiU/s32/hinhcode.png) top left no-repeat;
padding:10px 10px 10px 40px;}

Kết quả:

Kết luận: Với ai hiểu bíết nhiều về css thì sẽ tạo ra vô số khung đẹp cho blog, với những gì mình đã trình bày như trên các bạn làm theo thì sẽ tạo cho bài viết của mình trên blog thêm sinh động hơn, tinh tế hơn dưới ánh mắt của độc giả. Cám ớn các bạn đã xem bài viết của mình , chúc các bạn thaanh công!