Tạo Auto Readmore cho Blogspot
Có những
template rất đẹp và bạn rất thích nhưng chỉ có một điểm khiến bạn đâu đầu đó là,
không có Readmore mà bài viết dài xuống dưới. Bài viết này được giải quyết được
vấn đề đấy. Tạo Auto Readmore cho Blogspot mang đến cho bạn một giải pháp tuyệt
vời để giúp bạn không còn gặp vấn đề khó khăn ấy nữa.
 |
| Tạo Auto Readmore cho Blogspot |
Tiến
Hành Tạo Auto Readmore cho Blogspot
1. Đăng nhập vào tài khoản Blogger
2. Vào mẫu (Template) => Chọn Chỉnh sửa HTML (Edit
HTML)
3. Tìm dòng code có dạng tương tự như sau:
<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a> </div> </b:if>
- Thay
thế toàn bộ đoạn ở trên bằng đoạn code bên dưới:
<b:if cond='data:post.hasJumpLink'>
<a class='jump-link' expr:href='data:post.url + "#more"'>Đọc tiếp</a><b:else/>
<b:if cond='data:blog.pageType == "index"'>
<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Đọc tiếp</a>
</b:if></b:if><div class='clear'/>
Thay
chữ Đọc tiếp thành chữ
mà bạn muốn như: Đọc thêm bài viết, xem
thêm,...
6. Tiếp
theo, chèn đoạn CSS sau phía trên
thẻ ]]></b:skin>
a.jump-link {color:#fff;text-decoration:none}
.jump-link {
float:right;
padding:6px 12px;
margin:20px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-align: center;
display:inline-block;
background: #f48423;
background: -moz-linear-gradient(top, #ffdf9e, #f5b026 5%, #f48423);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffd683), color-stop(.03, #f5b026), to(#f48423));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5b026', EndColorStr='#f48423'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5b026', EndColorStr='#f48423')"; /* IE8 only */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border:1px solid #e6791c;
border-bottom:1px solid #d86f15;
color:#FFF;
text-shadow: 0 1px 1px #6f3a02; }
.jump-link:hover {
background: #eb7d1d;
background: -moz-linear-gradient(top, #ffdf9e, #f1a91a 5%, #f07810);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffdf9e), color-stop(.03, #f1a91a), to(#f07810));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1a91a', EndColorStr='#f07810'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1a91a', EndColorStr='#f07810')"; /* IE8 only */
border-bottom:1px solid #d86f15; }
.jump-link:focus {
padding:7px 13px;
color:#FFF;
text-shadow: 0 -1px 1px #894906;
border:none;
background: #e47412;
background: -moz-linear-gradient(top, #f07810, #f1a91a 95%, #f07810);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f07810), color-stop(.9, #f1a91a), to(#f07810));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f07810', EndColorStr='#f1a91a'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f07810', EndColorStr='#f1a91a')"; /* IE8 only */
box-shadow: inset 0px 2px 5px #9b5901, 0 1px 0px #e0d5c7;
-webkit-box-shadow: inset 0px 2px 5px #9b5901, 0 1px 0px #e0d5c7;
-moz-box-shadow: inset 0px 2px 5px #9b5901, 0 1px 0px #e0d5c7; }
Save
template lại và xem kết quả.
- P/s:
Bạn dễ dàng nhận ra là thủ thuật này không dùng bất cứ image nào nhằm tăng tốc
độ tải trang web, ngoài ra thì các blog đang sử dụng Auto-readmore script cũng
hoàn toàn có thể áp dụng code này. Nếu có câu hỏi nào về chủ đề này thì comment
bên dưới nhé
Nguồn:
Nam Tạ
About the Author
0 nhận xét