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