Hướng dẫn tạo 'bài viết cùng chủ đề' có ảnh thu nhỏ

Hôm nay tranh thủ chỉ thêm cho các bạn cách tạo liên kết các bài viết cùng chủ để ở dưới bài viết !

Các bước thực hiện

1. Đầu tiên các bạn login vào Blogger dashboard > Layout > Edit HTML rồi nhấn tích vào "Expand Widget Templates" check box!

Lưu ý: Trước khi thực hiện mọi thao tác sữa đổi thì nên back-up để sau này có sự cố còn khôi phục !

2. Các bạn tìm dòng sau đây:</head> Và thay thế bằng đoạn code bên dưới :

  <!--Related Posts with thumbnails Scripts and Styles Start-->

  <!-- remove --><b:if cond='data:blog.pageType ==
  &quot;item&quot;'>

  <style type="text/css">

  #related-posts {

  float:center;

  text-transform:none;

  height:100%;

  min-height:100%;

  padding-top:5px;

  padding-left:5px;

  }

  

  #related-posts h2{

  font-size: 1.6em;

  font-weight: bold;

  color: black;

  font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;

  margin-bottom: 0.75em;

  margin-top: 0em;

  padding-top: 0em;

  }

  #related-posts a{

  color:black;

  }

  #related-posts a:hover{

  color:black;

  }

  

  #related-posts a:hover {

  background-color:#d4eaf2;

  }

  </style>

  <script type='text/javascript'>

  var
  defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHBw2jRYzhqjLH55HaVsagvXJpfKHpDwYEfPnF4iPKLhs3RJouacb34udYTkEMYrXkLn59AKHo5l7_2U6RD5cHMFmoX7E9WZxCYQV0foHwF2ujdpImGRGoG4iNc9XkwNlKEnQ-Dm6ozhg/s400/noimage.png";

  var maxresults=5;

  var splittercolor="#d4eaf2";

  var relatedpoststitle="Related Posts";

  </script>

  <script
  src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js'
  type='text/javascript'/>

  <!-- remove --></b:if>

  <!--Related Posts with thumbnails Scripts and Styles End-->

  </head> 

  3.Tìm dòng sau : 

  <div class='post-footer-line post-footer-line-1'> Rồi thay thế bằng đoạn
  code bên dưới :

  

  <!-- Related Posts with Thumbnails Code Start-->

  <!-- remove --><b:if cond='data:blog.pageType ==
  &quot;item&quot;'>

  <div id='related-posts'>

  <b:loop values='data:post.labels' var='label'>

  <b:if cond='data:label.isLast != &quot;true&quot;'>

  </b:if>

  <script expr:src='&quot;/feeds/posts/default/-/&quot; +
  data:label.name +
  &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;'
  type='text/javascript'/></b:loop>

  <script type='text/javascript'>

  removeRelatedDuplicates_thumbs();

  printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);

  </script>

  </div><div style='clear:both'/>

  <!-- remove --></b:if> 

  <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if
  cond='data:post.isFirstPost'>

  <a
  href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img
  style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails"
  src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a
  href='http://bloggertemplates.bloggerplugins.org/' ><img style="border:
  0" alt="Blogger Templates"
  src="http://image.bloggerplugins.org/blogger-templates.png" /></a>

  </b:if></b:if>

  <!-- Related Posts with Thumbnails Code End-->
  

4. Bạn có thể tùy chỉnh số bài hiển thị bằng cách thay đổi giá trị ở dòng dưới:

var maxresults=5;

5. Để thay đổi tiêu đề mục liên kết bài viết thì thay đổi dòng sau:

var relatedpoststitle="Related Posts";

6. Để thay đổi hình ảnh mặc định , bạn chỉ cần thay đổi dòng sau bằng 1 link ảnh với kích thước 72x72

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHBw2jRYzhqjLH55HaVsagvXJpfKHpDwYEfPnF4iPKLhs3RJouacb34udYTkEMYrXkLn59AKHo5l7_2U6RD5cHMFmoX7E9WZxCYQV0foHwF2ujdpImGRGoG4iNc9XkwNlKEnQ-Dm6ozhg/s400/noimage.png

Ngoài ra bạn nào thạo CSS thì có thể tự Edit thêm bằng tay ^^!

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