tutoriale, szablony, web design

Pytania - Jeśli macie jakieś pytania lub uwagi, to zapraszam na nasz profil ask.fm. Postaramy odpowiedzieć na wszystkie pytania dotyczące szablonów, zamówień, jak również zaradzić conieco w sytuacji, gdzie szablon nie chce współpracować. Propozycje - Jeśli masz pomysł na ciekawą instrukcje, która mogłaby pomóc lub zainspirować wielu blogerów, daj nam znać! Z chęcią pomożemy! Propozycje możesz zostawić tutaj: Propozycje Pomoc - Gdyby ktoś desperacko szukał pomocy i wszystkie instrukcje go zawiodły, to jest e-mail tyler (bizarre1309@gmail.com ) i tam można pisać, mardzić na bloggera i resztę świata, no i ogólnie to też szukać pomocy. #idontjudge

wtorek, 13 sierpnia 2013

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". 

10 komentarzy:

  1. Wygląda to dużo przyjemniej, może kiedyś, jak będę potrzebować tego gadżetu to się nim zajmę ;) Dziękuję za odpowiedź na maila, tak czy siak, nie udało mi się tych nieszczęsnych komentarzy przenieść, a przynajmniej nie wyświetla mi się ten efekt na podglądzie XD Ale jak będę mieć więcej czasu, to jeszcze się tym pobawię i pomyślę nad tym, przynajmniej już wiem co i gdzie wstawić :3

    OdpowiedzUsuń
    Odpowiedzi
    1. Jak chcesz to się tym pobawię i zobaczę co tam faktycznie się dzieje :) Jakbyś oczywiście chciała i przesłała zapakowany szablon. ;>
      Ostatni już prawie akcent z anatomii. Zastanawiałam się coby jeszcze tutaj dorzucić, ale nie mam pomysłu. Poprzeglądam zaraz blogi i zobaczę co bloggerzy wstawiają to może coś mi do głowy wpadnie ;) Odpicowane już są posty, archiwum i popularne posty. Zastanawiam się co dalej. ;) Najwyraźniej już nic. ;)

      Usuń
    2. Wyślę ;) Jeśli tylko znajdziesz czas, to będzie mi miło jeśli lookniesz, co się tam wyprawia :D Jakoś specjalnie go muszę pakować na jakąś stronę, czy wystarczy jak go pobiorę i Ci wyślę .xml? ;)

      Też wydaje mi się, że to już wszystkie możliwe posty z anatomii. Nawet nie wpadłabym na to, że zabierzesz się za popularne posty! :D

      Usuń
  2. Może to gdzieś wykorzystam. Ciekawe i nie takie trudne. Zaraz do ciebie mail wyśle.
    Pozdrawiam ^^

    OdpowiedzUsuń
    Odpowiedzi
    1. Wysyłaj, wysyłaj :)
      A Popularne posty to zdecydowanie niedoceniany gadżet, może się kogoś przekona przez ten post. ;)

      Usuń
  3. O, I like it :D Chociaż ostatnio już i tak więcej działam z tymi innymi gadżetami, hihihi <3

    OdpowiedzUsuń
    Odpowiedzi
    1. Właśnie. Moja Droga, jakich gadżetów najczęściej używasz, bo mam ochotę machnąć jeszcze coś z anatomii. ;D To jest takie fajne! :D I trzeba by się w końcu dogadać z robotą tego szablonu na GA, co nie? ;)

      Usuń
    2. Kurcze... milion rzeczy, o które chciałbym zapytać, nawet nie wiem od czego zacząć xD Może od tego, że jakieś dwa miesiące temu dodałem twój blog do linków i z powodu mojej głupoty, zapomniałem cię o tym poinformować. Byłabyś zainteresowana taką współpracą? :P

      Usuń
    3. Oczywiście, drogi Przyjacielu, że zainteresowana współpracą jestem. I już, w tej właśnie chwili dodaję Cię do linków, w których ostatnio nic się nie dzieje. ;>
      Ja gadać lubię, także nie ma problemu, na ewentualne pytania oczywiście odpowiem! :D

      Trzymaj się! :)

      Usuń
  4. Czy jest taka możliwość żeby w popularnych postach wyświetlały się tylko same ikonki, bez tytułów?

    OdpowiedzUsuń