Anatomia "Popularnych postów"

Popularne posty raczej na miano najbardziej używanego, lubianego, wykorzystywanego gadżetu może nie zasługują. Jednak przy odrobinie zmian, oczywiście korzystnych, może nawet będzie można tenże gadżet zainstalować. Ba, nawet patrzeć! A tak na serio, to ja, odwiedzając stronę, pierwsze co przeglądam to popularne posty, no bo czemu nie. Skoro popularne, to wielu ludziom się podoba, odwiedzają, patrzą, być może wracają; wchodząc w pierwszy wyświetlony tam link, na 90% post mi się spodoba. A skoro jestem na stronie dotyczącej CSS'a i HTML'a to wiem, że także się przyda. 

Nie będziemy jednak odpicowywać ich w Bóg wie jaki sposób. Zrobimy to elegancko, ładnie i bez zbędnych komplikacji. 

Zaczniemy od kodów CSS, bo są łatwiejsze i bardziej...przystępne. ( Selektory opisywane przy wyświetlaniu tytułu posta, obrazka i krótkiego opisu. )

• .popular-posts ul - podstawową właściwością przy tym selektorze jest list-style:none, pozwalające na usunięcie kropeczek ( wykropkowania ) przy każdym kolejnym poście. Zasięg tego kodu to wszystkie "popularne posty". Jak ustawimy sobie ilość postów na 5, to te pięć tenże selektor ogarnie. 
• .popular-posts ul li - jest to kod na dostosowywanie boxów, inaczej po prostu postów. Jednak dodając powiedzmy np. tło, czyli background, konieczne będzie użycie margin. Bez tego nam się posty do siebie "przykleją". Poza tym do wyrównania należałoby też dodać margin-left:-10px ( około ) przy zwykłym marginie:3px.
• .item-content - znowu odpowiadający za boxy, jednak dla poprawnego wyświetlania radziłabym łączyć .popular-posts ul li, właśnie z .item-content. Już wyjaśniam dlaczego. Do .popular-posts ul li nie dodamy paddingu. Znaczy dodamy, ale nie zadziała. Dlatego tą właściwość dodajemy do .item-content i wszystko pięknie się zgrywa z .popular-posts ul li. 
• .item-title - pozwala na 'zrobienie na bóstwo' tytułu danego posta. O tyle dobrze, że odnosi się on do wszystkich ( logiczne ) opcji. Dlatego najczęściej jest używany, gdy autorzy bloggów chcą wyświetlać właśnie tylko tytuł. Dostosowuje się go tak jak zwyczajny tekst. 
• .item-snippet - kolejna łatwa sprawa. Opis postu, pierwsze zdanie z postu. Za to właśnie odpowiada ten selektor. 

Działać będziemy w różny sposób i na wszystkich opcjach. A pozmieniamy je trochę inaczej, trochę mniej normalnie i bardzo po naszemu. Znajdujemy "popularne posty" w naszym kodzie. Oczywiście wchodzimy w Szablon > Edytuj kod HTML i przewijamy na sam dół. 

Tak powinno to wyglądać, oczywiście mamy różne gadżety, ale tym się nie martwcie. 

Tak wyglądają opcje, z których możemy skorzystać.

 (1) Sam tytuł - opcja bardzo częsta i myślę, że też bardzo lubiana. Bez zbędnych dodatków, jest przejrzyście i estetycznie. 

(2) Tytuł + Opis - druga częsta opcja. Najpierw tytuł, potem elegancki opis. Cóż więcej chcieć. 

(3) Tytuł + obrazek - rzadko wykorzystywana opcja, przede wszystkim dlatego, że wygląda nieestetycznie, za poza tym nie każdy wykorzystuje obrazki w postach. 

(4) Tytuł + opis + obrazek - opcja, którą lubię. Można się nią fajnie pobawić. 

Dwa słowa o modyfikowaniu samego tytułu za pomocą CSS. Ogólny wygląd oczywiście za pomocą selektora .popular-posts ul li. Jednak może nam dokuczać fakt, że tytuły przyczepiają się do lewej strony boxu. Dlatego używamy .popular-posts ul li a, gdzie dodajemy padding-left:10px (około ).

Prezentuje się iście pospolicie. Faktycznie, mogłoby się wydawać, że nie da się nic z tym robić. Ale co jeśli ja mam ochotę na serduszko jako udawane wyliczenie. 

 <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'>♥ <data:post.title/></a>
          <b:else/>

W powyższym przypadku serduszko będzie zalinkowane razem z tytułem posta. Innej opcji nie polecam, bo to małe cholerstwo będzie się znowu przyczepiać do lewej krawędzi. Oczywiście można dodawać różne znaczki. 

Kolejną rzeczą, którą możemy zrobić to dodać klasę. Powiedzmy, że chcemy, aby nasze popularne posty wyglądały tak jak menu. Aby wszystko nam się zgadzało, najlepiej nie dodawać żadnych kodów na popularne posty oprócz: .popular-posts ul{list-style:none;} i .popular-posts ul li {margin-left:-10px;margin-bottom:-15px;}. Pierwsze usuwa nam wyliczenie, a drugie poprawia miejsce linków. Czyli przybliża do lewej strony i zmniejsza odległość między kolejnymi linkami z dołu. 

<!-- (1) No snippet/thumbnail -->
            <a class='menu' expr:href='data:post.href'> <data:post.title/></a>
          <b:else/>

W kwestii tworzenia klasy zapraszam do postu: Menu w gadżecie HTML/JavaScript.

Kody do powyższej opcji to oczywiście .item-title i .item-snippet, co widzimy powyżej.

Zastanawiałam się co można by tu pozmieniać ( oprócz dodawania tego uroczego serduszka ) i nie wpadałam na żaden konkretny pomysł. Ta propozycja to tylko ładne dostosowanie fragmentu i tytułu. Dlatego też właśnie zamierzam do zrobić. Zacznę od podstawy, czyli:

.popular-posts ul{list-style:none;}
.popular-posts ul li {margin-left:-13px;margin-bottom:-5px;}

Co robi list-style wiemy, a reszta to kwestia ustawienia tego małego cholerstwa do pionu, a to właśnie zrobiłam. Dalej to dostosowanie tytułu. Akurat jestem podczas aktualizowania szablonu I'm going down, dlatego też zmiany będą "pod" ten szablon.

.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-title postanowiłam zerżnąć od tytułu gadżetów, dlatego tak też zrobiłam.  Jest to taki sam kod z wyjątkiem paru zmian w postaci marginu. Kolor czcionki zmieniłam za pomocą .item-title a, czyli linku w .item-title.
Teraz fragment. Postanowiłam dodać w nim tło pod kolor całego szablonu plus skromny padding i wyrównanie tekstu:

.item-snippet { text-align:justify;background:#EEF3DA;padding:5px;}

Efekt

Jeszcze bardziej podłe zadanie niż wyżej. Opcja przeze mnie, przede wszystkim, nie lubiana. Nigdy nie wiem gdzie strzelić obrazek, jak go strzelić, w jakich wymiarach, żeby to ładnie współgrało. Kompletny brak weny. Wiem, że nie powinnam tego robić, ale dajcie sobie spokój z obrazkiem i tytułem. Aby to współgrało z moją duszą zodiakalnej panny, trzeba by chyba dodawać posty o dwu zdaniowym tytule. 

Jeszcze raz wybaczcie i lecimy dalej. :)

Po pierwsze zmienimy rozmiar obrazka, jego wysokość i szerokość. Z tego względu, że nie do końca wszystko się estetycznie prezentuje postarajcie się, aby pierwszy obrazek w każdym poście miał takie same rozmiary. Jeśli jest kwadratowy, to proponuje zmieniać rozmiar na 50/60px dla height i widht. Jeśli jednak jego wymiary to np. 300x200 to zmieniamy to na 75x50px lub np. 50x33px i tak dalej. Teraz pytanie, jak to zrobić. Otóż w sposób bardzo prosty: 

<img alt='' border='1' height='33' expr:src='data:post.thumbnail' width='50'/>

Jak widzicie expr:width='data:thumbnailSize' zmieniłam na zwykłe width, a expr:height='data:thumbnailSize' na height.

Rozmiar mamy, teraz trzeba przywrócić obrazek do porządku, czyli używamy .item-thumbnail:

.item-thumbnail { padding:0px;padding-left:5px; padding-bottom:-5px;}

Przyznam się robiąc tę opcję byłam nieźle zdenerwowana. Paddingi w obrazkach mnie wkurzają.  Szczególnie dolny, który zmusił mnie do wierzenia w to, że być może jak będzie na minusie to to coś da. Za kija, w życiu. Byłoby za pięknie.
Aby dalej to pasowało ( .item-title i .item-snippet były nadal takie same jak w opcji (2) ) postanowiłam dodać do .item-snippet line-height, które by zmniejszyło odległość między linijkami i trzymało się kupy.

.item-snippet { text-align:justify;background:#EEF3DA;padding:5px;line-height:11px;font-size:7pt;}

I koniec!  

Tu z tego miejsca osobiście oświadczam i zaklinam Was ludzie: używajcie pierwszej i drugiej opcji. Z trzecią i czwartą jak chce się stworzyć coś ładnego jest nieco za dużo roboty ( czasami ). Ale to taka moja mała propozycja. Tymczasem gratuluję wszystkim, którym udało się to w całości ( lub przynajmniej ) częściowo przeczytać i zrozumieć. Mam też nadzieję, że kiedy będziecie mieli ochotę zmienić Wasze "popularne posty" wpadniecie i tym razem przeczytacie w całości i dowiecie się co i jak. :)

Jeszcze tylko zajmiemy się odpicowaniem komentarzy ( raczej przewiduje krótki post, ale co z tego wyjdzie, nie wiadomo ), potem ramki i gadżety z divem, czyli o ramkach słowa dwa. Następnie myślałam nad efektami dla obrazków, które pojawiły się między innymi na podstronie "szablony" i w "West Coast Adventure".