Thiết kế khung nỗi nật thông báo chú ý cho Blogger (Blogspot)

Sunday, November 8, 2015

Thiết kế nỗi nật thông báo chú ý cho Blogger (Blogspot) khung định nghĩa, định lý và phụ đề được trang trí thiết kế dành riêng cho một class cụ thể.

Bước 1. Những đoạn code sau đây sẽ được đặt trước thẻ
]]></b:skin>

Bước 2. Copy đoạn code dưới đây:

.khungnoibat{
  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;
}

Trong đó, bạn có thể thay đổi theo ý mình ở những chỗ sau

background: #d4faff; - màu nền của khung, bạn có thể tự tìm cho mình mã code của màu ở link này.
font-size: 15px; - kích cỡ của font chữ.
color: #4d4d4d; - màu chữ.
border-left: 15px solid #37c3d4; - màu sắc thanh ở bên trái. 15px là độ dày.
border-right: 2px solid #37c3d4; - màu sắc thanh ở bên phải. 2px là độ dày.
khungnoibat - tên của class, bạn có thể thay đổi theo ý bạn.

Bước 3. Cách dùng nó là bạn tạo một thẻ div với tên của class giống như định nghĩa thuộc tính Class ở trên.

<div class="khungnoibat" style="text-align:justify;">
Thiết kế khung nỗi nật thông báo chú ý cho Blogger (Blogspot)
</div>

Vi dụ: