Bài viết liên quan chuẩn HTML5 cho Blogger
Tiếp tục với chuỗi bài viết về các tiện ích chuẩn HTML5 cho một website, và hôm nay là một tiện ích chuẩn cho Blogger hay dân chúng thường gọi là Blogspot. Tiện ích chuẩn HTML5 lần này là bài viết liên quan, về tác dụng của nó thì chắc khỏi cần phải nói nó làm gì rồi, làm cho khách truy cập có thể cập nhật nhiều thông tin hưu ích hơn mà họ có thể cũng đang tìm kiếm.
Về tiện ích mà mình tìm được và chia sẻ lần này có hơi đáng tiếc là nó chỉ có tiêu đề thôi chứ không có ảnh thu nhỏ cho các bài viết liên quan. Nhưng nghĩ lại thì có thumbnail cũng không có thay đổi gì nhiều, cái mà để quyết định người dùng dó đọc bài viết hay không thường chỉ do tiêu đề mà thôi.
Để thêm bài viết liên quan chuẩn HTML5 vào blog của bạn các bạn hay làm theo các bước sau đây. Vào chỉnh sửa HTML cho blog mà bạn muốn thêm vào, chèn đoạn css sau đây lên trên thẻ ]]></b:skin>
Tiếp tục chèn đoạn mã sau đây vào vị trí mà bạn muốn hiện bài viết liên quan, thông thường nếu bạn muốn chèn ở cuối bài viết thì tìm đến đoạn mã sau
P/S: Hiện tại nếu bạn nào không thích HTML5 và thích cái đẹp và tính năng thì hay tham khảo qua bài viết liên quan nhiều tùy chỉnh đã chia sẽ tại blog của mình.
Bài viết liên quan chuẩn HTML5 cho Blogger
Tiện ích này là một tiện ích mình lấy từ một trong những blog của người Indonesia, phải nói rằng họ rất chi là chuộng sử dụng HTML5 cũng như Blogger, khá nhiều tiện ích hay đều xuất phát từ đó.Để thêm bài viết liên quan chuẩn HTML5 vào blog của bạn các bạn hay làm theo các bước sau đây. Vào chỉnh sửa HTML cho blog mà bạn muốn thêm vào, chèn đoạn css sau đây lên trên thẻ ]]></b:skin>
#related-post {background:none;width:100%;margin-top:35px;margin-bottom:10px;padding:5px 0 10px 0px}
#related-post h4{font-size:150%;text-transform:uppercase;margin:0 0 15px;padding:0;font-weight:normal}
#related-post li{color:#2c3e50;text-indent:0;line-height:1.6em;margin:0 20px;}
#related-post .widget{margin:0;padding:0}
#related-post ul{list-disc;margin:0;padding:0}Tiếp tục chèn đoạn mã sau đây vào vị trí mà bạn muốn hiện bài viết liên quan, thông thường nếu bạn muốn chèn ở cuối bài viết thì tìm đến đoạn mã sau
<div class='post-footer-line post-footer-line-1'><!-- Bài Viết Liên Quan -->
<b:if cond='data:blog.pageType == "item"'>
<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'>
"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<h4>Bài liên quan:</h4>",
numPosts: 5,
titleLength: "auto",
containerId: "related-post",
newTabLink: false,
widgetStyle: 1,
callBack: function() {}
};
</script>
<script type="text/javascript">
//<![CDATA[
/*! KHÔNG CHỈNH SỬA ĐOẠN MÃ NÀY - Related Post Widget for Blogger by Taufik Nurrohman => http://gplus.to/tovic */
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Related Post:</h4>",widgetStyle:1,homePage:"http://blog.kangismet.net",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"…":t;r=("media$thumbnail" in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c"):d.noImage;u=("summary" in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"…":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script>
</b:if>
<!-- Kết Thúc Bài Viết Liên Quan -->- widgetTitle: Tiêu đề của tiện ích này
- numPosts: Số lượng bài viết
Lời kết
Trong việc chỉnh sửa lại các ký tự "&" thành "&" nếu bạn nào có thử qua thì đối với Blogger, đôi khi có chỉnh sửa thế nào đi nữa nó cũng không thành công khi check chuẩn HTML5. Do đó việc có một Blogger template với những tiện ích như thế này thì đã giúp đỡ khá nhiều trong việc tìm tòi và tối ưu cho blog của mỗi người. Mọi thắc mắc và ý kiến đóng góp về tiện ích bài viết liên quan chuẩn HTML5 này hãy để lại ở dưới.P/S: Hiện tại nếu bạn nào không thích HTML5 và thích cái đẹp và tính năng thì hay tham khảo qua bài viết liên quan nhiều tùy chỉnh đã chia sẽ tại blog của mình.
lúc 09:05 23 tháng 7, 2014
chao ban
minh da thu voi harrykhang.com cua minh nhung van khong duoc
minh lam y chang nhung gi ban huong dan luon :((
lúc 09:28 23 tháng 7, 2014
Bạn phải xem lại rồi, bạn đặt vào đâu mà mình vào blog của bạn kiểm tra vị trí của mình hướng dẫn nhưng không thấy.
lúc 07:26 24 tháng 7, 2014
Lâm Kiều có thể hướng dẫn cách làm Bài viết liên quan giống như cái mà bạn đang sử dụng được không :D. Mình rất thích kiểu related post như vậy lắm. Cám ơn trước nhé. hihi :x
lúc 19:07 25 tháng 7, 2014
Chào bạn Kiều, trước tiên mình xin cảm ơn các bài viết của bạn.Mình đọc bài viết của bạn thì rất ít ghi comment thắc mắc vì bài viết thường rõ ràng và các đoạn css tối ưu, ngắn gọn hơn các trang khác nhưng các tiện ích thì rất đẹp.Nhưng hôm nay, khi đang làm theo bài viết trên thì mình nhận ra một vấn đề mà mình không comment ko được: Template Harderly mình đang dùng không có đoạn mã "" hay tương tự@@, bạn có thể giúp mình vấn đề này ko ??
lúc 19:42 25 tháng 7, 2014
Thứ nhất là mình thực sự là không hiểu lắm về, cái ý mà bạn nói :D
Thứ 2, nếu trong comment nếu muốn hiện được mã thì bạn phải chuyển sang viết kí tự bằng HTML, bạn có thể dùng Chuyển đổi HTML mà mình thêm ở cuối cùng mỗi bài viết.
Nếu mình đoán không lầm thì bạn nói là, bạn tìm không thấy
<div class='post-footer-line post-footer-line-1'>
Nếu chính xác domain của bạn là
http://meovathq.blogspot.com/
thì thay vì tìm đến cái đoạn trên, thì bạn hãy tìm đến đoạn này
</article>
và thêm lên trên nó như bình thường là được.
lúc 19:43 25 tháng 7, 2014
Nếu bạn thích thì một vài bữa nữa mình sẽ chia sẻ sau :)
lúc 22:32 25 tháng 7, 2014
Cảm ơn bạn, quả thật mình đang "kẹt" cái vấn đề này.
À mà, cái vấn đề thứ 2, lần sau mình sẽ cẩn thận hơn.
lúc 14:18 27 tháng 7, 2014
Cám ơn bạn nha. Hi vọng sẽ sớm dc đọc bài hướng dẫn của bạn :D
lúc 11:07 29 tháng 7, 2014
Nếu bạn cần gấp thì liên hệ mình với địa chỉ domain của trang bạn nhé, mình phải biết được kích thước của trang mới dễ làm được :)
lúc 23:08 11 tháng 9, 2014
Chào ban, mình đã làm như hướng dẫn của bạn trên website của mình nhưng bài viết liên quan vẫn không hiển thi, bạn kiểm tra giúp mình xem có thiếu gì nữa không nhé, cảm ơn bạn rất nhiều, web của mình la http://www.xinphepxaydungnha.com
lúc 23:15 11 tháng 9, 2014
Chào bạn, mình vừa tham khảo qua template của bạn, cấu trúc nó đã bị thay đổi không giống mặc định nhé. Do vậy thay vì chèn ở dưới cái thẻ post-footer-line mà mình đã hướng dẫn ở trên, thì bạn tìm đến đoạn mã này và chèn lên trên nó nhé
<div class='post-footer-line post-footer-line-2' style='display:none;'>
xong thì báo mình nhé.
lúc 13:53 6 tháng 1, 2015
chào bạn, mình làm như bạn vẫn không hiện ra. Bạn có thể giúp mình qua mail:hotrovnptonline@gmail.com hoặc yahoo: sakkoder99. Blog của mình : hotrovnpt.blogspot.com. Thanks
lúc 13:54 6 tháng 1, 2015
chào bạn, mình làm như bạn vẫn không hiện ra. Bạn có thể giúp mình qua mail:hotrovnptonline@gmail.com hoặc yahoo: sakkoder99. Blog của mình : hotrovnpt.blogspot.com. Thanks
lúc 17:21 6 tháng 2, 2015
Mình thực hiện không được
lúc 19:28 6 tháng 2, 2015
Chi tiết là bị lỗi gì vậy bạn :D
lúc 13:57 11 tháng 3, 2015
giúp em với em tải 1 theme trên mạng về mà cái bài đăng liên quan của nó không hoạt động chú..mà em chả thấy class='post-footer-line post-footer-line-1' ở đâu để thêm vào cả phải làm sao đây anh để nó hiện bài đăng liên quan như của anh à..còn css em tự code cung được mong anh giúp
lúc 16:02 11 tháng 3, 2015
Bạn để lại địa chỉ trang web lại cho mình xem thử nhé, chứ không có gì nhìn thì mình bó tay :D
lúc 08:41 19 tháng 3, 2015
Mình làm thì hiện bình thường nhưng nó hiển thị lung tung không theo thứ tự gì cả ad à, mình muốn nó hiển thị liên quan từ mới đến cũ có được không
lúc 08:42 19 tháng 3, 2015
Mình làm thì hiện bình thường nhưng nó hiển thị lung tung không theo thứ tự gì cả ad à, mình muốn nó hiển thị liên quan từ mới đến cũ có được không
lúc 13:32 19 tháng 3, 2015
Để mình chỉnh sửa thử lại xem sao, thông thường người ta viết hàm random vào tiện tích bài viết liên quan là muốn tránh những bài viết cũ không còn được rờ mó nữa. Lần đầu mình thấy có người muốn tạo bài viết liên quan thế này :D
lúc 11:18 23 tháng 6, 2015
Cảm ơn anh đã chia sẻ một bài viết rất hay và có ích!
Học lái xe HCM | học lái xe cấp tốc | học lái xe cấp tốc tphcm
lúc 12:46 7 tháng 7, 2015
Chào bạn, bạn có code nào bài viết liên quan có phân trang không, mình làm theo trang này không được. Mà tác giả trang đó chắc ko còn nữa. Rất mong nhận dc hồi âm sớm của bạn. http://hontap.blogspot.com/2010/03/bai-viet-lien-quan-cho-blogger-ban-nang.html
lúc 21:20 7 tháng 7, 2015
Cái này mình chịu không có bạn nhé :D
lúc 19:32 4 tháng 8, 2015
Mình muốn thay cái dấu chấm ở đầu mỗi bài bằng biểu tượng fontasome thì làm thế nào ad?
lúc 20:28 4 tháng 8, 2015
Cụ thể hình nào với link web để test luôn cho dễ :D
Thử nhé
#related-post { list-style:none }
#related-post li:before {
content: "\f000";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #000;
font-size: 18px;
padding-right: 0.5em;
float: left;
}
thay cái content bằng cái của fontawesome là xong.
lúc 18:08 5 tháng 8, 2015
Cảm ơn bác, em đã tự xử được rồi :D
lúc 20:08 5 tháng 11, 2015
bạn cho hỏi mình muốn chữ màu đỏ và lơn hơn thì làm như thế nào vậy bạn.Thanks
lúc 18:57 24 tháng 11, 2015
Bài viết rất hữu ích :) Rất muốn có cái bài viết liên quan như blog bác đang dùng hi vọng bác chia sẻ :)
Email: Mr.daodat@gmail.com
Blog: Datlun.com
lúc 18:47 18 tháng 4, 2016
Mình muốn cho nó ở trên đầu bài viết thì chèn vào đâu bạn nhỉ