Related Posts widget đẹp cho blog

Ở những bài trước mình đã từng chia sẻ một số style Related Posts widget (bài viết liên quan) cho Blogger. Hôm nay mình sẽ tiếp tục chia sẻ một style đẹp nữa, các bạn có thể xem hình trên.

Sau đây là các bước thực hiện thủ thuật:

Bước 1: Tại trang quản trị, các bạn vào Mẫu > Chỉnh sửa HTML, chèn đoạn code sau vào trước thẻ đóng </head>:

<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; // số bài viết hiển thị
var relatedmaxnum = 75; // độ dài phần mô tả
var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtJlPSyaTwBDIwf-NmBpGaJkfUFhIFtDWdYg3dRClO_a0P7sZiVaGOawDIPLR5quLIPP7nXaIfuSADbT5p26GjkiTReu_wKZP-2wy4XZW8KLuDfqkQBqAqcXnDeWDVgpIGWvxLgrVHn2Y/s1600/no_image.jpg";
//]]>
<script type="text/javascript" src="http://yourjavascript.com/484218918/kjmagic-rp.js"></script>

Bước 2: Tìm đến dòng </b:includable>
<b:includable id='postQuickEdit' var='post'> và chèn trước nó đoạn code sau:

<b:if cond='data:blog.pageType == "item"'>
       <div class='relatedpoststitle'>Bài viết liên quan:</div>
    <div id='relatedpostssum'>
          <script type='text/javascript'>showrelated();</script>
        </div>
        <div style='clear:both;'/>
 </b:if>
<b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url'  rel='tag'><data:label.name/></a><b:if  cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
     <script expr:src='"/feeds/posts/default/-/" +  data:label.name +  "?alt=json-in-script&callback=readpostlabels&max-results=5"'  type='text/javascript'/>
  </b:if>
          </b:loop>

Bước 3: Chèn đoạn code sau vào trước thẻ ]]></b:skin>:

/* Related Posts widget by kjmagic.blogspot.com */
.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;
}

Bước 4: Lưu template và xem kết quả.

Chúc các bạn thành công !