Tùy biến vị trí Related post trong blogspot.

Tùy biến vị trí Related post trong blogspot.

Related post là thành phần khá quan trọng trong blogspot. Vị trí đặt bài viết liên quan cũng khá quan trọng.
Như bài viết này đã chỉ ra cách bạn thêm bài viết liên quan (related post) tại cuối mỗi bài.

Trong bài viết này mình sẽ chỉ cách bạn thêm bài viết trên đầu trang hay tại bất cứ vị trí nào bạn muốn như hình - bài viết liên quan được mình thêm ở bên phải để tiện cho người xem :

Đầu tiên related post, +1, Like, hay Tweet muốn hoạt động trên bài viết thì đều phải có data:post.id. Vì vậy bạn chỉ cần thêm bài viết liên quan, +1, like... vào trong một post mới là được.

Cụ thể bạn chỉ cần cho nó nằm trong post-footer của blog post vừa mới tạo.

Nó sẽ nằm trong code data post mới:

<b:includable id='post' var='post'>
<a expr:name='data:post.id'/>
<div class='post-footer'>
Toàn bộ code nằm ở đây bao gồm related post, +1, like, facebook..
</div>
</b:includable>

Code related post nằm trong một id='post' mới.

OK. Bạn xem bài Related post trước đó để lấy code và biết rõ cách thêm Related post

Hướng dẫn cách thêm vào bất cứ vị trí nào:

1.CSS - Thêm trước </head>

<!--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: 18px;letter-spacing: 2px;font-weight: bold;text-transform: none;color: #5D5D5D;font-family: Arial Narrow;margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;}#related-posts a{border-right: 1px dotted #DDDDDD;color:#5D5D5D;}#related-posts a:hover{color:black;background-color:#EDEDEF;}</style><script type='text/javascript'>var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzTrGsld5BiHT1F3sbiNE56kc3GlZG45QGE2tzwhA3GE318SrnCZYu6OWDiCqvphrBhs95NbZoOi5eKk7orNIJMHwDanTQOGzsE6lpFV4aLE0SD97PbUq2omp89b0-rsju2mrL9nSL1ae7/s1600/no_image.jpg&quot;;var maxresults=5;var splittercolor=&quot;#DDDDDD&quot;;var relatedpoststitle=&quot;Related Posts&quot;;</script><script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/><!-- remove --></b:if><!--Related Posts with thumbnails Scripts and Styles End-->

2. Xác định vị trí bạn muốn đặt Related post và thêm đoạn code này vào:

<b:includable id='post' var='post'>
              <a expr:name='data:post.id'/>
              <div class='post-footer'>
             
               
                <div style='height:25px; border-bottom:1px solid #e0e0e0; width:100%; line-height:25px; padding-left:13px; color:#dd8620'>
                  Bài liên quan
                </div>
                <!-- 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.erhay.com'>
                      <img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPoHeeuBeyS_9Sl3QXiR_AggOBFu5drEtu-KLWHkW85WA_WFahb3orFogI0vyp4uUO3oQ2Bjn-EIv73bK1-I5PkIzmGy-OqPV6md4Q7ECDqbwenNzo3o1qspKTPeoi01OuTnifI_vqszgB/s1600/best+blogger+tips.png'/>
                    </a>
                  </b:if>
                </b:if>
                <!-- Related Posts with Thumbnails Code End-->

                <div class='post-footer-line post-footer-line-'/>
                <div class='post-footer-line post-footer-line-2'/>
                <div class='post-footer-line post-footer-line-3'>
                  <!-- Feature added by BTemplates.com -->
                  <b:include data='post' name='postQuickEdit'/>
                </div>
              </div>
            </b:includable>

 Cách làm này khá phức tạp, bạn nên sao lưu template trước khi thực hiện để tránh xảy ra sai sót. Bài viết sẽ khó thực hiện với những bạn mới bắt đầu. Nếu bạn có thắc mắc có thể comment bên dưới để được giải đáp.