Popularne Posty #1

Blogger oferuje nam wiele gadżetów. Jednym z nich jest PopularPosts, czyli Popularne Posty. Większość blogów o dobrych statystykach dodaje sobie taki element, co jednocześnie ma proponować i zachęcać obserwatora do przeczytania popularnych notek.

Niestety wygląd początkowy obserwatorów woła o pomstę do nieba. Małe zdjęcie. Tytuł posta, zajmujący zazwyczaj połowę pola i początek notki, który ani trochę nie jest potrzebny.

Nie jest to ani estetyczne, ani przyciągające uwagę.. a w dodatku zajmuje dużo miejsca.

Olaboga i co teraz?! Teraz trzeba jedynie podwinąć rękawy, zajrzeć do kodów, troszkę powklejać tu i tam i gotowe.

     

     

No więc dzisiaj propozycja taka: Pierwsze zdjęcie/obrazek z posta w większym formacie i sam tytuł. Żadnych opisów, zaczątków notki - nic... A dodatkowym efektem będzie przesuwanie i zbliżanie się zdjęcia po najechaniu. (sprawdź po prawej stronie bloga)

~ Charles Eames

Szczegół nie jest tylko szczegółem. To część składowa każdego projektu.

No więc najpierw wejdź w rozszerzoną wersję szablonu, czyli HTML. Otwórz okienko wyszukiwania. Jeśli jeszcze nie wiesz jak, polecam zajrzeć TU. I wyszukaj kod:

</body> 

Tuż nad nim wklej:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>

<script type='text/javascript'>

 $(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});

</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>

Następnie zapisz, przejdź do arkuszu CSS i wklej: 

/* Popular Posts Widget customized by AllBloggerTricks.com */
.PopularPosts .item-thumbnail {
display: block;
height: 100px;
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.25);
color: #FFFFFF;
font-family: Times New Roman;
font-size: 17px;
font-weight: 100;
padding: 10px 0;
position: absolute;
right: 0;
text-align: center;
top: 30px;
width: 100%;
}
.item-snippet {
display: none;
}
.item-content:hover img {
transform: rotate(10deg) scale(1.2);
}
.item-content {
position: relative;
}