Resim Slider (Slayt) Eklentisi

Blogger Resim Slider Kodu

Değişik amaçlarla kullanılabilecek site içi çalışan güzel bir manşet alanı Site içinde çalıştığı için sayfa hızına etkisi minimumdur. HTML kodları düzenleyerek değişik animasyonlar ve görseller oluşturup kullanabilirsiniz.

Kod:

#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/AVvXsEh5cHsX1yqUF9qiZqGl3tTjH5HDMPjtQYzilNx8SMMNgXLCXWGIoRHT91T_YdklcyyRMluZqLcbYUFACtAKfxwaS6yx4kjrDso1AAmJJBJ5wEPB2auY1QhSHH0SFay5XtSeUbslHVA46n0/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;
}

#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/AVvXsEgt_f5jO2nkk05B_2xJ-VOug2gQO-rEth4JJBc6lq4OFdYnN7Mgz4sEdvZXqsfA-zfARMji8g7yHGufreB-UmtyLAqhyxfeOspYWBowUaZxZP2iFgc3fqTI4f0eb9F3NLVkzHZV-rRno5E/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/AVvXsEifNiDiB1RRqdiFeTDcbdCULIjvcG9MZ7VKOP6o0P416hoZuJc7r23DogrGctkclztEuV9ffrtVcM9se16vn6ipbT80gh3PMK2vCAvTI6Y7C0bU4GL49Jkc9xouf9W6TY6Tshvdi99b9qg/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="Resim Açıklaması"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaTKTF0sDmIJayZ0MeHFsJVulR5H_G8H5FGsRsFnTmtIdibRdSraRgJlxG1OkIYkIIi2wrhQJEgjOFUYkARqnT7fvXGfBvN2k3BzTWWCuLhMNf5bB644qFuA2HguswANSil9d_EwX6geg/s1600/helperblogger.com-1.png" /></a><span><h2>RESİM YAZISI</h2></span>
        </li>
        <li>
         <a href="#" title="Resim Açıklaması"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxeHJQ697n1mofEFAw5Sne_gHe2Q3jtvu1e348Vrtu5CmBU5mWvJNCgp1lD9jlb5CXmThlSodX2EhW-yLXrOekvJ-V2jqUeJyoV-ax0wzs278BUhwQMKqtw00V70I2hEcIvZoCs2s6Mws/s1600/2014-02-08+17+52.png" /></a>
         <span><h2>RESİM YAZISI</h2></span>
        </li>
        <li>
         <a href="#" title="Resim Açıklaması"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaTKTF0sDmIJayZ0MeHFsJVulR5H_G8H5FGsRsFnTmtIdibRdSraRgJlxG1OkIYkIIi2wrhQJEgjOFUYkARqnT7fvXGfBvN2k3BzTWWCuLhMNf5bB644qFuA2HguswANSil9d_EwX6geg/s1600/helperblogger.com-1.png" /></a><span><h2>RESİM YAZISI</h2></span>
        </li>
       
       <li>
         <a href="#" title="Resim Açıklaması"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxeHJQ697n1mofEFAw5Sne_gHe2Q3jtvu1e348Vrtu5CmBU5mWvJNCgp1lD9jlb5CXmThlSodX2EhW-yLXrOekvJ-V2jqUeJyoV-ax0wzs278BUhwQMKqtw00V70I2hEcIvZoCs2s6Mws/s1600/2014-02-08+17+52.png" /></a>
         <span><h2>RESİM YAZISI</h2></span>
        </li>
       </ul>
      </div>
      <div id="progress">
      </div>
      <div id="overlay">
      </div>
      <div id="pause">
      </div>
     </div>
    </div>

<a href="#" title="Resim Açıklaması"><Resim URL" /></a><span><h2>RESİM YAZISI</h2></span>

Kısımlarını kendinize göre düzenleyebilirsiniz.
Paylaşımlarınızı yazdığınız panelde HTML kısmından ekleyerek tek bir sayfa içinde de kullanabilirsiniz.
Standart HTML/CCS yapısı kullanılmıştır, isterseniz değiştirip temanıza uygun görsellikte kullanabilirsiniz.
Resimler fixlenmemiştir, yani resim ölçülerini (px) ekleyeceğiniz alana göre önceden boyutlandırmanız gerekmektedir.
Bloggerde Resim slider, slayt alanı yada manşet alanında kullanabilirsiniz.

HTML / JAVASCRIPT EKLEMEK

Widget (gadget) olarak eklemek için :
Blogger > Düzen > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz

Sayfa içinde kullanmak için :
Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.

* Canlı Demo için :
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
Kod Editörünü kullanabilirsiniz.

WebKenti

Bu Blogda Ara

Resim Slider (Slayt) Eklentisi

Blogger Resim Slider Kodu

Yorumlar

Yorum Gönder