Related Post với icon đẹp cho Blogger

Có rất nhiều cách để tạo một Tiện ích Related Post(Bài viết liên quan) đẹp. Nhưng không phải lúc nào bạn cũng áp dụng thành công với Blog của mình. Lý do là sự tương thích với các Template.

Nhận ra điều đó, M21love Post bài này để bạn có thể tham khảo và có thêm nhiều hơn những lựa chọn cho Blog của mình.

HƯỚNG DẪN

BƯỚC 1: Bạn vào phần Chỉnh sửa HTML

BƯỚC 2: Click chọn Mở rộng mẫu tiện ích và nhấn Ctrl + F

BƯỚC 3: Tìm thẻ </head> và thay thế nó bằng đoạn Code sau:

<b:if cond='data:blog.pageType == "item"'><style type='text/css'>#related-posts{width:100%;font-size:12px tahoma;margin: 15px 0 7px 0;}#related-posts .widget{list-style-type:none;margin:5px 0 5px 0;padding:0;}#related-posts .widget h2, #related-posts h2{font-size:20px;font-weight:normal;margin:5px 7px 0; padding:0 0 5px;}#related-posts a{text-decoration:none;}#related-posts a:hover{text-decoration:none;}#related-posts ul{border:medium none;margin:16px;padding:0;}#related-posts ul li{display:block;background:url(/favicon.ico) no-repeat;padding:0 0 1px 21px;margin-bottom:3px;line-height:1.6em;border-bottom:1px dotted #cccccc;}#related-posts ul li a{background:#fff;display:block;}#related-posts ul li a:hover{background:#E9F5FB;}</style><script src='http://dvslabs.googlecode.com/files/relatedpost-icon.js' type='text/javascript'/></b:if></head>

BƯỚC 4: Tìm thẻ <data:post.body/> và chèn SAU nó đoạn Code sau:

<b:if cond='data:blog.pageType == "item"'><div id='related-posts'><font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=7"' type='text/javascript'/></b:if></b:loop> </font><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script></div></b:if>