4 mẫu Related Post đơn giản chỉ với tiêu đề bài viết cho Blogger

Simple Related Post for Blogger

Ở bài viết trước Iris Tips đã chia sẻ cho các bạn cách tạo Related Post với ảnh thumbnails cho Blogger. Ở bài viết này cũng sẽ là tiện ích Bài viết liên quan nhưng với phong cách đơn giản hơn chỉ hiển thị tiêu đề bài viết.

Cách thực hiện

1Thông thường tiện ích Bài viết liên quan thường được đặt ở đầu hoặc cuối mỗi bài viết. Bạn hãy vào Mẫu >> Chỉnh sửa HTML

2Tìm đến đoạn code <data:post.body/>

3Hãy đặt đoạn code 1 trong 4 kiểu Related Post dưới đây vào trước thẻ đó nếu bạn muốn hiện thị ở đầu mỗi bài viết và đặt ở sau nếu muốn hiện ở cuối bài viết.

Mẫu 1

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{margin:10px 5px}
#related-posts h2{letter-spacing:1px;font-size:18px;color:#222;margin-bottom:15px;position:relative;left:5px;top:10px}
#related-posts a{font-size:14px;color:#999;text-transform:capitalize}
#related-posts a:hover{text-decoration:none;color:#555}
#related-posts ul{list-style-type:none;margin:0 0 0 0;padding:5px}
#related-posts ul{list-style-type:none}
#about{position:absolute;right:1%;font-weight:bold}
#related-posts li{padding:12px;border-bottom:2px solid #fff;border-left:5px solid #BCC2B9;background-color:#F4F4F4}
#related-posts li:hover{background:#F4F4F4;font-weight:bold;background-color:#eee;border-left:5px solid #188DD7}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Có thể bạn cũng thích:&quot;;
</script>
<script src='https://sites.google.com/site/iristipsblogger/file/simple-related-posts.js' type='text/javascript'/>
<div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <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=related_results_labels&amp;max-results=4&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=6; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script></div>
</b:if>  

Mẫu 2

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{margin:13px 5px;background-color:#20DD71}
#related-posts h2{color:#FFFFFF;margin-bottom:13px;left:7px;top:10px;font-family:Trebuchet ms}
#related-posts a{font-size:14px;color:#999;text-transform:capitalize}
#related-posts a:hover{text-decoration:none;color:#555}
#about{position:absolute;right:1%;font-weight:bold}
#related-posts ul{list-style-type:none;margin:0 0 0 0;padding:5px}
#related-posts li{padding:12px;border-bottom:3px solid #eaeaea;background-color:#FFFFFF}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Có thể bạn cũng thích:&quot;;
</script>
<script src='https://sites.google.com/site/iristipsblogger/file/simple-related-posts.js' type='text/javascript'/>
<div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <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=related_results_labels&amp;max-results=4&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=6; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script></div>

Mẫu 3

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#about{display:none}
#related-posts{margin:10px 0;background-color:#eee}
#related-posts h2{letter-spacing:1px;font-size:18px;color:#222;margin-bottom:10px;position:relative;left:10px;top:10px}
#related-posts a{position:relative;bottom:4px;font-size:15px;color:#999;text-transform:capitalize}
#related-posts a:hover{text-decoration:none;color:#555}
#related-posts ul{list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimt1J_L3ntqRWETueJUiVSnwqXwbJWSvT2fPqeuuvOdmCb5EdJU5M7Uj-0lQv6hTvnxrxI0mfOhyaRPXtzCO5phJFxcQttk3f7m2DJyo56vKxDvpsorUyX8qdepe7EgplgJPxdb9KQbpg/s1600/rsz_1rsz_icon256.png');margin:0 0 0 0;padding:5px;position:relative;left:30px}
#related-posts li{width:94%}
#related-posts li:hover{font-weight:bold}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Có thể bạn cũng thích:&quot;;
</script>
<script src='https://sites.google.com/site/iristipsblogger/file/simple-related-posts.js' type='text/javascript'/>
<div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <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=related_results_labels&amp;max-results=4&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=6; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script></div>
</b:if>

Mẫu 4

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#about{display:none}
#related-posts{margin:10px 0;background-color:#eee}
#related-posts h2{letter-spacing:1px;font-size:18px;color:#222;margin-bottom:10px;position:relative;left:10px;top:10px}
#related-posts a{position:relative;bottom:5px;font-size:15px;color:#666;text-transform:uppercase}
#related-posts a:hover{text-decoration:none;color:#555}
#related-posts ul{list-style-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguZSzJnosgHJVj6Topgr0oEYhQM1eeoxxMRC0HPm8z4aV-VlHBZt3fifFgmavzzqZhXxqgCo1VFeQxSGk7ExMCsJW7A-9jeyZdyiflpJSaT7AJJOP74xRcJz3q6RyrTAkI48Vdm86YJ4I/s1600/rsz_logo-favicon-large.png&#39;);margin:0 0 0 0;padding:5px;position:relative;left:30px}
#related-posts li{padding:0%;margin-bottom:7px;width:94%;border-bottom:1px dashed #666}
#related-posts li:hover{font-weight:bold}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Có thể bạn cũng thích:&quot;;
</script>
<script src='https://sites.google.com/site/iristipsblogger/file/simple-related-posts.js' type='text/javascript'/>
<div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <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=related_results_labels&amp;max-results=4&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=6; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script></div>
</b:if>  

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm