7

来自 tumblr 的新代码{LikeButton}有几个选项：颜色和大小。

它注入了一个 iFrame，它处理“Like”功能并提供 SVG 图形。

但是，由于 iframe 和跨站点脚本策略，不再可能使用 css 对其进行更改，也无法编辑其内容。

如何修改或插入新代码以使用我自己的 Like 按钮精灵或 svgs？

4

3 回答 3

18

为 Tumblr 按钮设置样式

可悲的是，正如 OP 所说，类似 Tumblr 的按钮具有最少的视觉选项，并且很难用 CSS / javascript 定位。所以是时候提出一个新想法了……

理念

我们知道两件事：

我们自己的Like Button 在视觉上应该是我们想要的任何东西。文本、图像、网络字体等

Tumblr Like 按钮会记录一次点击，而Tumblr 在存储数据方面发挥了作用。

如果我们可以在视觉上隐藏Tumblr的点赞按钮，然后将它放在我们自己的点赞按钮上，我们就有了一个样式化、工作的点赞按钮！

主题标记

主题标记的示例，这里的关键是为两个 Like 按钮提供一个包含元素，并确保Tumblr Like 按钮位于我们自己的Like 按钮之前，这样我们就可以利用 css 中相邻的兄弟选择器。

<div class="custom-like-button">
  {LikeButton}
  <span class="our_toggle">
    &hearts;
  </span>
</div>

渲染标记

渲染/实时代码示例。Theme Operator{LikeButton}现在属于<div>class .like_toggle。

<div class="custom-like-button">
  <div class="like_button">
     /* Iframe */
  </div>
  <span class="our_button">
    &hearts;
  </span>
</div>

CSS 魔法

关键还是让Tumblr Like Button 位于我们自己的Like 按钮上方。

.custom-like-button {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

/* class for the Tumblr Like Button iframe */
.like_button {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 10;
}
/* Force iframe to fill button */
.like_button iframe {
  width: 100% !important;
  height: 100% !important;
}
/* class for Our Like Button */
.our_button {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

多田！您现在应该拥有自己的“赞”按钮来注册用户的赞！

您还可以在悬停时设置样式：

/* Hover State */
.like_button:hover + .our_button {
  color: red;
}

当用户注册了一个赞时：

/* Liked State */
.like_button.liked + .our_button {
  background: red;
  color: white;
}

我希望这会有所帮助！如果你卡住了，我把标记留在这里。

于 2014-02-11T23:45:01.147 回答
4

这是目前最好的解决方案，感谢@mikedidthis 的帖子！

将 like 按钮放在父级，div或li其他任何内容中，并将其命名为.like. 在按钮上方放置 Tumblr 用于心脏图标的 SVG：

<li class="like">
    <svg width="14" height="14" viewBox="0 0 19 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000">
        <path d="M14.0425097,0.000920262799 C16.1435097,-0.0400797372 18.8835097,1.28192026 18.9635097,5.36992026 C19.0525097,9.95492026 15.1985097,13.3079203 9.48350967,16.2089203 C3.76650967,13.3079203 -0.0874903349,9.95492026 0.00150966509,5.36992026 C0.0815096651,1.28192026 2.82150967,-0.0400797372 4.92250967,0.000920262799 C7.02450967,0.0419202628 8.87050967,2.26592026 9.46950967,2.92792026 C10.0945097,2.26592026 11.9405097,0.0419202628 14.0425097,0.000920262799 Z"></path>
    </svg>
    {LikeButton size="14"}
</li>

更改<svg width="..." height="..."...为{LikeButton size="..."}您想要的大小。

现在只需使用一堆简单的 CSS

.like { /* Make a parent element */
     position: relative;
}
.like svg path { /* Select your color of choice */
     fill: #563d7c; 
}
.like .like_button { /* Position like button above your custom one */
     position: absolute;
     top: 0;
     opacity: 0;
 }
 .like .like_button.liked { /* Keep the functionality active */
     opacity: 1;
 }

虽然在这里是如何对 reblog 按钮执行相同的操作 - 因为它没有在 iFrame 中调用，所以事情要简单一些。把它放在一个父母div中，li或者其他任何东西，并称之为.reblog

<li class="reblog">
    {ReblogButton size="14"}
</li>

和 CSS

.reblog svg path { /* Select your color of choice */
    fill: #563d7c;
}

最初张贴在这里。

于 2014-12-27T20:54:49.257 回答
1

我做了简单的颜色选择，比如转发按钮

示例： http ://dennsokagisanat.tumblr.com/

http://reduxsarmadeneme.tumblr.com/

1.在此代码上添加元标记：

<!-- Like ve Reblog Buton Color -->

<meta name="color:ReblogButon" content="#0dd5f0"/>
<meta name="color:LikeButon" content="#0dd5f0"/>

<!-- Like ve Reblog Buton Color -->

2.添加html代码：

<li class="like">
    <svg style="width:21px; height:21px; viewBox=0 0 19 16; " xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000">
        <path d="M14.0425097,0.000920262799 C16.1435097,-0.0400797372 18.8835097,1.28192026 18.9635097,5.36992026 C19.0525097,9.95492026 15.1985097,13.3079203 9.48350967,16.2089203 C3.76650967,13.3079203 -0.0874903349,9.95492026 0.00150966509,5.36992026 C0.0815096651,1.28192026 2.82150967,-0.0400797372 4.92250967,0.000920262799 C7.02450967,0.0419202628 8.87050967,2.26592026 9.46950967,2.92792026 C10.0945097,2.26592026 11.9405097,0.0419202628 14.0425097,0.000920262799 Z"></path>
    </svg>
    {LikeButton size="20"}
</li>

3.添加css 样式代码

.like { /* Ana element */
    position: relative;
    top:0px;
}
.like svg path { /* Hangi renk istiyorsanyz o kodu buraya yapy?tyryn */
    fill: {color:LikeButon}; 
}
.like .like_button { /* Pozisyonu ayarladym ama bozulma olursa burayla oynayyn */
    position: absolute;
    top: 0;
    opacity: 0;
}
.like .like_button.liked { /* Bozulma olursa pozisyonda burayla oyna */
    opacity: 1;
    top:3.3px;




}                  
   .reblog_button svg path { fill: {color:ReblogButon}; }  /* Reblog butonunun rengini ayarlamak için renk kodunu istedi?inizle de?i?tirin */
   .reblog_button{
       position:relative;
       top:1.3px;
       left:1px;
   }

就是这样 ：）

于 2015-09-12T14:13:31.417 回答