Simple CSS3 Images Gallery for Blogger

Sometime into Blogger posts, we require to show some images in row. After a mass Image upload, all images shows together without any order and visual effects. That’s why an image gallery widget we should use in those posts. These widgets present images cleanly alongside with effects and increase beauty of posts too. Here such kind of image gallery I presenting to you created with HTML and CSS enhanced with CSS3 animation "transform" property (adds a smooth hover effect to images whereby the image enlarges) and shadow appears. Light weighted, high-end designed and presents images in a stylish way. Let’s see how it looks like, how to add and configure on your Blogger blog.

CSS3 Images Gallery for Blogger

 

Preview-

How to install & apply:
This gallery set up has few steps, read on-

Step 1: CSS Embedding

• Log into your Blogger, select your blog

• Go to ‘Template’ tab and select’ Edit HTML’

• Search for ]]>< into code snippet (using CTRL+F or CMD+F)

• Before ]]>< paste below codes

/*crawlist.net gallery CSS starts*/
.ks-galleri {height:auto; width:100%; margin:auto; padding:20px 20px;}
.ks-galleri img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
height:150px; width:200px;
}
.ks-galleri img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}
/*crawlist.net gallery CSS ends*/

Configuration:
In .ks-galleri img CSS class you will find default gallery images Height and Width, Change the value with your suitable Height and Width, Small resolution will be better; And ‘Save template’

Step 2: Gallery set up

• Go open a “New post” or an existing post,

• Upload some images what you intend to put into gallery

• After upload is done, Switch ‘HTML’ view from post editor (Compose/HTML)

• You will see all uploaded images source codes,

• Locate the very first uploaded image’s code and paste this line,
  

<div class="ks-galleri">

• And locate the very last uploaded image’s code and paste this word,
  

</div>

Configuration:
You may delete Blogger system’s default image HTML rules, Shown in image below, if you don’t remove these code, default configuration of gallery won’t work nicely.

Get back to ‘Compose’ part, and publish the post

So how your images gallery working on your blog and any problem facing with gallery don’t forget to mention, new tutorials and widget will be release soon stay subscribed, Goodluck