RESPONSIVE MOSAIC HTML CSS IMAGE GALLERY FOR BLOGSPOT - itu Sudah

RESPONSIVE MOSAIC HTML CSS IMAGE GALLERY FOR BLOGSPOT

let's make it fast ok..

Step 1

1. Open your HTML template : theme > edit HTML
2. find on your template this word : ]]></b:skin>
3. Copy and paste this CSS code right above it

/*-------RESPONSIVE GALLERY CSS FOR BLOGSPOT---------------- */
.header-gallery {
    text-align: center;
    padding: 32px
}

.row-gallery {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    padding: 0 4px
}

.column-gallery {
    -ms-flex: 25%;
    flex: 25%;
    max-width: 25%;
    padding: 0 4px
}

.column-gallery img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%
}

@media screen and (max-width:800px) {
    .column-gallery {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
        flex-wrap: wrap
    }
}

@media screen and (max-width:600px) {
    .column-gallery {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
        flex-wrap: wrap
    }
}

@media screen and (max-width:800px) {
    .row-gallery {
        flex-wrap: wrap
    }
}

@media screen and (max-width:600px) {
    .row-gallery {
        flex-wrap: wrap
    }
}

Step 2

1. Create new page and add image on the page in html tab not compose tab, i sugest choose medium for image thumbnail and text align set to none
2. Copy all code and paste it into your favourite text editor, i'm using notepad++
3. Clear all html tag code and leave it only image address url.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfrweaaJa-EA3-maYKPHJ0J6iMTF03NT3YB58DAyfBa1KF8688yTDRcs28xODkjmvdwawHsqO3DM5lF1fqqyOpF1kvc2p5mLSLlzYTNmpDnmVwBU3Lyjtx2dd_-B8EGnpns3Buieuf8_Us/s1600/nagoya+1+pagi_resize.jpg

Step3

1. Back to HTML tab on blogspot, remove all html code
2. Replace with this

<!-- header-gallery -->
<div class="header-gallery">
<h1>
Responsive Image Grid</h1>
<p>
Resize the brow-galleryser window to see the responsive effect.</p>
</div>
<!-- Photo Grid -->
<div class="row-gallery">
<div class="column-gallery">
<a href="REPLACE-WITH-YOUR-IMAGE-URL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="REPLACE-WITH-YOUR-IMAGE-URL" style="width: 100%;" /></a>
<a href="REPLACE-WITH-YOUR-IMAGE-URL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="REPLACE-WITH-YOUR-IMAGE-URL" style="width: 100%;" /></a>  
<a href="REPLACE-WITH-YOUR-IMAGE-URL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="REPLACE-WITH-YOUR-IMAGE-URL" style="width: 100%;" /></a>  
<a href="REPLACE-WITH-YOUR-IMAGE-URL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="REPLACE-WITH-YOUR-IMAGE-URL" style="width: 100%;" /></a>  
</div>
<div class="column-gallery">
<a href="REPLACE-WITH-YOUR-IMAGE-URL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="REPLACE-WITH-YOUR-IMAGE-URL" style="width: 100%;" /></a>
<a href="REPLACE-WITH-YOUR-IMAGE-URL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="REPLACE-WITH-YOUR-IMAGE-URL" style="width: 100%;" /></a>
<a href="REPLACE-WITH-YOUR-IMAGE-URL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="REPLACE-WITH-YOUR-IMAGE-URL" style="width: 100%;" /></a>
<a href="REPLACE-WITH-YOUR-IMAGE-URL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="REPLACE-WITH-YOUR-IMAGE-URL" style="width: 100%;" /></a>
</div>
<div class="column-gallery">
<a href="REPLACE-WITH-YOUR-IMAGE-URL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="REPLACE-WITH-YOUR-IMAGE-URL" style="width: 100%;" /></a>  
<a href="REPLACE-WITH-YOUR-IMAGE-URL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="REPLACE-WITH-YOUR-IMAGE-URL" style="width: 100%;" /></a>  
<a href="REPLACE-WITH-YOUR-IMAGE-URL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="REPLACE-WITH-YOUR-IMAGE-URL" style="width: 100%;" /></a> 
<a href="REPLACE-WITH-YOUR-IMAGE-URL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="REPLACE-WITH-YOUR-IMAGE-URL" style="width: 100%;" /></a>
</div>
<div class="column-gallery">
<a href="REPLACE-WITH-YOUR-IMAGE-URL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="REPLACE-WITH-YOUR-IMAGE-URL" style="width: 100%;" /></a>  
<a href="REPLACE-WITH-YOUR-IMAGE-URL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="REPLACE-WITH-YOUR-IMAGE-URL" style="width: 100%;" /></a>  
<a href="REPLACE-WITH-YOUR-IMAGE-URL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="REPLACE-WITH-YOUR-IMAGE-URL" style="width: 100%;" /></a>
<a href="REPLACE-WITH-YOUR-IMAGE-URL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="REPLACE-WITH-YOUR-IMAGE-URL" style="width: 100%;" /></a> 
</div>
</div>

Change REPLACE-WITH-YOUR-IMAGE-URL with your images url address

Image will order by coloumn [coloumn1][coloumn2][coloumn3][coloumn4] in my case, i'm using 1 row and 4 coloumn. Edit the HTML Code for costumize row and coloumn

thats all..

DEMO

this code based on w3schools tutorial