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","Şubat","Mart","Nisan","Mayıs","Haziran","Temmuz","Ağustos","Eylül","Ekim","Kasım","Aralı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...
haber baslıklarına tıklayınca aynı sayfada acılmasnı nasıl saglarız?
YanıtlaSilJavascript 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ıtlaSilSİTEDE AÇILMIYOR
YanıtlaSilBu slider manşet örneğinde resimlerin üzerindeki saydam siyahlık hangi kod parçasıyla ayarlanıyor? Yardımcı olursanız sevinirim.
YanıtlaSilResimlerin ü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Çok teşekkürler.
SilO siyahlığı nasıl kaldırabiliriz?
YanıtlaSilKaç adet manşet göstereceğini nasıl ayarlayabiliriz?
Bu arada paylaşımınız için teşekkürler..
Sihaylıktan kastınız, siyah çerçevesi ise; aşağıdaki bölümü gösterdiğim şekilde değiştirin.
Sil#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.
Yardımlarınız için çok teşekkür ederim :)
YanıtlaSilMeftun bey, slayt hızını ve slayt geçiş stilini nasıl ayarlayabiliriz?
YanıtlaSilSlayt 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.
SilHocam 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.
YanıtlaSilBu manşeti etiket ayarlı yapabiliyor muyuz?
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ıtlaSilEklenti 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.
SilDiğer konularda sormuş olduğunuz soruların cevabı; evet eklentiler html kodudur, uygun ve uyumludur.
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ı?
YanıtlaSilhttp://www.emreokluk.com
Eklenti kodları içinde aşağıda gösterdiğim bölümleri silin;
Sil<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.
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.
SilBlog 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. :)
Ustad sadece anasayfa'da göstermek için ne yapmamız gerekiyor ?
YanıtlaSil1-Yazı başlıklarıyla yazının tarihleri üst üst biniyor. Bunu çözebilir miyiz.
YanıtlaSil2- 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
Allah razı olsun, bu değiştirme oklanırını nasıl kaldırırız?
YanıtlaSilBu yorum yazar tarafından silindi.
YanıtlaSilİyi Günler Korkunç Hikayeler Bloguma Kurdum Ama Resimlerde Sıkıntı Var Göstermiyor
YanıtlaSilaçtığım yeni sayfada sliderın görünmemesini istiyorum, nasıl sağlayabilirim?
YanıtlaSilCok tesekkur.super oldu
YanıtlaSilsiyah gölge nasıl kaldırılur
YanıtlaSilYorum 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!