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.
Minh họa bạn có thể xem ngay tại Blog của mình
 |
| Tiện ích Bài viết mới cho blog có mô tả link |
- Đăng nhập vào Blog
- Chọn Mẫu › Chỉnh sửa HTML ›
Thêm đoạn code
<b:if cond='data:blog.pageType == "item"'>
<p class='ads'>
code
</b:if>
để tiện ích chỉ xuất hiện trong các bài viết:)
Sau khi thêm sẽ thành như sau:
<b:if cond='data:blog.pageType == "item"'>
<p class='ads'>
<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://vietmkt24h.com/";
</script>
<script src="https://dl.dropbox.com/u/74775294/Filejs/s2-post.js" type="text/javascript"></script>
</p>
</b:if>
<p class='ads'>
<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://vietmkt24h.com/";
</script>
<script src="https://dl.dropbox.com/u/74775294/Filejs/s2-post.js" type="text/javascript"></script>
</p>
</b:if>
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://vietmkt24h.com/ 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)
0 nhận xét to "Tiện ích Bài viết mới cho blog có mô tả link"