ဘလော့မှာ 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/AVvXsEhwiZ7N0euLdCCIyL5STYYbZKXJtl-Vf-We7DB58pUYiwLVWqNLbUevpi6zdD_eyL9Ivpo8_ReMtvZVjXPDwkVM5RgAmJnVvamgDrkvJe_VwILGE8p6yCPtovnAZN_fwQ-G8902dWVMcjJt/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/AVvXsEgL4nqwTg-RYWyFQ6Brt7x3Ed1W2j1q_MQJSByV9NdoxcyS2yAQyMcQOrXbNtQXiJ5itAgoOZWWksRgyk_6HuRue143YZMAJboDp974f5aN0nC7s_rfOd8icyl6KauDXZ_wWhBQDJd7sBQc/s400/prev.jpg) no-repeat; } #nav-slides a#prev:hover{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiak4dLcadfz1VBYQSUUmbi9-RuFRuo6ukLlI83Z4GchKh6hcsqvtggmchwsge21-7AuZnb16dCbtt1vy6MAPXygt0_7K3DAocqFLhNog7ZvOa7ua9YPoUWdV4YS_DIafqUQlbHd6-t_kNT/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/AVvXsEiIY53i6yVD9caYOkfTUwDheAnXd440VFZKmWer_PQoMdBONtO1-tRGeQaXTcPZGo5xP6645hAbYhphS_RqB9UGUl42_2WGprnTQiXQf1GgSwpwkfKcurm0Rogkatb1MnCfbdE6LTFG7MZl/s400/next.jpg) no-repeat; } #nav-slides a#next:hover{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT2tnzYDgLd2e2w8JYPOKEXdHMxYIFY1USx2vH1f6k5qpqnMHZIKuz87G2DBLKcedn8ZaNUfCaHIVZBCSz0Bak6yS6qMAP0H8OERUbLNJwKSd3q5ZYpTmS3kOYKlJOd4VAhO0cn1KKLk-5/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. အားလုံးထို့နည်းတူပါဘဲနော်....

ဆက်လေ့လာလိုပါက .

ဘလော့မှာ Slider တစ်ခုပြုလုပ်ခြင်း (၁)

ဘလော့မှာ Slider တစ်ခုပြုလုပ်ခြင်း (၂)
ဘလော့မှာ Slider တစ်ခုပြုလုပ်ခြင်း (၃)
ဘလော့မှာ Slider တစ်ခုပြုလုပ်ခြင်း (၄)

 အဆင်ပြေကြပါစေ... မပြေတာ မရှင်းတာ ရှိပါက ချက်ဘောက်မှာ အော်ခဲ့ကြပါနော်...

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

ဘလော့ခရီးသည်သို့ { ဒီမှာ } သွားလိုက်ပါ

လယ်တီမြေသားသို့{ ဒီမှာ } သွားလိုက်ပါ

စာပေနန်းတော်သို့{ ဒီမှာ } သွားလိုက်ပါ

Blogger နည်းပညာများ,

Rate this posting:

{[['']]}

Posted in: Blogger နည်းပညာများ