Jak wykonać blogową strzałkę "w górę" zmieniającą kolor

25.02.2015



W dzisiejszym tutorialu pokaże wam jak zrobić swoją własną strzałkę w górę, która umożliwi nam powrót na górę strony. Taką strzałkę, możecie oczywiście zrobić na stronie profilki.pl, jednak ja chcę wam pokazać jak w prosty sposób można ją zrobić samemu, a oprócz tego będzie zmieniała kolor po najechaniu na nią myszką.

1. Otwieramy program PhotoScape i wybieramy opcję edytuj.

2. W lewej bocznej kolumnie pokazują nam się foldery, klikamy na ten, w którym mamy tło do naszej strzałki. Następnie klikamy na wybrane tło, tak abyśmy mogli je edytować.


3. Klikamy na obiekt - symbol.


4. Pojawi nam się drugie okno, wybieramy w nim strzałkę, kolor i klikamy ok.


Dzięki tym małym, białym kwadracikom możemy dostosować wielkość naszej strzałki, a łapką przesuwać.


5. Zapisujemy naszą pierwszą strzałkę i w ten sam sposób wykonujemy drugą.



6. Przechodzimy na stronę TinyPic i wgrywamy nasze strzałki. Najlepiej otworzyć sobie tą stronę w dwóch zakładkach, aby wgrać jednocześnie jedną i drugą strzałkę, ponieważ będą nam potrzebne linki do nich.

7. Po wgraniu strzałek przechodzimy do układ - dodaj gadżet - HTML/JavaScript



8. Kiedy otworzy się gadżet, wklejamy następujący kod:

<!--Strzałka w górę-->
<a rel="nofollow"
style="display:scroll;
position:fixed;bottom:
10px;right:5px;"
href="#" title="W górę"><img src="Ikonka 1" alt="Strzałka w górę" border="0" onmouseover="this.src = 'Ikonka 2'" onmouseout="this.src = 'Ikonka 1'"/></a>
<!--Koniec-->

Analiza kodu:

<!--Strzałka w górę-->
<a rel="nofollow"
style="display:scroll;
position:fixed;bottom:
10px;right:5px;"
href="#" title="W górę"><img src="Ikonka 1" alt="Strzałka w górę" border="0" onmouseover="this.src = 'Ikonka 2'" onmouseout="this.src = 'Ikonka 1'"/></a>
<!--Koniec-->

Położenie strzałki w pionie 
Położenie strzałki
Margines (odsunięcie strzałki od krawędzi bloga) 
Link do ikonki 1 (strzałka przed najechaniem na nią myszką) 
Link do ikonki 2 (strzałka po najechaniu na nią myszką) 

9. W miejsce Ikonka 1 i Ikonka 2 wklejamy linki do naszych strzałek, które znajdują się na stronie hostingującej.



10. Nasza strzałka już widnieje na blogu


Czytaj dalej »

Kolorowy element na czarno-białym tle - GIMP

18.02.2015


W dzisiejszym tutorialu skupimy się na programie GIMP. Przedstawię wam jak w prosty sposób, można zrobić ciekawy efekt na naszym zdjęciu. Chodzi mi o nic innego jak o kolorowe elementy na czarno - białym tle. Taki efekt ciekawie wygląda na zdjęciu, ale nie każdy wie jak go zrobić. Na wykonanie tego musimy poświęcić dosłownie minute, może dwie.

1. Otwieramy wybrane przez nas zdjęcie w programie GIMP


2. W oknie warstwy, pojawił się nasz obrazek, klikamy na niego prawym przyciskiem myszki i wybieramy "duplikuj warstwę". Jeśli nie masz okna "warstwy" kliknij w okna - dodatkowe okna dialogowe - warstwy lub okna - ostatnio zamknięte doki. 


3. Pojawi nam się skopiowany obraz w kolumnie z warstwami, klikamy na niego prawym przyciskiem myszki i wybieramy "dodaj kanał alfa" 


4. Wybieramy teraz kolory - desaturacja. Pojawi nam się okienko, w którym będziemy mogli sobie wybrać interesujący nas odcień szarości. Kiedy już wybierzemy interesujący nasz odcień klikamy "ok".



5. Teraz bierzemy się za wycieranie szarości z elementu, który ma pozostać kolorowy. Możemy to zrobić na dwa sposoby. Jeśli nie czujesz się pewnie wybierz zaznaczenie odręczne, zaznacz wybrany przez siebie element (jeśli chcesz więcej kolorowych elementów na zdjęciu, to żeby ułatwić sobie życie, kliknij w dwa czerwone kwadraciki, które zaznaczone są na zdjęciu, teraz możesz zaznaczać wiele elementów jednocześnie) po czym wybierz gumę i wytrzyj szarość na zaznaczonym elemencie.



Jeśli, czujesz się pewnie, pomiń zaznaczenie odręczne, kliknij po prostu w gumkę i wycieraj.


Efekt przed i po :



Zdjęcie do tutorialu autorstwa Susanne, pobrane ze strony flickr.

Czytaj dalej »

Jak dodać formularz kontaktowy w podstronie

11.02.2015


Formularz kontaktowy jest nam bardzo dobrze znany. Jeden z tych gadżetów, który jest bardzo przydatny, ponieważ można od razu nie wychodząc z bloga napisać wiadomość do autora. Osobiście wolę korzystać z formularza kontaktowego niż kopiować adres e-mail, otwierać pocztę i dopiero pisać wiadomość. W dzisiejszym tutorialu pokażę wam jak umieścić formularz kontaktowy w podstronie, tak jak się znajduje u mnie w zakładce kontakt, aby nie zawadzał nam na pasku bocznym i nie majaczył gdzieś w stopce bloga.

1. Wchodzimy w układ i wybieramy dodaj gadżet. Kiedy otworzy nam się nowe okno, klikamy na "dodaj więcej gadżetów" szukamy formularza kontaktowego. Kiedy znajdziemy nasz formularz, klikamy na plus,a następnie zapisz.




Obecnie nasz formularz kontaktowy znajduje się w pasku bocznym i niech tam zostanie, ewentualnie możemy przenieść go na sam dół naszej kolumny, w każdym razie formularz musi być umieszczony na blogu. 

2. Przechodzimy do strony, w której ma się pojawić nasz formularz kontaktowy - w moim przypadku jest to strona test, a następnie przechodzimy do edytora HTML. 



Wklejamy kod:

<form name='contact-form'>
<div>Twoje imię: </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>Twój adres e-mail: <em>(wymagane)</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>Wiadomość: <em>(wymagane)</em></div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Wyślij'/>
<div style='text-align: center; max-width: 450px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>

Kliknij opublikuj lub aktualizuj, to zależy od tego czy wasza strona dopiero powstała czy edytujecie już istniejącą stronę.

3. Przechodzimy do szablon - edytuj kod HTML, a następnie rozwijamy listę "Przejdź do widżetu" i zaznaczamy ContactForm1. 



Kiedy już się znajdziemy  w odpowiednim miejscu, to rozszerzamy nasz widżet, klikając na kropeczki, które są zaznaczone w ramce poniżej.


Powtarzamy tą czynność tym razem z <b:includable id='main'>...</b:includable> 



Kiedy już nam się wszystko rozwinie, to usuwamy tą cześć kodu, która jest zaznaczona poniżej. Sprawi to, że formularz kontaktowy zniknie z kolumny bocznej bloga, ale nie zniknie z naszej podstrony, do której go dodaliśmy.


Uwaga! nie można usunąć formularza kontaktowego z kolumny bocznej, ten gadżet musi pozostać! 

Oprócz tego pojawiły się małe zmiany na blogu, zakładka tutoriale została podzielona na tutoriale blogowe oraz te graficzne związane z GIMPem, PhotoScapem i inne oraz zakładka portfolio została podzielona na szablony, nagłówki oraz inne prace. Mam nadzieję, że to ułatwi wszystkim wyszukiwanie tego czego potrzebuje.
Czytaj dalej »

Jak zrobić datę wpisu w chorągiewce

04.02.2015


Były już kody CSS, na to jak zrobić datę wpisu w kółku. Już prawie większość osób, kod na datę w kółku zna. Postanowiłam, że w dzisiejszym tutorialu zapoznam was z kodem, który dotyczyć będzie daty w tzw. chorągiewce. Myślę, że będzie to miła odmiana i może akurat ktoś się skusi na to aby zmienić swoje kółeczka na chorągiewkę.

Przechodzimy do: ustawienia - język i formatowanie - format nagłówka daty i zmieniamy na format pierwszy. Następnie przechodzimy do: szablon - dostosuj - zaawansowane - dodaj arkusz CSS.


Kiedy już dostaniemy się do naszego arkusza CSS wklejamy tam kod:

.date-header span {position: absolute;
border-top: solid 3px #ccc;
margin: -2px 0px 0px 849px !important;
background: #000;
height: 50px;
border-radius: 0px 0px 50px 50px;
font-family: Verdana; !important;
font-size: 10px !important;
padding: 5px;
line-height: 14px !important;
color: #fff !important;}

Analiza kodu:



position: absolute;
border-top: solid 3px #ccc;  - rodzaj, grubość i kolor paseczka na górze daty
margin: -2px 0px 0px 849px !important; - dopasowanie daty 
background: #000; - tło daty 
height: 50px; - długość naszej chorągiewki 
border-radius: 0px 0px 50px 50px;
font-family: Verdana; !important; - rodzaj czcionki 
font-size: 10px !important; - rozmiar czcionki 
padding: 5px; - marginesy wewnętrzne  
line-height: 14px !important; - położenie daty 
color: #fff !important - kolor daty 

Wszystko co zaznaczone na kolorowo jest wartościami zmiennymi, border-radius lepiej zostawić w spokoju, ponieważ, inaczej nie uzyskamy efektu chorągiewki.

Nasza data będzie po prawej stronie, jeżeli chcemy aby była po lewej wpisujemy ten kod:

.date-header span {position: absolute;
border-top: solid 3px #ccc; 
margin: 10px 900px  0px -50px !important; 
background: #000; 
height: 50px; 
border-radius: 0px 0px 50px 50px;
font-family: Verdana; !important; 
font-size: 10px !important; 
padding: 5px; 
line-height: 14px !important; 
color: #fff !important;}

Czytaj dalej »

Jak zaplanować wpis na bloga

02.02.2015


W tym wpisie nie chodzi o przepis na sukces w kategorii planowanie. Nie chodzi również o to jak sukcesywnie wpisywać każdy pomysł w kalendarz. Wspomniałam już jakiś czas temu, że nie jestem ekspertem, a opisane w tekście metody są tylko i wyłącznie moimi własnymi doświadczeniami.
Często na grupach, które są poświęcone tylko blogowaniu, można zauważyć wpisy mniej więcej o takiej treści:

Nie mam pomysłu na wpis, napiszcie w komentarzu o czym mogłabym napisać.

Rozumiem blogerów, którzy borykają się z tym problemem. Napisanie jakiegokolwiek wpisu wymaga od nas pomysłu nie tylko na sam tekst, ale również na to, jak ten wpis ubrać w słowa. Tak naprawdę, aby powstał sam pomysł, potrzebny jest nam tylko jeden impuls. Dlatego w dzisiejszym poście przedstawię wam moje sposoby na to, jak planuje swoje wpisy.

  1. Zainspiruj się czymś nowym. Wiadomo, że bez inspiracji, nie ma pomysłu, a bez pomysłu nie ma wpisu. Moją inspiracją są ludzie. Uwielbiam słuchać i patrzeć na różne zachowania. Według mnie ludzie są źródłem, które niesie ze sobą spore zasoby inspiracji - wiadomo, każdy człowiek jest inny. Dobrym źródłem inspiracji są również filmy, książki, czasopisma.
  2. Poświęć czas na analizę. Jeśli już masz pomysł, poświęć trochę czasu aby przeanalizować jakie zdjęcia mają się pojawić, co ma być głównym punktem zaczepienia oraz jak wpis ma wyglądać np. czy ma być on cały wypunktowany, czy też nie. 
  3. Przygotuj sobie materiały. Dobrym rozwiązaniem jest przygotowanie sobie materiałów, które będą nam potrzebne do wpisu. Utwórz sobie folder na komputerze, w którym będziesz zbierać wszystkie potrzebne ci materiały.
  4. Rysuj schematy. Dobrym rozwiązaniem jest rysowanie tzw. drzewek. Ponieważ dzięki takiemu schematowi mamy możliwość wpisania w każde kółeczko/kwadracik/prostokącik, kolejność w jakiej ma się pojawić wcześniej przygotowany przez nas materiał. Mogą być również wpisane hasła, które potem rozwiniecie. 
  5. Utwórz sobie brudnopis. Kiedy wszystkie poprzednie punkty zostały wykonane, otwórz zeszyt lub notatnik na komputerze i napisz na brudno swój wpis. Dzięki temu, będziesz mógł zobaczyć co należy poprawić albo co należy jeszcze dodać.
  6. Zapisz wpis w kalendarzu. Kiedy wszystko już będzie gotowe, otwórz swój kalendarz i zapisz publikacje wpisu na wybrany przez siebie dzień. 
6 krótkich punktów, do których ja się stosuje. Nie każdemu może przypaść do gustu taki plan, ale chciałam się z wami nim podzielić. Może akurat komuś pomoże. Jak wy planujecie swoje wpisy? 
Czytaj dalej »

Copyright © Szablon wykonany przez Blonparia