Blogger İçin Harika Resim Slayt Eklentisi

Blogunuz için çok güzel bir resim slayt eklentisi, benim çok hoşuma gitti şahsi fikrim... 

Blogger Paneline Girin. .

Şablon Tıklıyoruz > HTML Düzenle > CTRL+F yardımı ile </head> kodunu buluyoruz ve aşağıdaki kodları hemen üstüne yerleştiriyoruz

<style>
  #rotatescroll {
    height: 300px;
    position: relative;
    width: 300px;
  }
  #rotatescroll .viewport { /* 
    height: 300px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    width: 300px
  }
  #rotatescroll .overview {
    left: 0;
    list-style: none; 
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
  }
  #rotatescroll .overview li { 
    float: left;
    height: 300px;
    position: relative;
    width: 300px;
  }
  #rotatescroll .overlay { 
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih8beHE3nDoA3Vxxb3GMF8wJPvDBKLQPHPGVp14PYtzMSN5Y3rb2XkhVQxsGStrjtssbIEsZ2EUoF3xG8UPVV-eaty721Y3160Q7BQLXDMb6-kYSg9BSaKe32HjvHbMAxeJLhMQv-5s4Ap/s1600/bg-rotatescroll.png) no-repeat 0 0;
    height: 300px;
    left: 0;
    position: absolute;
    top: 0;
    width:300px;
  }
  #rotatescroll .thumb { 
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdvhcUWNGEwsbjUj94EPFob8KehnmSpZblrnDKoQvcB7TLKzMHRj4Z8R5pda1Y4hqpZRR9-ikJvQTflAMjbo6zA7elhpSv13nmotEnJKO2zLyB7j7Nl1X6UPxHtfu-OaYNQ3G164redsGH/s1600/bg-thumb.png) no-repeat 0 0;
    cursor: pointer;
    height: 26px;
    left: 137px;
    position: absolute;
    top: -3px;
    width: 26px;
    z-index: 200;
  }
  #rotatescroll .dot { 
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMNXYeWVMykr1nZbIFMy6WFU0N_H7l6NFXrg2_OXAZOucfgmmk8AifP7vDev4UvheNfq4aGdwnwDtZZpXOQw5vDyRHrep7OKyjwBTVs_WTF3fG1iJP7lgHjfJEKrjEDfEzAzeBTTJGj6Rc/s1600/bg-dot.png) no-repeat 0 0;
    display: none;
    height: 12px;
    left: 155px;
    position: absolute;
    top: 3px;
    width: 12px;
    z-index: 100;
  }
  #rotatescroll .dot span { 
    display: none;
  }
</style>

Daha sonra Blogger Panelinden Yerleşim diyoruz Gatget Ekle ve içerikten HTML/JavaScript seçiyoruz.

<div id="rotatescroll">
  <div class="viewport">
    <ul class="overview">
      <li><img src="Resim Linki" /></li>
      <li><img src="Resim Linki" /></li>
      <li><img src="Resim Linki" /></li>
      <li><img src="Resim Linki" /></li>
      <li><img src="Resim Linki" /></li>
    </ul>
  </div>
  <div class="dot"></div>
  <div class="overlay"></div>
  <div class="thumb"></div>
</div>

<script type="text/javascript">
$(document).ready(function(){ $('#rotatescroll').tinycircleslider(); });
$('#rotatescroll').tinycircleslider({ interval: true, snaptodots: true });
</script>

Yukarıdaki kod içersinde bulunan "Resim Linki" bölümüne seçtiğiniz resimlerin linkini yerleştiriyorsunuz.


<iframe width="640" height="360" src="//www.youtube.com/embed/vClXihtsdgY?feature=player_embedded" frameborder="0" allowfullscreen></iframe>

Kategori: blogger