Bài viết liên quan ( Related post) chuẩn html5 cho blogger/blogspot

By Unknown

Thứ Bảy, 26 tháng 7, 2014

Cách thêm tiện ích bài viết liên quan chuẩn html5 cho blogger/blogspot, Related không thumbnail đạt chuẩn html5 .
Năm 2014 là năm mà các blogger đang chuẩn hóa thiết kế blog của mình sang HTML5 để tối ưu hóa SEO. Bài viết liên quan ( Related post) không thumbnail là một trong số đó, một mặt để tăng tốc độ load trang thì theme nên hạn chế sử dụng các đoạn JS.

Hôm nay mình giới thiệu các bạn bài viết liên quan hay còn gọi là Related post không thumbnail đạt chuẩn HTML5 cho blogger/blogspot .
Tiện ích bài viết liên quan này mình lấy trong template của NOVAL người indonesia thiết kế.

Theme SEO chuẩn html5

Cách thực hiện bài viết liên quan  chuẩn html5 cho blogger/blogspot

Bước 1: Đăng nhập vào blogger.com
Bước 2:  Click vào Mẫu >>Chỉnh sửa HTML >>Ctrl F trong template tìm đến đoạn ]]></b:skin>
Bước 3: Thêm CCS vào trước ]]></b:skin>
Đoạn CSS như sau

/* Related Posts */
.related-post{margin:20px 0;font-size:13px;background:#fff;border-radius:4px;border: 1px solid #eee;}.related-post h4{font-size:14px;margin:0 0 .5em;background:#3498db;color:#fff;padding:14px;font-weight:normal;border-radius:4px 4px 0 0;position:relative;font-family:Oswald,Arial,Sans-Serif;text-transform:uppercase}ul.related-post-style-1{margin-left:0px;padding-left:0!important;margin-top:-12px}.related-post-style-1 li{list-style:none;border-top:1px solid #eceef5}.related-post-style-1 li a{color:#79798d;text-decoration:none;font-size: 14px;display: block;padding:13px 15px;}.related-post-style-1 li a:hover{color: #FFFFFF;text-decoration: none;background: #1191DA;}ul#relpost li .relatedpost_description{font:normal 11px Electrolize,sans-serif}

Bước 4: Các bạn tìm đoạn <div class='post-footer-line post-footer-line-1'> hoặc  <div class='post-header-line-1'/> tùy mỗi template.
Thêm đoạn code dưới đây vào sau nó:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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'>
&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;Bài viết liên quan:&lt;/h4&gt;&quot;,
numPosts: 5,
titleLength: &quot;auto&quot;,
containerId: &quot;related-post&quot;,
newTabLink: false,
widgetStyle: 1,
callBack: function() {}
};
</script>
<script type='text/javascript'>
//<![CDATA[
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Bài viết liên quan:</h4>",widgetStyle:1,homePage:"http://www.tuanphan.info",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)+"&hellip;":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)+"&hellip;":"";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>

Bước 5: Lưu lại và xem kết quả. Vậy là các bạn đả thực hiện xong kết quả của bài viết liên quan  chuẩn html5 cho blogger rồi nhé .

Tag : Chia sẻ, HTML5