Hướng dẫn sử dụng sticky đơn giản mà sinh động

Written By pdanghai.com

Thứ Ba, 14 tháng 5, 2013

Chia sẻ :

Tweet

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.

Bạn ghi nội dung sticky của bạn ở đây

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/AVvXsEgqHU12RPvot5XgUOv4aDjuPFJd4JZZBUWgviQduLhyZm1z1WIO6v5tK3NPJCLYkFN-qKH7AdXtubJLOgNSKAyu-1s-IzQ0sZxzi62KNSpKWWcSaqVjNnU7xIKyotGjxvXGt7_K8nOPblbP/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>

Chúc các bạn thành công!

Nguồn: VnBlogspot

Tag : Blogger , stick đơn giản , sticky , Thủ thuật IT