နည္းပညာဗဟုသုတ ျပည့္၀ၾကပါေစ

Thursday, March 13, 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 တစ်ခုပြုလုပ်ခြင်း (၆)
  အဆင်ပြေကြပါစေ... မပြေတာ မရှင်းတာ ရှိပါက ချက်ဘောက်မှာ အော်ခဲ့ကြပါနော်...


ခုလိုအားပေးတဲ့အတွက် အထူးကျေးဇူးတင်ပါကြောင်း ပြောကြားပါရစေ..ဘလော့ခရီးသည်မှ နည်းပညာများအား မည်သူမဆို လွတ်လပ်စွာ ကူးယူသုံးစွဲနိုင်ပါတယ်.. ကျွန်တော် ပိုင်ဆိုင်သောနေရာလေးများအား ဆက်လက် လည်ပါတ်လိုပါက ***************************************
ဘလော့ခရီးသည်သို့ { ဒီမှာ } သွားလိုက်ပါ
လယ်တီမြေသားသို့{ ဒီမှာ } သွားလိုက်ပါ
စာပေနန်းတော်သို့{ ဒီမှာ } သွားလိုက်ပါ
Rate this posting:
{[['']]}

0 comments:

Post a Comment

Twitter Facebook More