How to rearrange your post header and footer – labels, author, date

When you publish a new post on your blog, information about the post is also displayed – such as the time it was published, the author, the labels attached to the post, the location, share buttons, etc. In todays tutorial I’m going to show you how to rearrange/move those elements in the post header and post footer section. Blogger seem to have an easy way to do this by going into Layout > Edit Blog Posts Gadget and moving the elements (as shown in the image below) but it almost never works.

moving-post-meta-data

how to re-arrange your post header and footer section

Here’s what to do instead. Go to Template > Edit Html > Search for the following code. If you are having trouble finding the code take a look at this tutorial about using Bloggers HTML Editor.

<div class='post-footer'>

This code will usually appear twice in your code, so find the second instance of it. Use the numbers on the left to help. Under this you will see <div class='post-footer-line post-footer-line-1'> which is the first line in the footer area, <div class='post-footer-line post-footer-line-2'> which is the second line and <div class='post-footer-line post-footer-line-3'> which is the third. Under these headings, you’ll find the code for the posts elements that you can cut and move elsewhere.

For example, lets move the labels. First copy the entire code from the opening span to closing span

<span class='GADGET TITLE'> ... </span>

moving-post-meta-data

Delete it from the area it’s it and move it to the previous/next line or to the header area.

moving-post-meta-data

Post Header & Post Footer

Here’s a list of areas you can move the information too. If you want to have the date, author, labels, etc all shown in a row, just paste them one after another under one of these areas.

Post Header Area

<div class='post-header-line-1'/>

Post Footer Line 1

<div class='post-footer-line post-footer-line-1'>

Post Footer Line 2

<div class='post-footer-line post-footer-line-2'>

Post Footer Line 3

<div class='post-footer-line post-footer-line-3'>

Related Posts

Now that you know how to edit these sections, you could try adding other functions to them.
Add custom share links to your blog posts
Add social media links to your blog posts
Move date header below the post title

28 Comments

  1. hello
    where is the first instance for?
    is it a problem to do some changes there.
    it is possible to put some text between the span-tags.

  2. My comment button seems to be stuck ive tried moving it in order like above? but its still on the left handside(i want it to be on the right). I dont know where I’m going wrong. I checked .post-comment-link and the text is aligned to the right, its driving me crazy!! Do you have any ideas of where Im going wrong? Thanks sarah x

    1. Add .post-comment-link {float: right;} to your Template > Customise > Advanced > Add CSS. This will position it to the right. The tutorial above is really just to rearrange them πŸ™‚ x

  3. Thank you so much!!! It totally worked! I tried other tips and solutions before but there always seemed to be something amiss but this really helped a lot!

  4. thank you so much for this!! i couldn’t relocate the date header on blogger without messing up something and this tutorial helped a lot!

    xo,
    may

  5. Thank you so much!! I just started a new FashionBlog and that article helped me really to solve my problem!! Great work!!

    Greets from Germany:)

    1. Hello, find the date header (this tutorial will help you) but instead of moving it below the post title as shown in that tutorial, move it from the post header to the post footer as shown above. A similar way to do this would be to go to layout > click edit on the blog post gadget, turn off the first date which is the first option under Post Page Options and instead turn on the time/date (third option). You can change it from a time to the date by clicking on the drop down and remove/change the text.

    1. Yeah, use the tutorial above to move those three sections from the footer part to the header part, you’ll see where to add them under the “Post Header Area” heading above.

  6. For now, is there a way to remove the post footer from my post summary + thumbnail view on my home page? I would like to substitute my post footer inside the post with something else, but would like to remove it totally from the post preview. Thank you!

    1. Hey Nicole, you can remove it from the template and recode something for the post page or you could hide it on index pages (homepage, etc) by adding <b:if cond='data:blog.pageType == "index"'> <style type="text/css"> .post-footer {display:none;} </style> </b:if> to your template.

Sorry, comments are closed!