Slider ảnh là tiện ích trình chiếu ảnh, nó sẽ giúp Blog của bạn trở nên đẹp mắt và chuyên nghiệp hơn rất nhiều
Trong bài viết này, mình sẽ giới thiệu cách làm slider ảnh cho blogger bằng CSS. Slider ảnh này hiển thị 2 loại ảnh là thumbnail và ảnh full và có các hiệu ứng hover đẹp mắt
Slider ảnh cho Blogger bằng CSS
TẠO SLIDER ẢNH CHO BLOGGER BẰNG CSS
1. Đăng nhập vào blog
2. Chọn mẫu (template)
3. Chọn chỉnh sửa HTML.
4. Chèn dưới đây trước thẻ </head> :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<style type='text/css'>
.image-container {
position: relative;
width: 640px;
height: 530px;
margin: 0 auto;
text-align:center;
overflow: hidden;
}
.image-container a {
display: inline;
text-decoration: none;
}
/* Mini-thumbnails style */
.mini-thumbnail {
width: 18%; /* mini-thumbnails width */
margin:1px;
opacity: 1;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
}
/* Style for the main thumbnail */
.large-thumbnail {
position: absolute;
width: 100%;
top: 800px;
margin:0 auto;
text-align: center;
display: block;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
}
.feature {
top: 110px;
width: 100%;
opacity: .3;
}
/* style for the selected mini-thumbnail */
a:hover .mini-thumbnail {
opacity: .5;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}
/* transition effects for the selected image */
a:hover .large-thumbnail {
top: 110px;
width: 100%;
z-index:3;
opacity: 1;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
}
</style>
|
Trong đó :
|
|
width: 640px;
height: 530px;
|
lần lượt là độ rộng, độ cao của slider ảnh. Save lại và tiếp tục
5. Chọn Thêm Tiện ích (Add Widget)
6. Tạo 1 tiện ích HTML/Javarscip và chèn đoạn code phía dưới vào
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<div class="image-container">
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL1" />
<img class="large-thumbnail" src="LARGE-THUMB-URL1" />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL2" />
<img class="large-thumbnail" src="LARGE-THUMB-URL2" />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL3" />
<img class="large-thumbnail" src="LARGE-THUMB-URL3" />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL4" />
<img class="large-thumbnail" src="LARGE-THUMB-URL4" />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL5" />
<img class="large-thumbnail" src="LARGE-THUMB-URL5" />
</a>
<a href="javascript:void(0);">
<img class="large-thumbnail feature" src="LARGE-THUMB-URL" />
</a>
</div>
|
Trong đó
MINI-THUMB-URL1, MINI-THUMB-URL2, ….. là link ảnh thumbnail hiển thị ở trên
LARGE-THUMB-URL1, LARGE-THUMB-URL2, ….. là link ảnh full hiển thị khi rê chuột vào
LARGE-THUMB-URL là link ảnh mờ khi chưa rê chuột vào
Nếu các bạn muốn chèn link bài viết vào slider ảnh cho blogger thì thay javascript:void(0); bằng link bài viết
Cuối cùng, Save widget và tận hưởng
Post a Comment