blog එකට ෆට්ට slid show එකක් දා ගමු ..

අලෙ මේකනං මම ලියන්නේ .. බ්ලොග් ලියන යාලුවෙක් නිසා... මෙයා මගෙන් ඇහුව දවස් දෙක තුනක්ම කොහොමද අර ස්ලයිඩ් ෂෝ එක දාගත්තේ කියල... මේ එකනං නෙවෙයි හැබැයි ඊට වඩා ෆට්ට එකක් .. ආයෙත් මට අර පස්නේ ඇවිල්ල කියල කස්ටිය දන්නවනේ.. මගේ ඩේටා අහවර වී ඇත.. ඊයෙ හිරු අක්කියගේ සයිට් එක පැත්තේ ගියා යන්න ඕනිම නිසා නැත්තැන එකත් නැහැ ....අර අක්කියගේ වැඩේට  මම මගේ අර පරණ මික්ස් ටිකම එවන්නම්.. ඈ කමක් නැහැනේ ... අලුතෙන් ටිකකුත් කරන්නම්කො..ම්ම්ම්. .. අහා දැන් මතක් උනේ.. අනෝ කෙනක් කොමෙන්ට් එකක් දාල තිබ්බා උඹ ගීක් එකේ කතා වෙන දේවල් ඇවිල්ල මෙතන කියවනවා කියලා.. මම ගීක් සාමාජිකයෙක් තමයි.. එත් මම ඔය එතන කියන ඒවා ඇවිල්ල මගේ බ්ලොග් එකේ දාන්නේ නැහැ හරි තව මොකක්ද හැක්  බැක් කියලත් තිබ්බා :P .... කොහොම උනත්  කොමෙන්ටුවට ස්තුතියි ඇනො... හරි අද දාන ස්ලයිඩ් ෂෝ එකනං ඵට්ටම ෆට්ට මේක මාර ගති..

• 

  ADD CAPTION HERE

• 

  ADD CAPTION HERE

• සුදු මහත්තයාගේ blog අවකාශය

• 

මේක දාන්න මුලින්ම layout > add gaject  හරි design>Page Elements යන්න ඕනි ඊට පස්සේ මේ යට තියන ස්ක්‍රිප්ට් එක දාගෙන සෙවූ කරගන්න මේකෙත් එඩිට් කරන්න ඕනි තැන් වගයක් තියනවා ඒවා කෝඩ් ටිකට පහලින් දාල තියනවා.. 

<style>
#slider {
    width: 600px;
    height: 200px;
    margin: 40px auto 0;
    overflow: visible;
    background-color: #362c30;
    border: 10px solid #362c30;
    -moz-transition: all 150ms ease-in;
    -webkit-transition: all 150ms ease-in;
    -o-transition: all 150ms ease-in;
    position: relative;
}
 
#mask {
    overflow: hidden;
}
 
#slider:hover {
    background-color: #fff;
    border: 10px solid #ddd;
}
 
#slider:hover #pause {
    opacity: 1;
}
 
#slider:hover #progress {
    background-color: rgba(255,255,255,0.0);
}
 
#slider:hover ul, #slider:hover #progress, #slider:hover #overlay {
    -moz-animation-play-state: paused;
    -webkit-animation-play-state: paused;
}
 
#pause {
    width: 600px;
    height: 200px;
    position: absolute;
    top: 0;
    opacity: 0;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDvIeBQxrb1uoS5Hbij-wLm-nLdjPK85ieTSBeM2UIe8_VMB0X6BSm8hz-QPwWGvrLWVj6UXqM0BCfUKJOVve0-eeWULEvKrURu9BgBVh9AI9qYe73kXckX__Z9Wg5IR6lAvKK5RV978M/s1600/helperblogger.com-paused.png);
    background-position: 566px 10px;
    background-repeat: no-repeat;
    pointer-events: none;
    -moz-transition: all 150ms ease-in;
    -webkit-transition: all 150ms ease-in;
    -o-transition: all 150ms ease-in;
}
 
#progress {
    width: 1px;
    height: 1px;
    background-color: #ffd000;
    -moz-animation: progress 18s infinite;
    -webkit-animation: progress 18s infinite;
    position: relative;
    top: -1px;
    -moz-transition: all 150ms ease-in;
    -webkit-transition: all 150ms ease-in;
    -o-transition: all 150ms ease-in;
}
 
#overlay {
    width: 600px;
    height: 200px;
    position: absolute;
    top: 0;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLeXnCdXSC1DNlSERX1pgX30VWnfG4omai5tw6OjK2MuriOR4zlRntarp9t0FhEUvwOIn6ea8jv1HLAHqO2AMpjmn1EF_mccoAE80aVhdEjcFNaX5mSU3GqFb9VS-DNr8UtNcZJmIfp2k/s1600/helperblogger.com-overlay.png);
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    -moz-transition: all 150ms ease-in;
    -webkit-transition: all 150ms ease-in;
    -o-transition: all 150ms ease-in;
    opacity: 0.5;
    -moz-animation: overlay-fade 18s infinite;
    -webkit-animation: overlay-fade 18s infinite;
}
 
#slider ul {
    width: 2400px;
    list-style: none;
    padding: 0;
    margin: 0;
    -moz-animation: slide-animation 18s infinite;
    -webkit-animation: slide-animation 18s infinite;
    position: relative;
    left: 0px;
}
 
#slider li {
    display: inline;
    width: 600px;
    height: 200px;
    margin: 0;
    padding: 0;
    float: left;
    position: relative;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinm6EJnmbsYF5Fmj1c1ZXcOIvNYoMo1CB9qX4Kr7-o8_Pl-EtDDlm-AGheiHDkbapy8kOdtxSUQH4Z0h2jAKdfeSd2ORbORKhvE2rWJVCBR21o43gctd8e5b_Z7ilU6T-HMVbtjHFzSdY/s1600/helperblogger.com-loader.gif);
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
 
#slider li:last-of-type {
    background-color: #362c30;
}
 
#slider li a {
    display: block;
    text-decoration: none;
}
 
#slider li span {
    display: block;
    width: 560px;
    padding: 15px 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(54,44,48,0.6);
    border-top: 1px solid #362c30;
    text-shadow: 1px 1px 1px #362c30;
    pointer-events: none;
    text-align: left;
}
 
#slider-shadow {
    width: 100%;
    height: 260px;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw5ROaRsz26LRRYFEAYw8wSdz-KykWIrdxjvk6cww3k3lJZ6qJp816IWBtgUfPrQG31uh_MdbenjFuFsZ_SE6-o0UbeZ4ZCrLBEDODXghyphenhyphenY2_sFFD1GwckkzyjvPKsEa_g3NTMNQMuzGk/s1600/helperblogger.com-slider-shadow.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    margin: 10px auto 0;
}
 
@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-600px; opacity:1;}
45% {left:-600px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-1200px; opacity:1;}
70% {left:-1200px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1800px; opacity:1;}
95% {opacity:1;}
98% {left:-1800px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-600px; opacity:1;}
45% {left:-600px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-1200px; opacity:1;}
70% {left:-1200px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1800px; opacity:1;}
95% {opacity:1;}
98% {left:-1800px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:600px; opacity:1;}
22.5% {width:600px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:600px; opacity:1;}
47.5% {width:600px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:600px; opacity:1;}
72.5% {width:600px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:600px; opacity:1;}
98% {width:600px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:600px; opacity:1;}
22.5% {width:600px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:600px; opacity:1;}
47.5% {width:600px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:600px; opacity:1;}
72.5% {width:600px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:600px; opacity:1;}
98% {width:600px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
 
#slider ul li span h2 {
    font-size: 24px;
    line-height: 24px;
    color: #fff;
    font-weight: normal;
    font-family: 'Communist-Regular';
    text-shadow: 1px 1px 1px #362c30;
}
 </style>
 
 
<div id="slider-shadow">
     <div id="slider">
      <div id="mask">
       <ul>
        <li>
         <a href="#" title="ADD YOUR TITLE HERE"><img src=" your image link here" /></a><span><h2>ADD CAPTION HERE</h2></span>
        </li>
        <li>
         <a href="#" title="ADD YOUR TITLE HERE"><img src=" your image link here" /></a>
         <span><h2>ADD CAPTION HERE</h2></span>
        </li>
        <li>
         <iframe src="add your blog or web adress" width="600" height="200" frameborder="0" scrolling="no"></iframe>
         <span><h2>blog/web name</h2></span>
        </li>
        <li>
         <a href="#" title="ADD YOUR TITLE HERE"><img src="your image link here" /></a>


        </li>
       </ul>
      </div>
      <div id="progress">
      </div>
      <div id="overlay">
      </div>
      <div id="pause">
      </div>
     </div>
    </div>

 ADD YOUR TITLE HERE -කියන තැනට ඉමේජ් එකට අදාලව පොඩි විස්තරයක් දාන්න

your image link here-කියන තැනට ඉමේජ් එකේ මාතෘකාව දාන්න 

add your blog or web adress -කියන තැනට ඔබේ බ්ලොග් එකේ හෝ වෙබ් එකේ එඩ්රස් එක දාන්න . මෙතැනදී ඔබේ බ්ලොග් එක ස්ලයිඩ් ෂෝ එකේ පෙන්නනවා 

blog/web name-- කියන තැනට ඔබ ඉහත දැමු බ්ලොග් එකේ හෝ වෙබ් එක පිලිබඳ විස්තරය් දාන්න ..
දැන් ගැජට් එක සෙවූ කරගෙන ලස්සන බලන්න..    අහ තව දෙයක් අර උඩම කොළ පාටින් තියන 
width: 600px;
height: 200px; වෙනස් කරලා  කරලා ස්ලයිඩ් ෂෝ එකේ සයිස් එක හදාගන්න පුළුවනි.. එහෙනං තවත් අලුත් ගජට්ටුවක් සමග හමුවන බලාපොරොත්තුවෙන් ඔන් මන් ගියා ඇ..