Wednesday, January 16, 2013

Css3 Cycling Slideshow For Blogger

11:59 AM winhtuttin No comments
ကိုယ့္ရဲ႕ Blog မွာ ဓါတ္ပံုေတြ/ေၾကာ္ျငာေတြကို Slideshow နဲ႕ေဖၚျပခ်င္တဲ့မိတ္ေဆြ
မ်ားအတြက္တင္ေပးလုိက္ပါတယ္။

အရင္ဆံုးကိုယ့္ရဲ႕ Blog ထဲ့သို Log in ၀င္ပါ၊ေအာက္ပါပံုအတိုင္း Template ကိုႏိုပ္ပါ






Edit Html ကိုႏိုပ္ပါ
Ctrl + F အကူအညီနဲ႕ ]]></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; } 
}

 ျပီးရင္ Layout ကိုေရြးပါ



ေအာက္မွာျပထားတဲ့အတိုင္း Add a Gadget ကိုႏိုပ္ျပီး HTML/JAVA Script ကိုႏုိပ္ပါ



ေအာက္ပါ Code မ်ားကိုကူးထဲ့ပါ။
<div class="container">
 <div id="content-slider">
     <div id="slider">
         <div id="mask">
            <ul>
            <li id="first" class="firstanimation">
            <a href="#">
             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPFQ55VEtVF4iAl_H8T5ZXmxB2-6tSj3QRriDW5QmnrQGHUfTJGkpDYyuLl5nvR5Jtnz4D7oj2FZMkwfovdJdRnNH5FORsExZ8by2zCt7oQ6UEjPVnBsNpVT7ww3VSdKYulgjoYaeBzujV/s1600/green.jpg" alt="Green"/>
            </a>
            <div class="tooltip">
            <h1>Green</h1>
            </div>
            </li>

            <li id="second" class="secondanimation">
            <a href="#">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR-peFTUHRnm1dBu8b2Fr277hUCHevKf3j9RubIgpACdkDdKWNbulp-Q4gMEc7Xy5ZqdjKwj_x4MpC6rjMKtnqT26PD26ApNvC_lpamnVo9PSHken8jx77RMrT6FA36cZ0TeRREIZnye_w/s1600/wallpapers-1.jpg" alt="Car"/>
            </a>
            <div class="tooltip">
            <h1>Car</h1>
            </div>
            </li>
            
            <li id="third" class="thirdanimation">
            <a href="#">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBWsx3n8wJGn5FXR9oTf3U9EBsmxtuSB5OBOKfeES_bfb_4kYyMCeIoUgwTJS-Ws0SJj3NzEjn9vnVVfawioiMjr2lCiag3Ju6W2iIDHuR5OCaWKNTHUGPAn4WVRCIXUGckx3_NGvrFLby/s1600/nature2.jpg" alt="Nature"/>
            </a>
            <div class="tooltip">
            <h1>Nature</h1>
            </div>
            </li>
                        
            <li id="fourth" class="fourthanimation">
            <a href="#">
             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibqTXPU6M1S57WGu0CTz8fyhk9atV9iWHk7kHjSWYLKOirIQUpRJGCsGh1duUfq-EHLoOSwyBA2nimx1ZgVDvdNxeHw1SqR2ov0LsOjr_08aNdyb4sHajR-GveTc-42HTh3Qg3y-BfNFXu/s1600/nature.jpg" alt="Nature"/>
            </a>
            <div class="tooltip">
            <h1>Nsture</h1>
            </div>
            </li>
                        
            <li id="fifth" class="fifthanimation">
            <a href="#">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW263peys9JR7Q9uP7Gue00mYz453nQ9gnQgH1TBpGn37JG6aq_SsRv6wIBppmJZz2BN2xSSaF5xhPp-aDM-ilCBwO3tJ24uJ6K9bG-jJvV8Bu1eYsUbjj9jLAjT6Hi0lSmju0Mq1HFE1l/s1600/nature3.jpg" alt="Yellow"/>
            </a>
            <div class="tooltip">
            <h1>Yellow</h1>
            </div>
            </li>
            </ul>
            </div>
            <div class="progress-bar"></div>
        </div>
    </div>
</div>

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW263peys9JR7Q9uP7Gue00mYz453nQ9gnQgH1TBpGn37JG6aq_SsRv6wIBppmJZz2BN2xSSaF5xhPp-aDM-ilCBwO3tJ24uJ6K9bG-jJvV8Bu1eYsUbjj9jLAjT6Hi0lSmju0Mq1HFE1l/s1600/nature3.jpg ဒီလိုဓါတ္ပံု Link ေတြေနရာမွာကိုယ့္ရဲ႕ဓါတ္ပံု Link ကိုအစားထားေပးလိုက္ပါ။
အဆင္ေျပပါေစဗ်ာ....
Posted in:

0 comments:

Post a Comment

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Laundry Detergent Coupons