Slayt Manşet [ JavaScript Versiyonu ]

Çok kişi istediği için daha önce kullandığım Featutured Content Slider isimli slayt manşet eklentisini paylaşmıştım.Paylaştığım o eklentide Jquery kullanıldığı için blogu yavaşlatıyordu.Kullananlar da bundan şikayetçiydi.

 

Daha hızlı  ve daha patik bir slayt çin çözümler ararken asdece JavaScript kullanılarak oluşturulmuş bu pluginle karşılaştım.Özelliklerini ve kağnağını görmek için buraya tıklayabilirsiniz.

 

slayt-ozellikli

 

Bu slaytı blogunuza eklemek için Blogger kumanda panelinde tasarım ayarlarından sayfa öğeleri ( yerleşim ) bölümünü açın ve Üst Bilginin altındaki gadget ekleme yerine HTL/JavaScript gadget olarak aşağıdaki kodları ekleyin.

 

<style type="text/css">

#mcis {
display: none;
}

#sliderFrame {
position: relative;
width: 500px;
margin: 0 auto;
        border:5px solid #000;
}

#ribbon {
width: 111px;
height: 111px;
position: absolute;
top: -4px;
left: -4px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgffAeZomTRTG_qS-IZapfs76laLeE48W5q2CHqW9cvAjETpwa-68EQ0ss0akf-VuQ2d6hb_6tchskDSpVBdRC5zBBKaDzjUpcyAsqJ9i3q_xbd_6mukuc852wRTTLEAyA2RdWWu4mKDA4/s109/ribbon-ozellikli.png) no-repeat;
z-index: 7;
}

#slider {
width: 500px;
height: 218px;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicTHbujJDmz3BFRyA5cIpt4AZNyEEdGjbX59VHWk7KOlGMKQm20T9bwzCycPRJ9RTzBlK3RmkR__O2LteUHrfTXxXJ1bnjMezaKMnbhJJiU4JHVAtZing0CPwGmwKEDa4Z3rN-ftFv0sw/s1600/helperblogger.com-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;
}

div.navBulletsWrapper div {
width: 11px;
height: 11px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTaWEB1Tod0v5IXPowzA9avlLLF8ihpaGec95qw4SDIDVW9G8xYpRpmFRshpvDA9kh_PPI3uq_6UyvLhpJIzB3WK_VKs9YDtrk8J7xOluwVbr72_SNepM-f0jbGFuHdcH3lLe7_tPq6V0/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;
}

#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://yourjavascript.com/19641174312/bloghocam-slayt.js" type="text/javascript"></script>

<div id="sliderFrame">
     <div id="ribbon"></div>
            <div id="slider">

<a href="http://bloghocam.blogspot.com/2012/05/blog-hocama-misafir-olmann-faydalar.html"><img src="http://lh3.ggpht.com/-YPJmPpZ96ww/T8YL135hG7I/AAAAAAAADGE/ggxFbMhZPKg/s1600/bloghocama-misafir-olmanin-faydalari.jpg'" alt="blog hocam'a Misafir Olmanın Faydaları"/></a>

<a href="http://bloghocam.blogspot.com/2011/12/mini-e-kitabm-okuyun-misafir-blogculuk.html"><img src="https://lh4.googleusercontent.com/-ls1UOTN4EUA/TueqzcdHexI/AAAAAAAABt0/31fNpWdT41M/s576/misafir-blogculuk.png'" alt="misafir blogculuk"/></a>

<a href="http://bloghocam.blogspot.com/2011/06/basarl-blogcularn-alskanlklar.html"><img src="https://lh4.googleusercontent.com/-iFKdyxyIKs4/TgXFh7b3tDI/AAAAAAAAAt8/NEUf0jQEgJQ/basarili-blogcularin-aliskanliklari.jpg'" alt="başarılı blogcuların özellikleri"/></a>

<a href="http://bloghocam.blogspot.com/2011/08/bir-blogcunun-sahip-olmas-gereken-5.html"><img src="https://lh5.googleusercontent.com/-HDEPfJhX8iE/TjfiWyEmDdI/AAAAAAAAA0E/TEc_YhNkMq8/bir-blogcunun-sahip-olmasi-gereken-5-beceri.jpg'" alt="bir blogcunun sahip olması gereken 5 temel beceri"/></a>


                </div></div>

 

Slaytta gösterilecek öğelerin kodlarını şu şekilde düzenleyeceksiniz:

 

<a href="Resme tıklayınca açılacak asyfanın adresi"><img src="Slaytta gösterilecek resmin adresi" alt="Resmin altında gözükecek yazı metni"/></a>

74 yorum:

  1. Muhtesem teşekkürler :)

    YanıtlaSil
  2. çok teşekkürler nezamandır böyle bişey arıyodum

    YanıtlaSil
  3. Çok güzel paylaşım teşekkür ederim. Ben bu gadgetin sadece anasayfada görülmesi için ne yapmam gerek,bir de özellikler yazan yazı kalkma ihtimali var mı? Teşekkür ederim...

    YanıtlaSil
  4. özellikli yazan yazıyı silebilmemiz mumkunmu

    YanıtlaSil
  5. Harika bir eklenti var olanımı değiştim teşekkürler blog hocam!

    YanıtlaSil
  6. Resimi nasıl o eklentide göstereceğiz ?
    Yapamadım da :/

    YanıtlaSil
  7. @Ruhsuz Atmaca
    Sadece ana sayfada göstermek için kodların başına <b:if cond='data:blog.url == data:blog.homepageUrl'> kodunu, sonuna da </b:if> kodunu ekleyin.

    Özellikli yazan ribonu kaldırmak için kodlardan <div id="ribbon"></div> satırını silin.

    YanıtlaSil
  8. Çok teşekkür ederim.Özellikli yazısı kalktıda, kodları eklememe rağmen genede diğer sayflarda gözüküyor.

    YanıtlaSil
  9. En başa ekleyin dediğim kodu <div id="sliderFrame"> kodundan önce ekleyin.

    YanıtlaSil
  10. bir ben yapamadım ust bilginin oldugu gatget dar alanda gostermıyor kayıtların ustunde olması lazım ancak hocam olmadı malesef

    YanıtlaSil
  11. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  12. hocam ozellıklı yazısı sılındı ok ama resım boyutunu nasıl ayarlıyacagım html once buyutup url kopyalayıp yaptım olmadı

    YanıtlaSil
  13. teşekkür ederim.biraz düzenleyip yan sütunda kullanmayı düşünüyorum

    YanıtlaSil
  14. daha fazla slayt ekleme şansımız var mı acaba.

    YanıtlaSil
  15. Görüntü olarak yeterli, teşekkürler

    YanıtlaSil
  16. Sitenizi çok beğeniyorum elinize sağlık. Keşke bunlar otomatik olsa ekledğimiz her yazı kendiliğinden manşette yerini alsa. Her yazı ekledğimizde harin url si resmin urlsi uğraşmasak ne iyi olurdu :))

    YanıtlaSil
  17. Selam, son yazıları yapabilme imkanımız var mıdır yani link koyma yerine yazdığımız son yazılar otomatikmen çıksa? Wordpress siteme koydum süper oldu :)

    YanıtlaSil
  18. @Berkay Yılmaz
    Muhtemelen vardır ama ben nasıl yapılacağını bilmiyorum.

    YanıtlaSil
  19. Hocamm..bende hepsi tmm da resim göstermiyorrr.

    YanıtlaSil
  20. bu çok küçük.. boyutunu nasıl ayarlıyabilirim?

    YanıtlaSil
  21. @Erim Çelik
    width: 500px; bu değeri arttır.

    YanıtlaSil
  22. Selamlar, yalnızca anasayfada görünmesi için verdiğiniz kodları tam olarak nereye ekleyeceğiz. Sonuna ekleyiniz dediğiniz kodu bir türlü doğru yere koyamadım. Şimdiden teşekkürler.

    YanıtlaSil
  23. @Gencoy Sümer
    Birkaç yorum üstte aynı soru vardı.Kodların en üstüne ve en altına ekleyeceksiniz.

    YanıtlaSil
  24. Bloğunuzu çok beğendim, artık takipçinizim.

    Bu manşet ile ilgili naçizane 2 sorum olacak, cevaplarsanız sevinirim.
    1. Haber metni kısmının iptali mümkünmü? ben fotoğrafa photoshop ile yazıyorum.
    2. 4 den fazla gösterim yapınca altındaki manşet geçiş yeri 2 satır oluyor.

    YanıtlaSil
  25. @alperencsm
    Haber metni dediğiniz şey resmin açıklaması sanırım.O bölümü boş bırakabilirsiniz.

    Manşt geçiş yerini genişletmek için kodlardaki div.navBulletsWrapper satırının altındaki width değerini arttırın.

    YanıtlaSil
  26. Kodların en altına ve en üstüne ekleyeceksiniz ifadesi, ne yazık ki bizim gibi bu işin alfabesini yeni öğrenenler için hiç bir mana ifade etmiyor. Kodların en üstünün ne olduğunu yazmışsınız ama en altının nne olduğunu yazmamıoşsınız. Ben de zaten "kodların en altı" denen yer neresi? onu soruyorum. Bilenler mutlaka biliyordur ama ben maalesef bilmiyorum. Teşekkürler.

    YanıtlaSil
  27. @Gencoy Sümer
    <style type="text/css"> kodunun üstüne ve </div></div> kodunun altına.

    YanıtlaSil
  28. İlginize çok teşekkür ederim. Fakat hala mutlu sona erişmiş değiliz. Ruhsuz atmaca ve bana vrdiğiniz ve öncesinde yazılmasını önerdiğiniz kodlar birbirinden farklı. Bununla birlikte, her iki kodun önüne verdiğiniz kodu ve en sona da ikinci kodu yazmama rağmen sonuç sıfır. Herhalde bir çözümü vardır. Tekrar teşekkürler...

    YanıtlaSil
  29. 1. <style type="text/css"> kodundan önce şunu ekleyin: <b:if cond='data:blog.url == data:blog.homepageUrl'>

    2. </div></div> kodundan sonra şunu ekleyin: </b:if>

    YanıtlaSil
  30. merhaba verdiğiniz kodları siteme ekleyemiyorum. http://pauedutr.blogspot.com/ bu adreste slide hata veriyor. Resimler değişmiyor o yüzden tek resim ekledim idareten. Sizin oluşturduğunuz kodlarla resimleri ekledim ama hata oluşuyor sitemde mevcut olan manşetin yerine sizin kodlarla nasıl değiştirebilirim? sadece manşeti değiştireceğim. yardımcı olursanız çok sevinirim

    YanıtlaSil
  31. @Paü Blog
    Kullandığınız temadaki manşetin kodlarını silip yerine benim verdiğim kodları yerleşimden HTML/JavaScript gadget olarak ekleyin.

    YanıtlaSil
  32. o kodları silince de tam silemiyorum hata veriyor kodları size göndersem yardımcı olur musunuz? sizin hazırladğınız manşetin kodlarını da hazırladım

    YanıtlaSil
  33. Eksik sildiğiniz için hata veriyordur.Silmeniz gereken kodlar şunlar:

    <!-- Featured Content Slider Started -->
    <div class='fp-slider clearfix'>
    <div class='fp-slides-container clearfix'>
    <div class='fp-slides'>
    <!-- Slide 1 Code Start -->
    <div class='fp-slides-items'>
    <div class='fp-thumbnail'>
    <a href='#'><img src='http://2.bp.blogspot.com/-AkaQbGGHWSA/UE4So5R8vNI/AAAAAAAAAQ0/QyjLgFDVW5s/s1600/manset3.JPG'/></a>
    </div>
    <div class='fp-content-wrap'>
    <div class='fp-content'>
    <h3 class='fp-title'>
    <a href='#'>Pamukkale Üniversitesi</a>
    </h3>
    <p>
    Since 1992
    </p>
    </div>
    <div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'></a>
    <a class='fp-prev' href='#fp-prev'></a>
    </div>
    </div>
    </div>
    <!-- Slide 1 Code End -->
    </div>
    <div class='fp-nav'>
    <span class='fp-pager'></span>
    </div>
    </div>
    </div>
    <div style='clear:both;'></div>
    <!-- Featured Content Slider End -->

    YanıtlaSil
  34. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  35. slide ile ilgili tüm sorunları sayenizde hallettim gerçekten çok teşekkür ederim iyi çalışmalar..

    YanıtlaSil
  36. Öncelikle paylaşımınız için teşekkür ederim. Slayt geçiş hızını nasıl ayarlarım? Yani bir haberin çok hızlı geçmeden 4-5 saniye kalmasını istiyorum.

    YanıtlaSil
  37. @Tüketici Köşesi
    Dediğinizi ancak Javascript kodlarını iyi bilen biri yapabilir ancak benim yeterli bilim yok ne yazık ki.

    YanıtlaSil
  38. Saniyesini nasıl ayarlıyoruz ?

    YanıtlaSil
  39. @Özlem Turkyılmaz
    bloghocam-slayt.js isimli java script dosyasından ayarlanıyor.

    YanıtlaSil
  40. Hocam merhaba,
    "sadece "ana sayfada yayın" için bir çözüm var mı? Yukarılarda verdiğiniz cevapları denedim; sonuç alamadım.
    Peşinen teşekkürler,

    YanıtlaSil
  41. @phimood
    Kodların en başına şunu:
    <b:if cond='data:blog.url == data:blog.homepageUrl'>

    en sonuna ise şunu ekleyin:
    </b:if>

    YanıtlaSil
  42. Hocam bu şekilde çalışmıyor.Teşekkürler,

    YanıtlaSil
  43. Pardon eksik bilgi verdim.Yazdiğim kodları gadgetın içine eklemeyeceksiniz. Şablondan o gadgetın kodlarını bulup onun başına ve sonuna ekleyeceksiniz.

    YanıtlaSil
  44. Hocam son soru; şablon içerisinde nasıl bulabilirim? Bir ipucu verebilir misiniz? Çok sağolun

    YanıtlaSil
  45. Şuna benzer bir kod olacak <b:widget id='HTML1' locked='false' title='' type='HTML'>

    YanıtlaSil
  46. Hocam, yukarıdaki kodu buldum ve aynı söylediğiniz gibi ekledim. Ama nafile... Enteresan çok inatçı bir durum ama benim bunu mutlaka halletmem gerekiyor.Sizce nedir problem?
    Peşinen teşekkürler,

    YanıtlaSil
  47. Eklediğiniz slayt gadgetının ID'si 1 olmayabilir.Eğer gadgetın ID'si 2 ve ya 3 ise bulmanız gereken kod b:widget id='HTML2' şeklinde de olabilir.

    YanıtlaSil
  48. hocam çok güzelde, bu manşetin altındaki yuvarlak top gibi şeyleri kaldırabilirmiyiz bende alta doğru kaydı.konu başlığının önünü kapattı.onu hangi kodu silerek yapabilirim acaba?

    YanıtlaSil
  49. Ben yapamadım Sızın Resımlerı yukleyınce oluyor ama ben kendı resım url ekledıgımde benım resmim gorunmuyor sızın verdıgınız koddakınler gorunuyor

    YanıtlaSil
  50. Teşekkür ederim böyle bir blog oluşturduğunuz için,kendi blogumda slayt manşet ve diğer uygulamalarınızı kullanıyorum ,tam aradığım uygulamalar.

    YanıtlaSil
  51. Helal biladerim emeğine sağlık.Sitemde kullanıcam bunu

    YanıtlaSil
  52. Merhaba Serdar bey sadece bu girişimde 4 ile 5 tane makalenizden yararlanarak hoş değişiklikler yaptım.Emeğinize sağlık...
    Aslında bu sliderların blogumdaki resimleri rastgele seçerek teker teker eklemektense otomatik olarak yapmasını sağlayabileceğimiz bir versiyonu olabilseydi diyorum...Normal gadgetlerin içinde böyle bir tanesi var;rastgele blogumdaki resimleri gösteriyor ama boyutu çok küçük..
    Herhalde teker teker resim url si eklemek zorunda kalmayacağımız bir slider eklentisi yoktur?
    Teşekkürler,
    www.makeupstyler.blogspot.com

    YanıtlaSil
  53. Bu şekilde sil ekle filan uğraşmadan gadget olarak ekleyebileceğimiz manşet kodu yokmu bunlarda her resim için url ekliyeceğiz filan bir sürü iş normal bir haber tampletinde olduğu gibi en son yazılanları kendiliğinden ekleyecek ve gadgetle eklenebilecek bir manşet kodu hazırlamak imkansız birşeymi tüm blog hoccası bloglarında aynı kodlar mevcut lütfen biraz yeni birşeyler sunun bize.

    YanıtlaSil
  54. SLAYT BOYUTUNU NASIL AYARLAYACAĞIZ ?

    YanıtlaSil
  55. @Tekno Dev
    #slider divindeki height ve width değerlerinden ayarlayabilirsiniz.

    YanıtlaSil
  56. Merhaba, internete yüklediğim resimlerin bağlantı adresini dediğiniz yere yapıştırıyorum ama blogda hiç resim görünmüyor, neden acaba? Ya da siz nereye yüklüyorsunuz?

    YanıtlaSil
  57. @Ömer Faruk
    Ben Picasa'ya yükledim.

    YanıtlaSil
  58. Teşekkür ederim.

    YanıtlaSil
  59. Post'u okurken slider'ın gözükmemesi için dediğiniz gibi doğru gadget'ı buldum. Üst ve altına verdiğiniz kodları ekledim.

    Ancak bu hatayı alıyorum:

    The widget with id HTML4 is not within a section (actual parent element is: b:if.) Every widget should be in a section.

    Ne yapmalıyım?

    YanıtlaSil
  60. fildişinden kule'ye cevap.
    eğer hala sorun devam ediyorsa yada aynı sorunla karşılaşan varsa cevap şu.
    kod yazamadığım için şöyle açıklamaya çalışıcam.

    son bulduğumuz satırın, (şablon içindeki html kodları arasından ilgili gadget in satırı)
    üstündeki "yes" ile biten satırın üstüne ilk kodu yapıştırmalıyız.
    Hemen iki altındaki "no" ile biten satırın altınada ikinci kodu yapıştırmalıyız.

    Böylece slaytlarınız sadece ana sayfada görünücaktır.
    BlogHocama teşekkürler.

    YanıtlaSil
  61. Resimleri göstermiyor. üç kutucuk çıkıyor ve sürekli sanki doluyormuş gibi duruyor. Hatayı nerede yaptım yoksa kod mu bozuldu ?
    Böyle sayılı ya da tıklayarak geçişli başka html kod var mı elinizde ?

    YanıtlaSil
  62. yazının gözükmesini istemiyorum da sadece resim olacak hangi kodları kaldırmamız gerekiyor

    YanıtlaSil
  63. Teşekkür ederim :)

    YanıtlaSil
  64. çok güzel emeğinize saglık. yanlız bunu sağa hizalayamadım yardımcı olurmusunuz?

    YanıtlaSil
    Yanıtlar
    1. güncel! bilgisi olan paylaşırsa sevinirim

      Sil
    2. güncel! bilgisi olan paylaşırsa sevinirim

      Sil
  65. Hocam elinize sağlık, Teşekürler
    Ama o üstündeki özellikli yazılan yazıyı nasıl değiştireceğim
    yarıdımcı olsanız ihya edersiniz. selma ve saygıyla

    YanıtlaSil
    Yanıtlar
    1. https://lh6.googleusercontent.com/-cy-BZ1wyfXQ/UA52HRCCytI/AAAAAAAADbE/3r3-D9RaOPI/s109/ribbon-ozellikli.png bunu kaldırın

      Sil
  66. Çok teşekkürler işime yaradı

    YanıtlaSil
  67. İnanılmazsınnız Çok Teşekkürler İyi Sizi Takip Etmişim BlogHocam En iyi Site

    YanıtlaSil
  68. hocam merhaba bu slider a sağ ve sol oku nasıl ekleye bilirim,şimdiden teşekkürler

    YanıtlaSil

Blogger tarafından desteklenmektedir.