Các khung trang trí đẹp cho Blog

bùi sang thọ | 19.3.15 | Blog |

Làm đẹp cho Blog luôn là công việc quan trọng hàng đầu để thu hút khách ghé thăm. Một trang Blog có bố cục, cách trình bày rõ ràng, sinh động và dễ nhìn luôn đem đến cho người xem sự thoải mái và hài lòng. Một trong những trang đáp ứng được những yêu cầu này là http://www.math2it.com/.

Bài viết chia sẻ đến các bạn cách trang trí một số khung trong bài đăng mà tôi sưu tập được ở trang http://www.math2it.com và trên internet. Cảm ơn bạn Đinh Anh Thi đã hướng dẫn tận tình.
1. Tạo khung định nghĩa

.dinhnghia{
  display:block;
  background: #d4faff;
  padding: 15px 20px;
  margin: 20px 0;
  position: relative;
  
  /*Font*/
  font-size: 15px;
  line-height: 1.4;
  color: #4d4d4d;
  text-align: justify;
  
  /*Borders - (Optional)*/
  border-left: 15px solid #37c3d4;
  border-right: 2px solid #37c3d4;
  
  /*Box Shadow - (Optional)*/
  -moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;
  box-shadow: 2px 2px 15px #ccc;
}

Quê hương là chùm khế ngọt, cho con trèo hái mỗi ngày.

2. Tạo khung định lý

.dinhly{
  display:block;
  background: #fef0e8;
  padding: 15px 20px;
  margin: 20px 0;
  position: relative;
  /*Font*/
  font-size: 15px;
  line-height: 1.4;
  color: #666;
  text-align: justify;
  /*Borders - (Optional)*/
  border-left: 15px solid #f36619;
  border-right: 2px solid #f36619;
  /*Box Shadow - (Optional)*/
  -moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;
  box-shadow: 2px 2px 15px #ccc;
}

Trong một không gian Euclide bất kỳ luôn tồn tại cơ sở trực chuẩn.

3. Tạo khung phụ đề

.phude{
  display:block;
  background: #f2f2f2;
  padding: 15px 20px;
  margin: 20px 0;
  position: relative;
  
  /*Font*/
  font-size: 15px;
  line-height: 1.4;
  color: #4d4d4d;
  text-align: justify;
  
  /*Borders - (Optional)*/
  border-left: 15px solid #808080;
  border-right: 2px solid #808080;
  
  /*Box Shadow - (Optional)*/
  -moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;
  box-shadow: 2px 2px 15px #ccc;
}

Các khung này được tham khảo từ bạn Đinh Anh Thi.

Cách sử dụng: Khi viết bài bạn chuyển sang chế độ HTML, bỏ phần nội dung cần thể hiện trong khung định nghĩa (tương tự cho định lý và phụ đề) trong thẻ dưới đây

<div class="dinhnghia" style="text-align:justify;">
noi dung dinh nghia
</div>

4. Tạo khung blockquote đẹp

blockquote{
  display:block;
  background: #fff;
  padding: 15px 20px 15px 45px;
  margin: 10px 0;
  position: relative;
  
  /*Font*/
  font-size: 15px;
  line-height: 1.4;
  color: #666;
  text-align: justify;
  
  /*Borders - (Optional)*/
  border-left: 15px solid #c76c0c;
  border-right: 2px solid #c76c0c;
  
  /*Box Shadow - (Optional)*/
  -moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;
  box-shadow: 2px 2px 15px #ccc;
}

blockquote::before{
  content: "\201C"; /*Unicode for Left Double Quote*/
  
  /*Font*/
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: #999;
  
  /*Positioning*/
  position: absolute;
  left: 10px;
  top:5px;
}

blockquote::after{
  /*Reset to make sure*/
  content: "";
}

blockquote a{
  text-decoration: none;
  cursor: pointer;
  padding: 0 3px;
  color: #c76c0c;
}

blockquote a:hover{
 color: #666;
}

blockquote em{
  font-style: italic;
}

Cách sử dụng: Bạn quét chọn nội dung cần đặt trong khung blockquote rồi nhấn biểu tượng dấu ngoặc kép trên thanh công cụ như hình dưới

 

Nếu Latex là công cụ tuyệt vời của toán học thì toán học là công cụ tuyệt vời của cuộc sống. Đi trên con đường của TeX, có thể bạn phải độc hành, có thể bạn phải gặp rất nhiều khó khăn, gian khổ nhưng ở phía cuối con đường, tôi chắc với các bạn rằng đó sẽ là nơi với nhiều hoa thơm cỏ lạ, sẽ là một nơi với dòng sông xanh biếc, sẽ là một nơi mà bạn sẽ nhìn thấy bầu trời đẹp cao xa, và sẽ là một nơi mà mọi người dùng TeX trên trái đất bao la này gặp nhau tự do và cởi mở. (của ai đó?)

Tiếp tục cập nhật...