Saturday, October 20

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJdkC4fQHVKARUlQgX6rYOkq7QiB05yZv86SdOo_3dW5cufYS9PO_vWxE5UmJ0JLZb_ZEfhPhsQlsYBWKc0ts1S1iC8BsUH_XH6OQiZ0Ja93MnI1pkinT3qtMt6DYfj9Q963nC1kJks6w/s1600/ex_img_logo.png) no-repeat;
 z-index: 7;
}
#slider {
 width: 500px; height: 218px; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZHW66XgHcTVD3YNg-maXXI1NlqAf5FXD4QXQP8wnOVm6Mu6yT9oTXNKg7kUF4bBIdbTvkTBFUzWotepPmEKv2uFC-w4H9orKiMPG_bhkeaG9sOFN7jMgYcfj7U_ugpNCGfUqc4J3QVp8/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia9tA9Cl63-Ja0l1rm86H5TKD-uaWOIIHO6Rmti3jkDJqZsyPcJBE_5tVwCzFOOEuICi2i072beH6v2LMEOYmcqPUCBamQVfaAhyMte7k1nzUYQlTDD4le-En5bZ4ELhdnLYChlAzbXDw/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif3L1EcBPEzW-qjmxJMXdY90c1LpDVCaFZz4k8iypV08JiTNatCepRmgcMnXDSCdFR28lMAapiinpZolkKOB1MRGPFHI-Ub1TwFlMDNWkmd9x1cgRYhAFGF9EO8OotQ8fgeT8g4-0knJk/s1600/blog_imageslider_ex_01.png" alt=""/></a>
<a href=" www.yourlinkhere.com "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDUebLNZ4_o2H7bsSATay7YUqv8dZTxlLJzW09-XSqgMw6oQQWyoeppRI-hDG9qBry8ekfzgAPb66Z1VwLm1z_Rs7xzuVUI4eFjmGMAtk-qQr9MzUZzL-VSl2XIfFRbIAbUqp8QPF04aM/s1600/blog_imageslider_ex_02.png" alt=""/></a>
<a href=" www.yourlinkhere.com "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW-EYtBYMHbjvO-AjB4HnykOZCrnPZzSMay-va1eUykBoTBFBvYHEocNmFYeBNDskTciD9GxJD3mv8xNRA3LslCmn8plOL27wtXIy8NxLQTjA05vvAQvPIpcH9UVflXpfh9fd9cor3jDo/s1600/blog_imageslider_ex_03.png" alt=""/></a>
<a href=" www.yourlinkhere.com "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid5W8l-HnuO6E3FdsQx6HOgPl9jy4AD1gZWQaM6UL-uxSFQZbGBFSvHlhNtaLlFKegNLOnt-xIPtXs78rTIbel0YpkdozgeHTZ5inWM5WVCnm2R83D01uvx8N6xTwnrlcHUTtVxb5msbA/s1600/blog_imageslider_ex_04.png" alt=""/></a>
<a href=" www.yourlinkhere.com "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWnROhVw9qlzDEmfJH3GaI83qLDN0Fk3jD2ZxJ-hYwl9zMClNE74FS2kEalD3TbGiw9BAuH61aQ2S_2vOA7VhY08F62MXp2HAPm1EX2fpjZjZlro9JWLHOFThxNUJC1diFaUVct0Na7UA/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
ေရးသားသူ » »
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)
Related Posts Plugin for WordPress, Blogger...