Итак, я пытался добавить пользовательские кнопки лайков и реблогов, используя учебники по stackoverflow, в мой блог: https://shahbazthemes.tumblr.com Кнопка реблогов работает нормально, но кнопка лайк ничего не сделает. Поэтому я добавил стандартные кнопки «как / reblog» Tumblr (изначально не включенные в тему), и снова кнопка «Журнал изменений» работает, а кнопка «Мне нравится» - нет.
Я не обладаю обширными знаниями о кодировании, но вот что Я сделал:
Добавил этот кусок кода в конец каждого div "pi c". div "pi c" - это div, который отображает отдельные сообщения, поэтому у каждого сообщения есть этот div. Вот фрагмент кода:
<div class="postfooter">
<li>{LikeButton}</li>
<li>{ReblogButton}</li>
</div>
</div>
и добавлен бит css, чтобы сделать два элемента li встроенными.
Вот мой код темы:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//en" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href="https://static.tumblr.com/fk8bn8w/QLRq4gbp9/style-my-tooltips.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script><script>(function($){$(document).ready(function(){$("[title]").style_my_tooltips();});})(jQuery);</script>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<meta name="color:scrollbar" content="#cdf6ce">
<meta name="color:scrollbar bg" content="white">
<meta name="color:bg" content="#f9f9f9">
<meta name="color:body" content="black">
<meta name="color:bold" content="black">
<meta name="color:links" content="gray">
<meta name="color:post bg" content="white">
<meta name="color:borders" content="#e5e4e2">
<meta name="color:title" content="black">
<meta name="color:Navigation Links" content="black">
<meta name="color:description" content="black">
<meta name="color:perma box3" content="#cdf6ce">
<meta name="color:blockquote bg" content="#e8e8e8">
<meta name="color:Like Reblog color" content="#333333">
<meta name="color:Like Reblog Hover color" content="#00bceb">
<meta name="if:200px" content="0">
<meta name="if:250px" content="0">
<meta name="if:300px" content="1">
<meta name="if:400px" content="0">
<meta name="if:caption" content="0">
<meta name="image:bg image" content="" />
<meta name="image:side image" content="https://41.media.tumblr.com/cf93988618035cbb39c35c402a1ddbdd/tumblr_nigsu3SqL21rlma8ao5_1280.jpg" />
<meta name="text:link one" content="archive">
<meta name="text:link one url" content="/archive">
<meta name="text:link two">
<meta name="text:link two url">
<meta name="text:link three">
<meta name="text:link three url">
<style type="text/css">
{customcss}
.postfooter li{
list-style:none;
float:left;
margin-left:10px;
z-index:99999999 !important;
padding:5px !important;
}
.postfooter{
height:80px;width:100%
}
a{
cursor:pointer !important;
}
/*CUSTOM CSS*/
.pic:hover .wh,#red,#velvet{
display:none !Important;
}
#a a{
color:{color:Navigation Links};
}
blockquote{
max-width:300px !important
}
.pic{
min-width:400px !important;
}
blockquote img{
max-width:350px !important;
height:auto !important
}
/*CUSTOM CSS*/
.tumblr_blog{
color:{color:Author name color} !important;
}
/*important stuff*/
#s-m-t-tooltip{
max-width:400px;
margin-top:10px;
margin-left:20px;
padding: 2px;
z-index:9999999999;
background-color:white;
border: 1px solid white;
color:black;
font-family:roboto;
font-size:9px;
box-shadow:2px 2px 5px #e8e8e8;
-moz-box-shadow:2px 2px 5px #e8e8e8;
-webkit-box-shadow:2px 2px 5px #e8e8e8;
}
iframe#tumblr_controls {
top:0%!important;
right:0%!important;
position:fixed!important;
z-index:9999999999!important;
opacity:1;
-webkit-filter:invert(100%);
-moz-filter:invert(100%);
-o-filter:invert(100%);
-ms-filter:invert(100%);
filter:invert(100%);
}
/*scrollll*/
::-webkit-scrollbar-thumb:vertical {
background-color:{color:scrollbar};
height:40px;
z-index:9999;
}
::-webkit-scrollbar {
background-color:{color:scrollbar bg};
height:5px;
width:5px;
z-index:9999;
}
/*posts*/
#content{
width:400px;
padding:30px;
margin-left:40%;
{block:permalinkpage}width:450px;
{/block:permalinkpage}
}
.pic{
margin:20px;
float:left;
padding:20px;
background-color:{color:post bg};
border:1px dotted {color:borders};
border-radius:5px;
padding:10px;
{block:indexpage}
{block:if300px} width:300px;{/block:if300px}
{block:if200px} width:200px;{/block:if200px}
{block:if250px}width:250px;{/block:if250px}
{block:if400px}width:400px;{/block:if400px}
margin-top:30px;
{/block:indexpage}
{block:permalinkpage}
width:400px;
{/block:permalinkpage}
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
blockquote {
width:100%;
margin-left:15px;
padding-left:5px;
padding-top:1px;
padding-bottom:1px;
background-color:{color:blockquote bg};
}
a{color:{color:links}; text-decoration:none;
}
a:hover {background-color:{color:links hover};
}
ul, ol{}
ul.chat {
margin: 0 0 0 0;
padding: 0 0 0 0;}
.chat li {
list-style-type: none;
padding: 2px;}
.chat{ padding:15px;}
.quote { font-size: 14px; letter-spacing: 0px; font-family:roboto;font-style:none;}
#not ol li {
list-style-type:none;
}
#not{height:100px;
width:430px;
overflow:auto;}
#ans img{{block:if300px}max-width:290px;{/block:if300px}
{block:if200px}max-width:190px;{/block:if200px}
{block:if250px}max-width:240px;{/block:if250px}
{block:if400px}max-width:390px;{/block:if400px}
overflow:hidden;}
#ans {word-wrap:break-word;}
i, em{font-weight: light;}
b, strong{font-weight:bold; color:{color:bold};}
*, body {cursor:default;}
a, a:hover {cursor:help;}
h3{ font-weight:normal;
text-align:center;}
#text img{
{block:indexpage} {block:if300px}max-width:290px;{/block:if300px}
{block:if250px}max-width:240px;{/block:if250px}
{block:if200px}max-width:190px;{/block:if200px}
{block:if400px}max-width:390px;{/block:if400px}{/block:indexpage}
{block:permalinkpage}max-width:390px;{/block:permalinkpage}
overflow:hidden;
}
#text{word-wrap:break-word;
}
#perma{width:450px;
text-align:center;
}
/*stuff*/
body {font-size: 12px;
font-family:roboto;
color:{color:body};
word-wrap:break-word;
background-color:{color:bg};
background-image:url('{image:bg image}');
background-size:100% 100%;
background-attachment:fixed;
}
#ques{border-bottom:{color:borders} 1px dotted;background-color:{color:post bg};padding-bottom:5px;}
#ques a{color:{color:body}; text-decoration:underline; font-style:italic;}
.pagination{display:none;
font-size:20px;
text-align:Center;
position:fixed;
left:100px;
font-family:roboto;
color:{color:body};
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.pagination a{color:{color:body};
text-decoration:none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.pagination a:hover{text-decoration:none;}
.ps {
overflow:hidden;
}
.video{{block:indexpage}{block:if200px}width:200px;{/block:if200px}{block:if300px}width:300px;{/block:if300px}{block:if250px}width:250px;{/block:if250px}{block:if400px}width:400px;{/block:if400px} overflow:hidden;{/block:indexpage}}
#audio *{
height:60px;
width:60px;
padding-left:2.5px;
margin-top:-41px;
opacity:0.7;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#audio:hover *{opacity:0.8;-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;}
#audioinfo{padding-left:80px;
margin-top:-90px;
}
{block:ifcaption}#cap{
font-family:roboto;
padding:2px;
margin-top:3px;
font-size:10px;
text-align:left;
}{/block:ifcaption}
{block:ifnotcaption}#cap{display:none;}{/block:ifnotcaption}
#red{position:absolute;
width:0px;
height:1px;
background-color:{color:borders};
{block:if200px}margin-left:236px;{/block:if200px}
{block:if300px} margin-left:336px;{/block:if300px}
{block:if250px}margin-left:286px;{/block:if250px}
{block:if400px}margin-left:436px;{/block:if400px}
margin-top:9px;
}
#velvet{position:absolute;
width:1px;
height:0px;
background-color:{color:borders};
{block:if200px}margin-left:227px;{/block:if200px}
{block:if300px} margin-left:327px;{/block:if300px}
{block:if250px}margin-left:277px;{/block:if250px}
{block:if400px}margin-left:427px;{/block:if400px}
margin-top:13px;}
.wh{width:15px;
height:15px;
position:absolute;
margin-top:0px;
{block:if200px}margin-left:220px;{/block:if200px}
{block:if300px}margin-left:320px;{/block:if300px}
{block:if250px}margin-left:270px;{/block:if250px}
{block:if400px}margin-left:420px;{/block:if400px}
border:1px solid {color:borders};
border-radius:5%;
background-color:{color:perma box1};
opacity:0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.pic:hover #red{opacity:1;width:28px;
}
.pic:hover #velvet{opacity:1;height:31px;}
.pic:hover #box{opacity:1;margin-left:43px;}
.pic:hover #box2{opacity:1;margin-top:30px;}
.pic:hover .wh{opacity:1;}
.wh:hover{opacity:1;}
#box,#box2{width:10px;
height:10px;
border:1px solid {color:borders};
border-radius:5%;
opacity:0;
}
#box{background-color:{color:perma box2};
margin-left:23px;
margin-top:1.5px;
}
#box2{background-color:{color:perma box3};
margin-top:20px;}
.side{position:fixed;
top:30%;
left:30%;
border:1px dotted {color:borders};
border-radius:5%;
background-color:white;
}
#pc{
border-radius:5%;
width:100px;
height:100px;
margin:10px;
overflow:hidden;
background-position:center;
background-size:cover;
background-image:url('{image:side image}');
}
#dc{position:absolute;
right:100%;
top:45%;
height:1px;
background-color:{color:borders};
}
#ac{position:absolute;
width:1px;
left:50%;
top:100%;
}
#a{position:relative;
width:100px;
text-align:right;
margin-left:-105px;
margin-top:10px;
font-family:roboto;
}
#b{position:relative;
font-style:italic;
color:{color:description};
width:150px;
font-size:11px;
margin-left:15px;
margin-top:5px;
font-family:roboto;
}
#bc{position:absolute;
bottom:133px;
color:{color:title};
background-color:white;
border:1px dotted {color:borders};
width:100px;
padding:10px;
text-align:center;
border-radius:5px;
opacity:1;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
{block:IndexPage}<script src="https://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
<script>
$(document).ready(function(){
var $container = $('#content');
$container.infinitescroll({
itemSelector: '.pic',
navSelector: '.pagination',
nextSelector: '.next',
loadingImg: '',
loadingText: '<em></em>',
bufferPx: 2000
});
});
</script>
{/block:IndexPage}
</head>
<body>
<div class="side">
<div id="bc">{title}</div>
<div id="ac">
<div id="a"><a href="/">home</a>
<br><a href="/ask">message</a>
{block:iflinkone} <br><a href="{text:link one url}">{text:link one}</a>{/block:iflinkone}
{block:iflinktwo} <br><a href="{text:link two url}">{text:link two}</a>{/block:iflinktwo}
{block:iflinkthree} <br><a href="{text:link three url}">{text:link three}</a>{/block:iflinkthree}
</div></div>
<div id="dc">
<div id="b">{description}</div>
</div>
<div id="pc" {block:ifsidebareffect}title="{title}"{/block:ifsidebareffect}></div>
</div>
<div class="pagination">
{block:Pagination}{block:PreviousPage}<a href="{PreviousPage}"><<</a> {/block:PreviousPage} {block:NextPage}<a href="{NextPage}" class="next" >>></a>{/block:NextPage}{/block:Pagination}</div>
<div id="content">
{block:Posts}
<div class="entry">
{block:Text}
<div class="pic">
{block:Title}<h3 id="title" style="text-align:left; font-size:25px;" >{Title}</h3>{/block:Title}
<div id="text"> {Body}</div>
<div class="postfooter">
<li>{LikeButton}</li>
<li>{ReblogButton}</li>
</div>
</div>
{/block:Text}
{block:Photo}
<div class="pic">
<center>
{block:IndexPage}
<a href="{permalink}"> <img src="{PhotoURL-400}" width="{block:if300px}300px;{/block:if300px}{block:if250px}250px;{/block:if250px}{block:if200px}200px;{/block:if200px}{block:if400px}400px;{/block:if400px}" ></a>
<div id="cap">{block:Caption}
{Caption}
{/block:Caption}</div>
{/block:IndexPage}
{block:PermalinkPage}
<a href="{LinkURL}">
<img src="{PhotoURL-HighRes}">
{/block:PermalinkPage}
</a>
</center>
{block:PermalinkPage}
{block:Caption}
{Caption}
{/block:Caption}
{/block:PermalinkPage}
<div class="postfooter">
<li>{LikeButton}</li>
<li>{ReblogButton}</li>
</div>
</div>
{/block:Photo}
{block:Photoset}
<div class="pic">
{block:IndexPage}
<div class="ps">
{Photoset}
</div>
<div id="cap">{block:Caption}
{Caption}
{/block:Caption}</div>
{/block:IndexPage}
{block:PermalinkPage}
{Photoset-400}
{block:Caption}
{Caption}
{/block:Caption}
{/block:PermalinkPage}
<div class="postfooter">
<li>{LikeButton}</li>
<li>{ReblogButton}</li>
</div>
</div>
{/block:Photoset}
{block:Quote}
<div class="pic">
<div class="quote">{Quote}
{block:Source}
<div style="text-align:right; line-height:25px; font-size:12px;"class="source"> {Source}</div>
{/block:Source}</div>
</div>
{/block:Quote}
{block:Link}
<div class="pic">
<h3><a href="{URL}" {Target}>{Name}</a></h3>
</div>
{/block:Link}
{block:Chat}
<div class="pic">
{block:Title}
<h3>{Title}</h3>
{/block:Title}
<ul class="chat">
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}
<span class="label"><b>{Label}</b></span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</div>
{/block:Chat}
{block:Audio}
<div class="pic">
{block:AlbumArt}
<img style="width:70px;margin-bottom:0px;padding-left:0px" src="{AlbumArtURL}">
{/block:AlbumArt}
<div id="audio">
{block:AudioPlayer} {AudioPlayerwhite} {/block:AudioPlayer}
</div><div id="audioinfo">Track: {block:TrackName}{TrackName}{/block:TrackName}<br>Artist: {block:Artist}{Artist}{/block:Artist}<br>
{block:PlayCount}{PlayCountWithLabel}{/block:PlayCount}</div>
{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}
{/block:Permalinkpage}
</div>
{/block:Audio}
{block:Video}
<div class="pic">
<div class="video">
{block:IndexPage}
{Video-400}
{/block:IndexPage}
{block:PermalinkPage}
{Video-400}
{block:Caption}{Caption}{/block:Caption}
{/block:PermalinkPage}
</div>
</div>
{/block:Video}
{block:Answer}
<div class="pic">
<div id="ques">{Asker} whispered: <i>{Question}</i></div><div id="ans">{Answer}</div>
<div class="postfooter">
<li>{LikeButton}</li>
<li>{ReblogButton}</li>
</div>
</div>
{/block:Answer}
{block:PermalinkPage}
<div id="perma">
<center>{block:NoteCount}{NoteCountWithLabel} <img src="https://media.tumblr.com/00a827740e10acc5ac5985d0270b8735/tumblr_inline_n2aihb9pLr1r7v6wt.png"> {/block:NoteCount}{block:Date}{ShortYear}/{MonthNumberWithZero}/{DayOfMonthWithZero}{/block:Date}{block:RebloggedFrom} <img src="https://media.tumblr.com/00a827740e10acc5ac5985d0270b8735/tumblr_inline_n2aihb9pLr1r7v6wt.png"> <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a> <img src="https://media.tumblr.com/00a827740e10acc5ac5985d0270b8735/tumblr_inline_n2aihb9pLr1r7v6wt.png"> <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:RebloggedFrom}<br>{block:HasTags} {block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags} {/block:HasTags}
</center>
</div>
{block:PostNotes}
<div id="not">{PostNotes}</div>
{/block:PostNotes}
{/block:PermalinkPage}
</div>
{/block:Posts}
</div>
</body>
</html>
Пожалуйста, помогите мне разобраться. Если можете, запустите его в любом демонстрационном блоге.
Спасибо.