Cześć.
Pora wziąć się w garść i otrzepać mojego bloga po upadku, którego doświadczył przez moje lenistwo. Postanowiłam, że co niedzielę będę publikować tutaj jakieś poradniki/tutoriale na temat designu bloga na platformie blogspot (bo niestety na razie tylko na takiej się uczę). Co będzie można tu znaleźć? Od najprostszych zmian w tytułach postu, po bardziej skomplikowane "grzebanie" w kodzie HTML.
Dlaczego postanowiłam zrobić coś takiego?
Przede wszystkim wiem co to znaczy szukać poradników w internecie na milionach stron, bo chcesz znaleźć odpowiedni i jasny tutorial na temat tego jak wyśrodkować nagłówek, ale w końcu wszystko okazuje się być mało zrozumiałe, więc siedzisz z płaczem i zostajesz z niczym.
Na maila i w wiadomościach prywatnych dostawałam dużo próśb, żebym wytłumaczyła jak zrobić ładny wygląd bloga czy jak zrobić, żeby data dodania posta była w kółeczku. Cztery lata temu postanowiłam się wszystkiego nauczyć sama i dlatego chciałabym podzielić się z Tobą moją wiedzą.
Dodatkowo jak tylko uda mi się odzyskać laptopa z naprawy to planuję założyć kanał na youtubie na którym dodatkowo będę umieszczać tutoriale w wersji video. Myślę, że będzie to przydatne dla osób, którym nie chce się czytać lub chcą zrobić coś na szybko.
Pierwszym wpisem na temat designu będą selektory CSS. Selektory to jedne z najbardziej potrzebnych rzeczy przy jakichkolwiek choćby najmniejszych zmianach. Dzięki nim będziesz mógł samodzielnie stworzyć własne kody, które pomogą Ci przy zmienianiu wystroju, treści oraz faktury swojego bloga
PS Post będzie co jakiś czas aktualizowany w razie pojawiania się nowych selektorów.
.header - nagłówek bloga
.Header h1 - tytuł bloga (inaczej tytuł belki)
.main-inner - obszar wszystkich kolumn i pagera bloga
#Blog1 - obszar postu (wraz z jego datą) i pagera bloga
.date-outer - obszar postu (wraz z jego datą) bez pagera bloga
.post-outer - obszar postu, bez jego daty i pagera bloga
.footer-outer - stopka (na szerokości całego ekranu)
.footer-inner - stopka (jedynie na szerokości bloga)
.Attribution - napis na stopce
.navbar - pasek nawigacyjny na samej górze bloga
a:hover - wszystkie linki na blogu po najechaniu na nie myszką
#sidebar-right-1 - pojedyńcza prawa kolumna
#sidebar-right-2-1 - lewa podkolumna w prawej kolumnie
#sidebar-right-2-2 - prawa podkolumna w prawej kolumnie
.column-left-inner .widget - wszystkie gadżety w lewej kolumnie
h3.post-title - cały obszar tytułu posta
h3.post-title a - tylko tytuł posta
h3.post-title a:hover - tytuł posta po najechaniu na niego myszką
.post-body - obszar samej notki
.post-footer - stopka posta
.post-author - autor zawarty w stopce posta
.post-timestamp - godzina zawarta w stopce posta
.comment-link - ilość komentarzy zawarta w stopce posta
.post-footer-line-2 - etykiety zawarte w stopce posta
.blog-pager - obszar z przyciskami: starsze posty, nowsze posły, strona główna na szerokościselektora #Blog1
.blog-pager a - tylko przyciski pagera bloga
.blog-pager a:hover - przyciski pagera bloga po najechaniu na nie myszką
.feed-links - napis "Subskrybuj Posty: (Atom)" pod pagerem bloga
.comments h4 - duży nagłówek z ilością wszystkich komentarzy pod postem
.comment p - wszystkie komentarze, ten selektor może nam posłużyć np. do ustawienia tła, które będzie się pojawiać w każdym komentarzu
.avatar-image-container - wszystkie awatary obok komentarzy .post-body img - wszystkie obrazki, które umieścimy w notkach, ten selektor może posłużyc nam np. do ustawienia tła pod obrazkami
.tabs-inner - ogólnie pasek z kartami (jedynie na szerokości bloga)
.tabs-inner .widget li a - ogólnie karty
.tabs-inner .widget li.selected a - karty, które zostały już przez nas wcześniej odwiedzone
.tabs-inner .widget li a:hover - karty po najechaniu na nie myszką
h2 - nagłówki we wszystkich gadżetach
#BlogArchive1 - cały gadżet z archiwum bloga
#BlogArchive1 h2 - nagłówek gadżetu z archiwum
#BlogArchive1 a - linki w gadżecie z archiwum
#BlogArchive a:hover - linki w gadżecie z archiwum po najechaniu na nie myszką
#Stats1 - cały gadżet ze statystyką bloga
#Stats1 h2 - nagłówek gadżetu ze statystyką
.counter-wrapper - tylko licznik odwiedzin
#PageList1 - cały gadżet ze stronami bloga
#PageList1 h2 - nagłówek gadżetu ze stronami
#PageList1 a - linki w gadżecie ze stronami
#PageList1 a:hover - linki w gadżecie ze stronami po najechaniu na nie myszką
#Label1 - cały gadżet z etykietami bloga
#Label1 h2 - nagłówek gadżetu z etykietami
#Label1 a - linki w gadżecie z etykietami
#Label1 a:hover - linki w gadżecie z etykietami po najechaniu na nie myszką
#Links1 - cały gadżet z linkami bloga
#Links1 h2 - nagłówek gadżetu z linkami
#Links1 a - linki w gadżecie z linkami
#Links1 a:hover - linki w gadżecie z linkami po najechaniu na nie myszką
#Text1 - cały gadżet z tekstem na blogu (#Text2 - drugi gadżet z tekstem, #Text3 - trzeci gadżet z tekstem itp.)
#Image1 - cały gadżet z obrazkiem na blogu (#Image2 - drugi gadżet z obrazkiem, #Image3 - trzeci gadżet z obrazkiem itp.)
a.home-link - przycisk strony głównej po najechaniu na niego myszką
a.blog-pager-older-link - przycisk starsze posty
a.blog-pager-older-link:hover - przycisk starsze posty po najechaniu
a.blog-pager-newer-link - przycisk nowsze posty
a.blog-pager-newer-link:hover - przycisk nowsze posty po najechaniu
.comment-header - nagłówek komentarza z jego autorem, datą i godziną
.comments .comment .comment-actions a, .comments .thread-toggle a - przycisk odpowiedz usuń pod komentarzem
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover - przyciski odpowiedz i usuń po najechaniu
.blockquote - cytat w poście
.jump-link - przycisk czytaj więcej w poście
Jak zrobiłaś taki płynny efekt przewijania?
OdpowiedzUsuńNapisz do mnie na maila :)
OdpowiedzUsuńthelivhanna@gmail.com