Blogger Son Yayınlar Slider (Manşet, Slayt) Alanı

Otomatik olarak son yayınlarınızı gösteren oldukça kullanışlı bir manşet alanıdır. CSS ve jQuery ile son yayınlarınızın fotoğraflarını ve linklerini taşır. Eklediğiniz yerin büyüklüğüne göre otomatik boyutlanır.



<style type="text/css">
ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.rcentside{font:normal normal 11px Verdana,Geneva,sans-serif}
ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative}
ul.rcentside{width:100%;height:500px}
ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block}
ul.rcentside img{border:0;width:100%;height:100%}
ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
ul.rcentside li:nth-child(2){left:0;top:50%}
ul.rcentside li:nth-child(3){left:50.5%;top:50%}
ul.rcentside li:nth-child(4){width:100%;left:0;top:75%}
ul.rcentside .overlayx,ul.rcentside li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}
ul.rcentside .overlayx,ul.rcentside img{border:4px solid #000000;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
ul.rcentside li:nth-child(1) .overlayx{background-position:50% 25%}
ul.rcentside .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
ul.rcentside h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}
ul.rcentside li:nth-child(1) h4,ul.rcentside li:nth-child(4) h4{font-size:150%}
ul.rcentside .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}
ul.rcentside li:nth-child(2) .autname,ul.rcentside li:nth-child(3) .autname{display:none}
.buttons{margin:5px 0 0}
.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
</style>
<div id="featuredpostside"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="https://googledrive.com/host/0B2BtMc5vQHtXTnI4R1B0T1dCUm8" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://webseyyahi.blogspot.com.tr/",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>


blogURL:"http://webseyyahi.blogspot.com/": Kendi site adresinizi yazın.
MaxPost:8 : 8 rakamı son kaç yayını göstereceği
interval:5000, : Slayt geçiş hızı.

Duyarlı yapıdadır ( Yani bulunduğu alanın boyutunu otomatik alır)
Hover efeklidir (Yani mause üzerine gelince tepki verir)

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.

CANLI DEMO SAYFASI


Meraklısına .js kodu:


32 yorum:

  1. http://ylcnguler.blogspot.com/2013/04/2013un-en-iyi-blog-ve-siteleri-videosu.html

    SİTENİZ DAKİKA 2.19 yorum yaparsanız memnun olurum emeğe saygı

    YanıtlaSil
  2. Bunu bir ara blogda kullanmıştım ama sonra hata vermeye başladı kendi kendine nedendir bilemiyorum..
    Faydalı bilgiler için teşekkür ederiz..

    YanıtlaSil
    Yanıtlar
    1. Sizin blog ile alakası olmayan bir durum, dün blogger alt yapısındaki java motoru güncellendi. Kısaca şuan bu eklenti değil bir çok eklenti hata veriyor. Bir kere daha olmuştu blogger html editörü ilk geldiğinde ama çok az kişi anladı. Buda benzer bir durum. Google blogger düzenlemesi yapınca kendiliğinden düzelir.

      Sil
  3. Teşekkürler çok işime yaradı. Bloğuma farklı bir hava kattı (:

    YanıtlaSil
  4. Merhaba. Çok teşekkürler. Bu sliderın sadece anasayfada gözükmesini sağlayabilir miyim peki ?

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

    evet güzel olmuş

    YanıtlaSil
    Yanıtlar
    1. Teşekkürler. Onu da halletim sayenizde eyvallah iyi çalışmalar (:

      Sil
  6. çok güzel bir paylaşım uzun süredir böyle bir manşet arıyordum teşekkürler..

    YanıtlaSil
  7. teşekkürler.başka slider paylaşımlarınız varmı*

    YanıtlaSil
    Yanıtlar
    1. yukaıdaki search(ara) bölümüne slider yazıp aratabilirsiniz.

      Sil
  8. Slideri eklediğim zaman bloğumda bulunan açılır menüler kullanılmıyor acaba buna bir çözüm yolu biliyormusunuz.

    YanıtlaSil
    Yanıtlar
    1. ilginç normalde alakası olmaması lazım ama kod çakışması olabilir, tema kodlarına bakmak lazım ama çözümü bulmaz zor olur. bence ya başka slider yada başka tema kullanın.

      Sil
    2. bilgi-vadisi 'de kullandığınız slider başka yani bu yukarıdakine benziyor ama farklı kodlar ok. Ama büyük ihtimal temada sıkıntı var

      Sil
    3. Teşekkürler sorun temamdaki bir hatandan kaynaklanıyormuş ilginiz için tekrar teşekkürler.

      Sil
  9. Çok teşekkür ederim bu paylaşım için. Ancak sizden bir şey rica edeceğim. Bu java'da ki otomatik gelen resimler de ismim yazıyor bunu nasıl kaldırabilirim. Yardımcı olursanız sevinirim.
    Saygılar...

    YanıtlaSil
    Yanıtlar
    1. Yukarıdaki kodlarda yazı rengini şeffaf yapabilir yada tümüyle kaldırabilirsiniz. İstediğiniz değişikliği yapabilirsiniz.
      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
  10. Bu hiç aklıma gelmemişti. Hallettim. Çok teşekkür ederim. Ayrıca çok güzel blogunuz var.

    YanıtlaSil
  11. gerçekten güzel oldu, emeğinize sağlık...

    YanıtlaSil
  12. Blogumda çalışmıyor, nedeni ne olabilir? Sadece boş bir alan gözüküyor kodu eklediğimde.

    YanıtlaSil
    Yanıtlar
    1. Kod güncellenmiştir. Canlı demodan kontrol edebilirsiniz.

      Sil
  13. hocam renk ayarlarını yapabilirmiyiz ben çerçevinin siyah değilde mavi olmasını istiyorum. internettenkazansam.blogspot.com

    YanıtlaSil
    Yanıtlar
    1. border:4px solid #000000; renk kodunu istediğin renk koduna ayarlayabilirsiniz.

      Sil
  14. Çok güzelmiş biz de deneyelim.

    YanıtlaSil
  15. Ben blogger da şablona direkt ekledim. Rengini falan da ayarladım ancak sadece ana sayfada görünmesini sağlayamadım. Nasıl yapabilirim?

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

      Sil
  16. Kusura bakmayın az önce yazdım ancak yayınlandı mı göremediğim için tekrar yazıyorum. Ben gaget ekle olarak değilde doğrudan şablona ekleyerek manşeti oluşturdum. Ancak sadece ana sayfada görünmesini nasıl sağlayabilirim?

    http://kaizenkisiselgelisimekibi.blogspot.com.tr/ bu blogda.

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

      Sil
  17. Üstat ben eklenti olarak eklemedim yalnız. Verdiğiniz bağlantıya da baktım ancak bulamadım. Doğrudan şablonda blog yazılarının kodlarının üstüne ekledim.

    YanıtlaSil
    Yanıtlar
    1. Anladım. özel şablon olduğu için temaya bir kaç kod yazılarak sorun çözülür, biz yaparız lakin ücret talep edeceğimizi hatırlatmak isteriz.

      Sil
  18. Eklentiyi kurdum ancak blogumda sadece boş ekran olarak görünüyor..

    Herşeyi söylediğiniz gibi yaptım ama yardımcı olabilir misiniz?

    YanıtlaSil
    Yanıtlar
    1. Canlı demodan kontrol edebilirsiniz. Tabiki yardımcı olmak isteriz. Kişisel yardımlarımızın ücretli olduğunu hatırlatmak isteriz. Saygılarımızla

      Sil