JavaScript Resimli Manşet Slayt eklentisi

JavaScript Resimli Manşet Slayt eklentisi
● JavaScript Image Slider For Blogger
● JavaScript Resimli Manşet Slayt eklentisi


Bugün sizlerle daha önce paylastığım Jquery Otomatik resim slayt galerisi ve Jquery slider manşet eklentisi yazılarımdan farklı olarak JavaScript versiyon resimli manşet slayt eklentisini paylaşacağım.
Ziyaretçilerinizi resimlerinizle dikkatini çekmek için kullanabileceğiniz Resimli Manşet Slayt eklentisi JavaScript versiyonu. Haber siteleri tarafından da kullanılan bu slayt manşet eklentisini sizde bloglarınız da kullanabilirsiniz. Resimleri ve linkleri değiştirip sürekli güncelleyebilir ve istediğiniz konuların tanıtımını yapabilirsiniz. Resimler sırayla altında kısa notlarla slayt olarak akar ve Jquery kullanılmadığı için blogu yavaşlatmaz.

Örnek Slayt

Fethiye Fethiye Limanı Fethiye Ölüdeniz Fethiye Saklıkent Çalış Plajı Fethiye

Bu slaytı blogunuza eklemek için;
1. Blogger Kumanda Panelinize gidin
2. Yerleşim tıklayın
3. Üst Bilginin altındaki yere Gadget/Widget Ekle
4. HTML / JavaScript seçeneğini seçin.
5. Aşağıdaki kodu kopyalayın ve yapıştırın.

<style type="text/css">
#mcis{display:none;}
#sliderFrame{position:relative;width:532px;border:5px solid #000;margin:0 auto;}
#ribbon{width:111px;height:111px;position:absolute;}
#slider{width:532px;height:300px;background:#fff url(http://2.bp.blogspot.com/-BLReN523CAY/UT6Mlea2VhI/AAAAAAAAAQg/PVNrzTjOz5A/s1600/loading.gif) no-repeat 50% 50%;position:relative;box-shadow:0 1px 5px #999;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);margin:0 auto;}
#slider img{position:absolute;border:none;display:none;}
#slider a.imgLink{z-index:2;display:none;position:absolute;top:0;left:0;border:0;width:100%;height:100%;margin:0;padding:0;}
div.mc-caption-bg,div.mc-caption-bg2{position:absolute;width:100%;height:auto;left:0;bottom:0;z-index:3;overflow:hidden;font-size:0;padding:0;}
div.mc-caption-bg{background-color:#000;}
div.mc-caption{font:bold 14px/20px Arial;color:#EEE;z-index:4;text-align:center;padding:10px 0;}
div.mc-caption a{color:#FB0;}
div.mc-caption a:hover{color:#DA0;}
div.navBulletsWrapper{top:310px;left:200px;width:150px;background:none;padding-left:20px;position:relative;z-index:5;cursor:pointer;}
div.navBulletsWrapper div{width:11px;height:11px;background:transparent url(https://lh3.googleusercontent.com/-b7wufyyYIC4/UA5yZFv42DI/AAAAAAAADa4/1lcw553icuI/s22/bullet.png) no-repeat 0 0;float:left;overflow:hidden;vertical-align:middle;cursor:pointer;margin-right:11px;position:relative;}
div.navBulletsWrapper div.active{background-position:0 -11px;}
</style>
<script src="http://social-media-dosyalari.googlecode.com/files/Meftunapartblog-slayt.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>

Kod içinde kırmızı ile belirtdiğim yerleri Resimlerinizin genişliğine-yüksekliğine göre ayarlayabilirsiniz.
<a href="Resme tıklayınca açılacak sayfanın adresi"><img src="Slaytta gösterilecek resmin adresi" alt="Resmin altında gözükecek yazı metni"/></a>
Kodu denemek için Online html editor'ü kullanabilirsiniz. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.iyi bloglamalar...

22 yorum:

  1. Nice sharing.And I love Fethiye:)good work...

    YanıtlaSil
  2. çok güzel bir paylaşım ilk defa bir blogun altına yorum yapıyorum çok hoşuma gitti inanın. lakin ufak bir ricam olucam ben bu slayt her sayfada görünsün istemiyorum sadece anasayfada olsun istiyorum bunun için ne yapmam gerekiyor

    YanıtlaSil
  3. Öncelikle teşekkürler.Blogunuza Gadget/Widget Ekle bölümünden bu slaytı eklerken başlık bölümüne bi isim yazın.Mesela "Image Slider" başlığıyla kaydediyoruz.Sonra Blogumuzun şablon kısmına giriyoruz.Düzenle yapıp, Ctrl+F yardımıyla "Image Slider" başlığımızı buluyoruz.
    <b:widget id='HTML4' locked='false' title=Image Slider' type='HTML'>
    <b:includable id='main'> bulduk ve hemen altına...
    <b:if cond='data:blog.url == data:blog.homepageUrl'> bunu ekliyoruz.
    Artık eklediğiniz slayt eklentisi sadece ana sayfada gözükecektir.Kolay gelsin.

    YanıtlaSil
  4. resimlerin tüm sayfada görünmesini nasıl sağlayabiliriz?

    YanıtlaSil
  5. Blogger kontrol panelinde "yerleşim" sekmesine tıklayın."Blog kayıtları" bölümünün üstünde "gadget ekle"yi tıklayıp oluşturduğunuz slaytı oraya ekleyin.Tüm sayfalarda görünecektir.Kolay gelsin.

    YanıtlaSil
  6. resimlerin boyutu ekrana çok büyük geldi nasıl ayarlayacağım?

    YanıtlaSil
  7. Kod içinde kırmızı ile belirtdiğim yerleri Resimlerinizin genişliğine-yüksekliğine göre ayarlayabilirsiniz.Ya resimleri slider'e göre ufaltın yada slider'i resimlere göre genislik (width),Yükseklik(height) bölümlerini ayarlayın.Yapamıyosanız iletisim bölümünden bana blogunuzun ismini yazın.Kodları blogunuza uygun hale getirip mailinize gönderirim.

    YanıtlaSil
  8. Resmin kendi boyutunu küçültmeden resmi bire bir sığdırma şansımız yok mu acaba?

    YanıtlaSil
  9. Merhaba efendim resim sayısını nasıl azaltabiliriz 4 adet nokta var 3 olmasını istiyorum?

    YanıtlaSil
  10. Örnekte Kod içinde kırmızı ile belirtdiğim (<a href="#"><img src="RESİM URL" alt="BAŞLIK"/></a>) yerleri isteginize göre degiştirebilirsiniz. Örnekte 5 adet resim var. 3 istiyosanız buraya ekleyin.
    <div id="slider">
    <!--Bu araya kaç resim istiyosanız ekleyin-->

    <a href="#"><img src="RESİM 1 URL" alt="BAŞLIK 1"/></a>
    <a href="#"><img src="RESİM 2 URL" alt="BAŞLIK 2"/></a>
    <a href="#"><img src="RESİM 3 URL" alt="BAŞLIK 3"/></a>

    <!--Bitiş-->
    </div></div>

    YanıtlaSil
  11. Merhabalar. Çok güzel bir paylaşım olmuş. fakat takıldığım bir nokta oldu. Resimleri 800 px göre ayarladım ve yapıştırdım fakat. slayt olurken 3 tane takip noktası tam resimlerin ortasında duruyor. Alt tarafta olmasını nasıl sağlarım.

    YanıtlaSil
  12. Gamer MK Aşağıdaki işaretlediğim style kodları bölümündeki değişikliği yaparsanız problem kalmaz. Kolay gelsin.
    div.navBulletsWrapper {
    top: 410px;
    left: 330px;
    width: 150px;
    background: none;
    padding-left: 20px;
    position: relative;
    z-index: 5;
    cursor: pointer;
    }

    YanıtlaSil
  13. Hocam navigasyon sistemi çalışmıyor.Nasıl olacak?

    YanıtlaSil
  14. Pronetlen çalışmama şansı yok. Herşey gayet normal. Kendinize göre özelleştirdinizmi eklentiyi? Yapamıyorsanız, hangi resimleri istiyorsunuz, websiteniz vs. ayrıntılı bi şekilde bana iletisim bölümünden yazın. Hazılayıp gönderirim size.

    YanıtlaSil
  15. Hocam manşet slayt çalışıyor fakat alttaki küçük yuvarlak butoncuklar çalışmıyor.Hatta gözükmüyor bile yuvarlak butonlar.Hocam birde ben kodla biraz oynadım ve koddaki dosyaları kendi siteme upload ettim ve koddada upload ettiklerimi düzelttim.Ve ayrıca siteme göre uyarladım slaytı.

    Hocam sitem : http://www.netlen.net/

    YanıtlaSil
  16. Pronetlen eklentinin tam üstünde bir div style'i ekli;
    <div id="158182650742940667" align="left" style="width: 100%; overflow-y: hidden;" class="wcustomhtml">
    Burdan overflow-y: hidden; bölümünü silin.
    ve eklentinin style bölümünde
    div.navBulletsWrapper bulun ve aşağıda göstediğim bölümlerini değiştirin.
    top: 275px;
    left: 200px;
    width: 160px;

    Uyarlamanız güzel olmuş elinize sağlık. Bol ziyaretçiler dilerim. Kolay gelsin.

    YanıtlaSil
  17. Teşekkür ederim hocam ama malesef ben sitemi weebly üzerinden düzenlediğim için söylediğin div koduna erişimim yok malesef.Altta verdiğin değerleri değiştirdim fakat hiç bir faydası yok malesef değişen birşey olmadı.Başka çözümün varmıdır acaba?

    YanıtlaSil
  18. Hocam biz bunu yaptık fakat resimler çok hızlı geçiyor bunu nasıl düzeltebiliriz...

    YanıtlaSil
  19. NoO MeRCy Bayrak Kapmaca sitenizde 3 tane aynı javascript kodu var. Çakışma oluyo. O yüzden slider eklentileriniz düzensiz çalışıyo. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script> Bu kodu 1'e indirin.
    </head> kodundan önce 1 tane koymanız yeterli. Script kodlarınıza dikkat edin. Kolay gelsin.

    YanıtlaSil
  20. Arkadaşlar çok güzel bir site buldum çok rahat bir şekilde slayt yapabilirsiniz.http://slideful.com/ adresine gidin slayt yapın kodunuzu alın sitenize yapıştırın.Çok güzel gerçekten.

    YanıtlaSil
  21. selam
    bu slayt ı manşet şeklinde kullanmak istiyorum.haber eklediğim zaman haber manşette yayınlasın istiyorum.haber ve görsel otomatikmen manşette çıksın .nasıl olabilir

    YanıtlaSil
    Yanıtlar
    1. Faruk bey, bu eklentide kendiniz tek tek eklemeniz gerek. Yazdığınız yazının resmini ve linkini. Ama ben otomatik paylaşılsın istiyorum diyosanız; Jquery slider manşet eklentisi adlı konuyu deneyebilirsiniz. Kolay gelsin.

      Sil

Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın.

 
  • Meftun Apart

    Meftun Apart Fethiye

    Apartlarımız deniz ve plaja 50 metre mesafede olup, klimalı, full eşyalı 2+1, 1+1, 4-6 kişilik ve havuzlu apartlardan oluşmaktadır.

  • Meftun Mede Blogger

    MEDE Blogger Tema Yardım

    Blogger şablonuzda, temanızda yardımamı ihtiyacınız var? Hertürlü blogger tema yardımı ücretsiz yapılır...

  • Sitemap sayfası oluşturma

    Sitemap sayfası oluşturma

    Sitemap bir web sitesinin haritasıdır.Arama motorlarının web sitelerini hızlı, daha çabuk ve tam olarak indexlemesi için oluşturulurlar.

  • hit arttırma

    Sitenizin hitini arttırın!

    Kaliteli hit arttırma sitemi ile ücretsiz hit kazanın, sitenizi Google'da yükseltin! Sitenizi ekleyin ve binlerce ziyaretçi kazanın!

  • Sosyal Medya!

    Sosyal Medya

    Sosyal platformların sayısı artmaya devam etmektedir ve Sosyal medya içeriğine internet aracılığıyla her zaman her yerden erişilir.