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

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




<style type="text/css">
#mcis {
display: none;
}
#sliderFrame {
position: relative;
width: 500px;
margin: 0 auto;
border:5px solid #000;

}
#slider {
width: 500px;
height: 218px;
background: #fff url(http://2.bp.blogspot.com/-zZroU7UOnn4/UWCR0O1RzRI/AAAAAAAAJo0/WH5aOsNRf0Y/s1600/yukleniyor.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%;
}
#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);
}

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;
}
div.navBulletsWrapper div {
width: 11px;
height: 11px;
background: transparent url(http://4.bp.blogspot.com/-9YohQAuUPjQ/UWCR0PR06xI/AAAAAAAAJow/57tX7Pg0PPk/s1600/bullet.png) no-repeat 0 0;
float: left;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
margin-right: 12px;
position: relative;
}
div.navBulletsWrapper div.active {
background-position: 0 -11px;
}
</style>
<script src="https://googledrive.com/host/0B_1mqJd2tC8qLXpKRHhzd2RXTlU"  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>
<center><img src="http://2.bp.blogspot.com/-vdLtULCaGC4/UPct2mOBx4I/AAAAAAAAHaI/uHgNIyC6Dng/s1600/shadow1.png" width="480px"/></center>



width: 500px : 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: 218px : 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ı.

width="480px" : manşet alanının altındaki gölge genişliğidir. Manşet alanının genişliğine göre ayarlanmalıdır. Manşet alanından daha kısa olması tavsiye edilir.


top: 250px; left: 190px; : Navigasyon butonlarının konumu

Meraklısına .js kodu



*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 960 x 380 ise resimlerinizin boyutuda 960 x 380 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.



26 yorum:

  1. http://webseyyahi.blogspot.com/2013/01/javascript-resim-slayt-manset-slider.html

    v:1.1 re göre
    gölge ve navigasyon butonları eklenmiştir.

    YanıtlaSil
  2. Teşekkürler bilgi için

    YanıtlaSil
    Yanıtlar
    1. Rica ederiz, güzel blogunuzu bizlerde takip ediyoruz.

      Sil
  3. sadece nasıl ana sayfada gözüktürebiliriz

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

      Sil
  4. tşkk işimi gördü

    YanıtlaSil
  5. Her şey tamam fakat bir türlü resimle çerçeveyi aynı yapamıyorum :/

    YanıtlaSil
    Yanıtlar
    1. Ekleyeceğiniz resim, çerçeve ile aynı boyutta olması için resminde aynı boyutta olması gerekir yani çerçeveniz 960 x 380 ise resimlerinizin boyutuda 960 x 380 olmalıdır

      Sil
  6. BİLADER BUNU OTOMATİK YAPARMISN

    YanıtlaSil
    Yanıtlar
    1. Birebir yardıma ihtiyacınız varsa
      PayPal hesabımıza 5€ veya 5$ veya 10 TL yatırabilirsiniz.
      yada
      TEMA vakfına bir ağaç dikimi için yaptığınız bağışın makbuzunu bize iletebilirsiniz.

      Sil
  7. Merhaba,

    Öncelikle böyle bir hizmet verdiğiniz için size çok teşekkürü bir borç bilirim.
    Sorunum şu: Bu manşeti web sayfama koydum fakat sayfanın tam ortasında duruyor.Kodlarda oynama yaparak sol tarafa almak mümkün mü? Kodlarla az çok aram iyidir.Bana yardımcı olursanız çok sevinirim.

    YanıtlaSil
    Yanıtlar
    1. Mümkün, pozisyonları left yapmak gerekir. kodu düzenlerseniz olur. Artık biz ŞU nedenden yardımı bıraktık

      Sil
  8. Size can-ı gönülden katılıyorum hocam...Ayrıca paylaşımlarınız için teşekkürler...

    YanıtlaSil
  9. Teşekkürler fakat tüm pozisyonları LEFT yapmama rağmen slayt,sitenin tam ortasında çıkıyor????

    Bu durumu anlamış değilim :(

    YanıtlaSil
  10. Gardaş slayt güzelmiş. Slaytın hızını nasıl ayarlıyoruz.

    YanıtlaSil
  11. öncelikle teşekkürler kardeş.orta bölümünde her iki tarafta bulunan geçiş butonu yada sonraki resime geçiş butonunu nasıl koyabiliriz? teşekkürler

    YanıtlaSil
    Yanıtlar
    1. > < navigasyon butonu eklemek mümkün ama baştan kod yazmak gerekir. Ben yapamıyacağım için üzgünüm.

      Sil
  12. Elinize sağlık yazı için. Ben yayın sayfasında bu işlemi yaptım. sonuç oldu da. Ama devamını oku eklentisinin olduğu ana sayfada kodlar gözüküyor. Kod yerine yazımın ilk kısmını gösterme şansım var mı acaba. Teşekkürler

    YanıtlaSil
    Yanıtlar
    1. Anladım,
      siz yayın içi kullanmışsınız yani kodları eklemeden hemen önce
      <!--more-->
      eklemeniz yeterli olur

      Sil
    2. ilginiz için teşekkürler ama yanlış anlamadıysam style type="text/css"> kısmından hemen önce ekleyin diyorsunuz. Bu şekilde yaptım ama ana sayfada bu sefer ne resim ne kod ne de herhangi bir yazı gözüküyor. Ben isterim ki diğer devamını oku eklentilerinde olduğu gibi bir tane resim açıklayıcı 5-6 satırdan oluşan yazının ilk kısmı gözüksün. Devamını oku ya tıklayınca da yayın sayfasına gitsin. Ana sayfada kodlar gözükmesin. Ben her yayınımı bu şekilde sunmak istiyorum yapabilirsem bundan sonra. Şimdiden teşekkürler.

      Sil
    3. Tamam
      önce şablon sonra yazı yazıldığı için oluyor.
      Şablon slideri oto üste atması için kod yazılabilir. En kolayı pagetype ile sorun çözün bence
      http://webseyyahi.blogspot.com.tr/2012/12/blogger-eklentileriniz-widget-gadget.html

      birde anasayfada başka bir slider var ve şablon kodlarınında uyumlu ise sorunsuz tüm sliderler bir arada çalışır.

      Sil
  13. Bonjour, Je vous remercie pour ce code qui donne un très bon résultat, mais il ne fonctionne plus depuis 1 semaine, avez vous une solution?

    YanıtlaSil
    Yanıtlar
    1. Selamlar , Google code kapandığı için js kodları silinmiş. Şimdi düzeldi. Yeni kodları kullanarak kullanabilirsiniz.

      Sil