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.
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}
đoạn css này bạn có tinh chỉnh lại theo ý thích của bạn.
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'>
và chèn ở dưới nó
<!-- 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 -->
Ở đoạn mã bên trên các bạn chỉ cần quan tâm đến 2 thứ là
- widgetTitle: Tiêu đề của tiện ích này
- numPosts: Số lượng bài viết
sau khi chỉnh sửa xong thì lưu lại template của bạn và tận hưởng thành quả.
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.
"nguồn bài viết từ KslZone.NET".
0 nhận xét:
Đăng nhận xét