JavaScript Image Slider For Blogger

သူငယ္ခ်င္းတို႕ရဲ႕ေခါင္းစဥ္ေနရာမွာ အခုလို ပံုေလးေတြ ၊ ဒါမွမဟုတ္ေၾကာ္ျငာ ၊ movie
တစ္ခုခုေပါ့ ထားခ်င္တယ္ဆိုရင္ေအာက္မွာရွင္းျပထားပါတယ္။
             ဒီေနရာမွာ၀င္ျပီးနမူနာ    ၀င္ၾကည့္ပါ။
ၾကိုက္တယ္ဆိုရင္ေအာက္ကအဆင့္ဆင့္တိုင္းလိုက္လုပ္ၾကည့္ပါ။

Go to Blogger Dashboard > Layout

Click on Add a Gadget

Select HTML/JavaScript (post ရဲ႕အေပၚ header ရဲ႕ေအာက္မွာထည့္)

Paste code inside it,

<style type="text/css"> /* JavaScript Image Slider By http://mm-knowledge.blogspot.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/AVvXsEh6Fo60oQEyaLiKBbXrPOS3UDtPbAhTy4P51kr15_cryx_jLjDH_ixINVzfyqGTOtnOBccBJ7AwD8tBzBcexPcWWsM1CxrgX9mc43Tchl1BlVVdXaURwy8kKlBToa-OQmprfXy0AVIfEHM/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/AVvXsEhXL9KOdWyCrCjxcpHfNVy03YpTNYjOXUaZpSB-WgQLT2NRvPV-7XT3yrOqR3QYgw-sEpUmbU_ZZ1LO09Gx0kqkBK6gMvgqWamljoLqQxkS5P0VGWSvmwfW7SbbgCdhCMJoMeGW34vFkAA/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/AVvXsEjkg5mQH6OwZPbL_48triuFL6yrXyHPDsBXwtumIDwiSV4GbEKSF7YZC1-xp7e-L2hPLQUN7euxc7lx125eu8FNvNjk7wFRUvmuTt8ubLcBFaz_JuU2drJO5XOexEGyKWBG34IDED6psHQ/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://code.helperblogger.com/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>

Color Codes Info

      - Width Of Slider
ဒီကာလာအေရာင္ကေတာ့ sliderFrame ရဲ႕အျမင့္ ၊ အက်ယ္ ဘယ္ေလာက္ထားမလဲ ၾကည့္ျပီးခ်ိန္ေပါ့။
Set the width of slider according to your image width also use the images of same width and same heights.

      - Width Of Slider
ဒီအေ၇ာင္ကေတာ့ ပံုရဲ႕ အျမင့္ ၊ အက်ယ္ ၾကီးျပီးခ်ိန္ေပါ့။
Set the height of slider according to images height also use images of same width and height.

      - Image URL
ဒီအေရာင္ကေတာ့ သူငယ္ခ်င္းပံုတင္တဲ့ ၀က္ဆိုဒ္ကယူလာတဲ့ လင့္ ကိုထည့္ပါ။
Replace all highlighted image URL's with your own images URL.

      - Image Caption
ဒီအေရာင္ကေတာ့ အဲ့ဒီ့ေနရာမွာကိုထားခ်င္တဲ့ ေခါင္းစဥ္ေပါ့။
Here you can add your image caption.

      - Link To Image
ဒီအေရာင္ေနရာမွာက သူငယ္ခ်င္းတို႔ပံုကိုႏွိပ္လိုက္ရင္ ေရာက္ေစခ်င္တဲ့ပိုစ့္ေနရာေပါ့သူ႔ရဲ႕
လင့္ေနရာကိုထည့္ေပးပါ။
If you want to add any link to image then replace # with your own image URL.

အိုေက..အားလံုးျပီးရင္ Save လုပ္လိုက္ပါ။
Finally save all your changes and you are done :) မရွင္္းရင္ ေမးလ္ပို႕ျပီးေမးနိုင္ပါတယ္။
                                     ရန္ကုန္သား(နည္းပညာျမိဳ႕ေတာ္)

{ http://kolatbagothar.blogspot.com/ }