shop the themes

How to display images side to side on your posts

This tutorial works on any blogger theme.

Using side to side images on your posts can give a nice design for your blog. Take a look at a post of Anna, from The Anna Edit: My Thoughts on Being a Blogger & Consumerism.

Follow the steps below to add images side to side on your posts.

Adding the CSS Code

  1. Go to Theme on the Blogger dashboard vertical menu.
  2. Click on the Customize button
  3. Click on Advanced link on the left menu
  4. Scroll the list of theme sections until the end and locate Add CSS
  5. Copy the code below and paste it on the Add custom CSS box
  6. Click on Apply to Blog button.

.ld-gallery {
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.ld-ii a,
.ld-ii .separator,
.ld-ii .tr-caption-container {
  width: 48%;
}

.ld-iii a,
.ld-iii .separator,
.ld-iii .tr-caption-container {
  width: 30%;
}

.ld-ii a,
.ld-ii a:focus,
.ld-ii a:hover, 
.ld-iii a,
.ld-iii a:focus,
.ld-iii a:hover {
  border: none;
}

/* for mobile. it will make that all images appear one below the other. */
@media screen and (max-width: 50em) {
  .ld-gallery .tr-caption-container,
  .ld-gallery .separator,
  .ld-gallery a {
    width: 100%;
  }
}



Using 2 images side to side



  1. Upload the two images on your post.
  2. Set them as Original Size for a better design.
  3. Switch to HTML tab.
  4. Copy <div class="ld-gallery ld-ii"> and paste on top of the two images code. See the screenshot.
  5. Copy </div> and paste at the end of the two images code. See the screenshot.
Your final code should look like this:


Using 3 images side to side




  1. Upload the two images on your post.
  2. Set them as Original size for a better design.
  3. Switch to HTML tab.
  4. Copy <div class="ld-gallery ld-iii"> and paste on top of the two images code. See the screenshot.
  5. Copy </div> and paste at the end of the two images code. See the screenshot.
Your final code should look like this:

And it's done (:

Contact Form