This is Post 1 Title

 This is Post 1 body

Upload pics from mac computer option is no longer available?? 

Solution: Close out chrome. Reopen Blogger. Upload button should work now. BUT....do NOT click on anything but the mac menu on the left / Media section / Photos / click desired photo to upload. 

Responsive SxS Image Gallery CSS and HTML code....

https://xomisse.com/blog/image-gallery-blogger/

DO NOT GO BACK AND FORTH...STAY ON HTML EDIT MODE. IF SWITCH BACK TO WYSIWYG MODE, GOOGLE WILL AUTOMATICALLY INSERT A BUNCH OF EXTRA CODE. (Can delete it and will be fine though)

How to add a simple and responsive image gallery to Blogger

On Blogger, go to Theme > Edit HTML and find the CSS section of your theme (between <b:skin> and ]]> </b:skin>). You’re going to add the CSS above the closing ]]> </b:skin> tag.

Paste the following right above ]]> </b:skin>

/* START SIMPLE RESPONSIVE GALLERY XOMISSE */
.gallery {
    padding: 0 5px;
    float: left;
    width: 24.99999%;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.gallery img:hover {
	opacity: 0.8;
}

div.desc {
    padding: 10px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

@media only screen and (max-width: 700px){
    .gallery {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .gallery {
        width: 100%;
    }
}

.image-gallery:after {
    content: "";
    display: table;
    clear: both;
}
/* END SIMPLE RESPONSIVE GALLERY XOMISSE */

This styles the images and captions in a grid format, as well as making it responsive (go from 4 columns to 2 columns to 1 column depending on screen size). Customise this CSS as you wish.

Want a 3 column grid instead? Change the width value on .gallery to 33.333% instead.

The HTML
There are four style options depending on if you want a standard image gallery with/without captions or a clickable gallery, with/without captions, that links to other posts, pages or external sites.

To add the gallery to a post, page or gadget, copy and paste the following HTML. It’s important that you make sure you’re pasting it in HTML mode (not compose/rich text mode) and don’t switch between modes once you paste it, otherwise Blogger will add code between the lines and break the structure.

<div class="image-gallery">

  <!-- Grid Image Gallery -->
  <div class="gallery">
      <img src="IMAGE-URL" alt="SEO-IMAGE-CAPTION">
  </div>

  <!-- Grid Image Gallery with Caption -->
  <div class="gallery">
      <img src="IMAGE-URL" alt="SEO-IMAGE-CAPTION">
      <div class="desc">DISPLAYED-CAPTION</div>
  </div>

  <!-- Clickable Grid Image Gallery -->
  <div class="gallery">
    <a href="LINK" target="_blank">
      <img src="IMAGE-URL" alt="SEO-IMAGE-CAPTION">
    </a>
  </div>

  <!-- Clickable Grid Image Gallery with Caption -->
  <div class="gallery">
    <a href="LINK" target="_blank">
      <img src="IMAGE-URL" alt="SEO-IMAGE-CAPTION">
    </a>
    <div class="desc">DISPLAYED-CAPTION</div>
  </div>

</div> 

Now upload your images and replace IMAGE-URL with the direct image URL.

Replace LINK with the post, page or external site you want that image to link to. Replace SEO-IMAGE-CAPTION and DISPLAYED-CAPTION with an SEO friendly descriptive caption.

To add more images, simply copy and paste the block of Grid Image code within the image-gallery div wrapper.

You can now save and publish your post or page. Your image gallery should be displayed in a nice grid and be responsive when you change the browser screen size.

It was fine on posting, but if I go back to edit the page, Blogger has kindly added in a load of breaks in between the code.

If you just delete off those extra breaks, it goes back to normal and seems to stay that way…. so its Blogger (surprise surprise) not the code/tutorial.

Having the width set at 33% seems to be working the best. With any other arrangement, there is a line break that occurs after the first row.

float “center” is an invalid property for float. The images must be floated left to appear in a grid. You need to centre the parent div so use .image-gallery and the instructions in this post to center.

to open the url of the images in the same browser window, instead of a new popup window.  =remove target="_blank" from the a tag

Can also add a hover image too