This guide is particularly dedicated to @airaburabu
- Go to your Tumblr's customization panel (default at http://www.tumblr.com/customize)
- Click on Edit HTML
- Look up for
<a class="like item" onclick="LikePost('{PostID}','{ReblogURL}',this); $(this).css('background-image', 'url(http://assets.tumblr.com/images/iframe_like_active_alpha.png)')"></a><a href="{ReblogURL}?redirect_to=http%3A%2F%2F{Name}.tumblr.com%2Fpage%2F{CurrentPage}" class="reblog item" target="_blank"></a>
And replace it with:
{LikeButton size="12" color="white"}
- Look up for
.post .controls .like {
background-image: url('http://static.tumblr.com/jw8fmba/JQllum7dg/like.png');
width: 21px;
height: 20px;
margin-right: 5px;
}
And replace it with:
.post .controls .like_button {
background-image: url('http://static.tumblr.com/jw8fmba/JQllum7dg/like.png');
display: inline-block;
position: relative;
vertical-align: middle;
width: 21px;
height: 20px;
margin-right: 5px;
}
- Optional step, for those using AJAX pagination (like infinite scrolling), look up for
},function( newElements ) {
And add these two lines next:
n = n || 0;
Tumblr.LikeButton.get_status_by_page(++n);
So it looks like:
$container.infinitescroll({
navSelector: '.pagination',
nextSelector: '.pagination li a.pagination_nextlink',
itemSelector: '.load',
loading: {
img: 'http://static.tumblr.com/glziqhp/eRkls6pz6/white-90perc-opacity.png',
donetext: ''
}
},function( newElements ) {
window.n = window.n || 0;
Tumblr.LikeButton.get_status_by_page(++window.n);
var $newElems = $( newElements ).css({
opacity: 0
});
$newElems.imagesLoaded(function() {
$newElems.animate({
opacity: 1
});
$container.masonry( 'appended', $newElems, true );
});
});