Hiện nay các Kiểu sitemap có một điểm yếu là liệt kê tất
cả các nhãn trên blogspot. Tuy nhiên các blogspotter thì lại thích liệt kê bài
viết của một số nhãn nào đó (tức là nếu không thích liệt nhãn nào thì nhãn đó sẽ
không nằm trong Sitemap, điểm này rất cần thiết). Giải pháp tối ưu là phải làm
sao có một sitemap đáp ứng được nhu cầu tùy biến của blogspotter.
Sau khi nghiên cứu vấn đề này, mình đã nghĩ ra ý tưởng vận dụng
cách liệt kê các bài viết của một nhãn, một script rất phổ biến trên cộng đồng
Blogger, để tạo ra Sitemap, kết hợp CSS tạo hai cột, vừa tiết kiệm không gian
web, vừa giúp người dùng dễ dàng tùy biến theo ý thích.
 |
Ảnh
minh họa
|
Để tạo Sitemap như vậy, bạn hãy thực hiện như sau.
☼
Cách thêm Sitemap 2 cột cho blogger:
1- Đăng nhập vào
Blog
2- Vào Đăng bài mới (Posting) để tạo một bài viết có tiêu
đề là Sitemap (để trống phần nội dung), xuất bản
bài viết để lấy URL.
3- Vào Mẫu (Template)
4- Vào chỉnh sửa HTML (Edit HTML).
5- Đặt
đoạn code sau đây vào trước thẻ </head>.
<b:if cond='data:blog.url == "URL_trang_Sitemap"'>
<script type='text/javascript'>
//<![CDATA[
function allpostslist(json) {
document.write('<ul>');
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
//]]>
</script>
<style type='text/css'>
#sitemap{width:900px;margin:0;padding-bottom:15px;background:#ffffff;float:left;}
#sitemap ul {background:#FFFAF0;max-height: 250px !important; overflow:auto; padding:5px 10px;margin:0;list-style-type:none}
#sitemap ul:hover {background:#FDF5E6}
#sitemap ul li {list-style: disc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitjgxXrI1JE82v2ZYXd1R84zoinmgNDxeGtosvBRbQWu1GOe2rq59cbluMObJa0v7sRX16ITZraFZ_0MwJ6rbzJEtltux9NSEJ6PlDZ6Wcr0PuYbWWGEe8JAggq8aq-RINxNBL0UEajpCr/s320/iconslist.gif) inside; vertical-align: top; padding-left:10px;margin: 0;}
#sitemap ul li:hover {list-style: disc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_73FSCgqAGEDleM-omWwiUYxsoDpZ7yli836iU6PilenvbnRCo4kx1k7f4wcsXL_LPWt9g2yxtNTrjWogt3QWys4mEs-gRZnCE1pl_cHySFBMiMGJ5xbYyG7-Ivae1DC0YwrR7rT3uMHP/s320/iconslisthover.png) inside; vertical-align: top;padding-left:10px;margin: 0;}
.sm-left{float:left;width:45%;margin:0 10px 0px 10px;font-size:14px;tex-align:justify}
.sm-right{float:right;width:45%;margin:0 10px 0px 10px;font-size:14px;tex-align:justify}
p.smtitle {border-bottom:1px dotted #789;clear:both;color:
#2554C7;font-family:Century Gothic;font-size:25px;padding:10px 50px 5px
0;text-align:left;text-shadow:2px 2px 1px #789;text-transform:lowercase;}
#content-wrapper{display:none}
</style>
</b:if>
Tùy
chỉnh:
- URL_trang_Sitemap là URL bài đăng lấy
từ bước 2.
- Bạn
có thể điều chỉnh độ rộng Sitemap bằng cách chỉnh width:900px theo đúng độ rộng blogspot của bạn
- Bạn
chú ý phần màu xanh mình
đã thêm vào để làm cho site map đẹp hơn với các nhãn có nhiều bài đăng sẽ
xuất hiện thanh cuộn, bạn có thể điều chỉnh chiều cao tối đa cho mỗi nhãn
bằng cách chỉnh sửa thông số max-height:
250px, thành
chiều cao bạn muốn, không lên đặt quá lớn.
- màu đỏ là hiệu ứng nền khi chưa dê
chuột.
- màu cam là hiệu ứng khi dê chuột
vào.
- Bạn có thể điều chỉnh độ rộng của .sm-left
và
.sm-right bằng thuộc tính width:45% nhưng
tổng phần trăm <=100%
- Chú
ý thuộc tính display:none để ẩn đi một số ID và CLASS cần thiết. Tải 2 file icon về
áp dụng cho blogspot của bạn, tránh dùng chung file: iconslist.gif (file
ảnh khi chưa dê chuột vào tiêu đề bài viết) và iconslisthover.png (file ảnh khi dê chuột vào
tiêu đề bài viết) .
6- Bấm Lưu Mẫu lại.
7- Tìm dòng:
<div id='content-wrapper'>
Nếu blogspot bạn không có dòng này thì tìm đến dòng
<div class='main-outer'> . Bạn hãy điều chỉnh code ở bước 5 #content-wrapper{display:none} thành .main-outer,.sidebar .widget,.footer-outer,.titlewrapper,.header-outer, .navbar {display:none}
- Đặt trước nó bằng đoạn code bên dưới.
<b:if cond='data:blog.url == "URL_trang_Sitemap"'>
<div id='sitemap'>
<div class='sm-left'>
<p class='smtitle'><a href='/search/label/Nhãn 1?max-results=10'>Tiêu đề Nhãn 1</a></p>
<script src='/feeds/posts/summary/-/Nhãn 1?max-results=500&alt=json-in-script&callback=allpostslist'/>
<p class='smtitle'><a href='/search/label/Nhãn 2?max-results=10'>Tiêu đề Nhãn 2</a></p>
<script src='/feeds/posts/summary/-/Nhãn 2?max-results=500&alt=json-in-script&callback=allpostslist'/>
<p class='smtitle'><a href='/search/label/Nhãn 3?max-results=10'>Tiêu đề Nhãn 3</a></p>
<script src='/feeds/posts/summary/-/Nhãn 3?max-results=500&alt=json-in-script&callback=allpostslist'/>
</div>
<div class='sm-right'>
<p class='smtitle'><a href='/search/label/Nhãn A?max-results=10'>Tiêu đề Nhãn A</a></p>
<script src='/feeds/posts/summary/-/Nhãn A?max-results=500&alt=json-in-script&callback=allpostslist'/>
<p class='smtitle'><a href='/search/label/Nhãn B?max-results=10'>Tiêu đề Nhãn B</a></p>
<script src='/feeds/posts/summary/-/Nhãn B?max-results=500&alt=json-in-script&callback=allpostslist'/>
<p class='smtitle'><a href='/search/label/Nhãn C?max-results=10'>Tiêu đề Nhãn C</a></p>
<script src='/feeds/posts/summary/-/Nhãn C?max-results=500&alt=json-in-script&callback=allpostslist'/>
<p
style="font-family:verdana,arial,sans-serif;font-size:10px;"><a
href="http://namkna.blogspot.com/2011/08/tao-sitemap-ep-cho-blogspot.html"
target="_blank">Add to your blogspot ?</a></p>
</div>
</div>
<div style='clear: both;'/>
</b:if>
Tùy
chỉnh!
- Phần nằm sau thẻ <div
class='sm-left'> là cột chứa
các nhãn bên trái,
- Phần nằm sau thẻ <div
class='sm-right'> là cột chứa
các nhãn bên phải.
- Tùy theo số lượng nhãn và số lượng
bài viết trên blogspot mà bạn phân phối và bố trí thêm bớt các nhãn sao
cho cân đối, theo định dạng như trên.
- Thay các phần Nhãn 1,2,3 và Nhãn A,B,C thành tên các nhãn.
- Thay Tiêu đề Nhãn
1,2,3 và Tiêu đề Nhãn
A,B,C thành phần
mô tả của các nhãn tương tứng.
Lưu ý: Blog của bạn phải đăng ký nguồn cấp dữ liệu của feedbune để lấy dữ liệu nha. Nếu chưa đăng
ký thì xem bài này: Cách đăng ký và sử dụng
FeedBurner cho Blogspot
8- Bấm Lưu Mẫu lại.
- Giờ bạn trở lại blog và vào bài viết bạn tạo ở bước 2 để xem
thành quả nha.
(Thuthuatblogger.info)
Hãy like nếu bài viết có ích →
Kết bạn với gisgpsrs trên Facebook
để nhận bài viết mới nóng hổi
Không có nhận xét nào:
Đăng nhận xét