Tuesday, April 28, 2015

Simple CSS3 Images Gallery for Blogger

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,
    CSS3 Images Gallery for Blogger

    <div class="ks-galleri">
    • And locate the very last uploaded image’s code and paste this word,
      CSS3 Images Gallery for Blogger

    </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.
    CSS3 Images Gallery for Blogger

    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

    0 comments:

    Post a Comment

    Popular Posts

    Recent Posts

    YouAreHere

    Unordered List

    Text Widget

    Powered by Blogger.