[Tips] - Bài viết liên quan đơn giản cho blogspot

Bài viết liên quan hay nó còn được các blogger gọi nó là Related Posts, đây là một tiện ích khá cần thiết cho bất kỳ một blog nào và về lĩnh vực gì đi nữa thì cũng cần tới nó. Có nhiều blogger phải bỏ nó để seo blogspot, vì tiện ích này bắc buộc phải sài js mà hạn chế js là tiêu chí của các seoer trong seo blogspot.

Vì thế cho nên hôm nay Khám Phá Blog's chia sẻ cho các bạn tiện ích bài viết liên quan cực kỳ đơn giản và nhẹ thích hợp cho các seoer thêm vào blog của mình mà không làm chậm đáng kể tốc độ của blog.

Thêm bài viết liên quan cho blogspot

Như tên gọi của dạng Related Posts này thì là đơn giản nên bạn chỉ cần có một bước để thêm nó vào blog của mình. Trong templates blogspot của bạn tìm đến thẻ

<div class='post-footer'>

Và thêm tất cả code sau ngay bên dưới nó

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>/* ==== Related Post Widget Start ==== */ .related-post { margin:2em auto 0; font:normal normal 11px/1.4 Arial,Sans-Serif; } .related-post h4 { font-size:150%; margin:0 0 .5em; } /* Style 2 */ .related-post-style-2, .related-post-style-2 li { margin:0; padding:0; list-style:none; } .related-post-style-2 li { padding:10px; border-top:1px solid #eee; overflow:hidden; } .related-post-style-2 li:first-child {border-top:none} .related-post-style-2 .related-post-item-thumbnail { width:80px; height:80px; max-width:none; max-height:none; background-color:transparent; border:none; padding:0; float:left; margin:2px 10px 0 0; } .related-post-style-2 .related-post-item-title { font-weight:bold; font-size:110%; } .related-post-style-2 .related-post-item-summary { display:block; overflow:hidden; } .related-post-style-2 .related-post-item-more {}
/* ==== Related Post Widget End ==== */

</style><!-- Related Post Widget Start --> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-post' class='related-post'/> <script type='text/javascript'> var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if> </b:loop></b:if>]; var relatedPostConfig = { homePage: &quot;<data:blog.homepageUrl/>&quot;, widgetTitle: &quot;&lt;h4&gt;Related Post:&lt;/h4&gt;&quot;, numPosts: 5, summaryLength: 370, titleLength: &quot;auto&quot;, thumbnailSize: 80, noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;, containerId: &quot;related-post&quot;, newTabLink: false, moreText: &quot;Read More&quot;, widgetStyle: 2, callBack: function() {} }; </script> <script type='text/javascript' src='http://dte-project.googlecode.com/svn/trunk/related-post/related-post.min.js'/> </b:if> <!-- Related Post Widget End -->

</b:if>

Lưu mẫu lại và kiểm tra kết qủa thôi. Quá tuyệt hehe

Kho Template Blogspot Responsive 2016

http://share123blog.blogspot.com

Free download responsive premium blogger template

Bài Viết Cùng Chủ Đề