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/

 

Zapisz się na Newsletter

  • na taki post czekałam 🙂 dziękuję i zabieram się do pracy 😉

  • Bardzo pomocne szczególnie dla takiego laika jak ja ,dziękuje i pozdrawiam

  • super post! bardzo dziękuję i wieczorem zasiadam do pracy:)

  • Czas zakasać rękawy 😉

  • Kolejny świetny post! A cytaty bardzo trafne!

  • Dla mnie bardzo przydatny post, ponieważ nie mam zamiłowania do informatyki, a głównie lubię pisać i siłą rzeczy na tym się koncentruję, na modernizację bloga ciągle nie znajduję czasu (tym bardziej, że wszystkiego uczę się na żywym organizmie…). Dzięki Tobie jakąś część pracy będę miała za sobą, kiedy nadejdzie odpowiednia chwila 🙂

  • Uwaga będzie pytanie, co mam zrobić ze stronami które miałam wcześniej o mnie itp., jakoś je ukryć czy usunąć, bo niestety nie wiem.

    • Z samymi stronami (moim zdaniem), tymi ktore masz opublikowane nie rob nic. Tylko usun bloggerowski gadzet i zostaw na jego miejsce Twoje spersonalizowane grafiki. Ja tak zrobilam. I u mnie dziala. Pozdrawiam Beata

  • Bardzo przydatne, szczególnie jak ktoś – czyt. ja, jest mało kompatybilny i niezreformowalny, hihi
    Ja mam pytane – probowałam na trzy sposoby ale bez rezultatu dodać wtyczkę fb do bloga – jak to zrobić w prosty sposób ???
    Pozdrawiam, Marlena

    • Marleno nie przejmuj sie, na pewno dasz rade, ja napisalam o tym wpis Tutaj Zajrzyj, a jak bedziesz miala pytania – pisz. Pozdrawiam Beata

  • kochana a jak zrobic aby te strony w gadzecie u góry były wypośrodkowane??? zerknij u mnie- narazie puste są… jak zrobić ,aby były na środku??? i da się jakoś zrobić w tej czcionce polkie „ł” ?? hm…. podoba mi się…ale ta czcionka nie posiada polskich znaków i tu jest ból :/
    i jeszcze jedno pytanie- w stronce „pracownia projektowa” chciałabym aby było bezpośrednie przekierowanie na inna strone www, czy jest to możliwe???

    • Jak wysrodkowac pasek stron znajdziesz we wpisie na blogu Hafija

      Tutaj

      Pozdrawiam serdecznie Beata

  • ja lubię minimalizm. im mniej upiększeń, tym lepiej 🙂

  • masz ten dar,że w prosty i przyjemny sposób objaśniasz zawiłe tematy:) chciałabym sobie stworzyć takie blogowe zakładki,ale nie wiem czy mój szablon z wordpressa mi na to pozwoli.

  • dziękuję Ci, bardzo mi pomógł ten wpis, dzięki niemu mam wreszcie stronę o mnie na swoim blogu

  • Świetna porada, właśnie próbowałam się do niej zastosować 🙂 . Mam takie pytanie. Jest sposób by te strony były na górze pod tytułem i nie jedna pod drugą tylko w poziomie? 🙂

  • Super! TEraz czas wprowadzic zmiany na moim blogu. 🙂

  • Dziękuję bardzo za takie tutoriale, Juz zrobiłam 2 stronki na moim blogu http://vernora1.blogspot.com/ z Pani pomocą. Pozdrawiam, Milena

  • Anna J.

    Spróbuję zrobić takie zmiany na swoim blogu. Pozdrawiam

  • Świetny post, bardzo dziękuję bo właśnie o takie coś mi chodziło !

  • Czy ten program PicMonkey jest gdzieś do ściągnięcia za darmo? Nie mogę nigdzie znaleźć…

    • Dorota, PicMonkey znajdziesz tu: http://www.picmonkey.com/, nie trzeba nic ściągać, instalować, ani nawet się rejestrować. Z bezpłatnych programów polecam Paint.net.

  • Bardzo przydatne informacje i jasno opisane – super! Skorzystałam i mam nadzieję, że mój blog stał się teraz bardziej efektowny 😀

  • Witam a mam pytanie co ja mam zrobić by w moim menu u góry posty się szeregowały? np w domu pojawiały się posty o domu, ogrodzie??
    Pozdrawiam ….Anka

  • Idealnie!!! Dziękuję 🙂

  • Dzięki za wskazówki, zabieram się 🙂

  • Dzięki! Zrobione!

  • kolejny raz mi pomagasz !!! dziękuję!!♥

    http://arakumla.blogspot.com/

  • Przyda mi się, jutro w wolnej chwili biorę się za prace 🙂 dziękuje za tak przydatny wpis + cytaty <3

  • Chuda Maruda

    hej!
    Zrobiłam wszystko wg instrukcji i faktycznie mam cale menu, jednak pod przyciskami jest szare tło, jak mogę się tego pozbyć?

  • Wielmon

    fajne i przydatne 🙂

  • Agnieszka

    Kolejny raz skorzystałam z Twojej „pomocy” 🙂 Dziękuję 🙂

  • Kasia Potter

    Menu zrobione, wielkie dzięki! Tyle czasu się z tym męczyłam i w końcu jest!
    Ale….
    Jak zmienić jego położenie? Jest ciut za blisko nagłówka (w postaci obrazka), a nie mogę ruszyć ani tego ani tego :/
    Próbowałam kodem:
    #HTLM {border-left: ?px}
    i zamiast ‚border’ pisałam ‚margin’
    Proszę o szybką pomoc! (Ja wiem, że to stary post, ale przecież stronka jest używana)

  • inessslife

    Bardzo pomocny post, szczególnie dla tych początkujących. Dzisiaj z niego skorzystałam 🙂

  • blond &brunette

    jeju Twój blog jest swietny! Bardzo nam pomaga! Co prawda jeszcze duzo nauki przed nami, ale jestes niesamowitym źródłem wiedzy 🙂

  • Marzena

    Czy ta sama zasada dotyczy utworzenia własnych chmurek z kategoriami, a w przypadku bloggera etykietami?

  • patrcja

    a co jeśli nie mogę dodać linku do obrazka? poprostu kiedy naciskam opcje link odznacza mi się obrazek. co zrobić?

    • Rise

      mam tak samo 🙁

  • Joanna Murszewska

    świetny poradnik, dziękuję bardzo 🙂

  • Martyna Fijałkowska

    przydało się, dziękuje <3