Blogger Resim Slaytı (Manşet, Slider) Eklentisi

Hızlı , pratik , reklamsız, ücretsiz kısaca sade bir Slider (Slayt, Manşet) alanı isteyenler için kullanımı kolay JavaScript resim slayt eklentisi.








<style type="text/css">
#mcis {
display: none;
}
#sliderFrame {
position: relative;
width: 960px;
margin: 0 auto;
        border:5px solid #000;
}
#slider {
width: 960px;
height: 380px;
background: #fff url(http://1.bp.blogspot.com/-8kJodEB2xXM/UQa2w8YmGhI/AAAAAAAAICs/DaaLYqGSRhU/s1600/loading.gif) no-repeat 50% 50%;
position: relative;
margin: 0 auto;
box-shadow: 0px 1px 5px #999999;
}
#slider img {
position: absolute;
border: none;
display: none;
}
#slider a.imgLink {
z-index: 2;
display: none;
position: absolute;
top: 0px;
left: 0px;
border: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
div.mc-caption-bg, div.mc-caption-bg2 {
position: absolute;
width: 100%;
height: auto;
padding: 0;
left: 0px;
bottom: 0px;
z-index: 3;
overflow: hidden;
font-size: 0;
}
div.mc-caption-bg {
background-color: black;
}
div.mc-caption {
font: bold 14px/20px Arial;
color: #EEE;
z-index: 4;
padding: 10px 0;
text-align: center;
}
div.mc-caption a {
color: #FB0;
}
div.mc-caption a:hover {
color: #DA0;
}
div.navBulletsWrapper {
top: 250px;
left: 190px;
width: 150px;
background: none;
padding-left: 20px;
position: relative;
z-index: 5;
cursor: pointer;
}
#slider {
transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
</style>
<script src="http://webseyyahi-project.googlecode.com/files/webseyyahi.js" type="text/javascript"></script>
<div id="sliderFrame">
     <div id="ribbon"></div>
            <div id="slider">
<a href="#"><img src="RESİM URL'" alt="BAŞLIK"/></a>
<a href="#"><img src="RESİM URL'" alt="BAŞLIK"/></a>
<a href="#"><img src="RESİM URL'" alt="BAŞLIK"/></a>
<a href="#"><img src="RESİM URL'" alt="BAŞLIK"/></a>
<a href="#"><img src="RESİM URL'" alt="BAŞLIK"/></a>
                </div></div>





width: 960px: Slayt alanının genişliği
Buradaki 960 değerini değiştirerek slayt alanının çerçevesinin genişliğini belirleyebilirsiniz.

height: 380px; : Slayt alanının yüksekliği
Buradaki 380 değerini değiştirerek slayt alanının çerçevesinin yüksekliğini belirleyebilirsiniz.

: Resime tıklandığında gidilecek adres
# yerine tıklandığında gidilecek bir domain (http://webseyyahi.blogspot.com/) ekleyebilirsiniz

RESİM URL : Resmin url adresi
Blogunuzdaki istediğiniz bir resmin url adresini yapıştırın. (Gözükmesini istediğiniz resmin üstüne gelin sağ tık URL Kopyala)

BAŞLIK : Slayt alanın altında görünen başlık
Slayt alanında görünmesini istediğiniz resmin altında yazan yazı.

*Blogunuzda göstermek istediğiniz yere Blogger Kullanıcı paneli > Yerleşim > Gadget ekle > HTML/JavaScript ekle   yolunu izleyerek ekleyebilirsiniz.

* Slayt alanını manşet bölümü olarak da kullanabilirsiniz.

* <a href="#"><img src="RESİM URL'" alt="BAŞLIK"/></a>  nin sayısını artırarak gösterilen resim sayısını artırabilirsiniz.

* Ekleyeceğiniz resim çerçeve ile aynı boyutta olması için resminde aynı boyutta olması gerekir yani çerçeveniz 960px * 380px ise resimlerinizin boyutuda 960px * 380px olmalıdır.

* Reklam içermez
* Free lisanstır istediğiniz gibi düzenleyebilirsiniz.
* Jquery kullanmadığından hızlıdır ve sayfayı yavaşlatmaz.
* Slayt geçis animasyonunu ve hızını http://webseyyahi-project.googlecode.com/files/webseyyahi.js
 dosyanını açık bıraktım istediğiniz değişikliği yapabilirsiniz.

Meraklısına .js kodu :




Not : Bu slideri ben yazmadım sadece kodları düzenledim. Kodlar Free lisans ve açıktır. Kodların kaynağını http://www.menucool.com/ sitesinden bulabilirsiniz. Ayrıca burada değişik slider örnekleride var istediğinizi kullanabilirsiniz.

LİVE DEMO İÇİN TIKLAYIN

28 yorum:

  1. Yanıtlar
    1. Eklemek istediğiniz kodu gönder yanlışlık nerede bakalım yardımcı oluruz.
      yapılmış bir örnek görmek istersen

      http://dekorasyonyeni.blogspot.com/

      Sil
  2. bu kodu bloguma uyguladım. boyutlandırmasını yaptım ama fotoğraflar küçük gözüküyor. büyük olmasını istiyorum. yardımcı olur musunuz?

    YanıtlaSil
    Yanıtlar
    1. Blog url yazsaydınız bakabilirdim, yada g+ da blog adresinizin linkini ekleyiniz.
      * Ekleyeceğiniz resim çerçeve ile aynı boyutta olması için resminde aynı boyutta olması gerekir yani çerçeveniz 960px x 380px ise resimlerinizin boyutuda 960px x 380px olmalıdır.

      Sil
  3. bahsettiğiniz gibi ekledikten sonra blogun kendisinin küçültmesi gibi bir durum olabilir mi? (şuan yapamıyorum)veya şöyle söyleyeyim http://ozlemkck.blogspot.com/p/aclr-kapanr-div.html bu sayfada tıklanınca açılan alanların içine bu resim geçişlerini eklemeye çalıştım. buradan yola çıkarak yardımcı olabilir misiniz?

    YanıtlaSil
    Yanıtlar
    1. Özlem hanım siz dinamik görünümler için olan şablon biçimlendirmesini kullanıyorsunuz, dinamik blogger şablonları şimdilik bu ve benzeri hiç bir slider widgetini desteklemediğinden çalışmaz.
      Dinamik görünümler şuan geliştirme aşamasında ve daha çok dokunmatik ekranlar için tasarlanmış yapılar olduğu için şimdilik bazı eksiklikleri var.
      dinamik görünümler için daha fazla bilgi almak için
      http://support.google.com/blogger/bin/answer.py?hl=tr&answer=1229061
      bakabilirsiniz.

      Sil
  4. İlginiz için teşekkür ederim. Peki bu tarz geçişler yapabileceğim temalar var mıdır? Varsa, linkini verdiğim sayfada ki gibi tıklanınca açılan menüden ekleyebilir miyim. Bunlar hakkında bilginiz var mıdır?

    YanıtlaSil
    Yanıtlar
    1. Blogger kullanıcı panelinden > Şablon > istediğinizi seçebilirsiniz.
      Yada hazır blogger şablonu yükleyebilirsiniz.
      Blogger konusunda yeniyseniz varsayılan şablonlardan istediğinizi seçip uygula dedikten sonra biraz admin panelini karıştırmanızı ve http://support.google.com/blogger/?hl=tr
      konularına gözatmanızı öneririm.

      Sil
  5. Teşekkür ederim. Biraz daha araştırayım. Bahsettiğim şeyleri yapabilirsem sizinle paylaşacağım.

    YanıtlaSil
    Yanıtlar
    1. Bildiğimiz kadarıyla yardımcı olmaya çalışırız. :)

      Sil
  6. Yanıtlar
    1. önce resimlerin url adresi olarak eklemeniz lazım

      Sil
  7. Post sayfasında gözükmemesi için ne yapmak gerekir?

    YanıtlaSil
    Yanıtlar
    1. HTML / JAVASCRİPT EKLEMEK
      Widget (gadget) olarak eklemek için :
      Blogger > Yerleşim > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz

      Sayfa içinde kullanmak için :
      Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.

      Sil
  8. Blogger > Yerleşim > Gadget ekle > HTML/JavaScript yolunu izleyerek ana sayfaya ekliyorum zaten. Fakat herhangi bir yazıya tıklandığında yazının üzerinde de gözüküyor. Bunu önlemek için ne yapmak gerek?

    YanıtlaSil
    Yanıtlar
    1. http://webseyyahi.blogspot.com.tr/2012/12/blogger-eklentileriniz-widget-gadget.html

      Sil
  9. Animasyonun geçiş hızını nasıl ayarlayabiliriz?

    YanıtlaSil
    Yanıtlar
    1. .js pakedinin içini düzenleyerek.

      Sil
  10. bende resim gözükmüyor ayrıca başlıklar resim urlsinin ismi olarak gözüküyor nedeni ne olabilir?

    YanıtlaSil
    Yanıtlar
    1. Açıklamadaki yazıları tam okuduğunuzu ve kod eklemeyi bildiğinizi varsayıyorum, başka kodlarla çakışmış olabilir. mesela sitede başka bir slider varsa if kodu atayarak sorun çözülür.

      Sil
  11. Altta yan yana slayt nasıl yapabiliriz

    YanıtlaSil
    Yanıtlar
    1. :) öncelikle daha sonsa ki sorularınıza net çözümler alabilmeniz için

      http://webseyyahi.blogspot.com.tr/2012/01/internetden-dogru-duzgun-soru-sormann.html

      Sonra şu

      http://webseyyahi.blogspot.com.tr/2014/11/kendi-resim-slayt-slider-manset-alann.html

      Sanırım sorunuza cevap olabilir.

      Sil
  12. Manşetin Ana Slaytın altındaki film şeridi gibi geçen küçük bir slaytı nasıl yapabiliriz? Oldu mu :)

    YanıtlaSil
    Yanıtlar
    1. Yapılabilir, kodları düzenlemek gerekir, boyu, eni, geçiş efekti falan, sitenize uygun hale dönüştürebilirsiniz. kodlar açık istediğiniz gibi düzenleyebilirsiniz,
      - Siz yaparmısınız blogum şu ?
      -Hayır yapmam, nedeni şurada yazıyor
      http://webseyyahi.blogspot.com.tr/2013/09/webseyyah-duyuru.html
      ilginize teşekkürler.

      Sil
  13. eyvallah hacı çok sağol

    YanıtlaSil
  14. kodu girdim ama resimler görünmüyor yardimci olurmusunuz.

    YanıtlaSil
    Yanıtlar
    1. Tabiki. Birebir Profesyonel Yardımlarımız Ve Danışmanlık Hizmetlerimiz Ücretli olduğunu hatırlatmak isteriz.

      Sil