ဘလော့မှာ 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/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8BYAP5ULsYZjXIdo1gTkWw_5tlbhbGQ_GvccyO2CsMdpmjucqjp44oN06oknzG07zb0N2zojgiFrDYf1Uo3_fvTmxkiMAPEmSE4AdERPA6RgUOlwj_OPFtRm8n58zbqu2foMtk2Fz7Dca/) left center no-repeat}
#imgnext {right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwcRxsSkX016XckiUkGyzUrwhCLLamv-gW_J5m9lcU0U6LHCwJyNOu6g5gHYXQOnH2A90pZrC2Eri3ecE9tQHSerdRckqIipJMjFDsWxw_BHcexh640cfhubecrrs8QnOhl1NXc1dytCA2/) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5yFEOKU4V_o62JnKRijEvWQW2-Z34BTj5Yn2qDZQLDx0M4ubIPF0qQCjarkT8c8O4rdFnFTdMuGp8PkNj_rtTv4CvQWRYMdmvojtlEipdJMhP1qmB2TT-Uy6YnnxFqkVTC_iX7Aql3bml/) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX7G04duIcJQiSmoAoRzVAEWSSODs9zo3MTAo8PTSjGCYQs1bOLCIUSJGe5qT71_4Z382BgXOOv3gbkpmS8abjFWFbzdX1QQaX0H9DJwfHZsTgkFiUlAP0uNRqskqp6IExRTTqQ40fSFO-/) center center no-repeat; background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:20px; height:81px; background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-4mr8WyjgM3dk9M4un1vH895gwE1hJrDJOvMVaYRtGmuKd0nRIfrsJO3UyVN9jjMOV7FMiGFuY204rCDX4pKu52xaakVALzvVovBWLz32DvxAenGUIGeQ3HxQqXeFlToABV_OoKsd2RA1/) 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 တစ်ခုပြုလုပ်ခြင်း (၅)
ဘလော့မှာ Slider တစ်ခုပြုလုပ်ခြင်း (၆)

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

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

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

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

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

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

Rate this posting:

{[['']]}

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