ဘေလာ.မွာ Cool JavaScript Image Slider ေလးထည္.ခ်င္ရင္

ဘေလာ.မွာ Image Slider ေလးထည္.ခ်င္တဲ.ေဘာ္ဒါေတြအတြက္ေတြ.မိသမွ်ထဲကသေဘာက် တာေလးတစ္ခုျပန္လည္မွ်ေ၀လိုက္ပါတယ္။ေႀကျငာထည္.ခ်င္တဲ.ဘေလာ.ေတြအတြက္လဲ အဆင္ေျပမွာပါ။ ေႀကာ္ျငာေတြကို Slider ေလးနဲ.ျပထားေတာ. Visitor ေတြအတြက္လဲစိတ္၀င္စားမွဳ.ပိုတာေပါ။ဆႏၵရိွရင္ေတာ. ေအာက္ကအတိုင္းပဲဆက္လုပ္လိုက္ပါ။

1. Blogger Dashboard ကိုသြားပါ
2. Lay out ကိုကလစ္ပါ
3. Add a Gadget ကိုနွိပ္ပါ
4. HTML/Java Script ကိုနွိပ္ပီးေအာက္ကကုဒ္ေတြကိုေကာ္ပီကူးထည္.ေပးပါ

<style type="text/css">
 /* JavaScript Image Slider By http://www.santosh143.com/ */
#mcis {
 display: none;
}

#sliderFrame {
 position: relative;
 width: 500px;
 margin: 0 auto;
        border:5px solid #000;
}

#ribbon {
 width: 111px;
 height: 111px;
 position: absolute;
 top: -4px;
 left: -4px;
 background: url

(http://3.bp.blogspot.com/-h24njw0GVSg/UK6uVqF8G8I/AAAAAAAAVME/

jxT_9Ldj428/s1600/santosh143.com-ribbon.png)

 no-repeat;
 z-index: 7;
}

#slider {
 width: 500px;
 height: 218px;
 background: #fff url

(http://3.bp.blogspot.com/-

L1keIWvnKK0/UK6uWQsdqTI/AAAAAAAAVMQ/M-Xqyt5LopU/s1600/

santosh143.com-loading.gif) no-repeat 50% 50%;
 position: relative;
 margin: 0 auto;
 box-shadow: 0px 1px 5px #999999;
}

#slider img {
 position: absolute;
 border: none;
 display: none;
}

#slider a.imgLink {
 z-index: 2;
 display: none;
 position: absolute;
 top: 0px;
 left: 0px;
 border: 0;
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
}

div.mc-caption-bg, div.mc-caption-bg2 {
 position: absolute;
 width: 100%;
 height: auto;
 padding: 0;
 left: 0px;
 bottom: 0px;
 z-index: 3;
 overflow: hidden;
 font-size: 0;
}

div.mc-caption-bg {
 background-color: black;
}

div.mc-caption {
 font: bold 14px/20px Arial;
 color: #EEE;
 z-index: 4;
 padding: 10px 0;
 text-align: center;
}

div.mc-caption a {
 color: #FB0;
}

div.mc-caption a:hover {
 color: #DA0;
}

div.navBulletsWrapper {
 top: 250px;
 left: 190px;
 width: 150px;
 background: none;
 padding-left: 20px;
 position: relative;
 z-index: 5;
 cursor: pointer;
}

div.navBulletsWrapper div {
 width: 11px;
 height: 11px;
 background: transparent 

url(http://4.bp.blogspot.com/-HjlC19G85kE/

UK6uXI1zSOI/AAAAAAAAVMc/xE_EJOjwdcc/s1600/santosh143.com-bullet.png)

 no-repeat 0 0;
 float: left;
 overflow: hidden;
 vertical-align: middle;
 cursor: pointer;
 margin-right: 11px;
 _position: relative;
}

div.navBulletsWrapper div.active {
 background-position: 0 -11px;
}


#slider {
 transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -o-transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);
}

 </style>

<script src="http://santosh143.googlecode.com/svn/slider.js" 

type="text/javascript"></script>

<div id="sliderFrame">
     <div id="ribbon"></div>
            <div id="slider">


<a href="#"><img src="Image Url1" alt="ImageDescription"/></a>

<a href="#"><img src="Image Url 2" alt="ImageDescription"/></a>

<a href="#"><img src="Image Url 3" alt="ImageDescription"/></a>

<a href="#"><img src="Image Url 4" alt=ImageDescription""/></a>

<a href="#"><img src="Image Url5" alt="ImageDescription"/></a>

 </div></div>

 width: 500px;
 height: 218px;

width နဲ.height ေနရေတြမွာကိုယ္.ရဲ.Template width နဲ.အဆင္ေျပေအာင္ေျပာင္းလဲနိုင္ပါတယ္

http://image url

image url ေနရာမွာကိုယ္ထည္.ခ်င္တဲ.ပံု လင္.ကိုထည္.ေပးပါ

Image description

ပံုမွာကိုယ္ေဖၚျပခ်င္တဲ.စာသားကိုေရးပါ

#

ပံုကိုနွိပ္လိုက္ရင္ကိုယ္သြားေစခ်င္တဲ.လင္.ခ္ကိုထည္.ေပးပါ