Samir

 

Blogger'da Slayt Gösterisi Yapın

Kurulumu kolay slayt gösterisi, başlıkla birlikte bazı harika resimler göstermenize izin verecektir. İsterseniz başlığa bağlantılar da ekleyebilirsiniz. Resmin bağlantılarını resim bağlantılarınızla değiştirin ve bu slayt gösterisi blogunuzda çalışmaya hazır.

Bu adımları uygulamadan önce lütfen resimlerinizi yükleyin ve resim URL'sini kopyalayın. Bu gadget'ın daha iyi çalışabilmesi için resimlerinizin aynı boyutta olması gerekir. Resimlerinizi yazı düzenleyiciye yükleyebilir ve yazı düzenleyicideyken HTML'yi tıklayarak resim URL'sini alabilirsiniz.

Tüm resimlerinizi bir kerede yükleyin ve tüm resim URL'sini not defterine veya sahip olduğunuz herhangi bir metin düzenleyiciye kopyalayın. Bu şekilde, bu gadget'ı kolayca ve herhangi bir hata yapmadan ekleyebilirsiniz.
Kısa yapacağım çünkü çok basit.

Takip edilecek adımlar

• Blogger profilinize giriş yapın.
• ' Düzen ' sayfasında ' Gadget Ekle'ye tıklayın
• ' HTML/Javascript'i seçin

• Şimdi Bu Kodu Kopyalayıp Yapıştırın

<div class="slideshow-container">
<div class="mySlides soluk">
  <div class="numbertext">1 / 3</div>
  <img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3ePHRjOJEQb7MdnZxXhLLk30QFpw7w4H1cUnvfJvXimqFvLdkXHClPd42_0a_gBh4jMe8R6xDap65Efo4soCWGU3RLG_IhQcgWT1IOkcexbf4cKAw5H-Z5fmm3l4QgkBXOOJBfHuGmYTn/s1600/407390.jpg " style="width:100%">
   <div class=" text">Altyazı Metni</div>
</div>
<div class="mySlides soluk">
  <div class="numbertext">2 / 3</div>
  <img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5CYWFdrxo6_7PFYIta05GpqKNcqhqCegqrABgVOVnjfYZdqvlA5zpZOz-j7qoRsq638HILn_sHN3qI-gOOIDExVzsRv7yZIRYxyTR-B56pNI_rGXSOl-8u7nDg-M1H4hJuIdDjpa1fFcl/s1600/abstract-wallpapers-1080p-hd.jpg " class ="">divs="%"
   ="text">İkinci Altyazı</div>
</div>
<div class="mySlides soluk">
  <div class="numbertext">3 / 3</div>
  <img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjukMaEdBAFh6A7tBX8PgcBwjt9mLaGYgOihhmlrgAYxRapkUERXmykgUERTZWyMeFEM-_W9Fsppog6hMZsm6oqN34YFj_hjbRRJQ6rSmBi7Uzkc7gZe6l4MkpSEtxXnwqzOje6clZvpjIZ/s1600/fire-abstract-HD-wallpaper.jpg "% style="width ">
   <div class="text">Üçüncü Başlık</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="metin hizalama:merkez">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
  showSlides(slideIndex += n);
}
function currentSlide(n) {
  showSlides(slideIndex = n);
}
fonksiyon showSlides(n) {
  var i;
  var slaytlar = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slaytlar.uzunluk) {slideIndex = 1} 
  if (n < 1) {slideIndex = slaytlar.uzunluk} ;
  for (i = 0; i < slaytlar.uzunluk; i++) {
     slaytlar[i].style.display = "yok";
  }
  for (i = 0; i < nokta.uzunluk; i++) {
     dots[i].classList.remove("etkin");
  }
  slaytlar[slideIndex-1].style.display = "blok";
  dots[slideIndex-1].classList.add("etkin");
}
</script>

Not- Lütfen mavi ile vurgulanan üç satırın tamamındaki resim URL'sini değiştirin.

• Şimdi bu kodu yapıştırın 

Şablon > Özelleştir > Gelişmiş > CSS Ekle

 * {kutu boyutlandırma:kenarlık kutusu}
body {font-family: Verdana,sans-serif;margin:0}
/* Slayt gösterisi kapsayıcısı */
.slideshow-container {
  maksimum genişlik: 1000 piksel;
  pozisyon: göreceli;
  kenar boşluğu: otomatik;
}
/* Sonraki ve önceki düğmeler */
.prev, .sonraki {
  imleç: işaretçi;
  konum: mutlak;
  üst: 0;
  üst: %50;
  genişlik: otomatik;
  dolgu: 16 piksel;
  üst kenar boşluğu: -22px;
  Beyaz renk;
  yazı tipi ağırlığı: kalın;
  yazı tipi boyutu: 18 piksel;
  geçiş: 0.6s kolaylık;
  sınır yarıçapı: 0 3px 3px 0;
}
/* "Sonraki düğmesini" sağa konumlandırın */
.sonraki {
  sağ: 0;
  sınır yarıçapı: 3px 0 0 3px;
}
/* Fareyle üzerine gelindiğinde, biraz şeffaf olacak şekilde siyah bir arka plan rengi ekleyin */
.prev:hover, .next:hover {
  arka plan rengi: rgba(0,0,0,0.8);
}
/* Başlık metni */
.Metin {
  renk: #f2f2f2;
  yazı tipi boyutu: 15 piksel;
  dolgu: 8px 12px;
  konum: mutlak;
  alt: 8 piksel;
  genişlik: %100;
  metin hizalama: merkez;
}
/* Sayı metni (1/3 vb.) */
.numbertext {
  renk: #f2f2f2;
  yazı tipi boyutu: 12 piksel;
  dolgu: 8px 12px;
  konum: mutlak;
  üst: 0;
}
/* Noktalar/madde işaretleri/göstergeler */
.nokta {
  imleç:işaretçi;
  yükseklik: 13 piksel;
  genişlik: 13 piksel;
  kenar boşluğu: 0 2 piksel;
  arka plan rengi: #bbb;
  sınır yarıçapı: %50;
  ekran: satır içi blok;
  geçiş: arka plan rengi 0,6s kolaylık;
}
.active, .dot:hover {
  arka plan rengi: #717171;
}
/* Soluk animasyon */
.solmak {
  -webkit-animasyon-adı: solmaya;
  -webkit-animasyon-süresi: 1.5s;
  animasyon adı: solmaya;
  animasyon süresi: 1.5s;
}
@-webkit-ana kareler soluyor {
  {opaklıktan: .4}
  {opaklığa: 1}
}
@keyframes soluyor {
  {opaklıktan: .4}
  {opaklığa: 1}
}
/* Daha küçük ekranlarda metin boyutunu küçült */
@media yalnızca ekran ve (maksimum genişlik: 300 piksel) {
  .slprev, .slnext,.text {font-size: 11px}
}

• Şablonunuzu kaydedin ve slayt gösteriniz hazır. 

Özelleştirmek

• Resmi değiştirmek için lütfen URL'yi mavi olarak değiştirin

<img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3ePHRjOJEQb7MdnZxXhLLk30QFpw7w4H1cUnvfJvXimqFvLdkXHClPd42_0a_gBh4jMe8R6xDap65Efo4soCWGU3RLG_IhQcgWT1IOkcexbf4cKAw5H-Z5fmm3l4QgkBXOOJBfHuGmYTn/s1600/407390.jpg " style="width:100%">

• Resmin üzerindeki başlığı değiştirmek için. Lütfen metni mavi olarak değiştirin.

<div class="text"> İkinci Altyazı </div>

• Resim başlığına bir bağlantı eklemek için lütfen yukarıdaki satırı bu satırla değiştirin.

<div class="text"><a href=" Bağlantıyı buraya ekleyin ">İkinci Başlık</a></div>