Add Image Gallery To Your Blog
Blogger TricksWebsite Developers

Add Image Gallery To Your Blog It is easy

By Rafi Muhammed A
0

It’s Easy To Add Image Gallery To Your Blog

Its Easy To Add Image Gallery To Your Blogg

Yes, now It’s Easy To Add Image Gallery To Your Blog.

The Below article will teach you to Add Image Gallery To Your Blog.

This article will teach you Add Image Gallery To Your Blog
Images Galleries are important for blogs where you need to show any image presentation, Description of any service, Products or any Professional Gathering by using Images. To display many similar images in front of viewers and also attract them to see your job or other is a good part of side to give better user experience.
Today I decide to introduce simple and stylish Image gallery easy to use and customize. Unless this new look slider which is also excellent, This picture gallery is made by Dynamicdrive, and I have taken from their and customize it for using it for blogger. If you want to add a photo gallery to blogger, then follow below steps.
Its Easy To Add Image Gallery To Your Blogg1

You Can Add Image Gallery, Just Follow The Steps

  1. Open Blogger Dashboard
  2. Select Layout
  3. Click on Add a Gadget Button
  4. Then Copy the code given below and Paste in Gadget box

<style type=”text/css”>

#simplegallery2 { //CSS for sample Gallery position: relative; visibility: hidden; border: 5px solid black; margin: auto; } #simplegallery2 .gallerydesctext { //CSS for description DIV of Example 1 (if defined) text-align: left; padding: 2px 5px; font-family: calibri; } </style>

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>

<script type=”text/javascript” src=”https://googledrive.com/host/0B_1mqJd2tC8qSXNrNUl2YnhUZnc”> </script>

<script type=”text/javascript”> var mygallery2=new simpleGallery({ wrapperid: “simplegallery2”, //ID of main gallery container, dimensions: [400, 265], //width/height of gallery in pixels. Should reflect dimensions of the images exactly imagearray: [      [“https://lh5.googleusercontent.com/-HVmLLcohkFo/UfAY7QhDurI/AAAAAAAADIA/xPDZIrW-3uA/s400/slider2.jpg”, “http://www.tecfever.net/ rel=’nofollow’ “, “_new”, “Image Gallery By tecfever”],      [“https://lh5.googleusercontent.com/-ETcsEuRWOkE/UfAY9YJvIXI/AAAAAAAADIM/J8QxWeER1y8/s400/slider3.jpg”, “#“, “_new”, “IMAGE DESCRIPTION“],      [“https://lh6.googleusercontent.com/-beIaIqNWZ7c/UfAY5_8e8kI/AAAAAAAADH4/_GWeghRD1Dc/s400/slider1.jpg”, “#“, “_new”, “IMAGE DESCRIPTION“],      [“https://lh5.googleusercontent.com/-Mb0x-woWmQc/UfAY3cY7nNI/AAAAAAAADHw/6qOAn-DI_VA/s400/slider.jpg”, “#“, “_new”, “IMAGE DESCRIPTION“],  ],  autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]  persist: true,  fadeduration: 1000, //transition duration (milliseconds)  oninit:function(){ //event that fires when gallery has initialized/ ready to run  },  onslide:function(curslide, i){ //event that fires after each slide is shown //curslide: returns DOM reference to current slide’s DIV (ie: try alert(curslide.innerHTML) //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)  } }) </script> <div id=”simplegallery2″></div>

If you want to customize the gallery after pasting the code, then just follow the steps given below. You can also alter in similar as you need.

  •  You can make some interesting Changes by following the specific color codes as mentioned above.
  • Adjust Height and width 400, 265 as You want where 400 is width and 265 is height.
  • If you want to replace the Link of Images with yours, then replace the link of your images with the code mentioned in PINK color.
  • Replace # with the destination of images where you want to drive visitors when the click on Image. If you don’t need to add any link, just leave it as it with #.
  • Replace Image Caption or Description In gallery for a Particular image at Image Description.
  • Then You have to Resize all Images in the same dimension for the gallery.

 

I hope you like this Simple Image Gallery. If you want to know more regarding changes or Face any problem, Feel free to leave your precious comment.

I hope the above method was helpful. If you like this and working fine. share it with your friends. If you have any doubts please comment below. We will help you.