Blogger Açıklamalı Hareketli Resim Slider Eklentisi

Blogger Açıklamalı Hareketli Resim Slider Eklentisi

Blogunuzda üstüne gelince yazı gösteren hareketli resim slider eklentisi istermiydiniz.Eklentimiz çok büyük olmayıp çokta küçükde değil.

Blogger Açıklamalı Hareketli Resim Slider Eklentisi Nasıl Eklenir ?

• Blogger kumanda paneline geliyoruz.
• Hemen sol taraftan Şablon>HTML'yi Düzenle yerine tıklıyoruz.Açılan sayfada Ctrl + f yardımıyla </style> kodunu aratıyoruz.Aratıktan sonra kodumuzu </style> kodunun hemen üstüne  ekliyoruz.
• Widget olarak eklemek içinse Blogger>Yerleşim>Gadget ekle>HTML/JavaScript alana kodumuzu yapıştırıyoruz.
• Sayfa içinde eklemek içinse Oluştur'un yanındaki HTML kısmına yapıştırıyoruz.

Kod:

<style>#bt_imageeffect {   margin: 20px auto;  width: 100%;min-height: 300px; padding: 20px 0;  text-align: center; }.galleryItem { display: inline-block;; position: relative; width: 250px; height: 250px; padding: 0;margin: 0 20px; border: solid 10px #fff;

 -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.25); box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.25);}.galleryItem img { width: 250px;height: 250px;}.caption { position: relative; display: inline-block; width: 250px; height: 250px; z-index: 10;}.caption::before { content: attr(data-title); position: absolute;top: 0; left: 0; width: 250px; height: 0;  font-family: 'Croissant One', cursive; font-size: 1.8em;font-weight: 600; line-height: 1.4em;color: #086FA1; background: #fff; overflow: hidden; -webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -ms-transition: all 0.9s ease; -o-transition: all 0.9s ease; transition: all 0.9s ease;}.caption::after { content: attr(data-description); position: absolute; bottom: -0;left: 0; width: 250px;height: 0;  font-family: 'Poiret One', cursive; font-size: 1.1em; font-weight: 400; line-height: 1.4em;color: #fff; background: #222; overflow: hidden;

 -webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -ms-transition: all 0.9s ease; -o-transition: all 0.9s ease; transition: all 0.9s ease;}.caption:hover::before { height: 125px;}.caption:hover::after { bottom: 0;height: 125px;}</style>

<div id="bt_imageeffect"><li class="galleryItem">  <a class="caption" data-description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id sapien condimentum, sagittis erat rhoncus, bibendum nisi." data-title="Nature Scene" href="http://www.webkenti.net/">  <img alt="Nature Scene" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj0xUX_W3UB4utlT14ZibsFTOGoWsSSki_FbDWCM6X9aSgUTdjLjiODJTtiHMSKwqcwbTgmD_5pLj23F5zrsd71R3XLk6ucuJCwGWoajk-H2h8TN_4W5TZXLzVhPhs3xysgnO0u3B-zC-5/s200/combothundercats-logo.jpg"/>  </a></li><li class="galleryItem">  <a class="caption" data-description="Vivamus ut sem id magna consequat porta vitae ut sem. Proin eget commodo risus, vitae blandit velit. " data-title="SunFlower" href="#">  <img alt="Sunflower" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKm-pahOR055UPEmix4Y8HnbAZkEfXWWBgsqzN8TetGDlkrzkRC8NdoJ-kKyoNpPN1juCGQYdhyphenhyphenTiJJNIq6Ma2P4M4f-fiF6jj_LQ9LZniXtujCy3YrqsMjg-FfI6EUXVN_VZkzxFYOSs8/s1600/WKavatar.png" />  </a></li></div>

• Kırmızı renkle gösterdiğim yerlere açıklamanızı yazıyorsunuz. 
• Turuncu renkle gösterdiğim yerlere başlığımızın adını yazıyoruz. 
• Yeşil renkle gösterdiğim yerlere resme tıkladığında nereye gitmesini istiyorsanız linki yapıştırın.
• Pembe renkle gösterdiğim yerlere resmimizin urlsini yazıyorsunuz.