Jquery_slider_manset_eklentisi
Jquery slider manşet eklentisi blogunuzda son yayınladığınız konuları otomatik olarak sergileyen bir manşet slayt eklentisi. Konunun isimleri, altındaki tarihleriyle ve yayıncısıyla birlikte görüntüleyen uygulaması çok kolay bir eklenti. Ayrıca altında ileri geri butonu, tamamen otomatik olan konu geçişlerinin manuel navigasyonunu sağlar. Yapmanız gereken sadece kırmızıyla gösterdiğim yerdeki benim blog adresimin yazdığı yere kendi blog adresinizi yazmanız yeterli. Umarım hoşunuza gider.
ÖNİZLEME
1.Blogger Kumanda Panelinize gidin
2.Yerleşim tıklayın.
3.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">
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
#slides ul,#slides li{list-style:none;position:relative;margin:0;padding:0;}
#slides ul{height:250px;}
#slides li{width:49.9%;height:100%;position:absolute;display:none;}
#slides li:nth-child(1){left:0;top:0;}
#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%;}
#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%;}
#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%;}
#slides a{display:block;width:100%;height:100%;overflow:hidden;}
#slides img{display:block;width:100%;height:100%;border:0;background-color:#fff;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;padding:4px;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNwnaZ4lUBGYBmhkQcoRKBP0-Qe41ChMQUDE0iu8blBNw2KxXNKLgxsydEC24tYGqSo9uP3-daAMQ3VkOMBuO6kTRFJvJ1uWrbBaz9SrfB2UZxDTj-lqOQr6ZA0scoQZMlxtBXK5MardOP/s1600/fadebg.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #282c2f;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
#slides h4{position:absolute;bottom:30px;font-size:18px;font-family:Arial;left:0;color:#FFF;z-index:3;line-height:20px;font-weight:400;margin:0;padding:0 10px;}
#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px;}
#slides .label_text{font-size:9px;color:#FFF;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute;}
#slides .overlayx,#slides 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;}
#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1;}
#buttons{text-align:center;background:#282c2f;width:10%;margin:5px auto;}
#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative;}
#buttons a::before{content:"";width:0;height:0;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%;border-color:transparent #fff transparent transparent;border-style:solid;border-width:8px 7px;}
#buttons a#nextx::before{margin-left:-3px;border-color:transparent transparent transparent #fff;}
.footer-widget-box-last,#mef-organic-tabs .nav li.last{margin-right:0;}
#header,#main,#footer,.clearfix,#slides li:nth-child(1),#slides li:nth-child(2),#slides li:nth-child(3),#slides li:nth-child(4){display:block;}
#crosscol-wrapper,#PopularPosts1 h2,#BlogArchive1 h2,#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none;}
@media only screen and max-width600px {
#slides ul{height:600px;}
#slides li:nth-child(1){width:100%;height:49.8%;}
#slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%;}
#slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%;}
#slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%;}
}
</style>
<div id="featuredpost"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"#featuredpost",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEDZaWJdEoaz2U7D9LzpSeJdXXZP7scYfQCu740MWWOHWFKnMP-Utq77wye8WTLhNOwG5671Qemhajnj2EOyk7meDnndeeSb9hYPXUSrvVHOT8D5Vg1eXSwXBwOf8WtPa2ISF2BtR1qZLn/s1600/grey.gif",MonthNames:["Ocak","&#350;ubat","Mart","Nisan","May&#305;s","Haziran","Temmuz","A&#287;ustos","Eyl&#252;l","Ekim","Kas&#305;m","Aral&#305;k"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx">prev</a><a href="#" id="nextx">next</a></div>').addClass(h.loadingClass);var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail"in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_self" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'" alt="'+k+'" width="'+h.ImageSize+'px" height="'+h.ImageSize+'px"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#nextx").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#slides li:first").before(e("#slides li:last"));e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};function rotate(){$('#nextx').click()}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"https://MeftunMede.Blogspot.com",
MaxPost:8, // Slaytdaki gösterilen konu sayısı
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000, // Resimlerin geçiş hızı (5000 = 5 Saniye, 1000 = 1 Saniye...)
autoplay:true,
tagName:false});});
//]]>
</script>

Not: Bu Slider'ın sadece anasayfada görünmesini isteyenler Blogger Koşullu Etiketler Nedir, Nasıl Kullanılır! adlı yazımdan öğrenip uygulayabilirler.
Kodu denemek için Online html editor'ü kullanabilirsiniz.
Yukarıdaki kırmızı ile belirttiğim alanı kendi adınıza göre düzenlemeyi unutmayın! Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.iyi bloglamalar...

25 Yorumlar

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. Ve lütfen yorumlara tıklanabilir link yazmayın!

  1. haber baslıklarına tıklayınca aynı sayfada acılmasnı nasıl saglarız?

    YanıtlaSil
  2. Javascript kodları arasında <a target="_blank" href="'+q+'"> bölümünü Ctrl+F yardımıyla bulun ve _blank olan bölümü _self olarak değiştirin. Kolay gelsin.

    YanıtlaSil
  3. Bu slider manşet örneğinde resimlerin üzerindeki saydam siyahlık hangi kod parçasıyla ayarlanıyor? Yardımcı olursanız sevinirim.

    YanıtlaSil
    Yanıtlar
    1. Resimlerin üzerindeki saydam siyahlık en üstteki style kodları arasında #slides .overlayx bölümündeki background-image:url(http://1.bp.blogspot.com/-itup-UlV_6U/UvunaWzU9EI/AAAAAAAAAms/qmyBZqSDRC8/s1600/fadebg.png); komutudur.

      Sil
  4. O siyahlığı nasıl kaldırabiliriz?
    Kaç adet manşet göstereceğini nasıl ayarlayabiliriz?

    Bu arada paylaşımınız için teşekkürler..

    YanıtlaSil
    Yanıtlar
    1. Sihaylıktan kastınız, siyah çerçevesi ise; aşağıdaki bölümü gösterdiğim şekilde değiştirin.
      #slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;}
      Kaç adet manşet göstereceğini Kırmızıyla gösterdiğim blogURL:'nin hemen altındaki MaxPost:8 olan bölümü istediginiz gibi değiştirebilirsiniz. Kolay gelsin.

      Sil
  5. Yardımlarınız için çok teşekkür ederim :)

    YanıtlaSil
  6. Meftun bey, slayt hızını ve slayt geçiş stilini nasıl ayarlayabiliriz?

    YanıtlaSil
    Yanıtlar
    1. Slayt hızı için: en alttaki script kodları arasındaki interval:5000 olan bölümdeki 5000 değerini azaltılsanız hızlanır, çoğaltırsanız yavaşlar. Geçiş efekti stardart, sabittir.

      Sil
  7. Hocam paylaşımınız için çok teşekkür ederim. Daha güzel bunun gibi otamatik slayt var ise paylaşırsanız çok memnun olurum.

    Bu manşeti etiket ayarlı yapabiliyor muyuz?

    YanıtlaSil
  8. peki hocam biz bu slaytın içeriğini nasıl değişcez ? kendı paylaşımlarımı nasıl bırakcam Menüye ?

    YanıtlaSil
    Yanıtlar
    1. Eklenti son paylaştığınız konuları otomatik olarak slayt halinde gösterir. Kırmızı ile belirttiğim alana kendi blog adresinizi yazmanız yeterlidir. Extra bişey yapmanıza gerek yok.
      Diğer konularda sormuş olduğunuz soruların cevabı; evet eklentiler html kodudur, uygun ve uyumludur.

      Sil
  9. Bunu bloguma eklediğimde blog kayıtlarımda kaymalar oluyor. Blog kayıtlarının bazıları, blog kayıtları alanının sınırları içerisinde sağa sola veya aşağı doğru kayma yaşıyor. Bu sorunu nasıl çözebilirim, bir fikriniz var mı?

    http://www.emreokluk.com

    YanıtlaSil
    Yanıtlar
    1. Eklenti kodları içinde aşağıda gösterdiğim bölümleri silin;
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
      <script src="http://www.emreokluk.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

      Daha sonra bu kayma probleminden dolayı style kodlarında yaptığınız değişikliği orjinaline döndürün. Yani;
      .post{float:left;width:47%;margin:27px 0 -10px 0;padding:10px;...vs
      burdaki siyahla gösterdiğim bölümü şu şekilde değiştirin;
      margin:5px 0 10px 0;
      problem çözülecektir. Kolay gelsin, iyi çalışmalar.

      Sil
    2. Hocam çok teşekkür ederim. İlk etapta silmemi söylediğiniz kodları silince sorun kalktı ortadan. Ayrıca paylaşım için de çok teşekkür ederim.

      Blog kayıtları kısmında farklı değişiklikler de yaptığımdan "margin:27px 0 -10px 0;" kısmını değiştirince de bozuldu görüntü, zaten onu değiştirmeme gerek kalmadı.
      Yalnız çok merak ettim kodların orijinal halini görmek için temanın orijinalini mi indirip baktınız. Onları nereden biliyorsunuz? Eğer öyleyse bir kaç teşekkür çok az gelir, adamsınız diyor, size de iyi çalışmalar diliyorum. :)

      Sil
  10. Ustad sadece anasayfa'da göstermek için ne yapmamız gerekiyor ?

    YanıtlaSil
  11. 1-Yazı başlıklarıyla yazının tarihleri üst üst biniyor. Bunu çözebilir miyiz.
    2- Ben bir sayfada satır satır yazdığı cümlelerin sırayla burada slayt olarak göstermek istiyorum bu konuda yardımcı olabilir misniz?
    Teşekkür ederim

    YanıtlaSil
  12. Allah razı olsun, bu değiştirme oklanırını nasıl kaldırırız?

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

    YanıtlaSil
  14. İyi Günler Korkunç Hikayeler Bloguma Kurdum Ama Resimlerde Sıkıntı Var Göstermiyor

    YanıtlaSil
  15. açtığım yeni sayfada sliderın görünmemesini istiyorum, nasıl sağlayabilirim?

    YanıtlaSil
  16. siyah gölge nasıl kaldırılur

    YanıtlaSil

Yorum Gönder

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. Ve lütfen yorumlara tıklanabilir link yazmayın!

Önceki Makale Sonraki Makale