Font Awesome

Font Awesome jest rzeczywiście niesamowity, ponieważ pozwala dodać na bloga różne ikonki-obrazki bez użycia photoshopa. Chciałabym wam teraz pokazać, jak w bardzo szybki sposób zainstalować takie ikonki u siebie na blogu.

Modyfikacja autora w poście

Na prośbę Anonima spod poprzedniego postu pojawia się równie krótka instrukcja na to, jak dodać coś własnego przed swoim nickiem w podpisie postu. W kodzie szablonu szukamy
<data:top.authorLabel/> Usuwamy zaznaczony fragment i w jego miejsce wstawiamy coś własnego. Może to być tekst np. post napisała. Należy jednak pamiętać, że nick wyświetla się w mianowniku. Zatem dodanie napisu post został napisany przez nie będzie wyglądało dobrze przed nieodmienionym do właściwego przypadku nickiem.

W tym miejscu możemy też wstawić jakąś ikonkę (obrazek):
<img src=""/> Lub też użyć jakieś ikonki z fontu Awesome. Możliwości jest wiele, tylko od was zależy jak to wykorzystacie.

Liczba komentarzy zamiast całej etykiety

Czyli jak w bardzo prosty sposób dostosować do swoich potrzeb treść linku prowadzącego do komentarzy. Na sam początek otwieramy KOD szablonu i szukamy (ctrl + f) następującego kodu:
<data:post.commentLabelFull/>: Tam znajduje się też ten nieszczęsny dwukropek, który zawsze wyświetla się w linku prowadzącym do komentarzy. Następnie należy zamienić powyższy kod na ten:
<data:post.numComments/> On zamiast całej komendy 12 komentarzy: wyświetli tylko liczbę 12. Teraz możemy zostawić to tak jak jest lub też dodać swój własny tekst. Np.
<data:post.numComments/> | add comment Wtedy link do postu będzie miał następującą treść 12 |  add comment. Należy jednak pamiętać, że dodany przez nas tekst nie będzie się odmieniać tak jak to było w przypadku słowa komentarze w pełnej etykiecie.

Mam nadzieję, że wszystko jest jasne.

Wysuwane linki w menu

Dzisiaj chciałabym wam przedstawić trzy nieco różniące się efekty na wysuwane link w menu. Przykład poniżej.

• Efekt 1
• Efekt 2
• Efekt 3

Wypływanie elementu: zastosowanie dla widgetów

Teraz chciałabym wam przedstawić zastosowanie wcześniejszej instrukcji do dowolnego gadżetu na blogu. Nasz przykład omówię na ramce popularne posty. A teraz przejdźmy do praktyki.

Wypływanie elementu

Ostatnio bardzo popularny stał się efekt, który polega na płynnym pojawianiu się jakiegoś elementu, kiedy najedziemy myszką na inny. Obecny jest on również na głównym szablonie Wioski (kiedy najedziemy kursorem na kwadraciki wysunie się z góry tekst). A teraz chciałabym przedstawić wam, jak zrobić ten efekt.

Całość opiera się głównie na pseudoselektorze :hover oraz poleceniu transition. Jeżeli mieliście już do czynienia z tymi dwiema rzeczami, zrozumienie tej instrukcji przyjdzie wam jeszcze łatwiej.

A oto efekt, do którego wspólnymi siłami postaramy się dojść.

Tytuł

Tekst, który się pojawia z dołu (nieco jak widmo), ale fajnie wygląda, prawda?

Na początek wygląd htmlu:
<div class="dd" id="d1">
<div class="tytul">Tytuł</div>
<div class="dd" id="d2">Tekst, który się pojawia z dołu (nieco jak widmo), ale fajnie wygląda, prawda?</div>
</div>