Tiện ích Recent Post này, phần mô tả bài viết kèm theo hình ảnh gọn và đẹp, rất phù hợp cho việc đặt sau tiêu đề của các bài viết trong Blog.
Code tiện ích như sau: |
| Tiện ích Bài viết mới cho blog có mô tả link |
<style type="text/css">
.mota{
position: relative;
z-index: 0;
text-decoration:none;
}
.mota:hover{
background-color: transparent;
z-index: 50;
}
.mota span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px solid #000;
visibility: hidden;
color: black;
text-decoration: none;
}
.mota span img{
border-width: 0;
padding: 2px;
}
.mota:hover span{
padding:5px;
visibility: visible;
top: 20px;
left:50px;
width:250px;
background:#ccc;
text-align: justify;
}
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://dl.dropbox.com/u/74775294/anh/nothumbnail.gif";
showRandomImg = true;
tablewidth = 245;
cellspacing = 1;
borderColor = "#30a1db";
bgTD = "#fff";
imgwidth = 60; // độ rộng của ảnh thumbnail
imgheight = 60; // chiều cao của ảnh thumbnail
fntsize = 12;
acolor = "#E67C15";
aBold = true;
icon = " » ";
text = "no";
showPostDate = false;
summaryPost = 150;
summaryFontsize = 12;
summaryColor = "#000";
icon2 = " » ";
numposts = 5;
label = "All";
home_page = "http://dvt.com.vn/";
</script>
<script src="https://dl.dropbox.com/u/74775294/Filejs/s2-post.js" type="text/javascript"></script>
.mota{
position: relative;
z-index: 0;
text-decoration:none;
}
.mota:hover{
background-color: transparent;
z-index: 50;
}
.mota span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px solid #000;
visibility: hidden;
color: black;
text-decoration: none;
}
.mota span img{
border-width: 0;
padding: 2px;
}
.mota:hover span{
padding:5px;
visibility: visible;
top: 20px;
left:50px;
width:250px;
background:#ccc;
text-align: justify;
}
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://dl.dropbox.com/u/74775294/anh/nothumbnail.gif";
showRandomImg = true;
tablewidth = 245;
cellspacing = 1;
borderColor = "#30a1db";
bgTD = "#fff";
imgwidth = 60; // độ rộng của ảnh thumbnail
imgheight = 60; // chiều cao của ảnh thumbnail
fntsize = 12;
acolor = "#E67C15";
aBold = true;
icon = " » ";
text = "no";
showPostDate = false;
summaryPost = 150;
summaryFontsize = 12;
summaryColor = "#000";
icon2 = " » ";
numposts = 5;
label = "All";
home_page = "http://dvt.com.vn/";
</script>
<script src="https://dl.dropbox.com/u/74775294/Filejs/s2-post.js" type="text/javascript"></script>
Trong đó:
- Width: 250px :độ rộng của bảng nhỏ khi rê chuột vào tiêu đề bài viết.
- Background: #ccc : màu nền của cửa sổ popup khi rê chuột vào tiêu đề bài viết.
- Imgwidth = 60 : chiều rộng của ảnh đại diện.
- Imgheight = 60 : chiều cao của ảnh đại diện.
- SummaryPost = 150 : số ký tự hiển thị ở cửa sổ Popup khi khi rê chuột.
- Home_page: địa chỉ blog của bạn, (thay http://dvt.com.vn/ thành URL blog của bạn).
- Label: Tên nhãn muốn hiển thị, hãy thay All thành tên nhãn của bạn.
- Numposts=5: Số bài muốn hiển thị trong tiện ích này.
Thủ thuật trên áp dụng cho tất cả các bài viết trong Blog, nếu muốn áp dụng cho bài viết trong cùng một nhãn thì thay:
https://dl.dropbox.com/u/74775294/Filejs/s2-post.js
bằng:
https://dl.dropbox.com/u/74775294/Filejs/s2-label.js
(Bạn nên sử dụng google code lưu các file ảnh, file js riêng để blog load nhanh hơn. Nếu chưa biết thì xem hướng dẫn tại đây)
Cách tiến hành:
1. Đưa vào tiện ích:
- Đăng nhập vào Blog
- Vào Bố cục
- Thêm 1 tiện ích HTML/Javarscrip và dán code vào.
2. Chèn vào sau tiêu đề bài viết:
- Đăng nhập vào Blog
- Chọn Mẫu › Chỉnh sửa HTML ›
Thêm đoạn code như sau để tiện ích chỉ xuất hiện trong các bài viết:
<b:if cond='data:blog.pageType == "item"'>
<p class='ads'>
code
</p>
</b:if>
- Lưu mẫu.<p class='ads'>
code
</p>
</b:if>
Đăng nhận xét