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

04 February 2014

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

 Excellent Content SlideShow+Slider to Blogger / WebSite

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

   ►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/excellent-slideshow-compressed.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">
#slideshow {list-style:none; color:#fff}
#slideshow span {display:none}
#wrapper {width:506px; margin:50px auto; display:none}
#wrapper * {margin:0; padding:0}
#fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000}
#information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}
#information h3 {padding:4px 8px 3px; font-size:14px}
#information p {padding:0 8px 8px}
#image {width:500px}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/SxIRDLhbFvI/AAAAAAAAAZM/4N4RrfeWPdA/left.gif) left center no-repeat}
#imgnext {right:0; background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/SxIRJLGnjKI/AAAAAAAAAZc/Z99UWtjYHeo/right.gif) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url(http://2.bp.blogspot.com/_4HKUHirY_2U/SxIRGajwsfI/AAAAAAAAAZU/9e3kt7Z5Bjo/link.gif) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(http://2.bp.blogspot.com/_4HKUHirY_2U/SxIRMN8VUeI/AAAAAAAAAZk/BTNwDZsGQhw/scroll-left.gif) center center no-repeat; background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:20px; height:81px; background:#222 url(http://2.bp.blogspot.com/_4HKUHirY_2U/SxIRPJktr1I/AAAAAAAAAZs/Z3Qj8DTDrMw/scroll-right.gif) center center no-repeat}
#slideright:hover {background-color:#333}
#slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden}
#slider {position:absolute; left:0; height:81px}
#slider img {cursor:pointer; border:1px solid #666; padding:2px}
</style>


<div style="float:left;">

<ul id="slideshow">


<li>
<h3>Enter Title 1 Here</h3>

<span>​ပံု​လင့္​ထည့္​ရန္</span>

<p>Enter Description 1 Here.</p>
<a href="​မိ​မိ​ပို႔စ္​လင့္​ထည့္​ပါ"><img src="​ပံု​လင့္​ထည့္​ရန္" alt="" /></a>
</li>


<li>
<h3>Enter Title 2 Here</h3>

<span>​ပံု​လင့္​ထည့္​ရန္</span>

<p>Enter Description 3 Here.</p>
<a href="​မိ​မိ​ပို႔စ္​လင့္​ထည့္​ပါ"><img src="​ပံု​လင့္​ထည့္​ရန္" alt="" /></a>
</li>


<li>
<h3>Enter Title 3 Here</h3>

<span>​ပံု​လင့္​ထည့္​ရန္</span>

<p>Enter Description 3 Here.</p>
<a href="​မိ​မိ​ပို႔စ္​လင့္​ထည့္​ပါ"><img src="​ပံု​လင့္​ထည့္​ရန္" alt="" /></a>
</li>


<li>
<h3>Enter Title 4 Here</h3>

<span>​ပံု​လင့္​ထည့္​ရန္</span>

<p>Enter Description 4 Here.</p>
<a href="​မိ​မိ​ပို႔စ္​လင့္​ထည့္​ပါ"><img src="​ပံု​လင့္​ထည့္​ရန္" alt="" /></a>
</li>


<li>
<h3>Enter Title 5 Here</h3>

<span>​ပံု​လင့္​ထည့္​ရန္</span>

<p>Enter Description 3 Here.</p>
<a href="​မိ​မိ​ပို႔စ္​လင့္​ထည့္​ပါ"><img src="​ပံု​လင့္​ထည့္​ရန္" alt="" /></a>
</li>


</ul>

<div id="wrapper">

<div id="fullsize">

<div id="imgprev" class="imgnav" title="Previous Image"></div>

<div id="imglink"></div>

<div id="imgnext" class="imgnav" title="Next Image"></div>

<div id="image"></div>

<div id="information">
<h3></h3>
<p></p>
</div>
</div>

<div id="thumbnails">

<div id="slideleft" title="Slide Left"></div>

<div id="slidearea">

<div id="slider"></div>

</div>

<div id="slideright" title="Slide Right"></div>

</div>

</div>

</div>


<script type='text/javascript'>
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
window.onload=function(){
slideshow.auto=true;
slideshow.speed=5;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="slider";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
}
</script>


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

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

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

၅   ​ခု​တိ​တိ​ပါ​ဝင္​တာ​ျဖစ္​ပါ​တယ္.. ​မိ​မိ​လမ္း​ၫြွန္​လို​ေသာ ​ေန​ရာ ၅ ​ခု​ကို​ထည့္​လိုက္​ပါ​ေနာ္...



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


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

​ဘ​ေလာ့​ခ​ရီး​သည္​သို႔ { ​ဒီ​မွာ } ​သြား​လိုက္​ပါ


​လယ္​တီ​ေျမ​သား​သို႔{ ​ဒီ​မွာ } ​သြား​လိုက္​ပါ


​စာ​ေပ​နန္း​ေတာ္​သို႔{ ​ဒီ​မွာ } ​သြား​လိုက္​ပါ

0 comments:

Post a Comment