Home » Archives for 05/14/09
Trang trí cho tab RSS Feed
09:55 |
[FD's BlOg] - Bài viết giúp tạo cho các bạn một bảng RSS Feed khá đẹp. Bài viết này mang tính thiết kế nhiều hơn là thủ thuật và dành cho nhưng bạn mới bắt đầu làm quen với blogspot.
Xem hình minh họa kết quả:
- Vài điều về hình minh họa:
+ Feed (Post) : Link RSS của các bài viết của bạn (link mặc định là http://YOURBLOG.blogspot.com/feeds/posts/default, hoặc http://feeds2.feedburner.com/YOURBLOG-Feed (link này có được khi bạn đăng kí từ trang chủ http://feedburner.google.com/))
+ Feed (comments) : Link RSS của các bài viết của bạn (link mặc định là http://YOURBLOG.blogspot.com/feeds/comments/default)
+ Feed (Email) : là mục đăng kí nhận bài viết qua email. (đây là 1 tiện ích của Feedburner)
+ Counter readers: là công cụ đếm số người đọc bài viết qua email.(cũng là 1 tiện ích của Feedburner).
- Để thực hiện 1 bảng RSS link hòan chỉnh như trong hình minh họa thì bạn phải đăng kí chi mình một địa chỉ link RSS bên feedburner rồi sự dụng 2 tiện ích của feedburner là đăng kí nhận bài qua email, và tiện ích đếm người đọc bài viết.
☼ Bây giờ ta bắt đầu:
1. Vào bố cục (Layout)
2. Vào phần tử trang (page element)
3. Tạo một widget HTML/Javascript ở sidebar.
4. Và dán code bên dưới vào:
<table border="1" style="text-align: left; width: 240px; height: 100px; font-weight:bold; background:#fff;" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td><a href="http://YOURBLOG.blogspot.com/feeds/posts/default"><span style="text-decoration: underline;"><img alt="Feeds" style="border: 0px solid ; width: 110px; height: 110px; float: left;" src="http://2.bp.blogspot.com/_8PJ-pgoBhWQ/SLSjKZSO6uI/AAAAAAAAEHs/1_Vb9U5gx88/s320-R/rss128pw8.png" title="¡Suscribe Feed!"/></span></a><br/>
<a href="http://YOURBLOG.blogspot.com/feeds/posts/default">Feed (Post)</a><br/>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=YOURBLOG-Feed" title="Recive my post by email">Feed
(email)<br/>
</a><a href="http://YOURBLOG.blogspot.com/feeds/comments/default" title="Suscribe my comments">Feed
(Comments)<br/>
</a><a href="http://feeds2.feedburner.com/YOURBLOG-Feed"><img width="88" style="border:0" alt="" src="http://feeds2.feedburner.com/~fc/YOURBLOG-Feed?bg=99CCFF&fg=444444&anim=0" height="26"/></a>
<br/>
</td>
</tr>
</tbody>
</table>
- Các dòng code màu xanh có được khi bạn đăng kí từ Feedburner, và đọan code màu xanh dưới cùng là code của bộ đếm readers mà Feedburner cung cấp cho bạn.
Chúc các bạn thành công.
Thủ thuật cho quản trị Blog - Tạm ngưng họat động của blog để bảo trì
06:21 |
[FD's BlOg] - Bài viết giới thiệu cho các blogger thủ thuật offline trang blog của mình để tiện cho việc chỉnh sửa giao diện của blog, hay bảo trì trang blog của mình.Hình ảnh minh họa:
Khi việc chỉnh sửa blog của bạn hơi lâu, mất nhiều thời gian, hay ảnh hưởng nhiều đến giao diện của blog, hoặc khi bạn muốn bảo trì, dọn dẹp hay nâng cấp blog của mình mà không muốn người khác ghé thăm blog của mình thì bạn có thể cấp quyền cho blog. Và phần cài đặt - quyền - kéo xuống dưới phần ai có thể xem blog và click chọn "Chỉ cho tác giả". xem hình minh họa bên dưới:
Tuy nhiên với cách này không mấy tiện lợi khi người khác ghé thăm vào blog, và một số người không biết blog bạn đang bảo trì hoặc tưởng rằng blog bị xóa, sẽ làm giảm lượng truy cập cho blog.
Vì vậy cần phải tạo một thông báo cho việc bảo trì của bạn.
Để làm điều này ta chỉ cần chèn vài đọan code nhỏ vào template là xong.
1. Đăng nhập blog
2. Vào Bố cục (Layout)
3. Vào chỉnh sửa code HTML(edit code HTML)
4. Chèn đọan code màu đỏ vào code template như bên dưới:
</head>
<body>
{NỘI DUNG THÔNG BÁO CỦA BẠN - có thể dùng hình ảnh, hay 1 đọan thông báo...}
<span class='item-control blog-admin'>
...
...
...
</span>
</body>
</html>
- Dòng lệnh <span class='item-control blog-admin'>...</span> dùng để cho phép duy nhất tác giả (chủ nhân blogger) có thể truy cập được blog.
5. Save template.
Chúc các bạn thành công.
Hiển thị thông tin bài viết phía trên tiêu đề khi xem bài viết
04:06 |
[FD's BlOg] - Một thủ thuật cho phép bạn hiển thị các thông tin của bài viết như : tiêu đề bài viết, số bài comment, Nhãn, ngày đăng.... Và bảng thông tin này chỉ xuất hiện ở bài viết.
Bài viết này mình chỉ chú trọng thủ thuật, chứ không đi sâu vào việc thiết kế giao diện cho bảng thông tin này. Nếu bạn nào muốn làm bảng cho đẹp hơn, pro hơn thì có thể tùy chỉnh thêm trong code CSS của bảng.
Xem hình minh họa kết quả:
☼ Bây giờ ta bắt đầu :
1. Vào bố cục (layout)
2. Vào chỉnh sửa code HTML (edit code HTML),(nên save template lại trước khi làm, vì khi gỡ bỏ nó có hơi chút phức tạp)
3. Chọn mở rộng mẫu tiện ích (expand widget template)
4. Đầu tiên chèn đọan code CSS vào trước dòng ]]></b:skin>
.meta-info {
background: red;
font-family: 'Century Gothic', sans-serif;
padding: 5px;
margin: 10px 0 0;
}
.meta-info .title {background: #AB8C61; color: #fff; padding: 3px;} // CSS của tiêu đề
.meta-info .comments {background: #999; color: #fff; padding: 3px;} // CSS của dòng comment
.meta-info .comments a {color: white; text-decoration: underline;}
.meta-info .labels {background: #AB8C61; color: #fff; padding: 3px;} // CSS của dòng nhãn
.meta-info .labels a {color: white;}
.meta-info .date {background: #999; color: #fff; padding: 3px;} // CSS của ngày đăng bài viết
5. Tiếp tục tìm đọan code bên dưới :
<b:section class='main' id='main' showaddelement='no'>
6. Chèn sau nó đọan code bên dưới:
<b:widget id='Blog99' locked='false' title='Blog Meta' type='Blog'>
<b:includable id='main' var='top'>
<b:if cond='data:blog.pageType == "item"'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
</b:loop>
</b:if>
</b:includable>
<b:includable id='post' var='post'>
<div class='meta-info'>
<div class='title'><b>Ban đang đọc bài:</b> "<b><data:post.title/>"</b>.</div>
<div class='comments'>
<b>Số bài nhận xét </b>: <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.numComments/> <data:top.commentLabelPlural/>
</a>
</div>
<div class='labels'>
<b:if cond='data:post.labels'>
<b><data:postLabelsLabel/></b>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</div>
<div class='date'>
<b>Ngày đăng</b>: <data:post.dateHeader/>.
</div>
</div>
</b:includable>
</b:widget>
- Các dòng code màu đỏ bạn có thể thay đổi chúng.
- Thọat hình các một vài bạn sẽ thắc mắc code không có thông tin về Nhãn(label) của bài viết, nhưng không phải vậy, dòng code <data:postLabelsLabel/> là để thay thế cho " Nhãn : ", bạn hòan tòan có thể xóa bỏ dòng này và thay bằng dòng mà bạn muốn hiển thị, ví dụ : "Nhãn bài đăng :" , hay những gì khác tương tự, tùy theo bạn.
- Ngòai ra bạn cũng có thể chèn các icon hình ảnh vào trước mỗi dòng màu đỏ để cho bảng trông bắt mắt hơn, để làm điều này bạn chỉ việc thêm thẻ <img src="link ảnh"/> vào trước mỗi dòng màu đỏ.
7. Save template.
Chúc các bạn thành công.
Top Hot
