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

 မဂၤလာပါဗ်ာ.... အားလုံးကို နည္းပညာေလးတစ္ခု လက္ဆင့္ ကမ္းျခင္ပါတယ္.. ဒါေလးကေတာ့.. မိမိတို႕

ဘေလာ့မွာ ကိုယ္ညႊန္ျပျခင္ေသာ ေနရာေလးေတြ ပို႕စ္ေလးေတြအား   Slider ေလးနဲ႕ ခပ္လန္းလန္းေလး

လမ္းညႊန္ျပသေပးတဲ့နည္းလမ္းေလးဘဲ ျဖစ္ပါတယ္... သည္လို နည္းလမ္းေလးေတြကို က်ေနာ္ ပုံစံအမ်ိဳးမ်ိဳးနဲ႕ ေရးသား တင္ျပသြားပါ့မယ္... ဒါေလးကေတာ့ အေပၚျပထားတဲ့ ပုံစံ နမူနာေလးအတိုင္းေပါ့

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

သူကေတာ့ ေအာ္တို စလုိက္ေလးသြားေနမယ္ေနာ္....လန္းးးးတယ္..ေိေိ

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

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script src="http://24work.webs.com/24work-blogspot/featured-post/17-content-code/jquery.cycle.all-000-.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" hover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" hover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //]]> </script> <script type="text/javascript"> $(document).ready(function(){ $('#myslides').cycle({ fx: 'fade', speed: 700, timeout: 3000, next: '#next', prev: '#prev' }); }); </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"> /* featured fade */ #wrapper-featured{ padding:10px 0 ; width:650px; height: 326px; margin:0 ; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP2ctqVmwbA2SeAFBS-FAwTC01W_7BAES3-2MkQmOJwQzfwHu66CxZ5kFQAoLKFFCQ2Ecz7W2tKlFqiLtSipfXECgc3kKcdgvU_1Q3DXSgJ9qHxSP3B9L6EWeeB9WNtjed_0XeoslU0viO/s1600/bg_featured.jpg) no-repeat; position:relative; } #wrapper-myslides { width:550px; height:210px; padding: 0 0 ; margin: 3px 0 0 10px; position:relative; float:left; } #myslides { width:550px; height:210px; padding: 0 0 50px; margin: 0 18px ; overflow:hidden; } .panel{ width:550px; height:210px; } #myslides img.crop-foto { margin:8px 10px 10px 9px; border:1px solid #fff; display:block; position:absolute; right:3px; top:0; } .featured-entry { text-align:left; line-height:1.5em; font-style:italic; font-size:12px; font-family: georgia,Arial,Verdana, Helvetica, sans-serif; padding: 20px 10px 0; width:280px; color:#fff; position:absolute; top:0; left:0; } h3.featured-title { font-size:22px; text-align:left; font-family:Georgia, Arial,Verdana, Helvetica, sans-serif; margin:10px 0 5px; padding:0 0 5px; font-weight:normal; line-height:1em; font-style:normal; } h3.featured-title a:link, h3.featured-title a:visited{ color:#fff; } h3.featured-title a:hover { color:#b1e1ff; } #nav-slides a#prev { position:absolute; bottom:105px; left:135px; z-index:1; color:#800; width:14px; height:15px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7TYZW7quJlNyBDrx01vWA8sL1VaFDoCHMpAVkC1nBNRdfWo0euleCAVOlR31L7OJLk80bzlf2B6XnQA0bO-IoJLWFC0sIZpzBHPvCFMB6pcvWV3JXyqeZnbayAgVQNwk0DvsRqMCbte7b/s400/prev.jpg) no-repeat; } #nav-slides a#prev:hover{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxsDwmvD04sS4U7wE0k5DiT8NQpmcTCvN2EYUKni9BPS6wR9DRu6k7fcPsW1uJpghywbK1VALed6WEIu9F71DWjjKYByL3209wW51Pi5XYIjE8N7wro5QDadaT9lrHXkZx9qz3Dlcx0i_F/s400/prev_hover.jpg) no-repeat; } #nav-slides a#next { position:absolute; bottom:105px; left:160px; z-index:1; color:#800; width:14px; height:15px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj8F172QdI2-cW3gpUKsCK6iljUPvShCUMzEU3RBpUkjzWvWby_7tKsaZ7YD_8VFIPLD2BSn0IYN0ec7uE-q12uYQwTcRPX2_aqxBjLA-qHs0gGXoo3977yn10DPRymADhoWWXynBFCwA0/s400/next.jpg) no-repeat; } #nav-slides a#next:hover{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijig3ddJtpgfcYfVu83aepU9me88UwedQGji22vuVuCsg7cLgqcJbkVWb_Mc5N043c5zMSG6P1tMgumoJFcIaH1CMrge7GEnvqj5286gKgL1_WEfYG1tKqY1B4UQzqYUaTQBFPEPeFBeWw/s400/next_hover.jpg) no-repeat; } </style> <div id="wrapper-featured"> <div id="wrapper-myslides"> <div id="myslides"> <div class="panel"> <div class="image-frame"> <a href="#" target="_blank" rel="bookmark" title="Title-of-Post"> <img alt="" class="crop-foto" height="185" src="ပုံလင့္သည္မွာထည့္ပါ" width="205"/></a> </div> <div class="featured-entry"> <h3 class="featured-title"> <a href="လင့္ထည့္ေပးရန္" target="_blank" rel="bookmark" title="Title-of-Post"> ေခါင္းစဥ္အမည္</a></h3> <p> Slide 1 စာသားေရးရန္</p> </div> <!--end featured-entry--> </div> <!--end panel--> <div class="panel"> <div class="image-frame"> <a href="#" target="_blank" rel="bookmark" title="Title-of-Post"> <img alt="" class="crop-foto" height="185" src="ပုံလင့္သည္မွာထည့္ပါ" width="205"/></a> </div> <div class="featured-entry"> <h3 class="featured-title"> <a href="လင့္ထည့္ေပးရန္" target="_blank" rel="bookmark" title="Title-of-Post"> ေခါင္းစဥ္အမည္</a></h3> <p> Slide 2 စာသားေရးရန္</p> </div> <!--end featured-entry--> </div> <!--end panel--> <div class="panel"> <div class="image-frame"> <a href="#" target="_blank" rel="bookmark" title="Title-of-Post"> <img alt="" class="crop-foto" height="185" src="ပုံလင့္သည္မွာထည့္ပါ" width="205"/></a> </div> <div class="featured-entry"> <h3 class="featured-title"> <a href="လင့္ထည့္ေပးရန္" target="_blank" rel="bookmark" title="Title-of-Post"> ေခါင္းစဥ္အမည္</a></h3> <p> Slide 3 စာသားေရးရန္</p> </div> <!--end featured-entry--> </div> <!--end panel--> <div class="panel"> <div class="image-frame"> <a href="#" target="_blank" rel="bookmark" title="Title-of-Post"> <img alt="" class="crop-foto" height="185" src="ပုံလင့္သည္မွာထည့္ပါ" width="205"/></a> </div> <div class="featured-entry"> <h3 class="featured-title"> <a href="လင့္ထည့္ေပးရန္" target="_blank" rel="bookmark" title="Title-of-Post"> ေခါင္းစဥ္အမည္</a></h3> <p> Slide 4 စာသားေရးရန္</p> </div> <!--end featured-entry--> </div> <!--end panel--> <div class="panel"> <div class="image-frame"> <a href="#" target="_blank" rel="bookmark" title="Title-of-Post"> <img alt="" class="crop-foto" height="185" src="ပုံလင့္သည္မွာထည့္ပါ" width="205"/></a> </div> <div class="featured-entry"> <h3 class="featured-title"> <a href="လင့္ထည့္ေပးရန္" target="_blank" rel="bookmark" title="Title-of-Post"> ေခါင္းစဥ္အမည္</a></h3> <p> Slide 5 စာသားေရးရန္</p> </div> <!--end featured-entry--> </div> <!--end panel--> </div> <!--end myslides--> </div> <!--end wrapper-myslides--> <div id="nav-slides"> <a href="#" id="prev"></a> <a href="#" id="next"></a> </div> </div> <!-- wrapper featured-->

မွတ္ခ်က္           ။                          ။  ကုဒ္ေတြကို ျပဳျပင္ရန္  ေသျခာ ၾကည့္ေပးပါေနာ္....

(၁) ကုဒ္ေတြကို ေကာ္ပီယူျပီးတာနဲ႕ ထည့္လုိက္ပါ  ကုဒ္ေတြ ထဲမွာ မိမိတို႕ ပုံေတြ ေခါင္းစဥ္ေတြ လင့္ေတြ
     အစားထိုးေပးရမွာ ေတြ ရွိပါေသးတယ္....

(၂)   ပုံလင့္သည္မွာ ထည့္ပါ   ဆိုတဲ့ေနရာမွာ မိမိတို႕ ေဖၚျပလိုေသာပုံ ရဲ႕ လင့္ကို ထည့္ပါ။
(၃)   လင့္ထည့္ေပး၇န္    ဆိုတဲ့ေနရာမွာ ကလစ္တာနဲ႕ ေရာက္သြားမည့္ ေနရာ လင့္ကိုပါ။
(၄)   ေခါင္းစဥ္အမည္   ဆိုတာမွာ ကိုညႊန္ျပတဲ့ လင့္ရဲ႕ title အမည္ေပါ့....။
(၅)  slider 1 စာသားေရးရန္    ဆိုတာကေတာ့ ေခါင္းစဥ္ / ပုံ နဲ႕သက္ဆိုင္ေသာ စာသားအနည္းငယ္ေပါ့။
      slider  2.3.4.5. အားလုံးထို႕နည္းတူပါဘဲေနာ္....


Source ; ဘေလာ့ခရီးသည္