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://24work.webs.com/24work-blogspot/featured-post/17-content-code/contentslider-n-b-l-t-r.js" type="text/javascript"/>
<script src="http://24work.webs.com/24work-blogspot/featured-post/17-content-code/n17-content-slider-026.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">
.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 5px solid #333333;
border-bottom-width: 5px;
width: 565px; /*width of featured content slider*/
height: 175px;
margin-left:15px;
}
.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0; /*leave as is*/
top: 0; /*leave as is*/
padding: 5px;
background: white;
width: 555px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
margin-top:0px;
}
.pagination{
width: 555px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
text-align: right;
background-color: #333333;
padding: 5px 10px;
margin-top:-3px;
height:30px;
margin-left:15px;
}
.pagination a{
padding: 0 5px;
text-decoration: none;
color: #000;
background: #AAAAAA;
}
.pagination a:hover, .pagination a.selected{
color: #000;
background-color: #FFF;
}

</style>



<div class="sliderwrapper" id="slider1">
<div class="contentdiv">
<img height="115" src="​ပံု​လင့္​ထည့္​ရန္" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" />
<h2><a href="​မိ​မိ​ပို႔စ္​လင့္​ထည့္​ပါ" target="_blank">Title-of-Post</a></h2>Slide Description [...]
</div>
<div class="contentdiv">
<img height="115" src="​ပံု​လင့္​ထည့္​ရန္" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" />
<h2><a href="​မိ​မိ​ပို႔စ္​လင့္​ထည့္​ပါ" target="_blank">Title-of-Post</a></h2>Slide Description [...]
</div>
<div class="contentdiv">
<img height="115" src="​ပံု​လင့္​ထည့္​ရန္" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" />
<h2><a href="​မိ​မိ​ပို႔စ္​လင့္​ထည့္​ပါ" target="_blank">Title-of-Post</a></h2>Slide Description [...]
</div>
<div class="contentdiv">
<img height="115" src="​ပံု​လင့္​ထည့္​ရန္" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" />
<h2><a href="​မိ​မိ​ပို႔စ္​လင့္​ထည့္​ပါ" target="_blank">Title-of-Post</a></h2>Slide Description [...]
</div>
<div class="contentdiv">
<img height="115" src="​ပံု​လင့္​ထည့္​ရန္" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" />
<h2><a href="​မိ​မိ​ပို႔စ္​လင့္​ထည့္​ပါ" target="_blank">Title-of-Post</a></h2>Slide Description [...]
</div>
</div>
<div class="pagination" id="paginate-slider1">
</div>
<script type="text/javascript">
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [true, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>

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

(၁) "​ပံု​လင့္​ထည့္​ရန္" ​ဆို​တဲ့​ေန​ရာ​မွာ ​မိ​မိ​တို႔ ​ျပ​လို​တဲ့​ပံု​ရဲ့ ​လင့္​ကို​ပါ။
(၂) "​မိ​မိ​ပို႔စ္​လင့္​ထည့္​ပါ"  ​ဆို​တဲ့​ေန​ရာ​မွာ ​ၫြွန္​ျပ​တဲ့ ​ေန​ရာ​ရဲ့ ​လင့္​ကို ​ထည့္​ေပး​ပါ။
(၃) Title-of-Post ​ဆို​တာ​က​ေတာ့ ​ၫြွန္​ျပ​တဲံ ​ပို႔စ္​ရဲ့ ​ေခါင္း​စဥ္​အ​မည္​ေပါ့​ေနာ္ ။
(၄)  Slide Description [...]  ​ဆို​တာ​က​ေတာ့ ​မိ​မိ​တို႔ ​ေရး​လို​ေသာ ​စာ​သား​အ​နည္း​ငယ္​ေရး​လိုက္​ပါ။

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

​ဆက္​ေလ့​လာ​လို​ပါ​က .
​ဘ​ေလာ့​မွာ Slider ​တစ္​ခု​ျပဳ​လုပ္​ျခင္း (၂)
​ဘ​ေလာ့​မွာ Slider ​တစ္​ခု​ျပဳ​လုပ္​ျခင္း (၃)
​ဘ​ေလာ့​မွာ Slider ​တစ္​ခု​ျပဳ​လုပ္​ျခင္း (၄)
​ဘ​ေလာ့​မွာ Slider ​တစ္​ခု​ျပဳ​လုပ္​ျခင္း (၅)
​ဘ​ေလာ့​မွာ Slider ​တစ္​ခု​ျပဳ​လုပ္​ျခင္း (၆)
  ​အ​ဆင္​ေျပ​ၾက​ပါ​ေစ... ​မ​ေျပ​တာ ​မ​ရွင္း​တာ ​ရွိ​ပါ​က ​ခ်က္​ေဘာက္​မွာ ​ေအာ္​ခဲ့​ၾက​ပါ​ေနာ္...


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

0 comments:

Post a Comment