Add "Read more" button at Popular Post widget

Bài viết này mình sẽ hướng dẫn các bạn thêm nút "Read more" vào tiện ích Bài xem nhiều của blogspot. Các bạn chỉ việc thực hiện theo các bước đơn giản bên dưới

Lưu ý
Thủ thuật có thể làm thay đổi một số tính năng mà trước đó bạn đã thêm vào cho tiện ích này. Vì vậy trước khi thực hiện bạn nên lưu lại template để nếu không phù hợp có thể back up lại
Thực Hiện
Bước 1:
Trong template bạn thêm đoạn CSS sau trước thẻ ]]></b:skin>

   1:  

   2:  

   3: .widget.PopularPosts .widget-content 

   4: {

   5: font-size:96%;

   6: line-height:normal;

   7: }

   8: .widget.PopularPosts li 

   9: {padding:.5em 0 .8em}

  10: .widget.PopularPosts .item-title a 

  11: {

  12: display:block;

  13: font-weight:bold;

  14: margin:0 0 

  15: .2em;

  16: }

  17: .widget.PopularPosts img {

  18: padding:0;

  19: margin:5px 10px 0 

  20: 0;

  21: border:none;

  22: background-color:#111;

  23: float:left;

  24: }

  25: .widget.PopularPosts 

  26: a.more-link,.widget.PopularPosts a.more-link:hover,.widget.PopularPosts 

  27: a.more-link:focus 

  28: {

  29: display:block;

  30: float:right;

  31: color:#333;

  32: background-color:#999;

  33: line-height:100%;

  34: margin:1em 

  35: 0 0;

  36: padding:2px 6px 4px 

  37: 5px;

  38: font-size:10px;

  39: font-style:italic;

  40: text-decoration:none;

  41: text-shadow:none;

  42: -webkit-border-radius:2px;

  43: -moz-border-radius:2px;

  44: border-radius:2px;

  45: }

  46: .widget.PopularPosts 

  47: a.more-link:hover,.widget.PopularPosts a.more-link:focus 

  48: {background-color:white}

  49:  

Bước 2:
Hãy chắc chắn rằng bạn đã thêm tiện ích Popular Post vào blog sau đó tìm đến đoạn mã tương tự sau trong template
<b:widget id='PopularPosts1' locked='false' title='Popular Post' type='PopularPosts'>
ABC
</b:widget>
Mẹo: Bạn có thể tìm đoạn code bên trên qua từ khóa PopularPosts1
Sau đó thay toàn bộ đoạn mã ABC bên trong thẻ trên bằng

   1:  

   2: <b:includable id='main'>

   3: <b:if 

   4: cond='data:title'><h2><data:title/></h2></b:if>

   5: <div 

   6: class='widget-content popular-posts'>

   7: <ul>

   8: <b:loop 

   9: values='data:posts' var='post'>

  10: <li>

  11: <b:if 

  12: cond='data:showThumbnails == "false"'>

  13: <b:if 

  14: cond='data:showSnippets == "false"'>

  15: <!-- (1) No 

  16: snippet/thumbnail -->

  17: <a 

  18: expr:href='data:post.href'><data:post.title/></a>

  19: <b:else/>

  20: <!-- 

  21: (2) Show only snippets -->

  22: <div class='item-title'><a 

  23: expr:href='data:post.href'><data:post.title/></a></div>

  24: <div 

  25: class='item-snippet'><data:post.snippet/></div>

  26: </b:if>

  27: <b:else/>

  28: <b:if 

  29: cond='data:showSnippets == "false"'>

  30: <!-- (3) Show 

  31: only thumbnails -->

  32: <div class='item-thumbnail-only'>

  33: <b:if 

  34: cond='data:post.thumbnail'>

  35: <div class='item-thumbnail'>

  36: <a 

  37: expr:href='data:post.href' target='_blank'>

  38: <img alt='' border='0' 

  39: expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' 

  40: expr:width='data:thumbnailSize'/>

  41: </a>

  42: </div>

  43: </b:if>

  44: <div 

  45: class='item-title'><a 

  46: expr:href='data:post.href'><data:post.title/></a></div>

  47: </div>

  48: <div 

  49: style='clear: both;'/>

  50: <b:else/>

  51: <!-- (4) Show snippets and 

  52: thumbnails -->

  53: <div class='item-content'>

  54: <b:if 

  55: cond='data:post.thumbnail'>

  56: <div class='item-thumbnail'>

  57: <a 

  58: expr:href='data:post.href' target='_blank'>

  59: <img alt='' border='0' 

  60: expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' 

  61: expr:width='data:thumbnailSize'/>

  62: </a>

  63: </div>

  64: </b:if>

  65: <div 

  66: class='item-title'><a 

  67: expr:href='data:post.href'><data:post.title/></a></div>

  68: <div 

  69: class='item-snippet'><data:post.snippet/></div><a 

  70: class='more-link' expr:href='data:post.href'>Read 

  71: More</a>

  72: </div>

  73: <div style='clear: 

  74: both;'/>

  75: </b:if>

  76: </b:if>

  77: </li>

  78: </b:loop>

  79: </ul>

  80: <b:include 

  81: name='quickedit'/>

  82: </div>

  83: </b:includable>

Thay thế Read More cho phù hợp sau đó lưu lại template