En yeni: Dünyanın en iyi 10 video düzenleme programı Trending: İnternetten para kazanmak, Ekgelir, En iyi Tıkla Kazan (PTC) Siteleri

Jquery Slider Manşet eklentisi

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(http://1.bp.blogspot.com/-itup-UlV_6U/UvunaWzU9EI/AAAAAAAAAms/qmyBZqSDRC8/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="http://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:"http://2.bp.blogspot.com/-kfss3M2B8I4/T56orNTZNMI/AAAAAAAAAAg/kooE2k3iQJw/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:"http://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...

22 yorum:

  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. İyi Günler Korkunç Hikayeler Bloguma Kurdum Ama Resimlerde Sıkıntı Var Göstermiyor

    YanıtlaSil

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!

 
  • 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!

  • internetten para kazan

    İnternetten para kazan !

    Boş zamanınızı internetde reklam izleyek ve bundan para kazanarak geçirebilirsiniz. Ek gelir elde edebilirsiniz!