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

By Unknown

Thứ Tư, 30 tháng 7, 2014

Lần trước mình giới thiệu bài viết liên quan không có hình cho blogger, tiếp tục series template chuẩn HTML5 và CSS3, lần này là bài viết liên quan có thể tùy chọn có hình và không có hình cho blogger mà vẫn đạt chuẩn HTML5 và CSS3 .

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

Bài viết liên quan có hình được rất nhiều blogger viết nhưng ở đây mình hướng tới cái gọi là chuẩn HTML5 và CSS3 có lợi cho SEO hơn . Thôi không cần nói nhiều mình cùng vào vấn đề và tiến hành chèn code và css vào template nào .

Đ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ị
+ widgetStyle: 1

+ widgetStyle: 2

+  widgetStyle: 3 là mặc định của nó

Thay tuanphan.info thanh tên miền của bạn . Ok vậy là chúng ta đả chèn xong code bài viết liên quan có hình cho blogger chuẩn HTML5 và CSS3 rồi nhé chúc các bạn thành công

Tag : Chia sẻ, CSS, HTML5