Computer Tips

Bài viết liên quan có hình cho blogger chuẩn HTML5 và CSS3

Related Post chuẩn HTML5 và CSS3

Đoạn CSS chuẩn CSS3 cho bài viết liên quan cho blogger

/* RELATED */.related-post {margin: 5px 0;padding: 10px;overflow: hidden;background: #f8f8f8;border: 1px solid #e2e2e2;}.related-post a {color : #333;}.related-post h4 {font-size : 20px;font-weight : 400;font-family : Oswald;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 : 125px;height : 70px;padding : 100px 5px 5px;margin-right : 10px;margin-bottom : 10px;font : normal normal 11px/1.4 Arial, Sans-Serif;border : #ddd solid 1px;position : relative;}.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 : 90px;background-color : transparent;border : none;padding : 0;position : absolute;top : 0;left : 0;}.related-post-style-3 .related-post-item-title {font-weight : bold;}

Hướng dẫn cách chèn đoạn CSS vào template blogspot
Đang nhập vào tài khoản blogger của bạn >> Mẫu >> Chỉnh sửa HTML >> Ctrl+F >> Tìm đến thẻ ]]></b:skin> và chèn đoạn CSS3 trên vào trước nó >> Sau đó lưu lại

Đoạn mã bài viết liên quan có hình chuẩn HTML5

<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: 4,      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: 3,      callBack: function() {}  };  </script><script type='text/javascript'>//<![CDATA[var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</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="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" 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.thumbnailSize+'" height="'+d.thumbnailSize+'" 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.thumbnailSize+'" height="'+d.thumbnailSize+'" 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.thumbnailSize+'" height="'+d.thumbnailSize+'" 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>

 Cách chèn đoạn mã trên vào template của bạn
Sau khi chèn đoạn CSS3 xong các bạn  nhấn Ctrl+F tìm đến thẻ <div class='post-footer-line post-footer-line-1'> thứ 2 nó nằm trong thẻ này <b:includable id='post' var='post'>...</b:includable> chèn  đoạn code chuẩn HTML trên trước thẻ đóng </b:includable> là chính xác nhất . Sau đó lưu lại và nhấn F5 để xem kết quả .
Lưu ý:
Các bạn có chọn như sau:
numPosts: 4 : Số lượng hiện thị bài viết liên quan
thumbnailSize: 80: Kích thước thumbnail
widgetStyle: 3 : Kiểu hiển thị Labels: Thủ Thuật Blogger