Web Analytics Made Easy - StatCounter
FoulsCode

Εμφάνιση αναρτήσεων με ετικέτα Image Slider. Εμφάνιση όλων των αναρτήσεων
Εμφάνιση αναρτήσεων με ετικέτα Image Slider. Εμφάνιση όλων των αναρτήσεων

3 Απριλίου 2013

Προτεινόμενα Post από CSS, jQuery (Πορτοκαλί)




Το έκανα σε πορτοκαλι πειράζοντας το css για τα ταιριάζει το χρώμα με το blog μπορείτε να το κάνετε ότι χρώμα θέλετε!



Αντιγραφή επικόλληση τον κώδικα:

<style scoped="" type="text/css">/* foulscode.blogspot.gr */#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:250px}#slides li{width:49.9%;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){display:block}#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;padding:4px;background-color:#D15801;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #D15801;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Georgia,Times,"Times New Roman";left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}#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:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}#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{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 #D15801 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}#buttons a#nextx::before{border-color:transparent transparent transparent #D15801;margin-left:-3px}@media only screen and (max-width:600px){  #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%}}/* foulscode.blogspot.gr */</style><div id="featuredpost"></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/featuredpost.min.js" type="text/javascript"></script><script type='text/javascript'>//<![CDATA[$(document).ready(function () {FeaturedPost({blogURL:"http://foulscode.blogspot.com",MaxPost:8,idcontaint:"#featuredpost",ImageSize:300,interval:5000,autoplay:true,tagName:false});});//]]></script>


Και αφού βάλετε το δικό σας link είστε έτοιμη να κάνετε αποθήκευση.


Διαβάστε Περισσότερα »

29 Μαρτίου 2013

Pure CSS - Image Slider




Αντιγραφή επικόλληση τον παρακάτω κοντιά:


<style>
/* foulscode.blogspot.gr */
body {
  background: #ccc;
  width: 950px;
  margin: 0 auto;
  padding: 10px;
}
.slider {
  background: #111;
  width: 950px;
  height: 350px;
  padding: 10px;
  position: relative;
  top: 10px;
  box-shadow: 0 30px 50px -20px black;
  overflow: hidden;
}
.images {
  background: #ccc;
  width: 100%;
  height: 74%;
  transition: background .5s linear;
}
input[type='radio'] {
  -webkit-appearance: none;
  appearance: none;
  background-color: #444;
  background-size: 225px 70px;
  width: 225px;
  height: 70px;
  margin: 5px;
  cursor: pointer;
  position: relative;
  float: left;
  top: 270px;
  -webkit-filter: sepia();
}
input[type='radio']:checked {
  content: '';
  border: solid 5px #ccc;
  box-shadow: none;
  -webkit-filter: none;
}
input[type='radio']:hover{
  border: solid 5px #fff;
  -webkit-filter: none;
  transform: scale(1.05);
  z-index: 9999;
}
.slide1 {
  background: url(http://iweb.uz/azik/wp-content/uploads/2012/10/samarkand1.jpg);
}
.slide2 {
  background: url(http://iweb.uz/azik/wp-content/uploads/2012/10/samarkand2.jpg);
}
.slide3 {
  background: url(http://iweb.uz/azik/wp-content/uploads/2012/10/samarkand3.jpg);
}
.slide4 {
  background: url(http://iweb.uz/azik/wp-content/uploads/2012/10/samarkand4.jpg);
}
.slide1:checked ~ .images {
  background: url(http://iweb.uz/azik/wp-content/uploads/2012/10/samarkand1.jpg);
}
.slide2:checked ~ .images {
  background: url(http://iweb.uz/azik/wp-content/uploads/2012/10/samarkand2.jpg);
}
.slide3:checked ~ .images {
  background: url(http://iweb.uz/azik/wp-content/uploads/2012/10/samarkand3.jpg);
}
.slide4:checked ~ .images {
  background: url(http://iweb.uz/azik/wp-content/uploads/2012/10/samarkand4.jpg);
}
h3{
  color: #000;
  font-family: 'Courier';
  margin: 30px -15px 0 0;
  text-align: right;
  text-shadow: 2px 2px 2px #fff;
}
h3 a{
  color: #000;
  text-decoration: none;
}
/* foulscode.blogspot.gr */
</style>
<div class='slider'>
  <input checked='' class='slide1' name='thumbnail' type='radio' />
  <input class='slide2' name='thumbnail' type='radio' />
  <input class='slide3' name='thumbnail' type='radio' />
  <input class='slide4' name='thumbnail' type='radio' />
  <div class='images'></div>
</div>
<h3>
  created by
  <a href='https://foulscode.blogspot.gr' target='_blank'>foulscode</a>
</h3>




DEMO



Αντικαταστήστε τα URL τον εικόνων με τα δικά σας URL αποθήκευση και τελειώσατε!
Διαβάστε Περισσότερα »

28 Μαρτίου 2013

Προτεινόμενα Post από CSS, jQuery




Αντιγραφή επικόλληση τον κώδικα:


<style scoped="" type="text/css">
/* foulscode.blogspot.gr */
#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:250px}
#slides li{width:49.9%;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){display:block}
#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;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Georgia,Times,"Times New Roman";left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}
#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:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#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{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}
@media only screen and (max-width:600px){
  #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%}
}
/* foulscode.blogspot.gr */
</style>
<div id="featuredpost"></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/featuredpost.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://foulscode.blogspot.com",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

DEMO


Και αφού βάλετε το δικό σας link είστε έτοιμη να κάνετε αποθήκευση.
Διαβάστε Περισσότερα »
Related Posts Plugin for WordPress, Blogger...