Tiện ích Bài viết mới cho blog có mô tả link
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.
Cách tiến hành:
</p>
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
- Lưu mẫu và xem kết quả
- Đă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://viettin365.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://viettin365.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: thay http://viettin365.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
Không có nhận xét nào: