Jak utworzyć ankietę i wstawić ją na bloga

23.11.2015


Ostatnio na blogu pojawiła się ankieta, która powstała za pomocą formularza Google. Parę dni później, po opublikowaniu ankiety na blogu, pojawiła się nowsza wersja formularzy. Nie wiem ile osób chciałoby umieścić taką ankietę u siebie na stronie, ale postanowiłam pokazać, jak wykonać taki formularz w nowszej wersji i umieścić go np. we wpisie.

1. Na początek wchodzimy na nasz dysk Google.


2. Przeniosło nas na nasz dysk. Wybieramy: Nowy - Więcej - Formularze Google


3. Otworzy nam się nowy formularz gdzie możemy zacząć zabawę ze wstawianiem pytań i z ich dostosowaniem.



4. Jeśli mamy już gotowe pytania odpowiedzi, to czas zabrać się za wygląd naszej ankiety. Na samej górze mamy ikonki. Jeśli chcemy zmienić wygląd naszego formularza wybieramy tą z paletą.


Mój formularz prezentuje się tak:


5. Skoro już dopracowaliśmy nasz formularz, to teraz będziemy wstawiać go do wpisu.


Teraz przechodzimy do wpisu i wybieramy HTML



Czytaj dalej »

Jak zrobić rozwijane menu

12.11.2015


Nie wiem czy pamiętacie, jak napisałam kiedyś wpis o tym, jak zrobić rozwijane menu na podstawie profilki.pl. Ta opcja bez wątpienie jest szybka i nie ma strachu o to, że coś popsujemy. Jednak, słyszałam od Was, że nie zawsze menu ze strony profilki.pl działa poprawnie, dlatego w dzisiejszym wpisie pokażę Wam, jak takie menu wykonać samemu. Nie musicie się o nic martwić, ponieważ będziemy pracować tylko na gadżecie HTML/JavaScript i kodach CSS. Oprócz tego na końcu tego wpisu znajdziecie ankietę, dotyczącą bloga. Bardzo proszę o wypełnienie jej, ponieważ pomoże mi to w usprawnieniu mojej strony.

1. Tradycyjnie przechodzimy do układu naszego bloga. Pamiętajmy o tym, aby usunąć gadżet strony. Układ - dodaj gadżet - HTML/Javascript



2. Wklejamy kod i klikamy "zapisz":



<!-- START MENU -->
<div id='NavMenu'>
<div id='NavMenuleft'>
<ul id='nav'>
<li><a href='LINK'>NAZWA STRONY</a></li>
<li><a href='LINK'>NAZWA STRONY</a></li>
<li><a href='LINK'>NAZWA STRONY</a></li>
<li><a href='#'>KATEGORIE</a>
<ul>
<li><a href='LINK'>PODKATEGORIA</a></li>
<li><a href='LINK'>PODKATEGORIA</a></li>
<li><a href='LINK'>PODKATEGORIA</a></li>
</ul>
</li>
<li><a href='#'>KATEGORIE2</a>
<ul>
<li><a href='LINK'>PODKATEGORIA</a></li>
<li><a href='LINK'>PODKATEGORIA</a></li>
<li><a href='LINK'>PODKATEGORIA</a></li>
</ul>
</li>
</ul></div>
</div>
<!-- KONIEC MENU -->

3. Teraz przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS  i wklejamy kod:


/* MENU */
.tabs-inner .section:first-child ul { margin-top: 0px; border: 0 solid #eee; }
.tabs-inner .widget ul { background:#fff;  text-align: center !important;  }
.tabs-inner .widget li a { font-family:'Lato',sans-serif; text-transform: uppercase; font-size:12px;
letter-spacing: 3px; color:#222222; border: 0px solid #ffffff; }
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: #888888;  text-decoration: none; }
.tabs .widget li, .tabs .widget li{ display: inline; float: none;}
#NavMenu {
width: 100%;
height: 45px;
position: relative;
margin: 0 auto;
padding: 0;
}
#NavMenuleft {
width: 100%;
float: none;
margin: 0 auto;
padding: 0;
}
#nav {
margin: 0 auto;
padding: 0;
}
#nav ul {
float: right;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #222222;
display: block;
margin: 0;
padding: 15px;
}
#nav li a:hover, #nav li a:active {
color: #888888;
margin: 0;
padding: 15px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 150px;
color: #222222;
float: none;
margin: 0;
padding: 7px 10px;
text-align:left;
}
#nav li li a:hover, #nav li li a:active {
color: #888888;
padding: 7px 10px;
width:147px;
border-left:3px solid #888888;transition: all 0.3s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;}
#nav li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
border: 0px solid black;
}
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out; }
#nav li ul a { width: 140px;  }
#nav li ul ul { margin: -32px 0 0 171px;  }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover {position: static;}

Analiza kodu:
Wszystkie pogrubione wartości są zmienne!

.tabs-inner .section:first-child ul { margin-top: 0px; border: 0 solid #eee; }
.tabs-inner .widget ul { background:#fff;  text-align: center !important;  } - kolor tła i wyrównanie.tabs-inner .widget li a { font-family:'Lato',sans-serif; text-transform: uppercase; font-size:12px;letter-spacing: 3px; color:#222222; border: 0px solid #ffffff; } - rodzaj fontu, wygląd tekstu (tutaj ustawione na tekst pisany wielkimi literami, jeśli nie chcemy tej opcji w miejsce uppercase wpisujemy none), wielkość fontu, odległość między literami, kolor teksu, grubość, rodzaj i kolor ramki.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: #888888;  text-decoration: none; } - kolor fontu, po najechaniu myszą.tabs .widget li, .tabs .widget li{ display: inline; float: none;}
#NavMenu {
width: 100%;
height: 45px; - wysokośćposition: relative;
margin: 0 auto;
padding: 0;
}
#NavMenuleft {
width: 100%;
float: none;
margin: 0 auto;
padding: 0;
}
#nav {
margin: 0 auto;
padding: 0;
}
#nav ul {
float: right;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #222222; - kolor odwiedzonego linkudisplay: block;
margin: 0;
padding: 15px}
#nav li a:hover, #nav li a:active {
color: #888888; - kolor tekstu po najechaniu mysząmargin: 0;
padding: 15px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;  - kolor tła, rozwijanej części menu width: 150px;
color: #222222; - kolor tekstu, rozwijanej części menu float: none;
margin: 0;
padding: 7px 10px;
text-align:left; - wyrównanie}
#nav li li a:hover, #nav li li a:active {
color: #888888; - kolor tekstu po najechaniu myszą w rozwijanej części menu padding: 7px 10px;
width:147px;
border-left:3px solid #888888; transition: all 0.3s ease-in-out; - efekt (pasek z lewej strony) przy najechaniu myszą na tekst w rozwijanej części menu. Grubość, rodzaj i kolor-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;}
#nav li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
border: 0px solid black;
}
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out; }
#nav li ul a { width: 140px;  }
#nav li ul ul { margin: -32px 0 0 171px;  }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover {position: static;}

4. Efekt końcowy:



Na koniec (tak jak wspomniałam na początku wpisu) chciałabym Was prosić o wypełnienie ankiety, która znajduje się poniżej :)

Czytaj dalej »

GIMP - jak szybko poprawić zdjęcie + mały bonus

08.11.2015


Dawno nie było instrukcji GIMPowych, więc stwierdziłam, że trzeba w końcu umieścić taki tutorial na blogu. Kiedyś parę osób prosiło mnie o instrukcje jak szybko poprawić zdjęcie i retuszować w GIMPie. Przyznam się bez bicia, że nie chciałam robić tej instrukcji, bo po pierwsze w internecie jest tego dużo, a po drugie raz już taką instrukcje robiłam na moim starym blogu, więc miałam wrażenie, że będę odgrzebywać stare tematy, które nie wiadomo czy komuś się przydadzą. Mimo moich obaw, pokażę Wam jak szybko poprawić zdjęcie portretowe - retusz twarzy, poprawianie kolorów tła oraz włosów i ust, aby było wszystko wyraźniejsze. Oprócz tego, mam dla Was mały bonus - jak uzyskać efekt retro na zdjęciu za pomocą krzywych. 


1. Oczywista, oczywistość - musimy otworzyć zdjęcie w GIMPie. Będziemy potrzebowali okna z warstwami i przybornik - widać je na poniższym zdjęciu. 



2. Wybieramy kolory - jasność i kontrast.


2a. Pojawi nam się ramka modyfikacja jasności i kontrastu. Za pomocą suwaczków, które są zaznaczone żółtą ramką dostosowujemy jasność i kontrast, a następnie klikamy ok


3. W moim wypadku, poprawienie jasności i kontrastu za wiele nie pomogło (trzeba pamiętać, żeby nie przegiąć), dlatego wspomogłam się krzywymi. Wybieramy kolory - krzywe


3a. Pojawi nam się ramka modyfikacja krzywych kolorów. W tej ramce znajdziemy "kanał: wartość" klikamy na strzałeczkę obok napisu "wartość". Rozwinie nam się lista wartości. Każdą z nich możemy dostosować pod siebie, a następnie klikamy ok



W niektórych wypadkach można sobie odpuścić punkt 2 i 2a lub 3 i 3a. Wszystko zależy od zdjęcia. Moje jest zrobione wśród drzew, robione bez blendy, więc nie każde miejsce jest dobrze oświetlone, wyraziste. 

4. W kolumnie warstwy, klikamy na nasze zdjęcie prawym przyciskiem myszy i wybieramy "duplikuj warstwę".



4a. Wygładzanie skóry (jeśli jest taka potrzeba). W tym celu, wybieramy filtry - rozmycie - rozmycie Gaussa

4b. Pojawi nam się ramka "rozmycie Gaussa", w niej ustalamy promień rozmycia (według własnego upodobania) i klikamy ok


4c. Całe nasze zdjęcie, zrobi się zamglone. W tym wypadku należy kliknąć prawym przyciskiem myszy na naszą kopię w kolumnie "warstwy" i wybrać "dodaj maskę warstwy


4d. Pojawi nam się ramka "dodanie maski do warstwy", w której wybieramy "czarna (pełna przezroczystość)" i klikamy dodaj


4e. Wybieramy pędzel i pamiętamy o tym, aby zmienić kolory z czarnego na białym na biały na czarny. Robimy to za pomocą strzałeczek, które zaznaczyłam w niebieskiej ramce. 


4f. Znowu przybliżamy sobie zdjęcie i trzymając lewy przycisk myszki malujemy pędzlem po naszej skórze. 


4g. Kiedy nasza skóra jest już zamglona, ustawiamy krycie tak, aby wyglądało jak najbardziej naturalnie. 



4h. Po ustawieniu krycia, klikamy prawym przyciskiem myszy na naszą kopię i wybieramy obraz "spłaszcz obraz".


5. Wykonaj polecenie z punktu 4. Czas na usunięcie niedoskonałości. Niedoskonałości usuwamy za pomocą łatki. 


5a. Po wybraniu łatki, pokażą nam się opcje narzędzia. Dzięki nim możemy dostosować rozmiar naszej łatki. Trzeba pamiętać, aby nasz pędzel był ustawiony na miękki. Jak użyć tego narzędzia? Znajdujemy miejsce bez żadnej skazy, koło naszej niedoskonałości, którą chcemy zakryć. Klikamy ctrl + lewy przycisk myszy, a następnie klikamy na fragment skóry, który chcemy zakryć. 


5b. Aby było nam łatwiej, przybliżmy sobie zdjęcie, za pomocą listy z rozmiarami lub lupki. 




5c. Po zakończeniu usuwania niedoskonałości, klikamy prawym przyciskiem myszki naszą kopię i wybieramy opcje połącz w dół


6. Przyciemnienie brwi i rzęs. Wybieramy narzędzie przyciemniania/rozjaśniania, pojawią nam się opcje narzędzia. Dopasowujemy rozmiar pędzla, wybieramy miękki pędzel i zaznaczamy "wypalanie". Następnie dokładnie przyciemniamy nasze brwi i rzęsy. 


7. Poprawianie koloru ust. Klikamy prawym przyciskiem myszki na naszym zdjęciu w kolumnie "warstwy" i wybieramy "duplikuj warstwę".


7a. Wybieramy pędzel (pamiętamy, aby był ustawiony na miękki), zmieniamy kolor (kolor zbliżony, do odcienia naszych ust, tutaj możemy pomóc sobie narzędziem pobierania koloru zaznaczony niebieską ramką). Klikając na czarny kwadracik, otworzy nam się ramka "zmiana aktywnego koloru", w której będziemy mogli wybrać sobie kolor i klikamy ok


7b. Zmniejszamy krycie, tak aby wyglądało naturalnie i pędzlem malujemy po naszych ustach (nie musi być dokładnie).


7c. Klikamy prawym przyciskiem myszki na naszym zdjęciu i wybieramy "dodaj kanał alfa". 


7d. Wybieramy narzędzie "gumka". W opcjach narzędzia wybieramy odpowiedni rozmiar, a pędzel pozostawiamy cały czas na miękkim. Następnie wycieramy to co nam nie potrzebne. 


7e. Klikamy prawym przyciskiem myszki na kopię naszego zdjęcia i wybieramy "połącz w dół". 


8. Kolor włosów. Aby poprawić kolor włosów musimy duplikować warstwę (patrz pkt. 7). 


8a. Następnie wykonujemy to samo co w punktach 7a - 7e, tylko z włosami. 



9. Na koniec możemy delikatnie wyostrzyć. Filtry - uwydatnienie - wyostrz



10. Efekt końcowy: 


11. Bonus - efekt retro na zdjęciu. Po obróbce możemy pododawać sobie efektów. Ciekawe efekty możemy uzyskać za pomocą krzywych. Przy tym tutorialu pokażę Wam jak uzyskać efekt retro, bo taki był mi potrzebny przy tym zdjęciu. 

11a. Wybieramy kolory - krzywe


11b.  Otworzy nam się ramka "modyfikacja krzywych kolorów" i wybieramy kanał czerwony.


11c. Wszystko ustawiamy tak, jak na poniższych zdjęciach i klikamy ok



11d. Efekt końcowy: 


Za zdjęcie, które posłużyło mi do tego tutorialu dziękuję Oli

Na koniec mała prośba - jeśli zauważycie jakiekolwiek błędy przy wyświetlaniu wpisu (nie wyświetla się wpis, przesunięcia etc.), literówki czy cokolwiek innego, dajcie znać w komentarzu, abym mogła to naprawić :)

Przyda Wam się taka instrukcja? :) 

Czytaj dalej »

Copyright © Szablon wykonany przez Blonparia