Tạo khung ghi chú giống giấy NOTE cho blogspot.

Tạo khung ghi chú giống giấy NOTE cho blogspot.

Trong bài viết ngày hôm nay mình sẽ chia sẽ cho các bạn đoạn code ngắn để tạo một khung ghi chú tương tự như giấy note mà chúng ta sài.
Tác dụng của nó có thể áp dụng lên một số blog về template hay nhật kí... Bên cạnh đó bạn cũng có thể sử dụng nó như một giấy note thật sự.
Cách làm cũng khá đơn giản gồm 3 bước:

Bước 1: Chèn đoạn css bên dưới lên trên thẻ ]]></b:skin>

.template-nfo{padding:14px 15px 8px 60px;margin:25px 0;text-align:left;line-height:38px;background-color:#FAF39A;background-image:-webkit-linear-gradient(#BE8A5F 1px,transparent 1px),-webkit-linear-gradient(#BE8A5F 1px,transparent 1px),-webkit-linear-gradient(#D5CF81 1px,transparent 1px);background-image:linear-gradient(#BE8A5F 1px,transparent 1px),linear-gradient(#BE8A5F 1px,transparent 1px),linear-gradient(#D5CF81 1px,transparent 1px);background-size:1px 1px,1px 1px,38px 38px;background-repeat:repeat-y,repeat-y,repeat;background-position:30px 0,32px 0,0 50px;width:40%;position:absolute;top:0;right:0}

Bước 2: Khi viết bài bạn chuyển qua tab HTML và dán đoạn code bên dưới vào trong.

<div class="template-nfo">
<li>Tên: Huy</li>
<li>Tuổi: Hỏi làm gì (Changelog) </li>
<li>Website: code5giay.blogspot.com</li>
<li>Bạn gái: chưa có</li>
<li>Nơi ở: Bình Dương</li>
<li>Nơi ở: Bình Dương</li>
<li>Nơi ở: Bình Dương</li>
<li>Nơi ở: Bình Dương</li>
</div>

Bước 3: Lưu lại và hưởng thụ.

Xem Demo

~~ Chúc Các Bạn Thành Công ~~