Tạo Slide show hình ảnh đơn giản cho Blogger

Đơn giản đúng như cái tên của nó, rằng bạn sẽ mất khoảng vài phút để tạo 1 slideshow cho blog.

XEM DEMO 

HƯỚNG DẪN

1. Go to Blogger Dashboard > Layout
2. Add a Gagdet > HTML/JavaScript
3. Paste the below code,

<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="http://code.helperblogger.com/image-gallery.js">

</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: [

   

       ["IMAGE LINK 1 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"],

       ["IMAGE LINK 2 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"],

       ["IMAGE LINK 3 HERE","#", "_new", "IMAGE DESCRIPTION HERE"],

       ["IMAGE LINK 4 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"],

       ["IMAGE LINK 5 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"]

 ],

 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>