W w W. N y I n @ y M i N. o R g

03 February 2014

​ဘ​ေလာ့​မွာ Slider ​တစ္​ခု​ျပဳ​လုပ္​ျခင္း (၃)



 ​မ​ဂၤ​လာ​ပါ  ​သည္​နည္း​ပ​ညာ​ေလး​က​ေတာ့ ​မိ​မိ​တို႔​ဘ​ေလာ့​မွာ ​ကိုယ္​ၫြွန္​ျခင္ ​အ​ေရး​ႀကီး ​ပို႔စ္​ေန​ရာ​ေလး​ေတြ​ကို ​စ​လိုက္​တာ ​ပံု​စံ​ေလး​နဲ႔ ​လွ​လွ​ပ​ပ  ​ၫြွန္​ျပ​လို​တဲ့​နည္း​လမ္း​ေလး​ျဖစ္​ပါ​တယ္... ​သည္​လို ​နည္း​လမ္း​ေလး​ေတြ​ကို ​ပံု​စံ​အ​မ်ိဳး​မ်ိဳး​နဲ႔ ​တင္​ျပ​ေပး​သြား​မွာ ​ျဖစ္​ပါ​တယ္... ​နံ​ပါတ္ (၁) - ​နံ​ပါတ္ (၂) ​ကိုူ​လည္း ​တင္​ျပ​ထား​ခဲ့​ၿပီး​ျဖစ္​ပါ​တယ္...​ေနာ္... ​ေအာက္​မွာ ​နည္း​လမ္း​နဲ႔​လို​အပ္​တဲ့​ကုဒ္​ေတြ ​ေပး​ထား​ပါ​တယ္... ​ေလ့​လာ​ၿပီး ​က​လိ​လိုက္​ေနာ္....​လန္း​တယ္...​ဂ်

   ►1.  Login ​လုပ္​လိုက္​ပါ ​ဘ​ေလာ့​ကာ​ကို
   ►2.  Layout ​ကို​က​လစ္​ရ​ပါ့​မယ္ ​မိ​မိ​တို႔  Dashboard ​က​ေန​ေပါ့
   ►3.  Add a Gadget ​ကို​က​လစ္​ေပး​လိုက္​ပါ
   ►4.  HTML/Javascript. ​ကို​က​လစ္​ၿပီး ​က်​လာ​တဲ့ ​ေဘာက္​ေလး​ထဲ​မွာ​ဘဲ
   ►5.  ​ေအာက္​က​ေပး​ထား​တဲ့ ​ကုဒ္​ေတြ​ကို ​ေကာ္​ပီ​ယူ ​ထည့္​လိုက္​ပါ

​အဲ​ေန​ရာ​မွာ ​ေအာက္​က​ကုဒ္​ေတြ ​ကို ​ထည့္​ေပး​လိုက္​ပါ​ေနာ္....

<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="http://24work.webs.com/24work-blogspot/featured-post/17-content-code/n17-content-slider-04.js" type="text/javascript"></script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">
#myslides{
background:#2c3133;
}
.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 95%; /*Width of Carousel Viewer itself*/
height: 165px; /*Height should enough to fit largest content&#39;s height*/
margin: 0px 14px 5px 14px;
background:#2c3133;
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px 17px ; /*margin around each panel*/
width:220px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#202325;
height:140px;
border:1px solid #393f42;
}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/
}
.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}
.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#040404; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px 10px 10px 10px; /*margin around each panel*/
padding:0px 0px;
}
</style>



<div id="myslides">

<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ['http://3.bp.blogspot.com/_4HKUHirY_2U/Swp_uMVeIBI/AAAAAAAAATs/53m4n9dGzso/rem1.jpg', -14, 60], rightnav: ['http://3.bp.blogspot.com/_4HKUHirY_2U/Swp_x-EbbHI/AAAAAAAAAT0/W5WfkjVPzdE/rem2.jpg', 0, 60]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>


<div id="mygallery" class="stepcarousel">
<div class="belt">

<div class="panel">
<a href="​မိ​မိ​ပို႔စ္​လင့္​ထည့္​ပါ" target="_blank" title="This is featured post 1 title">
<img alt=" " width="200" src="​ပံု​လင့္​ထည့္​ရန္" height="120"/>
</a>
</div>

<div class="panel">
<a href="​မိ​မိ​ပို႔စ္​လင့္​ထည့္​ပါ" target="_blank" title="This is featured post 2 title">
<img alt="" width="200" src="​ပံု​လင့္​ထည့္​ရန္" height="120"/>
</a>
</div>

<div class="panel">
<a href="​မိ​မိ​ပို႔စ္​လင့္​ထည့္​ပါ" target="_blank" title="This is featured post 3 title">
<img alt="" width="200" src="​ပံု​လင့္​ထည့္​ရန္" height="120"/>
</a>
</div>

<div class="panel">
<a href="​မိ​မိ​ပို႔စ္​လင့္​ထည့္​ပါ" target="_blank" title="This is featured post 4 title">
<img alt="" width="200" src="​ပံု​လင့္​ထည့္​ရန္" height="120"/>
</a>
</div>

<div class="panel">
<a href="​မိ​မိ​ပို႔စ္​လင့္​ထည့္​ပါ" title="This is featured post 5 title">
<img alt="" width="200" src="​ပံု​လင့္​ထည့္​ရန္" height="120"/>
</a>
</div>


</div>
</div>
</div>
<div class="clear"></div>


 ​မွတ္​ခ်က္    ။                ။  ​မိ​မိ​တို႔ ​ကုဒ္​ေတြ ​ေကာ္​ပီ​ယူ ​ထည့္​တာ​နဲ႔ ​ျပဳ​ျပင္​စ​ရာ​ေတြ ​ရွိ​လာ​မွာ​ပါ​ေနာ္

(၁) "​ပံု​လင့္​ထည့္​ရန္" ​ဆို​တဲ့​ေန​ရာ​မွာ ​မိ​မိ​တို႔ ​ျပ​လို​တဲ့​ပံု​ရဲ့ ​လင့္​ကို​ပါ။
(၂) "​မိ​မိ​ပို႔စ္​လင့္​ထည့္​ပါ"  ​ဆို​တဲ့​ေန​ရာ​မွာ ​ၫြွန္​ျပ​တဲ့ ​ေန​ရာ​ရဲ့ ​လင့္​ကို ​ထည့္​ေပး​ပါ။
(၃)This is featured post 5 title  ​ဆို​တာ​က​ေတာ့ ​ၫြွန္​ျပ​တဲံ ​ပို႔စ္​ရဲ့ ​ေခါင္း​စဥ္​အ​မည္​ေပါ့​ေနာ္ ။


​ဒါ​ဆို​ရင္ ​ျပည့္​စံု​ပါ​ၿပီ  ​မိ​မိ​တို႔​ဘ​ေလာ့​ေပၚ​မွာ ​ေအာ္​တို ​သြား​ေန​တဲ့ ​စ​လိုက္​ေလး​ကို​ပိုင္​ဆိုင္​ပါ​ၿပီ ​သူ​က​ေတာ့
၅   ​ခု​တိ​တိ​ပါ​ဝင္​တာ​ျဖစ္​ပါ​တယ္.. ​မိ​မိ​လမ္း​ၫြွန္​လို​ေသာ ​ေန​ရာ ၅ ​ခု​ကို​ထည့္​လိုက္​ပါ​ေနာ္...
​ဆက္​ေလ့​လာ​လို​ပါ​က .
​ဘ​ေလာ့​မွာ Slider ​တစ္​ခု​ျပဳ​လုပ္​ျခင္း (၂)
​ဘ​ေလာ့​မွာ Slider ​တစ္​ခု​ျပဳ​လုပ္​ျခင္း (၃)
​ဘ​ေလာ့​မွာ Slider ​တစ္​ခု​ျပဳ​လုပ္​ျခင္း (၄)
​ဘ​ေလာ့​မွာ Slider ​တစ္​ခု​ျပဳ​လုပ္​ျခင္း (၅)
​ဘ​ေလာ့​မွာ Slider ​တစ္​ခု​ျပဳ​လုပ္​ျခင္း (၆)


​ခု​လို​အား​ေပး​တဲ့​အ​တြက္ ​အ​ထူး​ေက်း​ဇူး​တင္​ပါ​ေၾကာင္း ​ေျပာ​ၾကား​ပါ​ရ​ေစ..​ဘ​ေလာ့​ခ​ရီး​သည္​မွ ​နည္း​ပ​ညာ​မ်ား​အား ​မည္​သူ​မ​ဆို ​လြတ္​လပ္​စြာ ​ကူး​ယူ​သံုး​စြဲ​ႏိုင္​ပါ​တယ္.. ​က်ြန္​ေတာ္ ​ပိုင္​ဆိုင္​ေသာ​ေန​ရာ​ေလး​မ်ား​အား ​ဆက္​လက္ ​လည္​ပါတ္​လို​ပါ​က ***************************************
​ဘ​ေလာ့​ခ​ရီး​သည္​သို႔ { ​ဒီ​မွာ } ​သြား​လိုက္​ပါ
​လယ္​တီ​ေျမ​သား​သို႔{ ​ဒီ​မွာ } ​သြား​လိုက္​ပါ
​စာ​ေပ​နန္း​ေတာ္​သို႔{ ​ဒီ​မွာ } ​သြား​လိုက္​ပါ

0 comments:

Post a Comment