Blogger Otomatik Slider Manşet Eklentisi

Salı, Ekim 27, 2015 icon18_edit_allbkg
blogger-otomatik-slider-eklentisi

Merhaba arkadaşlar,
bu yayınımda sizlere güzel bi otomatik slider  manşet eklentisinden bahsedicem.

Kurulumu:
Blogger Yerleşimden Gadget Ekle > Html /JavaScript diyoruz ve aşağıdaki kodu yapıştırıyoruz.Daha sonra blog adresiniz yazan yere kendi blog adresinizi yazıyorsunuz bu kadar.

<style>
/* CSS Slider Recent Post */
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}

@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}

@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}

@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<div id="featuredpost"></div>
<script type="text/javascript" src="https://arlina-design.googlecode.com/svn/slider-post.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"blog adresiniz",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>


Yardım için yoruma yazabilirsiniz...Sağlıcakla Kalın...

Paylaş

Benzer Yayınlar

22 yorum

yorum
31 Ekim, 2015 00:47 Sil

olmadı çiğil.com sitesinde denedim. Temadan mıdır. Ya da ona ne uyar. tşk.

Cevapla
avatar
31 Ekim, 2015 01:21 Sil

Temadan dolayıdır. Kullandığınız temada denedim çalışmadı. Bence temanızıda değiştirin içerikler ile uyumlu değil

Cevapla
avatar
08 Kasım, 2015 14:25 Sil

merhaba hocam, ben bunu siteme ekledim çok güzel oldu ama yarım olarak görünüyor. bunun boyutlarını artırıp tam yapmak istiyorum. siteme ekledim ama sağ kısımda beyaz bir boşluk var. boyutunu sağ tarafa doğru artırmak istiyorum. ve tarih etiketini kaldırmak istiyorum. http://www.pcustasi.net

Cevapla
avatar
08 Kasım, 2015 17:21 Sil

yukarıdaki kodlardan #slides ul{height:320px} kodunun içine width:uzunlugunuz yazın.Yani söyle #slides ul{height:320px;width:450px} gibi

Cevapla
avatar
25 Kasım, 2015 22:54 Sil

süper oldu.arka plan rengini biraz açmak lazım.karanlık.yinede güzel.çok teşekkür ederim.dizayn tam istediğim gibi.ve temamada uydu.

Cevapla
avatar
25 Kasım, 2015 23:08 Sil

Aslında bu çalışma random haline getrilebilme daha da süper olur.

Cevapla
avatar
26 Kasım, 2015 16:38 Sil

Rica ederim güle güle kullanın :)

Cevapla
avatar
Anonim
27 Kasım, 2015 21:16 Sil

hocam minima stylo kullanıyorum ancak kod bende çalışmadı gadget ekliyorum site yerine kendi sitemi yazdım olmadı

Cevapla
avatar
23 Aralık, 2015 17:35 Sil

Yorum formundaki yardımlarınızdan sonra artık birşeyler aradığımda sizin sayfanızın ismini ekliyorum sonuna :) Bu slider eklentisi çok hoş ama resimlerin boyutlarından sanırım sadece başlık gösteriyor. ßirde üzerindeki tarih yazıları ingilizce bu iki sorunu nasıl halledebileceğim konusunda yardımlarınızı bekliyorum.

Cevapla
avatar
24 Aralık, 2015 12:55 Sil

Teşekkür ederim.Bi demo link atar mısınız birde ayları turkçe yapmak için javascript dosyasının değişmesi gerekiyor googlecode vardı önceden artık devre dışı bırakınca javascript dosyalarını ancak hostingin olduğu yerlerde dosyayı barındırabiliyoruz suanlık ayları duzeltmemiz mümkün değil :)

Cevapla
avatar
24 Aralık, 2015 21:07 Sil

ingilizce düzeltilemeyecekse kaldırdım gitti :) Peki bu yorum formunun üzerindeki kurallar kısmı ile ilgili bir yayın hazırlasanız da bizde yapsak :) ßir tane denedim ama yorum formunun üstünde gözükeceğine altında çıkıyor :)

Cevapla
avatar
25 Aralık, 2015 13:00 Sil

Ben size mail atayım ordan konuşalım

Cevapla
avatar
09 Ocak, 2016 00:39 Sil

Merhaba,

Ben çok istiyorum fakat olmadı. Hiçbir şey görünmüyor. Sebebi ne olabilir?

Cevapla
avatar
10 Ocak, 2016 01:27 Sil

Dostum gerekli işlemleri yaptıgında olmuyorsa temada sıkıntı vardır bazı temalarda slider çalışmıyor malesef :(

Cevapla
avatar
21 Ocak, 2016 17:37 Sil

gerçekten güzel bir paylaşım olmuş bunu bir ara ben de kullanmıştım gayet stabil çalışıyor. elinize sağlık.

Cevapla
avatar
Anonim
23 Ocak, 2016 00:41 Sil

teşekkürler kardeş.

Cevapla
avatar
23 Ocak, 2016 01:53 Sil

Rica ederim güle güle kullanın.

Cevapla
avatar
Anonim
24 Ocak, 2016 14:05 Sil

mrb hocam kolay gelsin. bu manşetteki tarih etiketini kaldırıp başlık yazısını da tarih olan yer kısmında göstermek istiyorum. tarih etiketi olunca başlıklar resimlerin ortasına geliyor hoş olmuyor. lütfen yardım edin hocam... :(

Cevapla
avatar
26 Ocak, 2016 16:45 Sil

Malesef dostum javascriptten değişiyor onlar ben değiştirmesine değiştiririmde js dosyasını saklayabileceğim kaynak yok :(

Cevapla
avatar
Anonim
26 Ocak, 2016 19:46 Sil

peki, teşekkür ederim hocam. :(

Cevapla
avatar

İfadeleri kullan İfadeleri kapat

Lütfen yorum yaparken şunlara dikkat ediniz:

  • Küfürlü, siyasi veya huzur bozucu yorumlar yapmamaya,
  • Reklam, spam gibi yorumlar yapmamaya,

Dikkat ediniz. Yorumlarınız Admin onayından geçtikten sonra yayınlanacaktır.