17# Przepis na Popularne Posty

Cześć wszystkim!
W dniu dzisiejszym prezentuję prosty sposób na ozdobienie gadżetu z popularnymi postami na Waszych blogach. Omówimy również krótko anatomię tego gadżetu dzięki czemu będziecie w stanie dowolnie modyfikować przedstawiony przeze mnie sposób, no i oczywiście we własnym zakresie bawić się z kodami we własnym zakresie. Efekt, który dziś uzyskamy prezentuje się następująco:

Po lewej efekt przed najechaniem na post. Po prawej po. Przez jakiś czas będzie również efekt będzie można podziwiać na moim próbnym blogu, pod >>TYM<< adresem.

SELEKTORY

Zaczniemy od obiecanej anatomii popularnych postów.
#PopularPosts1 h2 - tytuł gadżetu
#PopularPosts1 - cały gadżet (wraz z tytułem)
#PopularPosts1 .widget-content - zawartość gadżetu (bez tytułu)
#PopularPosts1 ul li - lista, którą tworzą kolejne posty w gadżecie
#PopularPosts1 .item-content - zawartość każdego z elementów listy (tytuł + miniatura + fragment)
#PopularPosts1 img - miniaturka
#PopularPosts1 .item-title a - tytuł posta
#PopularPosts1 .item-snippet - fragment posta
To powinno nam pomóc z pracą nad omawianym gadżetem. :)

KROK 1. Konfiguracja gadżetu

Po dodaniu Popularnych postów na blog kliknijcie na ikonkę ustawień znajdującą się w prawym, dolnym rogu. Możecie dowolnie oznaczać okresy z których będą wyświatlały się posty a także ich liczbę. Ważnym jest jednak, by odhaczyć zarówno miniaturkę obrazu jak i fragment.



KROK 2. HTML - opcjonalnie

By omawiany gadżet wyglądał estetycznie należy dokonać jednej, drobnej zmiany w arkuszu HTML. Miniaturki w omawianym przez nas gadżecie są dość niewielkie, a przez ich rozciąganie w CSS mogą stracić na jakości. Aby temu zapobiec w panelu administracyjnym naszego bloga klikamy na Szablon > Edytuj kod HTML. Wciskamy na klawiaturze CTRL i F, by odnaleźć następujący kod:

<div class='item-thumbnail'>
Tuż pod powyższym kodem znajdziecie:
 <b:with value='data:post.featuredImage.isResizable? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;): data:post.thumbnail' var='image'>

Pogrubioną wartość należy zmienić na większą. W moim przypadku było to 400.


KROK 3.CSS

Po wykonaniu dwóch pierwszych kroków możemy przejść do stylu gadżetu. W panelu administracyjnym bloga wchodzimy w Szablon > Dostosuj > Zaawansowane > Dodaj arkusz CSS, by w białym polu wkleić:

#PopularPosts1 ul
{
/*usunięcie marginesów i odległości od ramek w gadżecie*/
padding:0;
margin:0;
}

#PopularPosts1 ul li
{
list-style-type:none; /*usunięcie stylu listy*/
padding:0; /*usunięcie  odległości od ramek w liście*/
margin-top:3px; /*ustawienie marginesu między postami*/
}

#PopularPosts1 .item-content
{
width:100%; /*szerokość każdego pota*/
border:2px groove grey; /*styl obramowania*/
font-family:arial; /*czcionka w postach*/
height:150px; /*wysokość posta*/
overflow:hidden; /*przycięcie gadżetu (dzięki temu nie będzie się rozciągał)*/
}

#PopularPosts1 img
{
width:400px; /*szerokość obrazu*/
min-height:150px; /*minimalna wysokosć obrazu*/
margin:-100px 0 0 -150px; /*pozycja obrazu*/
z-index:-1; /*ustawienie obrazu za pozostałymi częściami gadżetu*/
}

#PopularPosts1 .item-title
{
position:relative;
top:45px; /*pozycja tytułu posta*/
}

/*TYTUŁ POSTA*/
#PopularPosts1 .item-title a
{
color:#FFF; /*kolor czcionki*/
transition:.5s; /*czas animacji*/
text-transform:uppercase; /*wszystkie literki są wielkie*/
font-size:9px; /*wielkość czcionki*/
line-height:14px; /*odległość między linijkami */
padding:15px; /*odległość napisu od ramki*/
position:absolute;
left:0;
right:0;
margin:0 auto; /*tak ustawiony margin wraz z zerową wartością dla left i right ramkę z naszym tytułem na środku*/
width:70%; /*szerokość ramki*/
text-align:center; /*wyśrodkowanie tekstu*/
text-decoration:none; /*brak podkreślenia w linku*/
background:rgba(0,0,0,0.8); /*tło*/
}

/*FRAGMENT POSTA*/
#PopularPosts1 .item-snippet
{
color:#FFF; /*kolor czcionkia*/
font-size:10px; /*wielkość czcionki fragmentu posta*/
opacity:0; /*uniewidocznienie fragmentu posta, w czasie gdy nie najeżdżamy na niego kursorem*/
letter-spacing:1px; /*odległość między literami we fragmencie posta*/
line-height:11px; /*odległość między liniami we fragmencie posta*/
padding:5px; /*odległość tekstu od ramki*/
position:absolute;
left:0;
right:0;
margin:45px auto 0!important; /*takie ustawienie umożliwi nam usytuowanie fragmentu na środku*/
width:70%; /*szerokość ramki z fragmentem posta*/
text-align:center; /*wyśrodkowanie tekstu*/
background:rgba(0,0,0,0.9); /*tło*/
transition:1s;/*czas animacji*/
}

/*ANIMACJA FRAGMENTU POSTA PO NAJECHANIU NA RAMKĘ*/
#PopularPosts1 .item-content:hover .item-snippet
{
opacity:1;
transition:1.5s
}

/*ANIMACJA TYTUŁU PO NAJCHENIU NA RAMKĘ*/
#PopularPosts1 .item-content:hover .item-title a
{
padding:0;
padding-top:10px;
padding-bottom:10px; /*odegłości pomiędzy ramką, a tekstem (top - góra, bottom - dół)*/
margin-top:-45px; /*podniesienie tytułu wyżej*/
width:100%; /*rozciągnięcie tytułu na całą szerokość obrazka*/
transition:.5s/; /*czas animacji*/
}
Jak widzicie - trick jest prosty, a moim zdaniem efekt jest całkiem fajny. :)
Podzielcie się koniecznie opinią odnośnie takiej stylizacji dla Popularnych Postów w komentarzach!

I... Mam do Was pytanie. Zwiedzając blogi zauważyłam, że część z Was nie czyta zasad zawartych na MRUwisku. Macie pomysł jak temu zapobiec? A może powinnam po prostu zrezygnować z regulaminu?

Pozdrawiam!
Kociak

13 komentarzy:

  1. Hm... może zamiast wpisywania się na księgę pobrań, można by było:
    z kodami: aby osoby, które używają twojego kodu o wstawienie creditu pod pracą lub pracy (np. w modyfikowanej stopce )
    z dodatkami: nie mam pojęcia :|

    P.S. Świetny efekcik. ;D Może kiedyś go sobie skradnę. ;D
    Pozdrawiam!

    OdpowiedzUsuń
    Odpowiedzi
    1. Dziękuję za porady! :)
      A do skorzystania z instrukcji zachęcam. ;D

      Usuń
  2. Witaj ; ) Jak zwykle instrukcja rewelacyjna <3

    Przyznam Ci się, że kiedyś sama próbowałam ją zrobić, gdy znalazłam ją na helpblogger, ale po kilku dniach... było tak, jakby zniknęło całe kodowanie, i zostały zwykłe popularne. Także mam nadzieję, że z Twoją pomocą, tak już się nie stanie w przyszłości. Teraz robię serię minimalistycznych szablonów, (jeden z nich zalinkowałam w pobieralniku) a moim zdaniem takie popularne właśnie idealnie pasują do minimalistycznych. Sprawiają, że szablony nie są takie... puste ; )

    Pozdrawiam!

    PS! Może w każdym poście na końcu dodawaj adnotację " Przed użyciem instrukcji/ pobraniem dodatku, zapoznaj się z REGULAMINEM" gdzie regulamin byłby linkiem do zasad?:>

    Irlandka.

    OdpowiedzUsuń
    Odpowiedzi
    1. Z porady na pewno skorzystam. ;D
      Cieszę się, że moja instrukcja Ci się podoba i mam nadzieję, że Ci przysłuży! :)

      Usuń
    2. Mam nadzieję, że zadziała :D

      Usuń
  3. Hej!Z instrukcji skorzystam ale w kolejnym szablonie;) Mam nadzieję,że przestrzegam Twoich zasad
    (w poprzedniej notce wspomniałam o Twoim blogu) A,i jeszcze mam pytanie-można zrobić podobny efekt w liście blogów? Użyłam tego gadżetu na blogu ale chyba niezbyt dobrze to wygląda :D
    Pozdrawiam :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Trzeba pozmieniać selektory i trochę pociapciać się w HTML samej Listy Blogów. Jeśli natomiast chodzi o ten gadżet to planuję w przyszłości zrobić instrukcję na kilka fajnych efektów do niego. :)

      Usuń
  4. Dużo bawienia się z kodami, jestem ciekawa, czy z moją cierpliwością dam radę XD Ale chętnie spróbuję przy kodowaniu :>

    A może instrukcja na szablon, który dopasowuje się do każdej rozdzielczości? Jestem pewna, że wielu początkującym grafikom (w tym mi) zdecydowanie się przyda ☺

    Sandra x

    OdpowiedzUsuń
    Odpowiedzi
    1. Hej! Taki szablon, który dopasowuje się do każdej rozdzielczości jest dość ciężko zrobić. :) Taka instrukcja jednak już się pojawiła na rinne-tworzy.blogspot.com. Polecam tam zerknąć.

      Dziękuję za komentarz i pozdrawiam!

      Usuń
  5. dzieki !! udało mi sie :) .
    szukam innych kodów czy coś, bo chce troche ulepszyc bloga . moze sie uda :)

    OdpowiedzUsuń
  6. Hejo xD Twoje kody są cudowne *o* Uwielbiam zaglądać na MRUwisko xD Informuję, że szablon już stworzony. Wszystko dzięki twojej wiedzy i kodom :* Podaję adres: http://katalog-opowiadan.blogspot.com/

    OdpowiedzUsuń
  7. Swoją drogą świetny sposób na robienie tego wszystkiego, również dokończyłem już szablon i w końcu mam z tym święty spokój, wielkie dzięki ;)

    OdpowiedzUsuń

statystyka

Archiwum bloga

Obserwatorzy