Ana içeriğe atla

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

  1. Blogger Hesabımızla Giriş Yapıyoruz.
  2. 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://www.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://www.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://www.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.
Etiketler:

Yorumlar

WebSeyyahi dedi ki…
çok pratik ve güzel
25 Haziran 2012 15:52
Blog Okulu dedi ki…
 beğenmenize sevindim.
25 Haziran 2012 22:00
deniz dedi ki…
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
5 Temmuz 2012 20:37
Blog Okulu dedi ki…
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.
5 Temmuz 2012 23:33
Deniz Adam dedi ki…
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ı?
11 Ekim 2012 04:49
Blog Okulu dedi ki…
<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.
11 Ekim 2012 15:09
Deniz Adam dedi ki…
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
11 Ekim 2012 19:55

Yorum Gönder

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

Bu blogdaki popüler yayınlar

Blogger Arama Kutusu Ekle (Renkli)

Blogunuzdaki içerik sayınız arttıkça zamanla siz bile yazdığınız şeyi blogunuzda bulmak için baya bir vakit harcarsınız, birde blogunuza gelen ziyaretçileri düşünün, bu yüzden blogunuza gelen ziyaretçilerin aradığını rahatlıkla bulabilmesi için blogunuza mutlaka arama kutusu eklemelisiniz.Blogger kullanıcıları blogunuza özel entegrasyonu yapılmış ve temanızın rengine uygun arama kutusunu blogunuza basit bir yöntemle ekleyip ziyaretçilerinizin blogunuzda aradığını anında bulmalarına yardımcı olabilirsiniz. Arama kutularını blogunuza eklemek için: Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javasript yolunu takip edip hangi arama kutusunu blogumuza eklemek istiyorsak aşşağıdaki kodlardan ona ait olan kodu kopyalıyoruz, açılan gadgetimizin içine yapıştırıp kaydediyoruz. 1.Arama Kutusu Stili: <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL2qoP6OS9Baq9nf_keINdlxQLx8Nw07fwr-YowYEuE_tFmMaDVXELtSsqyZuM...
20 yorum
.

Bayraklı Google Translete Kodu-Sitene Dil Kodu

Blogumuza farklı ülkelerden ziyaretçiler gelebilir.Hepimiz dünyanın tüm dillerini okuyup anlayamayız.Yabancı bir blogu ziyaret ettiğimde sayfa linkini kopyalıyorum daha sonra google çevri bölümünden sitenin çevrisini yapıyorum.Fakat her defasında bu işlemi yapmak angarya geliyor kopyala-yapıştır-bekle, bu angaryadan yabancı ziyaretçilerininizi kurtarmanın vakti geldi artık.Sitenize ekleyeceğiniz bayraklı, flash ile yapılmış google translete kodunu sitenize ekleyip gelen ziyaretçilerin  ülkelerinin bayraklarının üzerine tıklayarak sitenizin bütün içeriklerini kendi dillerine çevirebilecekler.Eklentiyi blogubuza eklemek isterseniz. Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javascript yolunu takip edip aşşağıdaki kodu açılan gadgetimizin içine yapıştırıp kaydediyoruz.Ardından bayrakların, blogumuzda görünmesini istediğimiz yerine sürükleyip bırakıyoruz. <style> .google_translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0;...
6 yorum
.

Son Yorumlar Eklentisi-Blogger Son Yorumlar Eklentisi

Bloğunuza yapılan  Son Yorumlar ın bir köşede liste halinde görünmesini sağlayan "Son Yorumlar" Eklentisini  eklemenin çeşitli yöntemleri var.Bugün sizlere "Son Yorumlar" eklentisini bloğunuza nasıl ekliyebileceğinizi  iki yöntemle anlatacağız; 1.Yöntem: Bloğunuzun yönetim panelindeki Tasarım sayfasından "Son Yorumları" Gadget olarak ekleme yöntemi.  2.Yöntem: Bloggerde bulunan bir eklenti üzerinde yapacağımız ufak bir hile ile bloğumuza "son yorumlar" eklentisi ekliyeceğiz. 1.Yöntem: Bloğunuzun yönetim panelindeki Tasarım sayfasından "Son Yorumları" Gadget olarak ekleme yöntemi: Tasarım>Gadget Ekle>Html/Javascript Gadgetini seçiyoruz.Başlık olarak "Son Yorumlar" yada isteğinize göre bir başlık yazabilirsiniz.Başlığımızı yazdıktan sonra aşşağıdaki kodu kopyalayıp gadgete yapıştırıyoruz.Burda dikkat etmemiz gereken nokta kırmızıyla yazdığımız yere kendi site adresinizi yazmanız. <script style="text/javascrip...
5 yorum
.