Một kiểu sticky bằng CSS đơn giản mà sinh động

Sticky là một miếng giấy nhắc nhở nho nhỏ, không những thường được gắn xung quanh chỗ làm việc mà còn được một số blogger áp dụng vào bài vi...

Sticky là một miếng giấy nhắc nhở nho nhỏ, không những thường được gắn xung quanh chỗ làm việc mà còn được một số blogger áp dụng vào bài viết, nhìn khá bắt mắt. nên sưu tầm về cho mọi người.

Đây là một ví dụ về sticky. Các bạn nên viết nội dung dài vừa phải, giúp cung cấp thông tin bổ ích cho bạn đọc.

Loại sticky mình hướng dẫn các bạn thực hiện sẽ có màu nền vàng, được ghim bằng kim đỏ, nằm về bên phải bài viết.

Với sticky loại này, tác giả sẽ dễ dàng nhắc nhở cho bạn đọc về một vấn đề gì đó cần quan tâm hơn ngoài nội dung chính của bài viết.

Phần demo được kèm theo bài viết này, các bạn có thể xem bên phải bài.

Để cài đặt sticky này, các bạn tìm trong code template của mình đoạn ]]></b:skin> rồi dán lên trên đó đoạn code sau:

.sticky {
padding: 0 20px 20px 20px;
border: 1px solid #DDD;
border-top: none;
border-left: none;
width: 160px;
min-height:150px;
float: right;
margin: 15px 0 15px 15px;
background-color: yellow;
font-size:16px;
font-style:italic;
line-height:1.5em;
color: darkRed;
}
.sticky div{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPPb1l8MjP5-66Vmhnxgh1r6r2b934TWSvT6R6O9Eyt9UWVkqnqreDcMFJZwV50JSznITYxUr7Ed5EK7Yvb_RbXHyaeKNKC435G78YBS59KSoliz7zLVHFO8jwyHSQ7w_kZ3rngU6seXEF/s47/pin-right.png) no-repeat;
width: 47px;
height: 41px;
margin: -20px auto 10px auto;
}

Mỗi lần cần chèn sticky trong bài viết, các bạn dùng code theo ví dụ sau (ở chế độ HTML):

<div class="sticky">
<div>
</div>
Bạn ghi nội dung sticky của bạn ở đây
</div>