Blogger Etikete Duyarlı Otomatik Slider Eklentisi

Paylaşan Admin

19 Temmuz 2019 Cuma

Blogger Etikete Duyarlı Slider Alanı Eklentisi ile belirlediğiniz etikete göre blogunuzda paylaştığınız içerikle Slider alanına otomatik eklenir ve blogunuzda hoş bir görüntü olur.Dilerseniz etiketsiz de kullanabilirsiniz.Eğer etiketsiz kullanmak isterseniz Slider alanında blogunuzda en son paylaştığınız paylaşımlar gösterilir.Mobil uyumlu slider alanını şimdi sizde ekleyebilirsiniz.

✅Blogger Etikete Duyarlı Otomatik Slider Eklentisi Nasıl Eklenir?

1-Blogger Kontrol Paneli'ne giriyoruz ve "Yerleşim>Slider Alanının nerede görünmesini istiyorsak o alanda Yeni Gadget Oluştur" diyoruz
2-Açılan pencerede "HTML/JavaScript" i seçiyoruz ve aşağıdaki kodları kopyalayıp yapıştırıyoruz.

<style type="text/css">
ul.featured-widget-list,ul.featured-widget-list 
li{margin:0;padding:0;list-style:none;position:relative 
}ul.featured-widget-list li{display:none}ul.featured-widget-list 
li:nth-child(1){display:block;line-height:0}ul.featured-widget-list 
img{border:0;width:100%;height:auto}ul.featured-widget-list 
.featuredbg{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://3.bp.blogspot.com/-1_Vnfz23h0E/V0m7kzHpgiI/AAAAAAAALlU/f763ScY-PBc2UnqNX3Tf20lyvHxtRo9qwCLcB/s400/overlay-bg.png);background-position:0%
 100%;background-repeat:repeat-x}ul.featured-widget-list 
.featuredbg:hover{opacity:.1}ul.featured-widget-list 
h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform:
 capitalize;padding:10px 
20px;line-height:1.9em;letter-spacing:0.3px;font: 600 16px 'Abel', 
sans-serif;overflow:hidden}ul.featured-widget-list li:hover 
h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px 'Abel',
sans-serif;letter-spacing:0.3px;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}ul.featured-widget-list
 h5, ul.featured-widget-list .featured-meta {-webkit-transition: all 
0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 
0.3s;}ul.featured-widget-list li:hover 
.featured-meta{bottom:20px;opacity:1}.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%}
.feat-buttons a{text-indent:-9999px;margin:0 
7px;width:15px;height:15px;padding:5px;background:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter:
alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius:
 50%;-moz-border-radius: 50%;border-radius: 
50%;}.feat-prev{float:left;}.feat-next{float:right;}.feat-buttons 
a.feat-prev::before, .feat-buttons 
a.feat-next::before{content:"";width:0;height:0;border-width:6px 
7px;border-style:solid;border-color:transparent #fff transparent 
transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%}
.feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}
</style>
<div id="featuredbwidget"></div>
<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[

featuredbwidget({
listURL:"https://www.cemozergungor/",
featuredNum:9,
listbyLabel:false,
feathumbSize:350,
interval:3000,
autoplay:true,
featuredID:"#featuredbwidget"
});
function featuredbwidget(a){(function(e){var 
h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"https://3.bp.blogspot.com/-EOu4Rrgcryo/V0m8dV7MU1I/AAAAAAAALlg/4h5vQaHpQiMdkvtUdDbu0LtjJRvgPERYwCLcB/s500/no-image.png",byMonth:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],listbyLabel:false};h=e.extend({},h,a);var
 g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div 
class="featslider"><ul 
class="featured-widget-list"></ul><div 
class="feat-buttons"><a href="#" 
class="feat-prev">Prev</a><a href="#" 
class="feat-next">Next</a></div></div>');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.feathumbSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$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.byMonth[parseInt(p,10)-1];l+='<li><a
 href="'+q+'"><div class="featuredbg"></div><img 
class="featuredthumb" 
src="'+u+'"/><h5>'+k+'</h5></a><div 
class="featured-meta"><span class="fdate"><span 
class="fday">'+t+'</span> <span 
class="fmonth">'+v+'</span> <span 
class="fyear">'+x+'</span></span> - <span 
class="fauthor">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingFeatured)};var
 c=function(){e(h.featuredID+" .feat-next").click()};var 
b=function(){e.get((h.listURL===""?window.location.protocol+"//"+window.location.host:h.listURL)+"/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+"
 .feat-prev").click(function(){e(h.featuredID+" .featslider 
li:first").before(e(h.featuredID+" .featslider li:last"));return 
false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+" 
.featslider li:last").after(e(h.featuredID+" .featslider 
li:first"));return false});if(h.autoplay){var i=h.interval;var 
j=setInterval(c,i);e(h.featuredID+" .featslider 
li:first").before(e(h.featuredID+" .featslider 
li:last"));e(h.featuredID+" 
.featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)};
//]]>
</script>

✅Etikete Duyarlı Otomatik Slider Alanının Ayarları Nasıl Yapılır?

• listURL - Bu kısımda (https://www.cemozergungor.com) yerine kendi blog adresinizi yazınız.
• featuredNum - Slider alanında gösterilecek paylaşım sayısının kaç tane olmasını istiyorsanız buradan değiştirebilirsiniz
• listbyLabel - Etiket ile görüntülenmesini istiyorsanız listbyLabel: "etiketiburayayaz" şeklinde değiştirebilirsiniz.Eğer false yaparsanız en son paylaşılanlar gösterilir.
• feathumbSize - Slider alanı pixel boyutlarını buradan ayarlayabilirsiniz.
• interval - Slider alanının geçiş süresinin ayarlarını buradan yapabilirsiniz (milisaniye)
• autoplay - True yaparsanız otomatik geçişler olur, False yaparsanız geçişleri manuel yapmak gerekir.

YAPAMADIĞINIZ VEYA HATA ALDIĞINIZ BİR ADIM OLURSA YORUMDAN VEYA İLETİŞİMDEN BANA ULAŞABİLİRSİNİZ.

Bunu Paylaş :