Edytowanie wyglądu gadżetu "Obserwuj przez e-mail"

28 stycznia 2015


Wszytko da się zmienić tak aby było dopasowane do naszego szablonu. Lubię jak wszystko ze sobą współgra,strasznie mnie denerwuje jak coś ze sobą się gryzie. Dlatego przy tworzeniu szablonu staram się dbać o najmniejszy szczegół. w dzisiejszym tutorialu pokażę wam jak zmienić wygląd gadżetu "Obserwuj przez e-mail"

Gadżet "Obserwuj przez e-mail" przed zmianami wygląda tak:

Po zmianach może wyglądać różnie - wszystko zależy od nas. Najlepsze w tym jest to, że aby zmienić wygląd naszego gadżetu nie musimy szperać w kodzie HTML,który przeraża sporą część osób. Do zmian wystarczy nam kod CSS,który wstawiamy w projektancie szablonu.
Kod wygląda tak:

.FollowByEmail .follow-by-email-inner .follow-by-email-address {width: 140px; height:34px; font: 10px Verdana; background: #fff; letter-spacing: 1px; border-style: solid; border-width: 1px; border-color: #000; padding: 5px; margin-bottom: 25px; border-radius: 10px 10px 10px 10px;}

.FollowByEmail .follow-by-email-inner .follow-by-email-submit {width:70px; margin: 10px 10px 15px 10px; background:#000; color:#fff; height:34px;z-index:0; font-size: 12px;letter-spacing: 1px;text-transform:none; font-family: Verdana; border-radius: 10px 10px 10px 10px;}

.follow-by-email-inner .follow-by-email-submit:hover {width:70px; margin: 10px 10px 15px 10px; background:#ccc; color:#fff; height:34px;z-index:0; font-size: 12px;letter-spacing: 1px;text-transform:none; font-family: Verdana; border-radius: 10px 10px 10px 10px;}

Przeanalizujmy nasz kod krok po kroku (wszystkie wartości zaznaczone na kolorowo są zmienne):

Pierwsza cześć kodu dotyczy pola do wpisywania adresu e-mail


.FollowByEmail .follow-by-email-inner .follow-by-email-address {width: 140px; height:34px; font: 10px Verdana; background: #fff; letter-spacing: 1px; border-style: solid; border-width: 1px; border-color: #000; padding: 5px; margin-bottom: 25px; border-radius: 10px 10px 10px 10px;}

Długość pola 
Szerokość pola
Wielkość i rodzaj czcionki w polu 
Tło pola
Odstęp między literami 
Rodzaj ramki 
Grubość ramki
Kolor ramki 
Dopełnienie 
Margines dolny 
Zaokrąglenia narożników 

Druga cześć kodu dotyczy przycisku "submit"

.FollowByEmail .follow-by-email-inner .follow-by-email-submit {width:70px; margin: 10px 10px 15px 10px; background:#000color:#fff; height:34px;z-index:0; font-size: 12px;letter-spacing: 1px;text-transform:none; font-family: Verdana; border-radius: 10px 10px 10px 10px;}

Długość
margines górny
margines lewy
margines dolny
margines prawy
Tło
Kolor tekstu 
Szerokość 
Rozmiar czcionki
Odstęp między literami
Rodzaj tekstu 
Rodzaj czcionki 
Zaokrąglenia narożników 


Trzecia część kodu przycisku submit po najechaniu na niego myszą (jeśli ktoś nie chce aktywnego przycisku to tą część może pominąć)

.follow-by-email-inner .follow-by-email-submit:hover {width:70px; margin: 10px 10px 15px 10px; background:#000color:#fff; height:34px;z-index:0; font-size: 12px;letter-spacing: 1px;text-transform:none; font-family: Verdana; border-radius: 10px 10px 10px 10px;}


Długość
margines górny
margines lewy
margines dolny
margines prawy
Tło
Kolor tekstu 
Szerokość 
Rozmiar czcionki
Odstęp między literami
Rodzaj tekstu 
Rodzaj czcionki 
Zaokrąglenia narożników 

Czytaj dalej »

Czytelny wpis na bloga

26 stycznia 2015


Bardzo lubię zmiany, nie tylko w życiu, ale też w świecie blogowym. Lubię patrzeć na zdjęcia z metamorfoz szablonów i lubię kiedy przechodząc z jednej zakładki do drugiej wszystko trzyma się w jednej kompozycji. Lubię również ciekawe i długie wpisy, ale takie, które zachęcają do czytania, a nie odstraszają. Wygląd bloga nie zawsze nam pomoże w zdobyciu nowego czytelnika, jeśli treść wpisu będzie nie czytelna, a bardzo łatwo można sobie takim sposobem popsuć wpis.
Ostatnio na kursie z grafiki komputerowej, mieliśmy za zadanie stworzyć stronę internetową. Jednym się udało drugim nie. Na kolejnych zajęciach mieliśmy napisać wpis, obojętnie na jaki temat. Mieliśmy do dyspozycji zdjęcia, komputery, stronę internetową oraz naszą wyobraźnię - czyli wszystko co nam potrzeba. Nieliczni zrobili parę błędów, które rzeczywiście miały ogromny wpływ na odczyt danej treści. Wydawać by się mogło, że jeden błąd nic nie znaczy, niestety znaczy bardzo dużo i nie sposób przejść obok tego obojętnie.
Tak naprawdę kiedy wszystko ze sobą fajne współgra, szablon oraz czytelna treść to na jednym blogu można spędzić masę czasu, przeglądając archiwa - wiem po sobie. Większość ludzi jest wzrokowcami, więc trzeba zadbać o to aby wszystko wokół przyciągało - oczywiście bez przegięć. Nie uważam się za eksperta, a wszystkie pojawiające się tu punkty są na podstawie mojej wiedzy z kursu oraz ze swoich własnych spostrzeżeń.

  1. Przejrzyste tło wpisu. Tło, na którym pojawi się nasz tekst musi być przejrzyste koniec kropka. Jeśli na tło wpisu wybierzemy neonowy kolor to będzie bardzo ciężko to czytać. Nonowe kolory przyprawią czytelnika o ból głowy i nawet nie dokończą czytać pierwszego zdania jak zamkną stronę. Nie mówię, że kolorowe tła pod wpisem to coś złego, ważne tylko jest żeby były one odpowiednio stonowane i nie zlewały się z tekstem. 
  2. Czcionka. Zadbaj o to aby czcionka w tekście nie była wyrafinowana. Najlepiej użyj prostej czcionki takiej jak Arial,Verdana czy też Trebuchet. (Osobiście korzystam z czcionki Verdana) Jest to bardzo ważne, ponieważ przy bardziej wymyślnych czcionkach a. wzrok się męczy b. trudno cokolwiek przeczytać. Jeśli już bardzo chcesz mieć czcionkę, która się wyróżnia, to użyj jej w tytule wpisu. 
  3. Pisz bezbłędnie. Tak jak ciężko zrozumieć człowieka, który duka, tak ciężko przeczytać wpis z błędami. Wiadomo zrozumie się po pewnym czasie co poeta ma namyśli, ale pamiętaj, że osoba, która zagląda na twojego bloga nie wchodzi na niego po to aby się męczyć z rozszyfrowaniem tekstu tylko po to aby odpocząć po ciężkim dniu i się zrelaksować. Jeśli napiszesz coś z błędem to edytor, w którym powstaje wpis na pewno ci ten błąd podkreśli. Zwracaj na to uwagę. Jeśli jednak dziwnym trafem błędy nie zostaną podkreślone - skorzystaj ze słownika, on nie gryzie, a wpis bez błędów zdecydowanie będzie się lepiej prezentował. 
  4. Wielkość czcionki. Przyjmuje się, że najlepiej sprawdzają się rozmiary od 13px do 16px - czasem nawet i więcej. Oczywiście rozmiar zależy od tego jaką czcionkę sobie wybierzemy, każda prezentuje się inaczej przy innym rozmiarze. Wpis z małymi literkami będzie ciężki do przeczytania, oczy się wtedy bardzo męczą. 
  5. Zdjęcia. Zadbaj o to aby zdjęcia były odpowiednio dopasowane do szerokości akapitu. Tym sposobem, twój wpis będzie uporządkowany. Jednak pamiętaj o tym, żeby zdjęcia były dobrej jakości i nie musisz posiadać nie wiadomo jakiego aparatu. Jeśli jednak twoje zdjęcia nie są najlepsze to nie muszą być dopasowane do szerokości szpalty wystarczy, że będą jednakowej wielkości. Zdjęcia z różnymi szerokościami i z 10 filtrami rodem z retricki tworzą okropny bałagan i oczopląs. 
  6. Wyrównanie tekstu. Tekst zawsze lepiej się czyta jeśli będzie on wyjustowany albo wyrównany do lewej. Kiedyś sama używałam wyśrodkowania uważając, że tak jest lepiej i pomaga to w czytaniu - nie jest i nie pomaga. Wyśrodkowanie przy dłuższych tekstach się nie sprawdza. Kiedy napotkam na długi wyśrodkowany tekst od razu widzę to jako niechlujne i mało składne. 
Dodalibyście coś jeszcze do tej listy? jeśli tak to piszcie śmiało w komentarzu. 
Czytaj dalej »

Sposoby na pobudzenie kreatywności

19 stycznia 2015


Nie ma człowieka, który by nie posiadał kreatywności - zdziwieni? każdy z nas posiada tą umiejętność jeden lepiej drugi gorzej rozwiniętą. To jest tak samo jak z matematyką, jeden ją rozumie, a drugiemu idzie trochę gorzej. Wszystko zaczyna się w naszym mózgu, on jest naszym centrum dowodzenia i to tylko od nas zależy czy pobudzimy go do działania.
Wiecie na pewno, że człowiek posiada dwie półkule mózgowe. Za normę przyjmowane jest, że najpierw rozwija się prawa potem lewa, niektórym rozwijają się dwie na raz i niektórzy uważają to za błąd. Osoby, którym się rozwijają dwie półkule jednocześnie zazwyczaj są bardziej uzdolnione w wielu dziedzinach, ale też są skazane na większą pracę nad sobą. Ja sama jestem idealnym przykładem osoby, u której dwie półkule rozwijają się jednocześnie. Tak naprawdę nikt nie miał o tym pojęcia do póki panie w przedszkolu nie zauważyły, że pisze raz prawą, a raz lewą ręką - podobno to jest najczęstsza oznaka tego, że nasze półkule rozwijają się jednocześnie (oczywiście można to też poznać,po dysleksji,dyskalkulii etc.). Od przedszkola musiałam chodzić na zajęcia, ćwiczenia do psychologów, żeby mnie z tego "wyleczyć" i usilnie mi wmawiano, że muszę się zdecydować, którą ręką chce pisać, aż w końcu dano mi święty spokój jak na jednym z testów matematycznych (tak matma była głównym punktem tych zajęć) zauważono, że lepiej miałam napisany test, który rozwiązałam lewą ręką niż ten, który pisałam prawą. Wiecie dlaczego tak było? ponieważ nasza lewa półkula mózgu odpowiada za wszystko co ścisłe, prawa natomiast odpowiada za wszystko co związane z kreatywnością. Jedno w tych ćwiczeniach było dobre - pobudzałam wszystkie możliwe czynniki, w tym kreatywność. Każdy może być kreatywny wystarczy tylko poświęcić trochę czasu.
Poniżej przedstawię wam kilka sposobów, które ja sama stosuje, aby jeszcze bardziej pobudzić swoją kreatywność.

1. Porządek w miejscu pracy.
Pierwszy punkt jest najistotniejszy. Nawet sobie nie wyobrażacie jak ważny jest porządek w miejscu pracy. Nie chodzi tylko o kąt, w którym stoi nasz stolik czy biurko, ale o całe pomieszczenie. Nasz mózg lepiej będzie pracował jeśli będziemy się znajdować w posprzątanym pomieszczeniu. Dlaczego? Ponieważ nic nas nie będzie wokół rozpraszać, dzięki czemu bardziej skupimy się na wykonywaniu naszego zadania. 

2. Dobre oświetlenie. 
To jest kolejny bardzo ważny punkt. Jeśli w pomieszczeniu będzie ciemno,będziemy odczuwać zmęczenie i nasz mózg odmówi dalszej współpracy dając nam do zrozumienia, że najlepiej by było jakbyś już poszedł spać. Zadbaj aby w dzień wszystkie okna był odsłonięte, a wieczorem kiedy zrobi się już ciemniej o dobre oświetlenie zarówno naszego kąta, w którym stoi nasze biurko oraz naszego pomieszczenia, w którym pracujemy. 

3. Świeże powietrze. 
Wyjdź na dwór, otwórz okno i przewietrz pokój, nie patrz na to czy jest zimno czy nie. Jeśli dotlenisz swój mózg będzie on lepiej pracował, a przypływ świeżego powietrza w pokoju, zapobiegnie ziewaniu, które prowadzi do uczucia senności i rozleniwienia, dzięki temu lepiej skupisz się na swoim zadaniu. Dawka świeżego powietrza dla naszego mózgu to największa przyjemność jaką możemy mu sprawić. 

4. Rozciągnij się.
Nie siedź cały czas przy biurku - to również powoduje zmęczenie. Zrób sobie po między zadaniami 5 minut przerwy na skłony, przysiady,rozciągnięcie się, a zobaczysz, że twój mózg Ci to wynagrodzi. 

5. Rób sobie przerwy.
Masz dużo zadań do wykonania? nie siedź nad nimi przez parę godzin bez przerwy. Między jedną, a drugą godziną zrób sobie przerwę 20-30 minut. 

6. Najedz się.
Jedzenie również odgrywa tu ważną rolę. Dlaczego? ponieważ jeśli będziesz siadał do swoich zadań na głodnego twój mózg nie skupi się na niczym innym, będzie on tylko skupiony na twoim żołądku, który domaga się jedzenia przez co mózg nie będzie pracował tak jak powinien. 

7. Rozwiązuj łamigłówki.
Sudoku, krzyżówki, kostka rubika etc. takie łamigłówki bardzo pomogą nam w dwóch rzeczach: po pierwsze w koncentracji, po drugie bardzo intensywnie pobudzą nasz mózg do działania.

8. Bądź wypoczęty.
Jeśli ty nie będziesz wypoczęty to twój mózg tym bardziej, on też potrzebuje snu. Podczas snu pozwalasz swojej mózgownicy na rozluźnienie się, dzięki czemu rano jest "zresetowany" i gotowy do działania. Dlatego w niektórych szkołach przedmioty ścisłe zaczynają się wraz z pierwszym dzwonkiem, nasz mózg lepiej przyswaja przedmioty ścisłe z rana (mniej więcej do godziny 10) niż popołudniu. 

9. Rób notatki.
Rób notatki ręczne, nie wystukując litery na klawiaturze czy smartphonie. Dzięki ręcznym notatkom, nasz mózg intensywniej pracuje niż przy robieniu notatek na urządzeniach elektronicznych. Zapisuj wszytko co Ci przyjdzie do głowy, zawsze miej przy sobie kalendarz lub notes i długopis, możesz nawet przepisywać wierszyki lub pisać po parę razy listę zakupów. Takie notatki również poprawiają naszą pamięć. 

10. Zjedz czekoladę lub wypij zieloną herbatę.
Nasz mózg również potrzebuje odrobinę przyjemności, Czekolada i zielona herbata świetnie się w tym sprawdza. Osobiście jestem za zieloną herbatą z dwóch powodów: po pierwsze mam alergię na czekoladę, po drugie zielona herbata dodatkowo nas pobudza. Dzięki jednemu i drugiemu nasz mózg będzie wspomagany co oznacza, że szybciej i lepiej przyswoi nowe wiadomości. Dla uczniów polecam zjeść czekoladę albo wypić zieloną herbatę przed lekcją np. matematyki,fizyki - ogólnie przedmioty ścisłe. Ważne jest aby czekolada była gorzka. 

11. Czytaj.
Czytaj dużo, to pobudza naszą wyobraźnie. Polecam czytać bajki. Jeśli ktoś ma młodsze rodzeństwo to nic więcej wam nie potrzeba, wystarczy,że zaoferujecie się wyręczyć swoją rodzicielkę w czytaniu bajki swojemu bratu/siostrze przed snem i nie ma co się wstydzić. Moja babcia ma 74 lata, a do tej pory sięga,po baśnie Andersena. 

12.  Rysuj.
Nie ważne co. Wyraź swoje emocje po przez rysunek, skup się na tym co cię najbardziej dręczy lub co cię uszczęśliwia. 

13. Fantazjuj.
Daj się ponieść fantazji, wymyślaj różne niesamowite scenariusze. Pozwoli ci się to oderwać od rzeczywistości i skupić na tym co przyjemne, aby potem z uśmiechem na twarzy wrócić do swoich obowiązków.

14. Graj.
Nie w gry komputerowe, ale planszowe, zagraj w quiz ze znajomymi, w państwa miasta w statki cokolwiek, a zobaczysz, że twój mózg i nowe pomysły same wpadają ci do głowy.

15. Inspiruj się samym sobą.
Nie szukaj inspiracji po internecie, u koleżanki czy kolegi,sam/a się zainspiruj, spójrz na to co cię otacza świeżym okiem, uwierz mi na słowo, po pewnym czasie nawet zwykły długopis będzie umiał cię zainspirować. 

To są moje sposoby na pobudzenie kreatywności, a jakie są wasze? co byście tutaj dorzucili? 
Czytaj dalej »

Jak dodać aktywne ikonki społecznościowe w poście

14 stycznia 2015


W końcu po tygodniowej przerwie powracam na bloga i to z nowym tutorialem. Nie ukrywam moja mała izolacja od świata internetowego (i nie tylko) bardzo mi pomogła i wcale nie przeszkadzało mi to, że na głowie miałam mnóstwo spraw związanych z moimi studiami. Powiem wam, że udało mi się zapisać na 2 kierunki i zobaczymy jak to dalej będzie. Nie będę się rozwodzić na temat tego co robiłam przez cały tydzień, bo nie ma takiej potrzeby, a po za tym czas na kolejny tutorial.
Aktywne ikonki społecznościowe to nic innego jak to co mam w kolumnie bocznej, taki bajer co po najechaniu zmienia kolor, kształt ewentualnie się obraca i to chyba każdy wie. Takie ikonki społecznościowe jak ktoś nie chce bawić się w linkowanie obrazków można wykonać na stronie profilki.pl . Jak wiadomo takie ikonki można dodać do kolumny bocznej, nad nagłówek i pod nagłówek, w stopce bloga też, ale dziś chce wam pokazać jak w prosty sposób dodać je do wpisu lub tak jak u mnie występują w zakładce "o mnie i blogu"


Wchodzimy na stronę profilki.pl i wybieramy przyciski społecznościowe.



2a. Klikając w to miejsce, które zaznaczone jest cyferką 1, otworzą nam się wszystkie dostępne ikonki społecznościowe. Musimy wybrać jedno z nich i dodać link.


2b. Jeśli chcemy mieć więcej niż jedną ikonkę to klikamy "+dodaj profil" 
2c. Cały obszar z numerkiem trzy odpowiada za dopasowanie wyglądu naszych ikonek. 


Kiedy nasze ikonki są już gotowe, kopiujemy kod z pierwszej ramki i przechodzimy do bloggera.



Jeśli chcemy dodać ikonki do postu to klikamy w posty i wybieramy wpis, w którym nasze ikonki społecznościowe mają się pojawić.


Kiedy nasz post już jest gotowy do opublikowania należy kliknąć "HTML" - zaznaczone czerwoną ramką na obrazku.


Jak widać nasz post się pojawił w postaci HTML. Teraz należy pod ostatnią linijką naszego postu zrobić odstęp - tak jak jest to pokazane na obrazku i wkleić nasz skopiowany kod z profilków.


Jeśli nie chcemy mieć podpisu pod ikonkami musimy usunąć tą część kodu, która zaznaczona jest na niebiesko. Teraz już tylko zapisujemy i publikujemy nasz post.



Efekt końcowy prezentuje się tak jak powyżej
Jeśli chcemy dodać ikonki do stron, a nie do wpisów wtedy zamiast zakładkę "posty" wybieramy "strony" i dalej procedura jest ta sama.

Jeśli jest coś nad czym się głowicie bardzo długo i chcielibyście z tego tutorial to piszcie śmiało w komentarzu ;)


Czytaj dalej »

Zmiana koloru poszczególnych elementów w GIMPie

7 stycznia 2015


W dzisiejszym wpisie przedstawię wam jak w trzech prostych krokach zmienić kolor danego elementu (np. kolor tęczówki, paznokci etc.) w GIMPie. Osobiście takiej opcji użyłam tylko parę razy do uwydatnienia koloru tęczówek, jednak można fajnie się pobawić tą opcją w przypadku kiedy chcemy aby poszczególne elementy na naszym zdjęciu były np. neonowe.

1. Otwieramy zdjęcie w GIMPie i wybieramy jedno z trzech zaznaczeń, które są zaznaczone na poniższym zdjęciu



Zaznaczenie eliptyczne bardzo nam się przyda przy zmianie koloru tęczówek, natomiast przy innych nieregularnych kształtach wybieramy zaznaczenie odręczne.

2. Zaznaczamy element, który będzie miał zmieniany kolor.



3. Jak już zaznaczyliśmy element, który ma zmienić kolor to klikamy na niego prawym przyciskiem myszki i wybieramy opcje kolor - barwienie.


4. Pojawi nam się ramka, w której mamy trzy suwaczki, dzięki nim możemy ustawić kolor naszego zaznaczonego elementu.



Efekt:


Czytaj dalej »