在 Blogger 上添加简单的社交分享按钮小部件

毫无疑问，与搜索引擎相比，社交媒体几乎可以立即为您的博客带来大量流量。但是，您应该在社交媒体上拥有大量关注者才能获得一些流量。

如果您的访问者发现您的博客文章有用，他们也可能在社交媒体上与朋友分享。您可以通过在帖子末尾添加社交媒体共享按钮，让访问者更轻松地共享您的博客内容。

Blogger 确实有一个内置的社交共享小部件，但不幸的是，它不适用于自定义模板。我们为 Blogger 创建了一个简单而专业的社交共享按钮小部件。本教程将指导您将其添加到您的博客中。

此社交共享按钮小部件的功能

以下是这个社交分享按钮小部件的一些功能 -

快速加载– 该小部件不会从外部源加载任何文件（社交媒体图标除外），因此不会影响博客的页面加载速度。
没有使用 JavaScript– 该小部件不使用 JavaScript 语言。它仅基于 HTML 和 CSS 语言。
简单的用户界面– 它具有非常简单且响应灵敏的设计，可以适合任何博客模板。
社交分享按钮– 我们在此小部件中添加了 4 个流行社交媒体网站的分享按钮，包括 Facebook、Twitter、Google Plus 和 Pinterest。

要查看此社交共享按钮小部件的实时预览，请向下滚动到此博文的末尾。

按照此分步指南在您的 Blogger 博客上添加社交分享按钮小部件 –

首先，登录您的 Blogger 仪表板并转至主题 > 编辑 HTML。
单击模板编辑器中的任意位置，然后按 CTRL+F 快捷键打开搜索框。
现在在模板中搜索此代码：
```
<div class="post-footer">
```

在其下方粘贴以下代码：

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.share{overflow:hidden;margin:20px auto;display:inline-block;width:100%;text-align:center;letter-spacing:.6px;font-size:13px}.share ul{margin:0;padding:0}.share ul li{display:block;float:left;min-height:40px;position:relative;padding:0;text-decoration:none}.share ul li a{float:left;display:block;color:#fff;padding:10px 14px;text-align:left;margin:0 3px 3px}.share ul li a:hover{opacity:.8;text-decoration:none;transition:all 0s linear}.share a.fb{background:#395796}.share a.tw{background:#4cb0ea}.share a.gp{background:#de3425}.share a.pn{background:#cd1c1f}.fb i,.gp i,.pn i,.tw i{background:url(//lirong.digitalixy.com/tech/keva//1.bp.blogspot.com/-P3DOmXqEiCM/VkOW8tkzxGI/AAAAAAAAMpE/cBX9b0xTPU8/s320/sosmed2.png) no-repeat;width:22px;height:18px;display:inline-block;vertical-align:text-top;margin:-3px 10px 0 0;text-align:center}.fb i{background-position:0 -100px}.tw i{background-position:0 -150px}.gp i{background-position:0 -200px}.pn i{background-position:0 -50px}
</style>
<div class='share'><div style='float: left;padding: 10px 14px;'><span style='font-size: 15px;font-weight: bold;'>Share this post</span></div>
<ul><li><a class='fb' expr:href='"https://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank' title='Facebook'><i class='fb-1'/>Facebook</a></li>
<li><a class='tw' expr:href='"https://www.twitter.com/intent/tweet?original_referer=" + data:blog.url + "&text=" + data:post.title + "&url=" + data:blog.url + "&via=mevivekch"' rel='nofollow' target='_blank' title='Twitter'><i class='tw-1'/>Twitter</a></li>
<li><a class='gp' expr:href='"https://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank' title='Google+'><i class='gp-1'/>Google+</a></li>
<li><a class='pn' expr:href='"https://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:blog.postImageUrl + "&description=" + data:post.title' rel='nofollow' target='_blank' title='Pinterest'><i class='pn-1'/>Pinterest</a></li></ul></div>
</b:if>

你可以改变 ”分享这个帖子” 带有您喜欢的任何其他标语的文本，例如“分享就是关怀“，”请分享“ ETC。
笔记：可能会出现不止一次的情况<div class=”post-footer”>代码在你的。如果小部件在第一次出现该代码时无法正常工作，请尝试与其他代码一起使用。