Jak zrobić strony/menu z ikonkami i wyszukiwarką na górze bloga

09.11.2018


Przejrzałam wszystkie dostępne instrukcje na blogu i zobaczyłam, że jest wpis o wielokolorowym menu, o wysuwanym menu, o menu na górze bloga i jeszcze parę instrukcji na temat menu pewnie by się znalazło, ale... zobaczyłam, że nie było nigdy wpisu na temat menu, które składa się z menu + ikonki społecznościowe + wyszukiwarka.

Dlatego też, postanowiłam zrobić dla Was instrukcję na menu z ikonkami i wyszukiwarką, które będzie znajdować się na górze bloga.

Zapamiętaj!
Żeby ikonki wyświetlały Wam się prawidłowo to nad < head > musimy dodać nasz font awesome do bloga. Odpowiednią sekcję do wklejenia znajdziecie tutaj: https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css Pamiętaj, żeby za ostatnim " a przed > wstawić /. Końcówka kodu powinna wyglądać tak "/>

1. Przechodzimy do motyw - edytuj kod HTML
2. Klikamy obojętnie jakie miejsce w kodzie i wybieramy ctrl + f
3. W okienku wyszukiwania, które nam się pojawi wpisujemy </head> i POD tym elementem wklejamy kod:



Analiza:

# - miejsce na link, usuwamy # i wrzucamy nasz link
NAZWA STRONY - tutaj wpisujemy nazwę dla naszej strony
nazwa - to co pojawi nam się po najechaniu na stronę (małe szare okienko)

Zapamiętaj!
Jeśli chcecie usunąć lub dodać ikonki to (w przypadku usunięcia) usuwamy fragment od < li > do < /li > W przypadku dodania kolejnej ikonki, kopiujemy wiersz od < li > do < li > odpowiednio zmieniając dane. Fragment z nową ikonką, wklejamy za ostatnim < /li > ale przed < /ul >

Fragment dla nowej ikonki:




4. Zapisujemy
5. Przechodzimy do motyw - dostosuj i wklejamy kod:



Analiza:

.nav-primary {background: #000; padding: 10px 0px;} - tło menu oraz marginesy wewnętrzne
.nav-primary .wrap {padding: 0 10px;} - marginesy wewnętrzne obejmujące tekst
#menutop a{display:block; padding: 0 15px; font: 700 11px Open Sans, sans-serif; color: #fff; text-transform: uppercase; text-decoration: none; letter-spacing: 0px;} - marginesy tekstu (możemy ustawić odstęp między stronami), ustawienia fontu: grubość, wielkość, font, kolor fontu, styl dla tekstu (tutaj ustawione na wielkie litery), odstęp między literami
#menutop ul li:hover a{color: #ea9999; font-weight: 700;} - kolor linku po najechaniu kursorem, grubość fontu po najechaniu kursorem
.nav-primary ul .check {padding-left: 5px !important;} - margines wewnętrzny lewy (możemy ustawić dzięki niemu pozycję wyszukiwarki) 
#menutop ul.menux li a{color: #fff; border: 0px; text-decoration: none; font-size: 12px;} - kolor fontu dla rozwijanej części menu, wielkość fontu
#menutop ul.menux{
visibility: hidden;
opacity: 0;
height: auto;
overflow: hidden;
background: #000;
width: 165px;
opacity: 0.9;
z-index: 999;
} - tło dla rozwijanej części menu, szerokość rozwijanej części menu
#menutop ul li ul li a:hover{color: #ea9999;} - kolor po najechaniu kursorem na tekst w części rozwijanej
#menutop #searchBox {
text-transform: uppercase;
border: none;
color: #fff; font:700 13px Open Sans, sans-serif;
outline: none;
text-decoration: none;
letter-spacing: 2px;
padding-left: 10px;
padding-right: 20px;
background-color: transparent;
width: 80px;
-webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease;
-webkit-transition:border-color 1s ease; -moz-transition:border-color 1s ease; -o-transition:border-color 1s ease; transition:border-color 1s ease;
} - sekcja odpowiadająca za wyszukiwarkę w menu, styl dla tekstu, kolor fontu, ustawienia fontu: grubość, rodzaj fontu, odstęp między literami, margines wewnętrzny lewy, margines wewnętrzny prawy, szerokość 
#menutop #searchBox:focus {
width: 80px;
border-bottom: 1px solid #fff;
} - szerokość, po kliknięciu w wyszukiwarkę (efekt rozsuwania, jeśli chcemy mieć statyczną wyszukiwarkę, szerokość musimy ustawić taką samą jak szerokość przed kliknięciem w nią (sekcja wyżej), dolne obramowanie - linia, która pojawia się po kliknięciu możemy ustawić grubość, rodzaj i kolor
#menutop li.socialicon {float: right; } - ułożenie ikonek społecznościowych (tutaj ustawione na prawą stronę)
#menutop li.socialicon a {padding: 0 10px; font-size: 13px !important;} - marginesy wewnętrzne ikonek, wielkość ikonek

Efekt: 



Czytaj więcej >
Udostępnij ten wpis:

Moodboard blogowy - po co on jest i w jakim programie go zrobić

03.11.2018


Podejrzewam, że jest tu spora część osób, która wie co to są moodboardy, więc Ci co już wiedzą, wybaczą mi ten krótki wstęp z wytłumaczeniem i wykażą się zrozumieniem dla tych, co pierwszy raz o tym słyszą 😊

Moodboard


Nie starajcie się tego tłumaczyć na polski - serio, zaufajcie mi, nie róbcie tego, bo jest to po prostu złe. Można to natomiast określić jako "tablica inspiracji" lub "zbiór inspiracji", aczkolwiek, najbardziej trafnym określeniem będzie jednak "tablica inspiracji".

Na naszej tablicy inspiracji, możemy "zbierać" wszystko, co nam będzie potrzebne do naszego projektu - zdjęcia, cytaty, grafiki, tekstry, patterny, palety kolorów etc.

Moodboard blogowy - po co on jest


Odpowiedź jest bardzo prosta, moodboard blogowy jest po to, aby pomóc nam w tworzeniu naszej marki.

Jest to plansza, na której umieszczamy paletę kolorów, jakie ma zawierać nasza marka (blog/strona) , logo (może być w różnych wersjach kolorystycznych), dobór fontów, główne grafiki (tytułowe) do naszego wpisu czy nawet patterny, których chcemy użyć.

Możemy te elementy układać, przestawiać, zamieniać aż w końcu nasza tablica, będzie złożona tak, jak być powinna.

Skoro już ją złożyliśmy w elementy, które na pewno wykorzystamy, to możemy teraz odpowiedzieć sobie bardziej dokładnie na pytanie - po co ten moodboard blogowy jest?

Jest on po to, aby bez żadnych komplikacji i na spokojnie wdrążyć najważniejsze elementy naszego bloga/strony. Mamy rozpiskę kolorów - więc już nie musimy szukać różnych palet kolorystycznych na internecie do użycia na naszej stronie, bo odpowiednio dobraliśmy je na naszej tablicy.

To samo z fontami - siadamy i instalujemy na naszą stronę.

Z całą resztą umieszczonych elementów w naszej tablicy jest tak samo, dzięki temu, praca idzie nam znacznie sprawniej i szybciej.

Dla przykładu, pokażę Wam moodboard dla mojego bloga (jest to najprostszy moodboard jaki może być):



Moodboardy, mogą wyglądać różnie. Mogą być bardziej lub mniej złożone, wszystko zależy od tego, czego tak naprawdę będziemy potrzebować. Nie ma konkretnych wytycznych, że elementy muszą być ułożone tak i tak i musi znajdować się to i to. Nie, moodboard dostosowujemy pod siebie.

W jakim programie stworzyć moodboard?


W programie graficznym, który umożliwi nam stworzenie siatki, na której rozmieścimy odpowiednio elementy. Takim programem (darmowym) jest GIMP, ale jeśli mam być z Wami szczera - najlepiej zrobić to w Canvie (która również jest darmowa).

Canva to fajne darmowe narzędzie, w szczególności jeśli chodzi o moodboardy (i inne grafiki, ale nie o tym teraz mowa) - są tam narzędzia, które bardzo ułatwią nam stworzenie takiej siatki na moodboard, dzięki czemu każdy sobie z tym poradzi.

Canva ma jeszcze jeden plus w przeciwieństwie do GIMPa - jest ona online, także jeśli ktoś nie czuje potrzeby pobierania GIMPa, to jest dla Was alternatywa 😉


Korzystaliście kiedyś z Moodboardów? Chcecie wpis o tym jak wykonać taką tablice w Canvie? Dajcie znać w komentarzu! 😊
Czytaj więcej >
Udostępnij ten wpis:

Jesienne tapety na pulpit do pobrania za darmo

25.10.2018


Jesień nie należy do moich ulubionych pór roku, ale uwielbiam kolory jakie jej towarzyszą, a właściwie, kolory, które towarzyszą mi - nie tylko w ubiorze. 

Uwielbiam odcienie granatu, burgundu, ciepłej szarości i złota w tę porę roku. Dosłownie szaleje na widok złotych dodatków do domu, a poszukiwania granatowych, szarych i burgundowych swetrów oraz dodatków rozpoczynam z wielką energią! 

Wiem, że trochę się spóźniłam (?) z tymi tapetami, ale postanowiłam, że te tapety będą z motywem dyni, a jak dynie to i od razu nasuwa się skojarzenie z Halloween, więc postanowiłam je opublikować chwilę przed tym wydarzeniem. Dla tych co nie przepadają za motywem dyni, zrobiłam jeden wyjątek - tapeta ze złotymi liśćmi ;) 

W sumie do pobrania udostępniłam Wam 5 tapet na pulpit za darmo! :) 



Pobierz


Pobierz


Pobierz


Pobierz


Pobierz

Czytaj więcej >
Udostępnij ten wpis:

Planer studenta do pobrania za darmo

14.10.2018


Tak wiem, rok akademicki już trwa jakiś czas, ale nie będę ukrywać, że rozplanowanie tego planeru zajęło mi trochę czasu - prawdopodobnie dlatego, że pierwszy raz robię planer dla studentów i w tym wypadku, nie da się zrobić jednej karty, tak jak przy planach lekcji :)

Dużo osób mi pisało, po każdej publikacji planów lekcji, czy i kiedy będą planery dla studentów, bo z chęcią byście z nich skorzystali. Któregoś dnia, siadłam i zaczęłam planować, rozpisywać i układać wszystko po kolei, aż w końcu wzięłam się za projektowanie i oto są - darmowe planery dla studentów :)

Przygotowałam dla Was 5 zestawów (5 różnych kolorów) każdy po 8 kart. Planer jest w formacie A5, dzięki temu zajmie mniej miejsca i jest bardziej poręczny i jednocześnie ma odpowiednią ilość miejsca na notatki.


Karty planeru zostały przygotowane tak, aby jak najlepiej zorganizować swoje zajęcia, projekty oraz pracę licencjacką/magisterską.

Informacje techniczne:

  • Utrzymany w minimalistycznej formie
  • Poręczny format A5
  • 5 motywów do wyboru 
  • 8 kart 
  • Gotowe do druku
  • Przygotowane w formacie PDF (wszystkie karty w jednym pliku) 
  • Pojedyncze karty w formacie PNG

Informacje o planerze:

  • Karta - plan studenta
  • Checklista 
  • Karta projektu
  • Plan zajęć - studia dzienne
  • Plan zajęć - studia zaoczne 
  • Tabela do zapisywania ważnych dat 
  • Tabela do zapisywania egzaminów 
  • Tabela do zapisywania ocen końcowych 

Na koniec, chce uprzedzić Wasze pytania o to, dlaczego planery nie zawierają żadnych ozdobników w postaci np. kwiatów etc. 

Tak jak wspomniałam, jest to pierwsza odsłona planeru dla studentów, dlatego postanowiłam, że jak na początek, najlepszym wyjściem będzie opcja, w której to kolor pełni akcent dekoracyjny, jednocześnie jest to forma sprawdzenia, jak taka opcja projektu przypadnie Wam do gustu. 



Jednocześnie jestem otwarta na wszelkiego rodzaju propozycje z Waszej strony. Jeśli macie jakieś uwagi dotyczące kart (jakie jeszcze by Wam się przydały), tabelek, układu, kolorów czy wszelkiego rodzaju ozdobników - piszcie śmiało Wasze uwagi w komentarzach lub na maila, przy następnej edycji, na pewno wezmę je pod uwagę :)

Zasady pobierania

  • Planery pobierasz tylko i wyłącznie na użytek własny
  • Nie można plików udostępniać dalej w formie oryginalnej lub zmienionej (tyczy się to również zamiaru sprzedaży pobranych plików)
  • Jeśli chcesz się podzielić z kimś planerami - udostępnij ten wpis :) 

Pobierz planer różowy Pobierz planer niebieski Pobierz planer żółty Pobierz planer zielony Pobierz planer szary

Czytaj więcej >
Udostępnij ten wpis:

Jak zrobić tekst z teksturą za pomocą CSS

05.10.2018


Ostatnio przeglądam dużo blogów - polskie i zagraniczne. Zauważyłam kilka rzeczy, ale dwie rzuciły mi się mocno w oczy. Pierwsza - zdecydowanie każdy idzie w minimalizm i "czystą formę" bloga i to jest ja najbardziej ok. Druga, która razi moje oczy, to nietypowe nagłówki gadżetów/inne elementy tekstowe. O ile sam sposób ich przedstawienia nie jest zły, tak sposób w jaki są zrobione już trochę mi przeszkadza (pod względem technicznym, a nie estetycznym).

Zazwyczaj te nagłówki/elementy tekstowe są grafikami. Pamiętam, że kiedyś sporo osób mnie prosiło o to, abym pokazała jak zrobić takie graficzne nagłówki. Dotarłam do tego wpisu robiąc aktualizację innych i szczerze nie byłam z tej metody zadowolona. Ten wpis nadal jest na blogu, ale bardziej w ramach ciekawostki (?).

Wyróżniające się nagłówki gadżetów, jako element dekoracyjny naszego bloga, mogą naprawdę dodać mu tego "czegoś", więc warto skorzystać z możliwości jakie daje nam nasz szablon i popracować nad tymi elementami, skoro zdecydowaliśmy, że to właśnie nasze nagłówki, czy inne elementy tekstowe mają być tymi wyróżniającymi się.

Dlatego, w dzisiejszym wpisie pokażę Wam, jak zrobić za pomocą CSS elementy tekstowe z teksturą np. w odcieniach złota, srebra czy tak słynnego w ostatnim czasie motywu marmuru :)

1. Jeśli chcemy użyć fontu, który nie występuję w zasobach Bloggera, skorzystaj z tego wpisu

Zobacz wpis o niestandardowych fontach na blogu

2. Przechodzimy do motyw - dostosuj - zaawansowane - dodaj arkusz CSS

W arkuszu CSS wklejamy poniższy kod:




Analiza kodu:



SELEKTOR - tutaj wpisujemy odpowiedni selektor
{font-family: Pacifico; - wpisujemy nazwę wybranego fontu font-size: 44px; - rozmiar naszego nagłówka/elementu tekstowegocolor: #000; - kolor tekstu background: url(LINK DO GRAFIKI) no-repeat center center;
background-size: cover;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
padding: 30px; - marginesy }


Wszystkie pogrubione wartości są zmienne. Poniżej kilka przykładów :)

Tak wygląda przykładowy tekst

Tak wygląda przykładowy tekst

Tak wygląda przykładowy tekst

Tak wygląda przykładowy tekst

Tak wygląda przykładowy tekst

Tak wygląda przykładowy tekst


Zdjęcia tekstur, które zostały użyte do tej instrukcji pochodzą ze strony Unsplash
Tekstura z tekstu 1 | Tekstura z tekstu 2 | Tekstura z tekstu 3 | Tekstura z tekstu 4 | Tekstura z tekstu 5 | Tekstura z tekstu 6 
Czytaj więcej >
Udostępnij ten wpis:

Grafiki informacyjne - rozszerzenia plików

30.09.2018


Ostatnio robiłam ankietę, jaki wpis chcecie, o dziwo, wygrał temat z przydatnymi grafikami jak np. co oznaczają poszczególne rozszerzenia plików. Nie ukrywam, bardzo się z tego ucieszyłam, ponieważ, już nie jeden raz się spotkałam, że ktoś "głupiał" jak zobaczył, że na końcu jego pliku, nie widnieje znajome png, jpg lub pdf tylko np. TIFF.

Zebrałam kilka rozszerzeń plików, które uważałam za najważniejsze i przedstawiłam w formie infografiki. Oczywiście, grafiki, które zostały umieszczone w tym wpisie, będziecie mogli pobrać za darmo, aby mieć zawsze taką ściągawkę przy sobie :)





Pobierz

O jakich jeszcze rozszerzeniach chcielibyście się dowiedzieć? :) Piszcie w komentarzu! 
Czytaj więcej >
Udostępnij ten wpis:

Copyright © Szablon wykonany przez My pastel life