Blogger အတြက္ javascript image Slider ေလးပါ။

Javascript ကိုသံုးထားသည့္အတြက္ အျခား slider ေတြထက္ ပိုျမန္သည္ကိုေတြ႕ရပါတယ္။

• Pure Javascript ( no jQuery, no flash )
• Lightweight (13kb)
• HTML captions
• 17 transition effects, customizable
• Easy to tweak through Javascript option variable and CSS
• Supports linking images
• Supported by all major browsers browsers (IE 7.0+, Firefox 1.5+, Chrome 1.0+, Safari 3+, Opera 9.0+, Netscape 7.0+)
• Price : Free

Blog ထဲ ထည့္သြင္းပံု

(၁) Dashboard သို႔သြားပါ
(၂) Layout > Add Gadget > HTML/javascript ကိုေရြးေပးပါ။
(၃) ေအာက္က code ကို ကူးထည့္ေပးပါ။

<style type="text/css"> #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://4.bp.blogspot.com/-W2Ip1eDMGQM/UHcNdKxX0zI/AAAAAAAAALA/2_-dC1Gkg0g/s1600/ex_img_logo.png) no-repeat;  z-index: 7; } #slider {  width: 500px; height: 218px; background: #fff url(http://1.bp.blogspot.com/-UW9rEIEEKPE/UEH9zreiMII/AAAAAAAAAcM/FaJmiiLcMQY/s1600/lordhtml.blogspot.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://1.bp.blogspot.com/-d58TrVkC_dY/UEH9y_9uJFI/AAAAAAAAAcE/2Jwp_AuL9dU/s1600/lordhtml.blogspot.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="https://www.opendrive.com/files/MV8zMTIyMDE4X2FmeHVy/lordhtml-javascriptslider.js" type="text/javascript"></script> <div id="sliderFrame">      <div id="ribbon"></div>            <div id="slider"> <a href="www.yourlinkhere.com"><img src="http://2.bp.blogspot.com/-4z9iAO51Am0/UIFzK6s0igI/AAAAAAAAAQI/Is-CVyEKW3Y/s1600/blog_imageslider_ex_01.png" alt=""/></a> <a href=" www.yourlinkhere.com "><img src="http://2.bp.blogspot.com/-Pjs7yLJoLr4/UIFzRN7wdAI/AAAAAAAAAQQ/UeHIfMWuVbw/s1600/blog_imageslider_ex_02.png" alt=""/></a> <a href=" www.yourlinkhere.com "><img src="http://4.bp.blogspot.com/-TxJCmomNcmc/UIFzXGmNlEI/AAAAAAAAAQY/Cy9ArDwlV90/s1600/blog_imageslider_ex_03.png" alt=""/></a> <a href=" www.yourlinkhere.com "><img src="http://3.bp.blogspot.com/-CwOLibu1aj8/UIFzc_0O5wI/AAAAAAAAAQg/m0auGjVHLCk/s1600/blog_imageslider_ex_04.png" alt=""/></a> <a href=" www.yourlinkhere.com "><img src="http://4.bp.blogspot.com/-SEADs1mDtzg/UIFzhpuZLGI/AAAAAAAAAQo/HRXQjfCgtCA/s1600/blog_imageslider_ex_05.png" alt=""/></a>                 </div></div>

• ပံု အလ်ား _ လိေမၼာေရာင္ ျဖင့္ ျပထားပါတယ္။
• ပံု အနံ _ အစိမ္းေရာင္ ျဖင့္ ျပထားပါတယ္။
• ဘယ္ဘက္အေပၚေထာင့္ကပံု မပါေစခ်င္လွ်င္ <div id="ribbon"></div> ကိုဖ်က္လိုက္ပါ။
• ပံုေတြကို ဒီအေရာင္ ေနရာတြင္အစားထုိးပါ။
• ပံုေတြေပၚ ႏွိပ္လိုက္လွ်င္ သြားမဲ့လမ္းေၾကာင္းကိုျပင္ရန္ www.yourlinkhere.com ကိုေျပာင္းေပးပါ။

*** ပံုအရြယ္အစားမတူလွ်င္ ျပင္စရာေလး ရွိေသးသည္။ ***

အလ်ား ႏွင့္ အနံ ကိုျပင္လွ်င္ ပံုေအာက္က ပံုကိုေရြးလို႔ရေသာ အျပာအဝိုင္းေလး ေနရာေျပာင္းသြားႏိုင္သည္။ div.navBulletsWrapper { } ထဲက (top : 250px; left : 190px;) ကို ကိုယ္ပံုႏွင့္ ကိုက္ညီေအာင္ ေျပာင္းေပးရမည္။
top = ပံုရဲ႕ အနံ(Height) + 32
left = { [ ပံုရဲ႕ အလ်ား( width) / 2 ] + 5 } - 65