如何在 Blogger 中添加自定义简单相关帖子小部件

当一个人读完一篇博客文章后，您就有机会让他参与您博客上的其他类似内容。为此，您可以在博客文章末尾添加相关帖子小部件。

相关帖子小部件还将帮助您降低博客上的跳出率，从而增加页面浏览量和广告产生的收入。由于 Blogger 没有内置的相关帖子小部件，因此您必须在博客上手动添加它。

这里我们有一个非常简单的 Blogger 相关帖子小部件，它是使用 HTML、JavaScript 和 JSON feed 创建的。它将根据帖子标签显示最相关的帖子。

此相关帖子小部件的一些功能

以下是此相关帖子小部件的一些功能 -

简单的用户界面- 这个小部件的外观非常简单，因为没有任何帖子缩略图和描述。它可以适合任何博客设计/主题。
快速加载– 此相关帖子小部件的加载时间非常短。而且，它对网页加载时间没有太大影响。
相关帖子– 此相关帖子小部件将根据帖子标签/标签显示相关帖子。例如，如果您在以下位置标记了帖子类别，那么它只会显示 Android 相关的帖子。
降低跳出率– 在您的博客上添加相关帖子小部件后，您会发现页面浏览量有所增加，跳出率有所下降。

您可以在我们博客的帖子末尾看到此相关帖子小部件的实时预览。

按照此分步指南在您的 Blogger 博客上添加相关帖子小部件 –

首先，登录您的 Blogger 帐户并打开您的博客仪表板。
去> 编辑 HTML。
单击模板编辑器中的任意位置，然后按 CTRL+F 快捷键打开搜索框。
现在搜索以下代码：
```
<div class="post-footer">
```
略低于<div class=”post-footer”>，粘贴此代码：

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts ul {padding: 10px 0 10px;margin: 0 0 0 30px;}#related-posts ul li{list-style-type: none;}#related-posts ul li a:hover {color:#00BCD4;transition:all 0s ease;text-decoration: none;}#related-posts h3 {font-family: 'raleway';padding:10px;text-align: center;border-bottom:2.5px solid #eee;font-size: 25px;font-weight: normal;color: #000000;margin-bottom: 0.75em;}</style>
<script type='text/javascript'>
var relatedpostsbackground-color: yellow;">You May Also Like.."; var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i]}}relatedTitles=tmp2;relatedUrls=tmp}function contains(a,e){for(var j=0;j<a.length;j++){if(a[j]==e){return true}};return false}function printRelatedLabels(currenturl){for(var i=0;i<relatedUrls.length;i++){if(relatedUrls[i]==currenturl){relatedUrls.splice(i,1);relatedTitles.splice(i,1)}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>1){document.write('<h3>'+relatedpoststitle+'</h3>')}document.write('<ul>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length);}
</script>
<div class='clr' id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'> var maxresults=5;  removeRelatedDuplicates();  printRelatedLabels(&quot;<data:post.url/>&quot;); </script></div>
</b:if>