5 maja 2016

Urozmaićmy POPULARNE POSTY!

Dzień dobry! W tak piękny słoneczny dzień przekazuje świetną instrukcję, a właściwie gotowe kody na popularne posty. Autorką jednego z kodów jest TYLER.

Efekt jest następujący:

Kod:
.popular-posts ul{list-style:none;}
.popular-posts ul li {margin-left:-13px;margin-bottom:-5px;}
.item-title {border-left:10px #F35E5E solid;font-family:arial; background-color: #666; text-transform: uppercase; padding: 5px; z-index: 0; color: #EEF3DA; font-size: 8px; line-height: 100%; letter-spacing: 1px;filter: alpha (opacity=900); -moz-opacity: 0.90; opacity: 0.90; height:10px;margin-bottom:0px;}
.item-title a { color:#eee;}
.item-snippet { text-align:justify;background:#EEF3DA;padding:5px;}

Efekt: 
Kod:
.PopularPosts .item-title {
    text-transform: uppercase;
    font-size: 85%;
    border-bottom:1px dotted $(motyw1);
    margin-bottom:2px;
}
Efekt:

Instrukcja:
1. Wyszukujemy </body> i nad nim wklejamy:
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
 $(document).ready(function() {$('.PopularPosts img').attr('src', function(i, src) {return src.replace( 's72-c', 's400' );});});
</script>
    <script type='text/javascript'>
    //<![CDATA[
    $('.popular-posts ul li .item-snippet').each(function(){
     var txt=$(this).text().substr(0,120);
      var j=txt.lastIndexOf(' ');
      if(j>10)
         $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
    });
    //]]>
    </script>
2. Kod CSS, który dodajemy w arkuszu:
.PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0; overflow: hidden; position: relative; width: 100%; }
.PopularPosts .item-title { position: relative; }
.PopularPosts img { display: block; height: auto; position: absolute; width:auto; transition: all 1s ease 0s; }
.item-title a { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-family: Impact; font-size: 17px; font-weight: 100; padding: 10px 0; position: absolute; right: 0; text-align: center; top: 30px; width: 100%; }
.item-snippet { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-weight: 900; left: 12%; padding: 10px; position: absolute; text-align: center; top: 95px; width: 70%; }
.item-content:hover img {transform: rotate(10deg) scale(1.2);}
.item-content { position: relative; }
Efekt:

Instrukcja:
1. Nad </body> wklejamy:
 <script type='text/javascript'>
        //<![CDATA[
        $(document).ready(function() {
          $('.mobile-index-thumbnail img').attr('src', function(i, src) {return src.replace( 's72-c', 's500-c' );});
          $('.mobile .post-body img').attr('src', function(i, src) {return src.replace( 's280', 's500' );});
          $('.PopularPosts img').attr('src', function(i, src) {return src.replace( 's72-c', 's500-c' );});
          $('.post-body').fitVids();
          $('.post-body img').each(function(){
            $(this).removeAttr('width')
            $(this).removeAttr('height');
          });
        });
        //]]>
 </script>
2. W arkuszu wklejamy:
.widget .popular-posts ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.PopularPosts .item-thumbnail {
    float: none;
    margin: 0;
}
.PopularPosts .item-title {
    font: 12px Arial, sans-serif; /* Wielkość i rodzaj fontu tytułu */
    letter-spacing: 1px; /* Wartość odstępów między literami tytułu */
    padding-bottom: 0.2em; /* Wartość odstępu pod tytułem */
    text-transform: uppercase; /* Wielkie litery tytułu */
    text-align: center; /* Wyśrodkowanie tytułu */
}
.PopularPosts .item-title a {
    color: #222; /* Kolor tytułu linku */
}
.PopularPosts img {
    width: 100%; /* Szerokość zdjęcia */
    height: auto; /* Wysokość zdjęcia */
    transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
}
.PopularPosts img:hover {
    opacity: .7; /* Stopień przezroczystości zdjęcia po najechaniu myszą */
}
.PopularPosts .item-snippet {
    display: none; /* Brak wyświetlania fragmentu tekstu */
}
(c) graphical-thoughts, blokotek

Brak komentarzy:

Prześlij komentarz