Blogger CSS Son Yayınlar Resimli Manşet Oluşturmak

Blogger CSS Son Yayınlar Resimli Manşet
Blogger CSS Son Yayınlar Resimli Manşet 

Blogger temaları ile ilgili araştırma yapanlar son günlerde oldukça popüler olan IVY temalarına denk gelmiş olmalı. İVY temalarının kendine has değişken resimli manşet alanları var özellikle iki blogunuz varsa yada subdomain üzerinden farklı bir tema kullanıyorsanız sitenizin adresi üzerinden son konuları çeken bu manşetler işinizi görebilir.

Özellikle yan menülerde farklı RSS ler için kullanmanızı tavsiye ederim. Demo sayfasında sağ alt köşede manşeti görebilirsiniz.



Blogger CSS Son Yayınlar Resimli Manşet Kodları  :

1 ) Kodları Gadget Ekle >> HTML/Java Script Seçeneği ile kullanabilirsiniz.

<style scoped="" type="text/css">
ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.rcentside{font:normal normal 11px Verdana,Geneva,sans-serif}
ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative}
ul.rcentside{width:100%;height:500px}
ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block}
ul.rcentside img{border:0;width:100%;height:100%}
ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
ul.rcentside li:nth-child(2){left:0;top:50%}
ul.rcentside li:nth-child(3){left:50.5%;top:50%}
ul.rcentside li:nth-child(4){width:100%;left:0;top:75%}
ul.rcentside  .overlayx,ul.rcentside 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}
ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-pOsId9rX4VM3TgAmTA4vH8220vlQLXY-5FgkCwMyXmhtNrEOC1usN4w3gkd9l3veRuFsn7lQKv89N6KjpZapSGsHo0P1gOm7ri2PnxIv7wkdIzTpvBZZXMocXbz82q5iO-vjyTTRUqA/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}
ul.rcentside .overlayx,ul.rcentside img{border:4px solid #2E8DCE;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
ul.rcentside li:nth-child(1) .overlayx{background-position:50% 25%}
ul.rcentside .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
ul.rcentside h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}
ul.rcentside li:nth-child(1) h4,ul.rcentside li:nth-child(4) h4{font-size:150%}
ul.rcentside .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}
ul.rcentside li:nth-child(2) .autname,ul.rcentside li:nth-child(3) .autname{display:none}
.buttons{margin:5px 0 0}
.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
</style>
<div id="featuredpostside"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="https://ivyth.googlecode.com/svn/js/featuredpostside.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://www.bloggerdersleri.com",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>

Blogger Manşet Modifiye : 
  • Kırmızı olarak belirlenmiş site adresi manşetin çekeceği son postların sitesini belirler. 
  • Boyutlar eklediğiniz Gadget alanına uyum sağlayacaktır. Duruma göre kendiliğinden genişler yada daralır. 


Makaleyi Paylaş :
 

Yorum Gönder

 
Hakkında : kredi kartı borcu taksitlendirme
Copyright © 2012 - 2013. Blogger Dersleri - All Rights Reserved | Proudly powered by Blogger