Kapat

Son Yazılar Blogger Random Manşet Slider’ı

Anasayfa
Uncategorized Son Yazılar Blogger Random Manşet Slider’ı
Son Yazılar Blogger Random Manşet Slider’ı

Evet arkadaşlar herkese merhabalar. Şimdi sizlere çok güzel bir 
kodla geliyorum. Son yazdığınız yazı yani gönderiye göre otomatik eklenen manşet slider’ı.. Bu Eklentiyi çok ama çok seveceksiniz. Eklentide Bulunan Random sistemi sayesinde gönderiler karışık olarak sıra sıra küçük kutular halinde yer değiştirebiliyor. Manşet eklentimiz sitenize çok farklı bir estetik katacaktır. Kodla oynamalar yaparak çerçeve renklerini değiştirebilirsiniz.

Şimdide Kodumuzu yerleştirelim.

1.Blogger giriş ekranı
2.Yerleşim
3.Gadget Ekle
4.Html-JavaScript 
diyoruz ve Kodumuzu içerik kısmına yapıştırıyoruz kaydet diyoruz gadgetimizi blog kayıtlarımızın üstüne sürüklediğimizde resimdeki gibi gözükecektir.

Slider Kodu:

#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:#FF0000;-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 #0871bf;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
#slides h4{position:absolute;bottom:35px;font-size:25px;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:double;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%;}
}

//

//

Kodun En Sonunda Yer Alan, “https://ismitekno.blogspot.com.tr/”yi kendi web adresinizle değiştiriniz.
Slaytdaki gösterilen konu sayısı:” 8″ siz değiştirebilirsiniz
Resimlerin geçiş hızı (5000 = 5 Saniye, 1000 = 1 Saniye…) İstediğiniz saniyeyi ayarlayın.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir