Menu
» » Blogger Slayt Alan Eklentisi

A+ A-

      Yep yeni bir slayt alanı ile daha karşınızdayız.Blogger kullanıcıları için tasarlanmış eklemesi belkide en kolay olanslayt 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.
      
                                      BLOGGER BLOGUNUZA EKLEMEK İÇİN;
izlenecek yolları sırasıyla;
1. Blogger Hesabınızla giriş yapın.
2. Kumanda Paneli>Yerleşim>Gadget Ekle>Javascript yolunu izliyoruz.Aşağıdaki kodları gadgetimize ekliyoruz ve kaydetiyoruz.

<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/AVvXsEhbcT0IlauLI4eW1moVk34ap5E69IUDXPzBoBywksH3CJCSYj2stZ8Q1Ls8xrrXo2gPG2Vq8Il7FB2bqol0CXfGsqhHAm55-3rYzLhau5KtJUF2vAihv472Q0HBaEqm2bwFPp76fcnYwZQ/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/AVvXsEi3a3T7WhobJwVUP71IRJIuustmyHlzKNTRn7rYHbckQ7E9rhkfY78LFmWEZy-a2xX732pEPAkj-ij6KnzD2cPURl8vCShHtHR0T9LuOLxbOLmMuJYLPUU20SMfrhc6mWctShdCgI7vNtw/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/AVvXsEjRoTPK1z-wQmLy3eAl7oL7fAidaA-aCfxJpKpwj5GzTHzcSVCNfOrOJBYFpvrsuskZBX3f1yHYbc4UkFbpdbDyggWEsYX992LO9DDHY77RZcTU5PtnLdOtFGDB0ov_V7JKU3ViBkETFAg/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/AVvXsEjjzFPKtF-P7LsDJGvGtEIeNXK2SytNcDzhrqdsgbRUwIQ_JuFT8Pa3MZ0AzfXThMBdyuOJ5PO-Y4w5yIoDIbhqsJMflR9qbAYIjV2A479sRKS8orLORJ-nKn49AXDatBfcq5GnJEZqDrQ/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/AVvXsEgXukBcL8hOeJ1Vd30VAc35FR8gyDRGTOPD0W1MiqZpgm-4RZ4gJZugzBQleVGZDojqWNtNOrTKivkS8z5fXopIwb_oZqi7S2F6BB12fQ376P4-Vl4H4tKL63OmFpSI6c99XE0pVHNJfNw/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/AVvXsEgvDEJXwgz3Z7x_7PNojcFDA_9LDrdmw7AiQxSXxwiqj9ev3zbXQoWvzGwjqfyjExIxT4w6-GtngjurwsnFY9Bw5coMpP2jW6n-NLQxtfdfamng01YOzaKJlpyozKI-DgyVpsY04khkhhE/s1600/helperblogger.com-4.png" /></a>
         <span><h2>BAŞLIĞI BURAYA YAZIN</h2></span>
        </li>
        <li>
         <iframe src="http://etralibela-61.blogspot.com/" width="600" height="200" frameborder="0" scrolling="no"></iframe>
         <span><h2>BİLGİ CAFEM 61</h2></span>
        </li>
        <li>
         <a href="#" title="Resim Açıklaması"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTpV8AHJgNzlTBRheJVBeEp4ttUSBzN3IhePBpbwKKqHFgqRVDj2LcuHhCp57pN_dBBQ9MJ_wh5GVZ42p167O5Q6Q05GRdiMpCXXyDcMqydobxsR5hlyhSWuCenaHljJbUmzXclD-YsHo/s1600/helperblogger.com-3.png" /></a>
        </li>
       </ul>
      </div>
      <div id="progress">
      </div>
      <div id="overlay">
      </div>
      <div id="pause">
      </div>
     </div>
    </div>

            Kodlar içerisinde:

  1. #: Resme tıkladığınızda açılmasını istediğiniz URL adresini yazın.
  2. Resim Açıklaması:Maus ile resmin üzerine gelince çıkacak kısa açıklamı buraya yazın
  3. BAŞLIĞI BURAYA YAZIN:Slayt alanında görünecek başlığı yazın
 
<li> <iframe src="http://etralibela-61.blogspot.com" width="600" height="200" frameborder="0" scrolling="no"></iframe> <span><h2>BİLGİ CAFEM 61</h2></span> </li>

    ***Yukardaki kodlar içinde değiştirmeniz gereken yerler;
   Mavi ile belirtilmiş http://etralibela-61.blogspot.com ve BİLGİ CAFEM 61 yazan yerlere kendi belirtmek istediğiniz adresleri yazın.

                                                       
Bizi Takip Edin
Pinterest Facebook Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın.



YAZAR :
Etiketler:

PAYLAŞ:

zaman: 17:58
 
Top