It’s Easy To Add Image Gallery To Your Blog
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.
You Can Add Image Gallery, Just Follow The Steps
- Open Blogger Dashboard
- Select Layout
- Click on Add a Gadget Button
- 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.