Jak dodać spersonalizowane zakładki: O blogu, Kontakt, Współpraca …

grafika na bloga blogspot, jak dodać zakładki na blogspot

„Nigdy nie oceniaj wysokości góry, dopóki nie osiągniesz jej szczytu. Wtedy zobaczysz, jak była niewysoka.” Dag Hammarskjöld

Czyli dalej upiększamy i personalizujemy nasze blogi.

Dzisiaj chciałabym zaproponować Wam kolejny etap personalizacji bloga czyli dodanie spersonalizowanych zakładek „O mnie”, „O blogu”, „Kontakt”, „Współpraca” (czy jakkolwiek je nazwiecie). Tworzymy je jako osobne strony statyczne. A że warto to zrobić to temat na osobny wpis. W tym temacie czeka Was mała niespodzianka. Bardzo fachowa osoba (tj Agnieszka alias Lifemanagerka, która zawodowo jak freelancerka zajmuje się wyszukiwaniem blogów pod współpracę dla swoich klientów) obiecała  napisać jak przygotować taką idealną zakładkę Współpraca. Nie patrzcie na tę moją (przygotowałam ją „per noga”, ale nie z braku szacunku dla czytelników, tylko dla tego, że przy obecnych statystykach na zainteresowanie zainteresowanych Współpracą ze mną raczej nie liczę. Ale namotałam. A tymczasem tylko chciałam byście dzięki mojemu blogowi uwierzyli, że

„Wszystko jest trudne, zanim stanie się proste”.
 
No to do dzieła, ale najpierw mała porcja motywacji:
  • „Im bardziej chcę coś zrobić, tym mniej nazywam to pracą”. Richard Bach (pisarz amerykański)
  • „Większość ludzi przegapia okazję, bo jest ona ubrana w kombinezon i wygląda jak praca.” Thomas Edison
  •  „Ponoś porażki często, abyś mógł odnieść sukces szybciej.” – Tom Kelley, Ideo
  •  „Geniusz to 1% inspiracji i 99% potu.” – Thomas Edison
  •  „Jeśli nie zbudujesz swojego marzenia, ktoś inny Cię zatrudni, abyś pomógł mu zbudować jego.” – Tony Gaskins
  •  „Ludzie, którzy tracą czas czekając, aż zaistnieją najbardziej sprzyjające warunki, nigdy nic nie zdziałają. 
  •  „Najlepszym sposobem na smutek jest nauczenie się czegoś nowego.” Theodore White

Jak stworzyć nową stronę na blogu?

Zacznijmy od tego, jak w ogóle stworzyć nową stronę na blogu. W tym celu zaglądamy do zakładki Strony. Gdy chcemy stworzyć nową stronę po prostu klikamy na Nowa strona, a gdy już będzie gotowa na Opublikuj.
grafika na bloga blogspot, jak dodać zakładki na blogspot

Teraz zastanawiacie się pewnie co zrobić, by te przygotowane strony stały się widoczne. Udajemy się do zakładki Układ, Dodaj gadżet i tam wyszukujemy przygotowany na tę okazję widżet: Strony.

grafika na bloga blogspot, jak dodać zakładki na blogspot

grafika na bloga blogspot, jak dodać zakładki na blogspot

Teraz możemy wybrać sobie, które strony chcemy by były widoczne i w jakiej kolejności.

 
grafika na bloga blogspot, jak dodać zakładki na blogspot

Tak przygotowane strony możemy ustawić sobie w panelu bocznym na blogu, albo u góry strony w obszarze pod którym pojawiają się kolejne wpisy.

grafika na bloga blogspot, jak dodać zakładki na blogspot

 

grafika na bloga blogspot, jak dodać zakładki na blogspot

Np tak to wygląda na podglądzie po dodaniu Strony nad treścią postu. Ja juz mam tu etykiety z kilku wybranych kategorii, wiec zrobił sie tu tłok.

grafika na bloga blogspot, jak dodać zakładki na blogspot

A tak korzystając z tego gadżetu w kolumnie bocznej.

grafika na bloga blogspot, jak dodać zakładki na blogspot
 

Jak spersonalizować zakładki O mnie, Współpraca, Konakt?

Ale gdybyśmy chcieli je spersonalizować, doprawić je we własnym sosie i podpasować pod jedyny i unikalny charakter naszego bloga. Otóż jest to bardzo proste, a przynajmniej metoda, którą Wam pokażę. Choć na pewno istnieją metody dużo bardziej skomplikowane.

U mnie efekt koncowy wygląda tak: Niby mała rzecz, a cieszy.

grafika na bloga blogspot, jak dodać zakładki na blogspot

Jak to przygotować? Bardzo prosto korzystając ze świetnego programu ogólnie dostępnego on line (i bardzo intuicyjnego), jakim jest PicMonkey.

Ale przedtem jeszcze sprawdzcie wymiary Waszej kolumny bocznej. W tym celu udajemy się do zakładki Szablon, Dostosuj, Dostosuj ustawienia szerokości i notujemy gdzieś w pamięci jaką szerokość ma nasz panel boczny na blogu.

grafika na bloga blogspot, jak dodać zakładki na blogspot

Jeżeli chcemy, by nasze zakładki współgrały z kolorystyką naszego szablonu możemy sprawdzić i skopiować sobie oznaczenia naszego koloru w języku HTML. W tym celu: ciągle jesteśmy w Szablonie, Dostosuj i przechodzimy do zakładki Zaawansowane. Ja np sprawdziłam i skopiowałam sobie (CTRL C) kolor etykiet i czcionę w gadżetach w panelu bocznym.

grafika na bloga blogspot, jak dodać zakładki na blogspot

 Tu sprawdziłam, jaką czcionkę używam w panelu bocznym.

grafika na bloga blogspot, jak dodać zakładki na blogspot

A teraz wchodzimy do Picmonkey. Wybieramy opcję Design. Przygotowujemy sobie przezroczstą kanwę tło.

grafika na bloga blogspot, jak dodać zakładki na blogspot

Możemy przygotować sobie wymiary naszego tła (jest tu opcja Resize), ale nie musimy się na samym początku tym przejmować, możemy to zrobić potem (przymierzając „w praniu” do bloga, albo zmniejszyć już na Bloggerze, ale o tym za chwilkę).

grafika na bloga blogspot, jak dodać zakładki na blogspot

Teraz wybieramy sobie ikonkę Motylka czyli różne Overlays, ja akurat skorzystałam z opcji Banner, ale gorąco polecam Wam podłubanie i poszukanie „tego Waszego szczęścia”.  A mozna zrobić tu wiele. Ja puściłam luzno wodze fantazji i zaserwowałam Wam mała próbke u góry we wpisie.

grafika na bloga blogspot, jak dodać zakładki na blogspot

Po to, by kolor moich zakładek pasował do koloru szablonu skopiowałam tu ręcznie kolor pobrany wcześniej z Szablonu na Bloggerze (żeby idealnie trafić w odcien). Zapisałam sobie w pamięci komputera. I teraz kolejno stworzyłam 4 różne zakładki (o takich samych wymiarach), czyli „O mnie”, „O blogu”, „Współpraca”, „Kontakt”. Tekst dorzucamy klikając na ikonkę T.

grafika na bloga blogspot, jak dodać zakładki na blogspot
grafika na bloga blogspot, jak dodać zakładki na blogspot

Gdy Wasze zakładki są już gotowe, otwieracie kolejny post w Bloggerze i pobieracie je do niego (jako zdjęcia). Tu jeżeli wymiary Wam nie odpowiadają zawsze możecie probowaóć wybierając inny rozmiar fotki np mały, duży, a na wejściu oryginalny. A jeżeli tak nie traficie w wielkość, wróccie do PicMonkey i skorzystajcie z opcji Resize, by przewymiarować Wasze obrazki.

Teraz, gdy wszystkie obrazki są już w odpowiedniej kolejności w obszarze pisania tekstu, dodajecie do każdej z nich osobno link prowadzący do danej strony. W tym celu gdy dana ikonka jest podświetlona klikacie u góry na ikonkę link.

grafika na bloga blogspot, jak dodać zakładki na blogspot

Gdy ten etap jest zakonczony, przechodzimy do wersji naszego wpisu w języku HTML (zaznaczyłam Wam na czerwono odpowiednią ikonkę) i pobieramy kod HTML tego, co zrobilismy.

grafika na bloga blogspot, jak dodać zakładki na blogspot

Z zapisanym w pamięci kodem ponownie udajemy się do zakładki Układ, Dodaj gadżet i wybieramy Gadżet HTML/Java Script. Tu wklejamy nasz kod. I gotowe. Sprawdzamy na podglądzie, przesuwamy w odpowiednie miejsce. Dopracowujemy rozmiary ikonek (tu np wracamy do treści wpisu i zmniejszamy lub zwiększamy naszego uznania  obrazki). I probujemy. Odwagi: świat należy do odważnych.
A jeżeli szukacie innej metody, możecie skorzystać z dostępnego on line narzędzia do mapowania Image-maps. Jak ono działa przeczytacie we wpisie: Jak samodzielnie przygotować ikonki mediow spolecznościowych.
 
A to moja pierwotna próba zakładek, ale stwierdziłam, że mniej znaczy lepiej i wybrałam coś bardziej stonowanego.

grafika na bloga blogspot, jak dodać zakładki na blogspot

Pozdrawiam serdecznie

Beata

 

https://www.facebook.com/vademecumblogerahttps://twitter.com/HARDASKAhttps://plus.google.com/113589991481358500540/postshttp://www.pinterest.com/hardaska/

 

Beata Redzimska Vademecum Blogera
Beata Redzimska

Zapisz się na newsletter i pobierz darmowy ebook: TWOJA MARKA NA INSTAGRAMIE

More from BEATA REDZIMSKA

Jak pisać teksty, które ludzie będą chcieli czytać ?

Pisanie dobrych tekstów jest sztuką. Z jednej strony potrzeba czasu, by dobrze...
Read More

42 komentarze

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *