Tiện ích bài viết liên quan hiển hình ảnh đạt chuẩn HTML5 tích hợp tính năng cắt và resize ảnh thumbnail sẽ giúp cho tiện ích này đẹp và tối ưu nhất.
Blooger DashBoard > Edit HTML
Bài viết liên quan có hình ảnh chuẩn HTML5Bắt tay vào làm việc thôi đầu tiên thì các bạn tìm và chèn đoàn css này lên trên thẻ ]]></b:skin>
/* RELATED POSTS */
.related-post {
background-color: #fff;
font-size: 16px;
margin-bottom: 40px;
padding: 40px;
}
.related-post a {
color : #333;
}
.related-post h4 {
margin : 0 0 0.5em;
text-transform : uppercase;
color : #555;
}
.related-post-style-3, .related-post-style-3 li {
margin : 0;
padding : 0;
list-style : none;
overflow-wrap : break-word;
overflow : hidden;
}
.related-post-style-3 .related-post-item {
display : block;
float : left;
width : 230px;
margin-right : 10px;
}
.related-post-style-3 .related-post-item:focus {
outline : none;
}
.related-post-style-3 .related-post-item-thumbnail {
display : block;
margin : 0 0 10px;
width : 101%;
height : 125px;
background-color : transparent;
border : none;
padding : 0;
}
.related-post-style-3 .related-post-item-title {
font-weight : bold;
}
@media only screen and (max-width: 800px) {
.related-post { padding: 0 }
}
Bước tiếp theo các bạn tìm đến chỗ nào trên blog mà các bạn muốn hiển thị tiện ích bài viết liên quan có hình ảnh đặt chuẩn HTML5 này và dán nó vào. Đối với cuối bài viết thì thông thường các bạn tìm đến
<div class='post-footer'>và chèn xuống dưới
<div class='related-post' id='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>Related Posts:</h4>",
numPosts: 3,
summaryLength: 370,
titleLength: "auto",
thumbnailW: 230,
thumbnailH: 125,
noImage: "data:image/png;base64,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",
containerId: "related-post",
newTabLink: false,
moreText: "Read More",
widgetStyle: 3,
callBack: function() {}
};
</script>
<script type='text/javascript'>
//<![CDATA[
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Related Posts:</h4>",widgetStyle:3,homePage:"http://www.kslzone.net",numPosts:3,summaryLength:370,titleLength:"auto",thumbnailW:72,thumbnailH:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Read more",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.thumbnailW!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailW+"-h"+d.thumbnailH+"-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="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailW+'" height="'+d.thumbnailH+'" title="'+t+'"><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="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailW+'" height="'+d.thumbnailH+'" title="'+t+'"></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="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailW+'" height="'+d.thumbnailH+'" title="'+t+'"><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="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailW+'" height="'+d.thumbnailH+'" title="'+t+'"><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>
Toàn bộ những đoạn chữ mà mình tô màu đỏ là những thứ bạn có thể thay đổi cho phù hợp với website của bạn, ngoài ra nếu không biết thì không nên thay đổi gì khác nhé. Chú thích cho những thứ đó:
thumbnailW: Chiều rộng ảnh thumbnail
thumbnailH: Chiều cao ảnh thumbnail
numPosts: Số lượng bài viết liên quan
Related Posts: bạn có thể thay bằng bất cứ gì mà bạn thích
Khi thay đổi chiểu cao và chiều rộng ở tùy chọn thì ngoài kích thước thực tế của ảnh tiện ích vẫn chưa thay đổi gì đâu, bạn phải thay đổi css ở đầu trang.
Tiện ích này Random "một" Label ngẫu nhiên và lấy ra bài viết có trong nhãn đó chứ không lấy toàn bộ các bài của các nhãn liên quan như những tiện ích bình thường.
Tag :
Blog Design,
Blog Templates
0 Comment "Hướng dẫn hiển thị bài viết liên quan có hình ảnh chuẩn HTML5 "