ဘေလာ့မွာ ပုံေတြ(သို႕)ေၾကာ္ျငာေတြကို Slideshow နဲ႕ထည့္နည္း

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

►1-  Blogger Singin ၀င္လိုက္ပါ။
►2-  Dashboard  ကိုသြားလိုက္ပါ။
►3-  Template    ကိုကလစ္ပါ..။
►4-  Edit  Html   ကို၀င္ပါ.. Process ကိုကလစ္ျပီးဆက္၀င္လုိက္ပါ။
►5-  Expand  Widget  Template  ကိုအမွန္ျခစ္ေပးဖို႕မေမ့ပါနဲ႕ေနာ္...။
►6-  Ctrl+F  (သို႕မဟုတ္) F3  အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။

 ]]></b:skin> ကိုရွာပါ၊ေတြ႕ျပီဆိုရင္

]]></b:skin> ရဲ႕အေပၚမွာ Cursor ခ်ျပီး ေအာက္ပါ Code မ်ားကူးထဲ့ျပီး Save Template
ကိုႏိုပ္ပါ။

/* fade slider www.bloggertrix.com*/ .content h1 { font-size:48px; color:#000; text-shadow:0px 1px 1px #f4f4f4; text-align:center; padding:60px 0 30px; } /* LAYOUT */ .container { margin:0 auto; overflow:hidden; width:960px; } /* CONTENT SLIDER */ #content-slider { width:100%; height:360px; margin:10px auto 0; } /* SLIDER */ #slider { background:#000; border:5px solid #eaeaea; box-shadow:1px 1px 5px rgba(0,0,0,0.7); height:320px; width:680px; margin:40px auto 0; overflow:visible; position:relative; } #mask { overflow:hidden; height:320px; } #slider ul { margin:0; padding:0; position:relative; } #slider li { width:680px; height:320px; position:absolute; top:-325px; list-style:none; } #slider li.firstanimation { -moz-animation:cycle 25s linear infinite; -webkit-animation:cycle 25s linear infinite; } #slider li.secondanimation { -moz-animation:cycletwo 25s linear infinite; -webkit-animation:cycletwo 25s linear infinite; } #slider li.thirdanimation { -moz-animation:cyclethree 25s linear infinite; -webkit-animation:cyclethree 25s linear infinite; } #slider li.fourthanimation { -moz-animation:cyclefour 25s linear infinite; -webkit-animation:cyclefour 25s linear infinite; } #slider li.fifthanimation { -moz-animation:cyclefive 25s linear infinite; -webkit-animation:cyclefive 25s linear infinite; } #slider .tooltip { background:rgba(0,0,0,0.7); width:300px; height:60px; position:relative; bottom:75px; left:-320px; -moz-transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; } #slider .tooltip h1 { color:#fff; font-size:24px; font-weight:300; line-height:60px; padding:0 0 0 20px; } #slider li#first:hover .tooltip, #slider li#second:hover .tooltip, #slider li#third:hover .tooltip, #slider li#fourth:hover .tooltip, #slider li#fifth:hover .tooltip { left:0px; } #slider:hover li, #slider:hover .progress-bar { -moz-animation-play-state:paused; -webkit-animation-play-state:paused; } /* PROGRESS BAR */ .progress-bar { position:relative; top:-5px; width:680px; height:5px; background:#000; -moz-animation:fullexpand 25s ease-out infinite; -webkit-animation:fullexpand 25s ease-out infinite; } /* ANIMATION */ @-moz-keyframes cycle { 0% { top:0px; } 4% { top:0px; } 16% { top:0px; opacity:1; z-index:0; } 20% { top:325px; opacity:0; z-index:0; } 21% { top:-325px; opacity:0; z-index:-1; } 92% { top:-325px; opacity:0; z-index:0; } 96% { top:-325px; opacity:0; } 100%{ top:0px; opacity:1; } } @-moz-keyframes cycletwo { 0% { top:-325px; opacity:0; } 16% { top:-325px; opacity:0; } 20% { top:0px; opacity:1; } 24% { top:0px; opacity:1; } 36% { top:0px; opacity:1; z-index:0; } 40% { top:325px; opacity:0; z-index:0; } 41% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-moz-keyframes cyclethree { 0% { top:-325px; opacity:0; } 36% { top:-325px; opacity:0; } 40% { top:0px; opacity:1; } 44% { top:0px; opacity:1; } 56% { top:0px; opacity:1; } 60% { top:325px; opacity:0; z-index:0; } 61% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-moz-keyframes cyclefour { 0% { top:-325px; opacity:0; } 56% { top:-325px; opacity:0; } 60% { top:0px; opacity:1; } 64% { top:0px; opacity:1; } 76% { top:0px; opacity:1; z-index:0; } 80% { top:325px; opacity:0; z-index:0; } 81% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-moz-keyframes cyclefive { 0% { top:-325px; opacity:0; } 76% { top:-325px; opacity:0; } 80% { top:0px; opacity:1; } 84% { top:0px; opacity:1; } 96% { top:0px; opacity:1; z-index:0; } 100%{ top:325px; opacity:0; z-index:0; } } @-webkit-keyframes cycle { 0% { top:0px; } 4% { top:0px; } 16% { top:0px; opacity:1; z-index:0; } 20% { top:325px; opacity:0; z-index:0; } 21% { top:-325px; opacity:0; z-index:-1; } 50% { top:-325px; opacity:0; z-index:-1; } 92% { top:-325px; opacity:0; z-index:0; } 96% { top:-325px; opacity:0; } 100%{ top:0px; opacity:1; } } @-webkit-keyframes cycletwo { 0% { top:-325px; opacity:0; } 16% { top:-325px; opacity:0; } 20% { top:0px; opacity:1; } 24% { top:0px; opacity:1; } 36% { top:0px; opacity:1; z-index:0; } 40% { top:325px; opacity:0; z-index:0; } 41% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-webkit-keyframes cyclethree { 0% { top:-325px; opacity:0; } 36% { top:-325px; opacity:0; } 40% { top:0px; opacity:1; } 44% { top:0px; opacity:1; } 56% { top:0px; opacity:1; z-index:0; } 60% { top:325px; opacity:0; z-index:0; } 61% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-webkit-keyframes cyclefour { 0% { top:-325px; opacity:0; } 56% { top:-325px; opacity:0; } 60% { top:0px; opacity:1; } 64% { top:0px; opacity:1; } 76% { top:0px; opacity:1; z-index:0; } 80% { top:325px; opacity:0; z-index:0; } 81% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-webkit-keyframes cyclefive { 0% { top:-325px; opacity:0; } 76% { top:-325px; opacity:0; } 80% { top:0px; opacity:1; } 84% { top:0px; opacity:1; } 96% { top:0px; opacity:1; z-index:0; } 100%{ top:325px; opacity:0; z-index:0; } } /* ANIMATION BAR */ @-moz-keyframes fullexpand { 0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; } 4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; } 16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; } 17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; } 18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } } @-webkit-keyframes fullexpand { 0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; } 4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; } 16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; } 17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; } 18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } }

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

<div class="container">
<div id="content-slider">
<div id="slider">
<div id="mask">
<ul>
<li id="first" class="firstanimation">
<a href="#">
<img src="မိမိတို႕ပုံရဲ႕လင့္ကိုထည့္ပါ" alt="Green"/>
</a>
<div class="tooltip">
<h1>Green</h1>
</div>
</li>

<li id="second" class="secondanimation">
<a href="#">
<img src="မိမိတို႕ပုံရဲ႕လင့္ကိုထည့္ပါ" alt="Car"/>
</a>
<div class="tooltip">
<h1>Car</h1>
</div>
</li>

<li id="third" class="thirdanimation">
<a href="#">
<img src="မိမိတို႕ပုံရဲ႕လင့္ကိုထည့္ပါ" alt="Nature"/>
</a>
<div class="tooltip">
<h1>Nature</h1>
</div>
</li>

<li id="fourth" class="fourthanimation">
<a href="#">
<img src="မိမိတို႕ပုံရဲ႕လင့္ကိုထည့္ပါ" alt="Nature"/>
</a>
<div class="tooltip">
<h1>Nsture</h1>
</div>
</li>

<li id="fifth" class="fifthanimation">
<a href="#">
<img src="မိမိတို႕ပုံရဲ႕လင့္ကိုထည့္ပါ" alt="Yellow"/>
</a>
<div class="tooltip">
<h1>Yellow</h1>
</div>
</li>
</ul>
</div>
<div class="progress-bar"></div>
</div>
</div>
</div>

 မွတ္ခ်က္  ။               ။ အျပာေရာင္နဲ႕ စာသားေတြေနရာမွာ မိမိတို႕ ထည့္လိုတဲ့ ပုံေတြ ေၾကာ္ျငာေတြရဲ႕
                                လင့္ကို ထည့္ေပးရမွာ ျဖစ္ပါတယ္..

ပုံေတြကိုလင့္ယူရန္..... -http://s1323.beta.photobucket.com/
                             -http://minus.com/
                             -http://imageshack.us/

                                            သည္ဆိုဒ္ေတြမွာ အသုံးျပဳနိဳင္ပါတယ္...ဗ်ာ...

ေအာင္ေအာင္(မကစ) ရဲ႕ ဘေလာ့ခရီးသည္ေလးအား အားေပးေနၾကတဲ့အတြက္ ေက်းဇဴးအထူးတင္ပါတယ္.. တုန္႕ျပန္မွဳအေနနဲ႕ fb like ေလးေတာ့ လုပ္ေပးခဲ့ၾကပါေနာ္.. တတ္စြမ္းသမွ် ေတြ႕ ရွိသမွ်ေလးေတြကို ျပန္လည္ မွ်ေ၀ေနပါ့မယ္...။ အဆင္မေျပတာမ်ားရွိခဲ့ပါက...cbox မွာ ေျပာခဲ့ၾကပါေနာ္..

credit by=> Aungsanmks