How to add a reblog and like button to every post on Artur Kim’s Lightweight Theme on Tumblr

This is an update from my previous post in response to Annie’s comment.

The previous post showed you how to add a reblog button to every post.

This version adds both a reblog and a like button.

The positioning of these buttons is also moved.

The code you need is:

<div class="reblog_like" style="position: absolute; top: 76px; left: 14px;">
    <div style="width: 20px; height: 20px; margin-bottom: 8px;">{ReblogButton}</div>
    <div style="width: 20px; height: 20px;">{LikeButton}</div>
</div>

Place this within the .post-type and .post-content blocks.

If you’re having trouble finding the right place, just Ctrl+F for class="post-content".

So you’re final code will look like this:

...
</div><!-- .type -->
<div class="reblog_like" style="position: absolute; top: 76px; left: 14px;">
    <div style="width: 20px; height: 20px; margin-bottom: 8px;">{ReblogButton}</div>
    <div style="width: 20px; height: 20px;">{LikeButton}</div>
</div>
<div class="post-content">
...

Note: If you followed my previous post, you’ll want to remove that code.

Posted Friday, November 15th, 2013 under Scrapbook.

8 comments

  1. Oh my goodness, you are actually the best. Thank you so much, James!!

  2. Thanks for this! Unfortunately is is putting the buttons in the upper left of the post, right below the text/photo/etc icon. How do I get it to the bottom?

    • If you mean at the bottom of the post, but still on the left-hand-side, then maybe try changing position: absolute; top: 76px; left: 14px; to position: absolute; bottom: 60px; left: 14px;.

      If you want them next to the timestamp and notes, then try adding this markup underneath .note-count in .post-meta:

      <div class="reblog_like" style="float: left;">
      <div style="width: 20px; height: 20px; float: left;">{ReblogButton}</div>
      <div style="width: 20px; height: 20px; float: left; margin-left: 10px;">{LikeButton}</div>
      </div>

      The surrounding code will look like so:

      <div class="post-meta">
      <div class="date">...</div>
      <!-- .date -->
      <div class="note-count">...</div>
      <!-- .note-count -->
      <div class="reblog_like" style="float: left;">
      <div style="width: 20px; height: 20px; float: left;">{ReblogButton}</div>
      <div style="width: 20px; height: 20px; float: left; margin-left: 10px;">{LikeButton}</div>
      </div>
      </div>
      <!-- .post-meta -->

      Hope that helps!

      EDIT: Apologies for the lack of indentation in the comment replies!

  3. Perfect, thanks so much for the help James!

  4. I am using this code:

    {ReblogButton}
    {LikeButton}

    for my likes and reblogs but the buttons are appearing on the top of the next post, how do I fix that?

  5. It won’t let me paste the code completely so ‘m hoping you can help me with only the last bit of my previous comment

    • Hi Hannah,

      You have to make sure you copy and paste all 4 lines of code into the correct place.
      If you have literally just added {ReblogButton} and {LikeButton} they will not be positioned correctly!

Leave a Reply

*