Cài đặt Ghi chú với Hiệu ứng Gấp


Cài đặt ghi chú với các hiệu ứng gấp - Có thể đối với bạn với blog hoặc mẫu hướng dẫn blogger, bạn phải tạo một ghi chú cho khách truy cập. Trước khi sử dụng nó, hướng dẫn này là hoàn hảo cho bạn. Thủ thuật này được đặt tên là Note với CSS Fold Effect.


Cài đặt Ghi chú với Hiệu ứng Gấp

1. Mở Blogger> Mẫu> Thêm mã bên dưới trước ]]></b:skin> hoặc </style>

/* CSS Note by Arlina Design */
.note{position:relative;width:30%;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden}
.note.orange{background:#f39c12}
.note.crusta{background:#F2784B}
.note.river{background:#3498db}
.note:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #fff #27ae60 #27ae60;background:#27ae60;box-shadow:0 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);display:block;width:0}
.note.orange:before{border-color:#fff #fff #e67e22 #e67e22;background:#e67e22}
.note.crusta:before{border-color:#fff #fff #de6e45 #de6e45;background:#de6e45}
.note.river:before{border-color:#fff #fff #2980b9 #2980b9;background:#2980b9}

2. Lưu mẫu . Sau đó, để thêm ghi chú, bạn chỉ cần chọn một trong các mã HTML bên dưới với 4 lựa chọn màu sau đó thêm nó vào bài đăng trên tab

MÀU 1 :

<div class='note'>...HUNGCODER...</div>

MÀU 2 :

<div class='note orange'>...HUNGCODER...</div>

MÀU 3 :

<div class='note river'>...HUNGCODER...</div>

MÀU 4 :

<div class='note crusta'>...HUNGCODER...</div>

Ví dụ bạn có thể thấy trong bản demo bên dưới



MÀU 1 :
...HUNGCODER...

MÀU 2 :
...HUNGCODER...

MÀU 3 :
...HUNGCODER...

MÀU 4 :
...HUNGCODER...





Related Posts