ဘေလာ့မွာ ဒီဇိုင္းလွလွေလး Image Slider ၿပဳလုပ္နည္း ( ၃ )

ဒီေန႕ေတာ့ ဘေလာ့ post ေတြ မ်ားမ်ား တင္ေပးမလို႕ အစီစဥ္ရွိပါတယ္..။ ဘေလာ့ နည္းပညာ အခုမွ စေလ့လာလိုက္စားေနၾကတဲ့ ကြ်န္ေတာ္တို႕ရဲ႕ ဘာေလာ့ ညီကိုေမာင္ႏွမ မ်ားအတြက္ၿဖစ္ပါတယ္..။ ဒီ စလုိက္တာ ပံုစံေလးက အရမ္းလွပၿပီး ရိုးရွင္းပါတယ္ အသစ္ထြက္ထားတာ မၾကာေသးပါ..။ မိမိ ဘေလာ့ ေတြမွာ မိမိ ညႊန္ျပလိုတဲ့ Image Slider ဒီဇိုင္းလွလွ ေလးေတြနဲ႕ ညြန္ၿပလို႕ရမွာၿဖစ္ပါတယ္။ အသံုးၿပဳနည္းကေတာ့ လြယ္ကူေစပါတယ္ ေလ့လာၾကည့္နိုင္ပါတယ္..။

နမူနာကိုၾကည့္ပါ

1. Go to Blogger Dashboard > Layout
2. Click on Add a Gadget
3. Select HTML/JavaScript (below header)
4. Paste code inside it,

>>> ၿပဳလုပ္နည္း

1. Blogger Dashboard ကေန > Layout ကိုကလစ္နိုပ္ပါ > Add a Gadget ကိုကလစ္နုိပ္လုိက္ပါ 2. HTML/Javascript ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာ 3. ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ  ျပီးတာနဲ႕ save လုပ္ေပးလိုက္ပါ...။

ဒါဆိုအဆင္ေျပပါၿပီ

 

<style type="text/css">

 /* JavaScript Image Slider By http://www.helperblogger.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEFZjiRUt4iGGJ4W1bwUkafvz6q87osP2k_Ny-TnbwFFJPDFncZTq4R7z7Zt70XXs69XDCpH2YL4JL3A7-JXdgqvmyNZeNBI4ToOTaSQqgYUhRBydn6bGJeCKZLmF2f9FWBThOq6ZxyX0/s1600/helperblogger.com-ribbon.png) no-repeat;
 z-index: 7;
}

#slider {
 width: 500px;
 height: 218px;
 background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUTMW6O0viuZp270AqWYv59bubKzk9StJOnGdkoOcr_hlkAe5kPUgREPt7XQk-8GU6R3dSrTFoST58CM3NXWPrl2BP0Ct77yB6DJuVyLab_AnZRdJUUm7v9YpkbHEuFo1AoGpB5br6uwY/s1600/helperblogger.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEF17aZpuJ5kq-YMVBbfz5HuaO5M_VVKXcHiZTvC2cv1JWPGKGOqFi7AsFJtskmJZMqIjc7ioUVrh6UusI-U6ZeJQuiXxS2f1UmHyiD3VlUrdzLuna2KMN1-zmF4IAmJIBipj0XMxdTok/s1600/helperblogger.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://helperblogger.ucoz.com/demo/js-slider/js-image-slider.js" type="text/javascript"></script>

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

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-1.jpg" alt="Image Slider By helperblogger.com"/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-2.jpg" alt=""/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-3.jpg" alt="The slide is a linking image"/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-4.jpg" alt="Pure Javascript. No jQuery. No flash."/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-5.jpg" alt="#htmlcaption"/></a>
                </div></div> 

http://1.bp.blogspot.com/-mLI/UUI/AAB4k/j6RY/s550/sample1.jpg

အေပၚက အနီေရာင္ေလးနဲ႕ ၿပေပးထားတဲ့ စာတမ္းမွာ မိမိ ၾကိဳက္ႏွစ္သက္တဲ့ ဓါက္ပံု လင့္ ကိုေၿပာင္းနိုင္ပါတယ္..။

မွတ္ခ်က္ ။ ကုဒ္ေတြထဲက # ေနရာမိမိညြန္လိုတဲ့လင့္ကိုထည့္ပါ။

  www.ayekyaw.org

Posted in: Blog Slider