Blogger Slayt Alanı Eklentisi ~ BLOG OKULU

Blogger Slayt Alanı Eklentisi

Yep yeni bir slayt alanı ile daha karşınızdayız.Blogger kullanıcıları için tasarlanmış eklemesi belkide en kolay olan slayt alanı diyebilirim.Resimler göze hoş gelen animasyonlu bir şekilde kayarak geçiş yapıyor.Resmin bekleme süresi ise resmin altında dolum çubuğu ile gösteriliyor, çubuğun içi dolduğunda bir sonraki resme geçiş yapılıyor.İsterseniz slayt alanı içerisinde site tanıtımıda yapabilirsiniz.Bu Slayt Alanını blogumuza eklemek için blogger kullanıcıları için en basit yöntemlerden biri olan gadget ekleme yöntemini kullanacağız

DEMO GÖRÜNÜM

Blogger Hesabımızla Giriş Yapıyoruz.
Kumanda Paneli>Yerleşim>Gadget Ekle>Html/Javascript yolunu takip edip açılan gadgetin içerisine aşağıdaki kodu kopyalayıp-yapıştırıyoruz.

<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/AVvXsEh91k1Cb0c1IyZo-3AyVngOGxX4S2M3H9RwYRJlx4tCasQ4Dzru6NqyXfAgJUVy9Vr8jsWQ4VwpYU_LvivAP9fT8VbTx6ja5gXiccfqIBNLEJ1o5AMcRJTei5U8v1ZMhHGrzWnVFVzDweg/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/AVvXsEjtjhTdhOnUzNCq09q-CqFbVcMU-FoMQibM68s1pkLGw7oCWu0U4ImTdMzP8gx_fjV1HVaLtuYUZqRjCUI4dCFgiyszK6ucewVrP6vsTsv6ltmd_d0QFpkKW-eTziiwyIayUs4gEOrku3U/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/AVvXsEjMTvAbCp17tKN7XiUdzrLYX4SdTgopQqdHYpg8vadjNegh0gmVHHEEIQEyrm1BkJ3PsRKATGQZ4glp0rqFUWfoz6zb2MmHHqWXYiCWHX-0rgN-t1yyGuzrSCYIKdW0rkLnmbPxnOYoJGE/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/AVvXsEjN9HhmumFPS9bRh08rrY2UhQHSMriT2ACUsmghWtguRfpmuFVFt_uMTleLoTJXk7aq097F5npDbQUEBeg618ZLqM8NLLf1oucrNjRCIxtFCVrhvCZrhnBDiJFe4aY40_fTXjq8BoiYCmU/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/AVvXsEhj1-uE65Zj0JwPXTr5G9yUYugwCofanuidacAGtaIa7BBJhLU08039Mzm9Zo-TlnsfsYt26E0yCepydHwvHGTa6JnM0y5GmiTAdWmE46Uodap-bkqFn_V6gfrIu-AGUB5pCMPR0ps6lyc/s1600/helperblogger.com-1.png" /></a><span><h2>BAŞLIĞI BURAYA YAZIN</h2></span>
        </li>
        <li>
         <a href="#" title="Resim Açıklaması"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTey_3dnLDJ5w7gERiNJvJhwLT1o8LdP7QwKjaJN9KgmHskupFHrdadAsjG1g-WXDjACmoLQBE7-eSNpGIS5XTMC3ZiR2SmIGi4Z1fCYaEJ4aG1qlK8lhol-uoYWrA83KeitQP1Vh5unY/s1600/helperblogger.com-4.png" /></a>
         <span><h2>BAŞLIĞI BURAYA YAZIN</h2></span>
        </li>
        <li>
         <iframe src="http://blogokulu.org/" width="600" height="200" frameborder="0" scrolling="no"></iframe>
         <span><h2>BLOG OKULU</h2></span>
        </li>
        <li>
         <a href="#" title="Resim Açıklaması"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWI7oOakKm4S5iYaP6679em7FTv1XTizQuNPalWeEsFTccJ0wRtPU51b3ZCyX1nnOQh-7ZHkSM7aN5SuivOpglR_8bShJNbjJvxF4mAqGVguMD6sWAGvgZNYglHzgjTFpo_G_tmLckDO0/s1600/helperblogger.com-3.png" /></a>
        </li>
       </ul>
      </div>
      <div id="progress">
      </div>
      <div id="overlay">
      </div>
      <div id="pause">
      </div>
     </div>
    </div>

kod içerisinde:

# :resme tılayınca açılmasını istediğiniz URL adresini yazıyorsunuz.
Resim Açıklaması:Maus ile resmin üzerine gelince çıkacak kısa açıklamayı buraya yazın.
BAŞLIĞI BURAYA YAZIN:Slayt alanında Görünecek başlığı buraya yazıyoruz.

<li> <iframe src="http://blogokulu.org/" width="600" height="200" frameborder="0" scrolling="no"></iframe> <span><h2>BLOG OKULU</h2></span> </li>

kodu ise; slayt alanında web sitesi görüntülemek istersiniz diye ekstradan koyduğum bir kod.http://blogokulu.org yerine görüntülemek istediğiniz web sitesinin adresini yazın.Eğer web sitesi görüntülemek istemiyorsanız bu kodu silebilirsiniz.
Son olarak eklediğimiz gadgeti kaydedip başlık kısmının hemen altına yada blog kayıtlarının hemen üstüne sürükleyip bırakıyoruz.

BLOG OKULU

Merhabalar, 2012 yılından beri editörlüğünü yaptığım blogokulu.org sitesinde blogger kullanıcıları için gerekli olan bir çok bilgiyi bulabilrsiniz.Blogger temaları,blogger eklentileri ve blogger dersleri ile blog yazarlarına elimizden geldiğince yardımcı olmaya çalışıyoruz.

7 yorum:

WebSeyyahi25 Haziran 2012 15:52

çok pratik ve güzel
YanıtlaSil
Yanıtlar
Blog Okulu25 Haziran 2012 22:00

beğenmenize sevindim.
YanıtlaSil
Yanıtlar
deniz5 Temmuz 2012 20:37

paylaşım için tyeşekkürler..güzel bir paylaşım ancak benim bloguma uyguladıgım zaman yazdıklarımın altında kalıyor..yazdıklarımı biraz daha aşağıya nasıl ala bilirirm bir bilginiz varsa söyleyebilirsinseni z iyi olur..teşekkürler
YanıtlaSil
Yanıtlar
Blog Okulu5 Temmuz 2012 23:33

eklediğiniz gadgeti blog kayıtlarının üstüne sürükleyip bırakırsanız yazdıklarınızın üzerinde çıkacaktır.
YanıtlaSil
Yanıtlar
Deniz Adam11 Ekim 2012 04:49

Slaytla ilgili bir türlü içinden çıkamadığım bir durum var. Şöyle ki; ben sadece 2 adet slayt penceresi aksın istiyorum ve ikinciden sonra tekrar birinciye dönerek devam etsin... Ne yaptıysam bu işi başaramadım, illa 4 ya da 5 slayt ilerlemesi gerekiyor ve sonra başa dönüyor! Bu konuda bir fikri olan var mı?
YanıtlaSil
Yanıtlar
Blog Okulu11 Ekim 2012 15:09

<li>..............</li> kodları arasında bulunan resim linklerini silin.Örnek:
<li> <a href="#" title="Resim Açıklaması"><img src="http://2.bp.blogspot.com/-DX76JjnhxSU/T-SKKTpfngI/AAAAAAAACBc/QFZHfs5Ennw/s1600/helperblogger.com-1.png" /></a><span><h2>BAŞLIĞI BURAYA YAZIN</h2></span> </li> şeklindeki kod bir resme ait olan koddur bu resmi kaldırmak istiyorsanız bu kodu silin,kaç resim görüntüliyecekseniz ona göre bu kodların sayısını ayarlıyorsunuz.
YanıtlaSil
Yanıtlar
Deniz Adam11 Ekim 2012 19:55

Aynen dediğin gibi bende bunu yapmıştım ama zaten işin ilginç yanı da burada başlıyor çünkü resim kodları ve den itibaren silmeme rağmen ve hatta daha bir sürü şey denememe rağmen sanki kod 4-5 sayfa gitmek için başka bir scriptten komut alıyor gibi! Kısacası olmuyor o yöntemle
YanıtlaSil
Yanıtlar

Yorum ekle

Belirtmek istediğiniz farklı konular varsa Burdan Yazabilrisiniz...

Blogger Slayt Alanı Eklentisi

BLOG OKULU

Benzer Yazılar

7 yorum: