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

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

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

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

►1- Blogger Singin ၀င္လိုက္ပါ။

►2- Dashboard ကိုသြားလိုက္ပါ။

►3- Template ကိုကလစ္ပါ..။

►4- Edit Html ကို၀င္ပါ.. Process ကိုကလစ္ျပီးဆက္၀င္လုိက္ပါ။

►5- Ctrl+F (သို႕မဟုတ္) F3 အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။

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

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

ကိုႏိုပ္ပါ။

မွတ္ခ်က္ ။ ။ အေပၚကကုဒ္ မွာ ရွာေဖြရခက္ခဲတတ္ပါသည္.. ကုဒ္ေတြကို ေခါက္ထားျခင္းေၾကာင့္သာ ျဖစ္ပါတယ္.. ထို႕ေၾကာင့္ b:skin ဆိုတာေလးဘဲ ေရးရွာလိုက္ပါ.. ေတြ႕တာနဲ႕ သူ႕ေဘးမွာ မွ်ားအနက္ေလး ေတြ႕မယ္ ကလစ္ေျဖ လိုက္ပါ ဒါဆို b:skin ကို အန္းတား ဆက္ေခါက္ေပးတာနဲ႕ ေတြ႕ပါျပီ....

/* 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 မွာ ေျပာခဲ့ၾကပါေနာ္..

<<< မန္ဘာ၀င္ျပီး... Fb Like ျခင္းျဖင့္ အားေပးၾကပါေနာ္ >>>

ေအာင္ေအာင္(မကစ) ပိုင္ဆိုင္ေသာ ေနရာေလးမ်ားကိုလာလည္ၾကပါ။

လယ္တီေျမသား www.ledimye.blogspot.com

ဘေလာ့ခရီးသည္ http://aungsanmks.com/

ကိုေဇာ္သြင္(စႏၵယားႏွင္႕ကီးဘုတ္)

Thursday, January 15, 2015

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

No comments:

Post a Comment