Zmiana wyglądu popularnych wpisów

28.09.2015


Każdy zna Bloggerowy gadżet "popularne posty" i każdy zapewne wie, jak on wygląda bez pomocy kodu. Swoim wyglądem nie przyciąga zbyt wielkiej uwagi, jest bardzo tradycyjny, ale w dzisiejszym wpisie pokażę Wam jak w prosty sposób możemy zmienić jego wygląd.

1. Pamiętaj, żeby popularne wpisy wyświetlały się poprawnie po zastosowaniu tego kodu, musisz ustawić je w ten sposób:


2. Przechodzimy do szablon - edytuj kod HTML 


3. Klikamy kursorem w dowolne miejsce w kodzie i wybieramy ctrl +f, a następnie w okno wyszukiwania, które nam się pojawi wpisujemy </body> i klikamy enter.

4. Nad </body> wklejamy kod:


<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 customization by AllBloggerTricks.com
    // Trim Code by MS-potilas 2012
    $('.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>

5. Zapisujemy szablon. Teraz wyszukujemy ]]></b:skin> 

6. Nad ]]></b:skin> wklej kod:


.PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0 0 0 -10px; 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(255, 255, 255, 0.95); color: #95c6e8; font-family: Josefin Sans; font-size: 17px;  padding: 10px 0; position: absolute; right: 10px; text-align: center; top: 100px; width: 100%; }
.item-snippet {display: none;}
.item-content:hover img {
opacity: 0.70;
transition:opacity 0.4s ease-in-out;
-o-transition:opacity 0.4s ease-in-out;
-moz-transition:opacity 0.4s ease-in-out;
-webkit-transition:opacity 0.4s ease-in-out;}
.item-content {position: relative; }

Zapisz szablon.

7. Efekt końcowy:


12 komentarzy:

  1. Dzięki, dzięki, dzięki :D JAk będziemy mieć więcej czasu to po czarujemy :)
    Szkoda, ze we wakacje nie zebrałyśmy się na przemeblowanie bloga bo teraz to tylko kawałeczkami będziemy coś zmieniać :/

    OdpowiedzUsuń
  2. natalia20041989 .30 września 2015 16:14

    Bardzo podoba mi się efekt:) Nawet nie widziałam, ze jest tyle sposobów, by jeszcze upiększyć bloga:)

    OdpowiedzUsuń
  3. Świetny efekt - robi lepsze wrażenie niż tradycyjny układ, dzięki - mam nadzieję, że znajdę czas, aby sprawdzić tę opcję u siebie :)

    OdpowiedzUsuń
  4. Fajnie fajnie . Teraz mam nowy szablon ale w poprzednim używałam wlasnie jakichś kodów od Blokotka by tak wyglądały popularne posty bo jest dużo przejrzysciej i...po prostu ladniej :)

    OdpowiedzUsuń
  5. Nie powiem, bo efekt końcowy jest kuszący.

    OdpowiedzUsuń
  6. Fakt, wakacje to najlepszy czas, aby zmienić coś na blogu, ale lepiej robić coś kawałeczkami niż wcale :)

    OdpowiedzUsuń
  7. Jest mnóstwo sposobów, tylko jeszcze ja wszystkich nie znam ;p

    OdpowiedzUsuń
  8. Niestety u nas nie wygląda to dobrze. Zdjęcia się rozjeżdżają :/

    OdpowiedzUsuń
  9. Jak się rozjeżdżają? bo jeśli chodzi o ich wielkość to wystarczy dopasować to w podanym kodzie CSS, a dokładniej w linijce .PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0 0 0 -10px; overflow: hidden; position: relative; width: 100%; }

    OdpowiedzUsuń
  10. yyyyyyyyyyyyyyyyyy.... może i tak xD haha będziemy próbować później xD

    OdpowiedzUsuń
  11. Jakby nadal coś nie wychodziło to piszcie :)

    OdpowiedzUsuń
  12. Metr Sześćdziesiąt20 października 2015 22:53

    Super ! Spróbuje zrobić :)

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona