0

这是一篇关于如何在 Blogger 平台上添加浮动社交媒体按钮的 wiki/文章。

前提：向下滚动内容时将浮动到顶部的社交媒体栏。

4

1 回答 1

1

首先，为了防止版权问题等，我想承认 Way2Blogging.org 是这个令人惊叹的分享栏的原始来源，我做了一些调整。原始文章可以在 这里找到：。

浮动社交媒体分享按钮

这是一个简单的教程，介绍如何通过 2 个简单的步骤在您的 Blogger 上放置一个浮动的社交媒体共享按钮。

注意：此小工具需要直接放入您的 Blogger HTML 中。因此，您必须在 Blogger Template中打开Edit HTML，然后单击Expand Template Widgets。

首先，输入 Javascript/jQuery 代码。

在展开的 HTML 中，搜索</head>标签并在其上方/之前直接插入这些代码行：

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/>
<style type='text/css'>
/<![CDATA[/
#w2bSocialFloat {clear:both;padding: 6px 0;display:block;background:#E9E9E9;}
#w2bSocialFloat td{padding:4px;margin:0;border:none;}
#w2bSocialFloat td iframe{max-width:82px;width:82px !important;}
#w2bSocialFloat.w2bFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
/]]>/
</style>
<script type='text/javascript'>
/<![CDATA[/
// Set the Top Offset
$theOffset = 0;
jQuery(document).ready(function(b){var a=b("#w2bSocialFloat");a.wrap('<div id="w2bSocialPlaceholder"></div>').closest("#w2bSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#w2bSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("w2bFloatSocial"):a.removeClass("w2bFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});
/]]>/
</script>
<script src='http://widgets.way2blogging.org/blogger-widgets/w2b-blogger-pinit.js' type='text/javascript'/>
<script type='text/javascript'>
/<![CDATA[/
// Twitter
(function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
// Google + (plus)
(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
// Stumbleupon
(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
// Digg
(function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})(); /]]>/
</script>
</b:if>

** 更改背景：#E9E9E9 使用您选择的颜色以最适合您的博客颜色。

二、输入社交按钮代码：

搜索<data:post.body/>标记并将这些代码行粘贴到上面/之前：

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="w2bSocialFloat" class="w2bSocialFloat">
<table  width="100%" class="w2bSocialFloat">
<tr>
<td>
<a href="https://twitter.com/share" class="twitter-share-button" expr:data-url="data:post.url" expr:data-text="data:post.title">Tweet</a>
</td>
<td>
<iframe expr:src="&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
</td>
<td>
<div expr:id="&quot;w2bPinit-&quot; + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton">
<data:post.body/>
<script type="text/javascript">
w2bPinItButton({
url:"<data:post.url/>",
thumb: "<data:post.thumbnailUrl/>",
id: "<data:post.id/>",
defaultThumb: "http://4.bp.blogspot.com/-YZe-IcKvGRA/T8op1FIjwYI/AAAAAAAABg4/j-38UjGnQ-Q/s1600/w2b-no-thumbnail.jpg",
pincount: "horizontal"
});
</script>
</div>
</td>
<td>
<div class="g-plusone" data-size="medium" expr:data-href="data:post.url"></div>
</td>
<td>
<su:badge layout="1" expr:location="data:post.url"></su:badge>
</td>
<td>
<a class="DiggThisButton DiggCompact"></a>
</td>
</tr>
</table>
</div>
</b:if>

** 如果您发现多个<data:post.body/>标签，通常将社交按钮代码粘贴到第一个标签上方即可。

调整

1. 如果要删除 Digg 和 StumbleUpon 按钮，则必须从 Javascript/jQuery 代码中删除这些代码行：

// Stumbleupon
(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
// Digg
(function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})();

此外，从社交按钮代码中删除这些行：

<td>
<su:badge layout="1" expr:location="data:post.url"></su:badge>
</td>
<td>
<a class="DiggThisButton DiggCompact"></a>
</td>

2. 如果您想在共享栏中放置一个返回顶部按钮，请按照以下说明操作：

2a。搜索</body>标签并在其之前/上方粘贴这些行：

<li class='Back to top' style='list-style: none; width: 0px;' tabindex='0'> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$(&quot;#bd-top&quot;).fadeIn()}else{$(&quot;#bd-top&quot;).fadeOut()}});$(&quot;#bd-top&quot;).click(function(){$(&quot;body,html&quot;).animate({scrollTop:0},800);return false})});</script></li>

2b。然后，将下面的代码插入<td>社交按钮代码中的 [ 或 ] 列之一（看起来像这样）：

<td>
<a class='backtop' href='#' id='bd-top'>&#8593;</a>
</td>

而已。我们完成了！让我知道任何其他技巧来美化这个 Blogger 小工具。:-)

于 2013-02-24T09:15:48.620 回答