Hôm nay tranh thủ chỉ thêm cho các bạn cách tạo liên kết các bài viết cùng chủ để ở dưới bài viết !
RaoVat24h
Softwares Thủ thuật Windows

Hướng dẫn tạo ‘bài viết cùng chủ đề’ có ảnh thu nhỏ

Advertisement
Hôm nay tranh thủ chỉ thêm cho các bạn cách tạo liên kết các bài viết cùng chủ để ở dưới bài viết !
Kết quả sau khi làm :


1.Đầu tiên các bạn login vào Blogger dashboard > Layout > Edit HTML rồi nhấn tích vào “Expand Widget Templates” check box !

Lưu ý: Trước khi thực hiện mọi thao tác sữa đổi thì nên back-up để sau này có sự cố còn khôi phục !

2.Các bạn tìm dòng sau đây :
</head>

Và thay thế bằng đoạn code bên dưới :

<!–Related Posts with thumbnails Scripts and Styles Start–>
<!– remove –><b:if cond=’data:blog.pageType == &quot;item&quot;’>
<style type=”text/css”>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type=’text/javascript’>
var defaultnoimage=”http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png”;
var maxresults=5;
var splittercolor=”#d4eaf2″;
var relatedpoststitle=”Related Posts”;
</script>
<script src=’http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js’ type=’text/javascript’/>
<!– remove –></b:if>
<!–Related Posts with thumbnails Scripts and Styles End–>
</head>

3.Tìm dòng sau :
<div class=’post-footer-line post-footer-line-1′>

Rồi thay thế bằng đoạn code bên dưới :

<!– Related Posts with Thumbnails Code Start–>
<!– remove –><b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div id=’related-posts’>
<b:loop values=’data:post.labels’ var=’label’>
<b:if cond=’data:label.isLast != &quot;true&quot;’>
</b:if>
<script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;’ type=’text/javascript’/></b:loop>
<script type=’text/javascript’>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style=’clear:both’/>
<!– remove –></b:if>
<b:if cond=’data:blog.url == data:blog.homepageUrl’><b:if cond=’data:post.isFirstPost’>
<a href=’http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html’><img style=”border: 0″ alt=”Related Posts Widget For Blogger with Thumbnails” src=”http://image.bloggerplugins.org/blogger-widgets.png” /></a><a href=’http://bloggertemplates.bloggerplugins.org/’ ><img style=”border: 0″ alt=”Blogger Templates” src=”http://image.bloggerplugins.org/blogger-templates.png” /></a>
</b:if></b:if>
<!– Related Posts with Thumbnails Code End–>
4.Bạn có thể tùy chỉnh số bài hiển thị bằng cách thay đổi giá trị ở dòng dưới :
var maxresults=5;
5.Để thay đổi tiêu đề mục liên kết bài viết thì thay đổi dòng sau :
var relatedpoststitle=”Related Posts”;
6.Để thay đổi hình ảnh mặc định , bạn chỉ cần thay đổi dòng sau bằng 1 link ảnh với kích thước 72×72
http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png
Ngoài ra bạn nào thạo CSS thì có thể tự Edit thêm bằng tay ^^!
Chúc các bạn thành công !
Rate this post

DienDan.Edu.Vn

DienDan.Edu.Vn Cám ơn bạn đã quan tâm và rất vui vì bài viết đã đem lại thông tin hữu ích cho bạn.
DienDan.Edu.Vn! là một website với tiêu chí chia sẻ thông tin,... Bạn có thể nhận xét, bổ sung hay yêu cầu hướng dẫn liên quan đến bài viết. Vậy nên đề nghị các bạn cũng không quảng cáo trong comment này ngoại trừ trong chính phần tên của bạn.
Cám ơn.

Đăng bình luận

(+84) (918) 369.468