နိုင္ငံတကာနွင့္ ျပည္တြင္းသတင္း၊ နည္းပညာ၊ ေဆာ့ဝဲလ္ႏွင့္ ဗဟုသုတမ်ား

အားေပးၾကတဲ့မိတ္ေဆြမ်ား

Showing posts with label Slideshow. Show all posts
Showing posts with label Slideshow. Show all posts

Wednesday, September 03, 2014

Firecoresoft Slideshow Fairy v1.0.4 With LicenseKey



ဒီတခါေတာ့ ဗီြဒီယို Sildeshow ေကာင္းေကာင္း လုပ္ေပးႏိုင္တဲ့ Firecoresoft Slideshow Fairy ဆိုတဲ့ ေကာင္ေလး
ကို တင္ေပးလိုက္ ပါတယ္။ ျခားနားတဲ့ cool effects ေပါင္း မ်ားစြာ ပါဝင္ တာေၾကာင့္ Slideshow အသံုးျပဳေနသူ
မ်ား အတြက္ ကေတာ့ ေတာ္ေတာ္ အသံုးဝင္ မယ္လို႔ ထင္ပါတယ္ ။

ဒီေကာင္ေလးကို Full Version အျဖစ္ အသုံးျပဳနိုင္ရန္ serial key ထည့္ေပး ထားပါတယ္။

Firecoresoft Slide Fairy is a wonderful photo slideshow maker, allowing users to create stylish and attractive photo slideshow with a few simple steps. Users can not only load single or multiple images, but can embed audio file into the app to set it as the background music as well.

Apart from providing piles of 2D/3D templates with different cool effects, this great Flash photo slideshow builder also allows users to personalize the templates freely including change the background color, border color, customize display mode such as music loop, auto play music, etc. After customization, it can publish the slideshow as .swf or .html file based on the actual needs.

Main Features:
- Easily create stunning photo slideshows/Flash galleries and publish as .swf or .html files
- Support adding single or batch images (JPG/BMP/PNG, etc.) and MP3 music files
- Comprehensive ready-to-use 2D & 3D templates for choice
- Perfect for blogs, websites, e-cards and more for any occasion.

▼ usersfiles ▼

From: ဘေလာ့ခရီးသည္ by Win Hlaing


  1. ေဒါင္းေလာ့ ဘတ္တံကို ႏွိပ္ပါ။
  2. ၅ စကၠန္႔ ေစာင့္ စရာ မလိုပါ။
  3. ဘာ << SKIP AD >> မွ ခ်ိတ္ မထားပါ။
  4. ခ်က္ခ်င္း ေဒါင္းေလာ့ဆိုဒ္ကို ေရာက္ပါမည္။
  5. ကြန္နက္႐ွင္ ေႏွးသူမ်ား အဆင္ေျပ ေစရန္ ျပဳ လုပ္ ထားပါသည္။
  6. အခက္အခဲ ႐ွိရင္ စာေလး ေရးထား ခဲ့ပါ။
  7. မိတ္ေဆြတို႔ အားလံုး အတြက္ အဆင္ေျပေအာင္ အတတ္ႏိုင္ဆံုး ႀကိဳးစားေပး ပါမည္။
  8. ႐ႊင္လန္းခ်မ္းေျမ့ၾကပါေစ...။
Read More »

Wednesday, February 06, 2013

Css3 Cycling Slideshow For Blogger




မဂၤလာပါသူငယ္ခ်င္းတို႔...။

ဒီတခါေတာ့ မိမိရဲ႕ဘေလာ့စာမ်က္ႏွာမွာ ဓါတ္ပုံဘဲျဖစ္ျဖစ္၊ ေၾကာ္ျငာဘဲျဖစ္ျဖစ္၊ Slideshow နဲ႔ ေဖာ္ျပခ်င္တဲ့သူငယ္ခ်င္းမ်ားအတြက္ Slideshow ကုဒ္ေလးတင္ေပးလုိက္ပါတယ္။
  • Blogger home Page ကိုသြားပါ။
  • Termplate ကို ကလစ္ပါ။
  • သင့္ Template ကို Backup အရင္လုပ္ပါ။
  • Expand widget Templates စာေ႐့ႇကအကြက္တြင္ အမွန္ျခစ္ေလးထည့္ေပးပါ။
  • ၿပီးရင္ ေအာက္မွာ ေပးထားတဲ့ ကုဒ္ကို႐ွာပါ။
]]></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; } 
}

ၿပီးရင္ Save your template ကိုႏွိပ္လိုက္ရင္ၿပီးပါၿပီ။

  • ေနာက္တဆင့္အေနနဲ႔ Layout Page ကိုသြားပါ။
  • Add a gadget ကို ႏွိပ္ပါ။
  • HTML/JAVA Script ကိုေ႐ြးပါ။
  • ၿပီးရင္ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေတြကို ကူးထည့္ေပးပါ။

<div class="container">
 <div id="content-slider">
     <div id="slider">
         <div id="mask">
            <ul>
            <li id="first" class="firstanimation">
            <a href="#">
             <img src="http://2.bp.blogspot.com/-eIFV4mgnvS8/UPZfZeK8InI/AAAAAAAAAWo/Sc9IzuZSg2A/s1600/green.jpg" alt="Green"/>
            </a>
            <div class="tooltip">
            <h1>Green</h1>
            </div>
            </li>

            <li id="second" class="secondanimation">
            <a href="#">
            <img src="http://4.bp.blogspot.com/-LAId9crAMHU/UPZfauR4U3I/AAAAAAAAAW0/Xoz6c56OW5E/s1600/wallpapers-1.jpg" alt="Car"/>
            </a>
            <div class="tooltip">
            <h1>Car</h1>
            </div>
            </li>
            
            <li id="third" class="thirdanimation">
            <a href="#">
            <img src="http://1.bp.blogspot.com/-Osowv8MfTos/UPZfZkKsQkI/AAAAAAAAAWk/0RHmUER7TIo/s1600/nature2.jpg" alt="Nature"/>
            </a>
            <div class="tooltip">
            <h1>Nature</h1>
            </div>
            </li>
                        
            <li id="fourth" class="fourthanimation">
            <a href="#">
             <img src="http://4.bp.blogspot.com/-Yx_NYwwA2_s/UPZfZoWAExI/AAAAAAAAAWs/i16cwNzeFso/s1600/nature.jpg" alt="Nature"/>
            </a>
            <div class="tooltip">
            <h1>Nsture</h1>
            </div>
            </li>
                        
            <li id="fifth" class="fifthanimation">
            <a href="#">
            <img src="http://4.bp.blogspot.com/-LxolmfrLTrE/UPZfav_xFOI/AAAAAAAAAW4/i8dymawywVs/s1600/nature3.jpg" alt="Yellow"/>
            </a>
            <div class="tooltip">
            <h1>Yellow</h1>
            </div>
            </li>
            </ul>
            </div>
            <div class="progress-bar"></div>
        </div>
    </div>
</div>


ေအာက္မွာျပထားသလို မိမိ Slideshow ျပဳလုပ္မည့္ ဓါတ္ပံု Link ေတြကို ေျပာင္းထည့္ေပးလိုက္ပါ။

<img src="http://1.bp.blogspot.com/-Osowv8MfTos/UPZfZkKsQkI/AAAAAAAAAWk/0RHmUER7TIo/s1600/nature2.jpg" alt="Nature"/>

ေပ်ာ္႐ႊင္ၾကပါေစ...။
Read More »