8:52 PM

Tạo bài viết blogspot liên quan có thumbnail vòng tròn

 

 humghn.com 

Trong bài viết lần này , chuyên mục sẽ gửi đến các bạn cách tạo bài viết liên quan cho blogspot với ảnh đại diện bài viết hình tròn và tên bài viết hiển thị đẹp hơn ở bên dưới ảnh . Với tiện ích này , độc giả sẽ bị thu hút hơn bởi những nội dung khác trên web/blog của bạn . 
Bài viết liên quan blogspot - Relate post
Các bước thực hiện
Bước 1 : Đăng nhập blogspot , chọn " Mẫu " , chọn " Chỉnh sửa HTML 
Bước 2 : Thêm vào trên thẻ </head> đoạn mã sau :
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedpSummary = new Array();
var relatedThumb = new Array();
var relatedTitlesNum = 0;
var relatedPostsNum = 4; // number of entries to be shownvar relatedmaxnum = 75; // the number of characters of summary
var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQl7o97_Ai0uFUI2IWm_dYXEdvTEOda3JvHVf8ImjYf0h8d4BqcuG9EQ5PgQhACG1HhNxsPDFwik8WN1OFMxmmASmLZczQSYgZjOdsrf-2mezBhBne2YJ4qi3krzGOzLh4VxAr0DTzYmMn/s1600/no_image.jpg"; // default picture for entries with no image

function readpostlabels(json) {
  var entry, postimg, postcontent, cat;
  for (var i = 0; i < json.feed.entry.length; i++) {
    entry = json.feed.entry[i];
    if (i==json.feed.entry.length) { break; }
    relatedTitles[relatedTitlesNum] = entry.title.$t;
    postcontent = "";
    if ("content" in entry) {
      postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      postcontent = entry.summary.$t;
    }
    relatedpSummary[relatedTitlesNum] = removetags(postcontent,relatedmaxnum);
    if ("media$thumbnail" in entry) {
      postimg = entry.media$thumbnail.url;
    } else {
      postimg = relatednoimage;
    }
    relatedThumb[relatedTitlesNum] = postimg;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        relatedUrls[relatedTitlesNum] = entry.link[k].href;
        break;
      }
    }
    relatedTitlesNum++;
  }
}
function showrelated() {
  var tmp = new Array(0);
  var tmp2 = new Array(0);
  var tmp3 = new Array(0);
  var tmp4 = new Array(0);
  for(var i = 0; i < relatedUrls.length; i++) {
    if(!contains(tmp, relatedUrls[i])) {
      tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i];
      tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];
      tmp3.length += 1; tmp3[tmp3.length - 1] = relatedpSummary[i];
      tmp4.length += 1; tmp4[tmp4.length - 1] = relatedThumb[i];
    }
  }
  relatedTitles = tmp2; relatedUrls = tmp; relatedpSummary = tmp3; relatedThumb = tmp4;
  for(var i = 0; i < relatedTitles.length; i++){
    var index = Math.floor((relatedTitles.length - 1) * Math.random());
    var tempTitle = relatedTitles[i]; var tempUrls = relatedUrls[i];
    var tempResum = relatedpSummary[i]; var tempImage = relatedThumb[i];
    relatedTitles[i] = relatedTitles[index]; relatedUrls[i] = relatedUrls[index];
    relatedpSummary[i] = relatedpSummary[index]; relatedThumb[i] = relatedThumb[index];
    relatedTitles[index] = tempTitle; relatedUrls[index] = tempUrls;
    relatedpSummary[index] = tempResum; relatedThumb[index] = tempImage;
  }
  var somePosts = 0;
  var r = Math.floor((relatedTitles.length - 1) * Math.random());
  var relsump = r; 
  var output;
  var dirURL = document.URL;

  while (somePosts < relatedPostsNum) {
    if (relatedUrls[r] != dirURL) {

      output = "<div class='relatedsumposts'>";
      output += "<a href='" + relatedUrls[r] + "' rel='nofollow'  target='_self' title='" + relatedTitles[r] + "'><img src='" + relatedThumb[r] + "' /></a>";
      output += "<h6><a href='" + relatedUrls[r] + "' target='_self'>" + relatedTitles[r] + "</a></h6>";
      output += "<p>" + relatedpSummary[r] + " ... </p>";
      output += "</div>";
      document.write(output);
      
      somePosts++;
      if (somePosts == relatedPostsNum) { break; }
    }
    if (r < relatedTitles.length - 1) {

      r++;
    } else {
      
      r = 0;
    }

    if(r==relsump) { break; }
  }
}
function removetags(text,length){
  var pSummary = text.split("<");
  for(var i=0;i<pSummary.length;i++){
    if(pSummary[i].indexOf(">")!=-1){
      pSummary[i] = pSummary[i].substring(pSummary[i].indexOf(">")+1,pSummary[i].length);
    }
  }
  pSummary = pSummary.join("");
  pSummary = pSummary.substring(0,length-1);
  return pSummary;
} 
function contains(a, e) {
  for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
  return false;
}
//]]>
</script>
Trong đó :
var relatedPostsNum = 4; Số bài viết hiển thị
var relatedmaxnum = 75;  Số kí tự hiển thị ở mục tiêu đề
var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQl7o97_Ai0uFUI2IWm_dYXEdvTEOda3JvHVf8ImjYf0h8d4BqcuG9EQ5PgQhACG1HhNxsPDFwik8WN1OFMxmmASmLZczQSYgZjOdsrf-2mezBhBne2YJ4qi3krzGOzLh4VxAr0DTzYmMn/s1600/no_image.jpg" : hình ảnh đại diện khi bài đăng không có hình .

Bước 3 : Bạn tìm đến đoạn mã tương tự như sau :
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
Sau đó thêm vào dưới đoạn mã vừa tìm được code sau :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/>
  </b:if>
Bước 4 : Tìm đến đoạn mã :
</b:includable>
<b:includable id='comment_picker' var='post'>
Sau đó thêm vào trên đoạn mã vừa tìm được đoạn code sau :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='post-footer-line post-footer-line-4'>
    <div id='relatedpostssum'><div style='text-align: left; font-size: 15px; margin-bottom: 10px; font-weight: bold;'>RELATED POSTS</div>
      <script type='text/javascript'>showrelated();</script>
    </div>
    <div style='clear:both;'/>
  </div>
</b:if>
Bước 5 : Dán đoạn code sau dưới thẻ ]]></b:skin>
.relatedsumposts {
  float: left;
  margin: 0px 5px;
  overflow: hidden;
  text-align: center;
  /* width and height of the related posts area */
  width: 120px;
  height: 210px;
}

.relatedsumposts:hover { 
background-color: #F3F3F3; -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.relatedsumposts img:hover {
-khtml-opacity:0.4;
-moz-opacity:0.4;
opacity:0.4;
}

.relatedsumposts a {
  /* link properties */
color: #linkcolor;
  display: inline;
  font-size: 10px;
  line-height: 1;
}
.relatedsumposts img {
  /* thumbnail properties */
margin-top: 2px;
  height: 82px;
  padding: 5px;
  width: 82px;
border: 1px solid #fff;-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.relatedsumposts h6 {
  /* title properties */
  display: table-cell;
  height: 5em;
  margin: 5px 0 0;
  overflow: hidden;
  padding-bottom: 2px;
  vertical-align: middle;
  width: 130px;
}

.relatedsumposts p {
  /* summary properties */
border-top: 1px dotted #777777;
border-bottom: 1px dotted #777777;
color: #summarycolor;
  font-size: 10px;
  height: 4em;
  line-height: 1;
  margin: 5px 0 0;
  overflow: hidden;
  padding: 5px 0 15px 0;
  text-align: left;
}
+ Giá trị 120px và 210 px lần lượt là độ rộng và chiều cao
+ Thay thế #linkcolor với giá trị hex của màu sắc để thay đổi màu sắc của tiêu đề bài viết
+ Để thay đổi kích thước của hình thu nhỏ, thay đổi các giá trị được đánh dấu bằng màu xanh (82)
+ Để xác định độ tròn biên giới, thay đổi các giá trị trong phần cam (100)
+ Để thay đổi màu sắc của các đoạn mới, thay đổi #summarycolor với giá trị trong bảng mã màu sắc .

 

Copyright @ 2013 Thông Tin Công Nghệ - Giải Trí & Học Tập.

Designed by Templateism | MyBloggerLab