Top Ad unit 728 × 90

Description of Image

latest News

recent

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


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


1. Go to Blogger Dashboard > Layout > Add a Gadget
2. Select HTML/Javascript 
3. Copy the code below and paste on it. 

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

1. Blogger Dashboard ကေန > Layout ကိုကလစ္နိုပ္ပါ > Add a Gadget ကိုကလစ္နုိပ္လုိက္ပါ 2. HTML/Javascript ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာ 3. ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ  ျပီးတာနဲ႕ save လုပ္လိုက္ပါ...။
ဒါဆိုအဆင္ေျပပါၿပီ
 
<style type="text/css">
/* http://dimpost.com */

#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}
        
#slider {
    width:700px;height:306px;/* Make it the same size as your images */
 background:#fff url(http://4.bp.blogspot.com/-aVGCcclfKQo/UR-T3vxFAMI/AAAAAAAABm8/ncwIfUdoLIw/s1600/loading.gif) no-repeat 50% 50%;
 position:relative;
 margin:0 auto;/*make the image slider center-aligned */
    box-shadow: 0px 1px 5px #999999;
}
#slider img {
 position:absolute;
 border:none;
 display:none;
}

/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
 z-index:2;
 display:none;position:absolute;
 top:0px;left:0px;border:0;padding:0;margin:0;
 width:100%;height:100%;
}

/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
 position:absolute;
 width:100%;
 height:auto;
 padding:0;
 left:0px; 
 bottom:15px;
 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;
}


/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {
 top:320px; left:280px; /* Its position is relative to the #slider */
 width:150px;
 background:none;
 padding-left:20px;
 position:relative;
 z-index:5;
 cursor:pointer;
}

/* each bullet */
div.navBulletsWrapper div 
{
    width:11px; height:11px;
    background:transparent url(http://3.bp.blogspot.com/-ZUaX5-lcCi4/UR-TzMXcpuI/AAAAAAAABm0/kokxtfFdNcU/s1600/bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}
.intro {
    bottom: 0;
    color: rgba(0, 0, 0, 0.2);
    font-size: 16px;
    position: absolute;
    right: 0;
    text-decoration: none;
    z-index: 99999;
}
/* --------- Others ------- */
#slider 
{
 transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}
</style>
<script src="http://project.dimpost.com/image-slider/js-image-slider-1.js" type="text/javascript"></script>
<script src="http://project.dimpost.com/image-slider/js-image-slider-2.js" type="text/javascript"></script>

<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="http://3.bp.blogspot.com/-1LayoXAEu_Y/UR-VGlIl8eI/AAAAAAAABnI/yI0SkxYfRsc/s1600/image-slider-1.jpg" alt="#htmlcaption1" /></a>
<a href="#"><img src="http://3.bp.blogspot.com/-eOR0aaChxAw/UR-VGiVnp1I/AAAAAAAABnM/_bIC8_EisxQ/s1600/image-slider-2.jpg" alt="Go UP!" /></a>
<a href="#"><img src="http://4.bp.blogspot.com/-5NisCPe6tEc/UR-VGfF8_8I/AAAAAAAABnE/kUtLaL3SzWE/s1600/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /></a>
<a href="#"><img src="http://2.bp.blogspot.com/-gl-HJvghglA/UR-VK7FgIBI/AAAAAAAABnc/EfjVW6e1nz4/s1600/image-slider-4.jpg" alt="#htmlcaption2" /></a>
<a href="#"><img src="http://1.bp.blogspot.com/-qkKwbfW234Y/UR-VLZRV6hI/AAAAAAAABnk/pO5-b99UmGo/s1600/image-slider-5.jpg" alt="Stay Connected"/></a>
</div>
<div id="htmlcaption1" style="display: none;">
Image Slider by <a href="http://dimpost.com/" target="_blank">DIMPost.com</a>
</div>
<div id="htmlcaption2" style="display: none;">
<a href="http://www.w3schools.com/css/" target="_blank">CSS</a> <a href="http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a> Rocks.
</div>
</div>

http://1.bp.blogspot.com/-mLI/UUI/AAB4k/j6RY/s550/sample1.jpg
အေပၚက အနီေရာင္ေလးနဲ႕ ၿပေပးထားတဲ့ စာတမ္းမွာ မိမိ ၾကိဳက္ႏွစ္သက္တဲ့ ဓါက္ပံု လင့္ ကိုေၿပာင္းနိုင္ပါတယ္..။
မွတ္ခ်က္ ကုဒ္ေတြထဲက # ေနရာမိမိညြန္လိုတဲ့လင့္ကိုထည့္ပါ။

  www.ayekyaw.org
အဆင္ေျပပါေစ

ဇူးနစ္(နည္းပညာ)
 www.zunite.org

FB ခ်စ္ပရိတ္သတ္ႀကီးမ်ားခင္ဗ်ား ဇူးနစ္(နည္းပညာ) ဆိုက္မွာ ဖုန္းေဆာ့၀ဲ ဂိမ္းမ်ား သတင္းစေသာ အသစ္ကေလးမ်ားကို အခ်ိန္နဲ႔တစ္ေျပးညီ တင္ေပးေနတာမို႔ FB Page ေလးကို  LIKE ေပးၿပီး အားေပးႏိုင္ပါတယ္။(အားလံုးကို ေက်းဇူးတင္ပါတယ္)

ဘေလာ့မွာ ဒီဇိုင္းလွလွေလး Image Slider ၿပဳလုပ္နည္း ( ၂ ) Reviewed by ေအးေက်ာ္ နည္းပညာ on 6:47 PM Rating: 5

No comments:

All Rights Reserved by ဇူးနစ္(နည္းပညာ) © 2015 - 2016
Powered By www.zunite.org, Designed by ဇူးနစ္

Contact Form

Name

Email *

Message *

Powered by Blogger.