Related Post with Thumbnails and Summary

By: Hoang Trong - In: , , - 0 nhận xét

Related Post with Thumbnails and Summary là tiện ích cho phép hiển thị các bài viết cùng chuyên mục liên quan cùng với ảnh Thumbnail và đoạn mô tả ngắn.


Chú ý: trước khi chỉnh sửa trong phần HTML các bạn cần backup trước Template đang dùng để tránh bị lỗi.


Hướng dẫn:

Bước 1:  Truy cập vào quản lý Blogger, click Mẫu rồi click tiếp Chỉnh sửa HTML


Bước 2:  Click chuột vào khoảng trống bất kỳ trong khung soạn thảo HTML ở phía dưới rồi ấn CTRL+F để hiện ra khung tìm kiếm rồi gõ "</head>"

Bước 3: Sao chép và dán đoạn mã ở phía dưới vào phía trên thẻ </head> vừa tìm
<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 shown
var relatedmaxnum = 75; // the number of characters of summary
var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGJ9Lq2vQUNJl4N2cjOOoTdcnOSjVVrais4rbdQ_d7GigRI0BxkVFNQchXFOBtL2SpvtF1J6jfpPLESE9r7QOzV6U1uaURnHQzOoYnx7ngsgrJLcV0Q7tJTNjN6X9IpIYwTa4Wb4lmOOG8/s1600/no_image.jpg"; // default picture for entries with no image
//]]>
</script>
<script src="http://bloggerviet-biz.googlecode.com/svn/trunk/js/up_related-posts-with-thumbs-and-summaries.js" />
- để thay đổi số lượng bài viết hiển thị, bạn thay đổi giá trị ở dòng code màu đỏ "4"
- để thay đổi số lượng ký tự hiển thị, bạn thay đổi giá trị ở dòng code màu xanh nõn chuối "75"
- để thay đổi ảnh mặc định khi bài viết không có ảnh, bạn thay đổi giá trị ở dòng code màu xanh

Add thêm đoạn mã dưới đây cũng vẫn trên thẻ "</head>"
<style>
.relatedsumposts {
    float: left;
    padding: 0px 10px;
    overflow: hidden;
    text-align: center;
  /* width and height of the related posts area */
    width: 120px;
    height: 200px;
    border-right: 1px solid #E5E5E5;
    display: inline-block;
}
.relatedsumposts:hover {
    background-color: #F7F7F7;
}
.relatedsumposts img:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
}
.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);
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow: hidden;
}
.relatedsumposts h6 {
  /* title properties */
    display: table-cell;
    height: 3em;
    margin: 5px 0 0;
    overflow: hidden;
    padding-bottom: 2px;
    vertical-align: middle;
    width: 130px;
}
.relatedsumposts p {
  /* summary properties */
    border-top: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
    color: #summarycolor;
    font-size: 10px;
    height: 4em;
    line-height: 1;
    margin: 5px 0 0;
    overflow: hidden;
    padding: 5px 0 15px 0;
    text-align: left;
}
#relatedpostssum {
    background: #F3F3F3;
    height: 200px; /* related posts container */
    padding: 5px;
    width: 100%;
}
.relatedpoststitle {
    font-size: 19px;
    font-weight: bold;
    border-top: 3px solid #FB8227;
    color: #777;
    display: inline-block;
    padding: 5px 10px;
    width: 190px;
    float: left;
    margin: 0px -200px 0px 20px;
    transform: rotate(90deg);
    transform-origin: left top 0;
    -ms-transform: rotate(90deg);
    -ms-transform-origin:left top 0;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin:left top 0;
   font-family: Gill Sans / Gill Sans MT, sans-serif;
}
</style>
- để thay đổi kích thước khung, bạn thay đổi giá trị ở dòng code màu đỏ "120px"
- để thay đổi màu sắc của tiêu đề bài viết liên quan, bạn thay đổi giá trị ở dòng code màu xanh "#linkcolor"
- để thay đổi kích thước ảnh thumbnail, bạn thay đổi giá trị ở dòng code màu tím "82px"
- để thay đổi màu sắc của đoạn mô tả, bạn thay đổi giá trị ở dòng code màu hồng "#summarycolor"
- để hiển thị nhiều hơn 5 bài viết,  bạn thay đổi giá trị ở dòng code màu xanh "200px" từ 200px thành 400 px.

Chú ý: nếu bạn muốn style màu đen cho hợp với trang web của bạn thì thay đoạn mã trên bằng đoạn mã sau (cách chỉnh sửa cũng tương tự như trên)



 <style>
.relatedsumposts {
    float: left;
    padding: 0px 10px;
    overflow: hidden;
    text-align: center;
  /* width and height of the related posts area */
    width: 120px;
    height: 200px;
    border-right: 1px solid #0A0A0A;
    display: inline-block;
}
.relatedsumposts:hover {
    background-color: #0A0A0A;
}
.relatedsumposts img:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
}
.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 #000;
background:#282828;
    -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);
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow: hidden;
}
.relatedsumposts h6 {
  /* title properties */
    display: table-cell;
    height: 3em;
    margin: 5px 0 0;
    overflow: hidden;
    padding-bottom: 2px;
    vertical-align: middle;
    width: 130px;
}
.relatedsumposts p {
  /* summary properties */
    border-top: 1px solid #0A0A0A;
    border-bottom: 1px solid #0A0A0A;
    color: #summarycolor;
    font-size: 10px;
    height: 4em;
    line-height: 1;
    margin: 5px 0 0;
    overflow: hidden;
    padding: 5px 0 15px 0;
    text-align: left;
}
#relatedpostssum {
    background: #121212;
    height: 200px; /* related posts container */
    padding: 5px;
    width: 100%;
}
.relatedpoststitle {
    font-size: 19px;
    font-weight: bold;
    border-top: 3px solid #FB8227;
    color: #ccc;
    display: inline-block;
    padding: 5px 10px;
    width: 190px;
    float: left;
    margin: 0px -200px 0px 20px;
    transform: rotate(90deg);
    transform-origin: left top 0;
    -ms-transform: rotate(90deg);
    -ms-transform-origin:left top 0;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin:left top 0;
   font-family: Gill Sans / Gill Sans MT, sans-serif;
}
</style>
Bước 4:  Click chuột vào khoảng trống bất kỳ trong khung soạn thảo HTML ở phía dưới rồi ấn CTRL+F để hiện ra khung tìm kiếm rồi gõ "<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>"

Sau khi tìm xong, bạn thêm đoạn mã sau vào ngay phía dưới nó:

<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 5: Tìm tiếp đoạn mã sau

</b:includable>
<b:includable id='postQuickEdit' var='post'>
Sau khi tìm xong, bạn thêm đoạn mã sau vào ngay phía trên thẻ </b:includable>:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='post-footer-line post-footer-line-4'>
   <div class='relatedpoststitle'>RELATED POSTS</div>
<div id='relatedpostssum'>
      <script type='text/javascript'>showrelated();</script>
    </div>
    <div style='clear:both;'/>
  </div>
</b:if>

Xong ấn "Lưu mẫu" là hoàn thành

Add Yahoo Smileys to your Comment

:) :( ;) :D :-/ :x :P :-* =(( :-O X( :7 B-) #:-S :(( :)) =)) :-B :-c :)] ~X( :-h I-) =D7 @-) :-w 7:P 2):) :!! \m/ :-q :-bd ^#(^

0 nhận xét:

Đăng ký: Đăng Nhận xét (Atom)

Copyright © 2013 Thủ thuật Blogger | Thủ thuật Blogspot

Back to Top