Menu

Nowy szablon do pobrania na Bloggera - Minimal Pink

Nowy szablon do pobrania na Bloggera - Minimal Pink


Dawno nie publikowałam szablonu na Bloggera, dlatego ostatnio postanowiłam zrobić ankietę na Instagramie, gdzie mogliście razem ze mną ten szablon zrobić, wybierając dane elementy.

Szablon Minimal Pink posiada układ kafelkowy, slider, który automatycznie wyświetla najnowsze wpisy, oraz rozwijane, statyczne menu. Pod każdym wpisem znajdziesz ikonki udostępniania wpisu, dzięki którym czytelnicy będą mogli w łatwy sposób podzielić się z innymi Twoim postem.

Szablon nie posiada blokady kodu, dzięki czemu kolory i poszczególne elementy szablonu możesz bezproblemowo dostosować.

Info o szablonie

  • Szablon przeznaczony tylko i wyłącznie na platformę Blogger
  • Szablon dwukolumnowy (prawo kolumnowy)
  • Automatyczne skracanie wpisów 
  • Menu dodane w kodzie HTML - łatwa edycja 
  • Menu rozwijane, statyczne 
  • Slider
  • Ikonki udostępniania pod każdym wpisem 
  • Szablon można bezproblemowo edytować
  • Szablon posiada ikonki społecznościowe w kolumnie bocznej

Uwagi

  • Szablon oraz ewentualne grafiki dodawane do szablonu używasz tylko i wyłącznie na użytek własny 
  • Udostępnianie szablonu osobom trzecim w formie oryginalnej lub zmienionej jest zabronione
  • Szablon posiada nieusuwalną stopkę z podpisem. Po usunięciu jej/zmienieniu szablon nie będzie działał poprawnie
  • Nie wolno zmieniać wyglądu stopki z podpisem
  • W razie problemów, proszę pisać na blog.mypastellife@gmail.com
  • Nie proś o pomoc osób trzecich w razie problemów z szablonem - istnieje ryzyko, że dana osoba, źle podejdzie do Waszego problemu i może pogorszyć sytuacje. 

UWAGA! 


Jeśli w razie wystąpienia problemu z szablonem, zdecydujesz się skorzystać z pomocy trzeciej osoby, wiedz, że taki szablon nie ma już u mnie technicznego wsparcia. 


Live Demo Pobierz szablon
Czytaj dalej

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

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


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.
Ż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)

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 dalej

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

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


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 dalej
Subskrybuj: Posty (Atom)

Copyright © Twórczy notatnik