Jak przystosować Bloggera do urządzeń przenośnych

W zapleczu administracyjnym blogu należy przejść do karty Ustawienia i podkarty Poczta e-mail i telefon komórkowy. W sekcji Pokaż szablon dla komórek zaznacz opcję Tak, na urządzeniach przenośnych pokazuj mój szablon w wersji dla takich urządzeń. Przewiń stronę na dół i zapisz zmienione ustawienia.
W nowej wersji Bloggera należy wybrać kartę Szablon, a następnie kliknąć przycisk ustawień pod miniaturą szablonu Komórka i wybrać opcję Tak, pokazuj szablon dla urządzeń przenośnych na urządzeniach przenośnych, a potem ją zapisać.
W urządzeniu przenośnym będzie od tego momentu serwowany szablon “mobilny” - poniżej kilka zrzutów z tabletu Samsung Galaxy Tab 7 z Androidem 2.2 na pokładzie (zdjęte za pomocą aplikacji Screen Capture Shortcut).

• Widok strony głównej mobilnej wersji blogu

• Widok pojedynczego wpisu

• Wybieranie miejsca odtwarzania klipu wideo osadzonego w blogu

• Wyświetlanie klipu w interfejsie YouTube - możliwe jest wyświetlanie pionowe lub poziome (na pełnym ekranie)

WordPress - odnośniki

W domyślnym szablonie sekcja odnośników w blogu nie jest aktywna. Tymczasem tzw. blogroll, czyli zestaw linków w skrzydełku, jest integralną częścią ogromnej większości blogów w Internecie. Przez ciekawość lub życzliwość (a czasem przyziemny interes) umieszczamy odnośniki do innych stron, licząc oczywiście na wzajemność ze strony innych internautów.

Naturalnie WordPress zawiera narzędzia, które pozwalają w niezbyt skomplikowany sposób zbudować listę odnośników do innych blogów czy stron w Internecie.

Aby uruchomić odnośniki, wykonaj następujące czynności:

• Zaloguj się do kokpitu swojego blogu.
• W lewym panelu kliknij Wygląd, a potem Widżety.

Zobaczysz listę kilkudziesięciu widżetów, które można dodawać do blogu. Kilka z nich jest już obecnych w danym szablonie - w domyślnym są to m.in. wyszukiwarka, kategorie czy archiwa.

WordPress zawiera tzw. obszary dla widżetów, które znajdują się w pasku bocznym lub w stopce.

Załóżmy, że chcemy umieścić widżet w drugim obszarze widżetów.

• Kliknij strzałkę w pozycji Drugi obszar dla widżetów.
• Uchwyć myszką widżet Odnośniki i przeciągnij go na ten obszar.

W blogu zobaczysz widżet z domyślną kategorią linków o nazwie Blogroll i wstępną listą linków do rozmaitych stron związanych z WordPressem.

Oczywiście wcale nie jesteśmy zobowiązani do wyświetlania tego akurat zestawu linków - możemy utworzyć własne kategorie, a w nich odnośniki.

• W lewym panelu kliknij Odnośniki.

• Kliknij Kategorie odnośników.
• W polu Name podaj nazwę kategorii i jej opis.
• Kliknij Add New Link Category.

Na liście kategorii pojawi się nowa kategoria.

• W lewym panelu kliknij Dodaj nowy.
• Podaj nazwę i adres odnośnika, a następnie zaznacz niżej kategorię, w której ma się pojawić.
• Po prawej stronie kliknij przycisk Dodaj odnośnik.

System będzie sukcesywnie dodawać odnośniki do wskazanej kategorii, potwierdzając za każdym razem wykonanie operacji komunikatem w żółtym pasku.

W blogu zobaczysz rozbudowaną listę linków.

Można zbudować kilka kategorii linków, zarówno obejmujących własne, jak i cudze strony.

Teraz musimy się zastanowić, co zrobić, by wyświetlać tylko wybrane kategorie linków.

• Przejdź ponownie do Wygląd - Widżety.

WordPress rozwiązuje to nie do końca wygodnie dla użytkownika, pozwalając wyświetlać jedną lub wszystkie kategorie. Jeśli kategorii mamy więcej (jak na powyższej ilustracji), musimy wybrać na rozwijanej liście pozycję Wszystkie odnośniki. Ale wtedy będzie również wyświetlana kategoria Blogroll z linkami do WordPressa, a tej kategorii nie możemy usunąć w module zarządzania kategoriami.

Możemy jednak zastosować pewien trick, mianowicie umieścić w obszarze kilka instancji widżetu Odnośniki, a każdemu przypisać wybraną kategorię. Wybór trzeba oczywiście zapisać kliknięciami przycisku Zapisz.

W efekcie w blogu zobaczysz tylko własne kategorie.

Jeśli jednak nie przeszkadza ci obecność domyślnego Blogrollu, możesz zastosować tylko jedną instancję widżetu i wybrać w niej opcję Wszystkie odnośniki.

WordPress - własne menu

We wpisie WordPress - statyczne strony pokazaliśmy, jak tworzyć statyczne strony w domyślnym pasku menu widniejącym pod nagłówkiem. Tym razem zajmiemy się tworzeniem własnych menu, które można umieszczać na stałe w blogu - takich menu można tworzyć wiele i stosować je w danej chwili w blogu, zależnie od okoliczności.

Od użytego szablonu zależy, czy możemy wyświetlać jedno, czy więcej pasków - w domyślnym szablonie użytym po utworzeniu blogu możliwe jest wyświetlanie jednego paska.

• Po wejściu do kokpitu (zaplecza administracyjnego) blogu kliknij w lewym pasku przycisk Wygląd, a potem Menu.

Aby utworzyć nowe menu:

• W polu Menu Name podaj nazwę własnego menu i kliknij po prawej stronie przycisk Create Menu.

W tym momencie uaktywnią się wygaszone do tej pory sekcje z narzędziami.

W menu możesz umieszczać trojakiego rodzaju elementy: zewnętrzne odnośniki (np. do innych swoich stron w Internecie), statyczne strony oraz kategorie, jakie przypisujemy poszczególnym wpisom w blogu.

Zauważ, że w sekcji Położenia motywów jest rozwijana lista dostępnych menu, które można wybierać do wyświetlania w blogu, czyli Główne menu nawigacyjne.

Załóżmy najpierw, że chcemy dodać statyczne strony.

• W sekcji Strony kliknij Zobacz wszystkie.
• Zaznacz pole wyboru przy pozycji Strona domowa i kliknij Dodaj do menu.
• W analogiczny sposób dodaj inne strony.

Zobaczysz, że utworzone właśnie menu zostanie uzupełnione o wybrane statyczne strony.

• Kliknij przycisk Zapisz menu po prawej stronie.

Jeśli zechcesz, aby pewne strony były podstronami stron wyższego rzędu, uchwyć taką stronę myszką i przeciągnij nieco w prawo. Pokazuje to poniższa ilustracja, gdzie strony Moje strony i Moje społeczności są podstronami strony Linki.

Kolejność linków w menu możesz zmieniać, przesuwając je myszką w górę i w dół.

• Ponownie kliknij przycisk Zapisz menu po prawej stronie.

A teraz sprawdźmy, jak sprawuje się takie menu w działaniu.

• Rozwiń listę Główne menu nawigacyjne i wybierz swoje menu.
• Kliknij przycisk Zapisz.

Przejdź do wyświetlania blogu - zobaczysz w nim swoje nowe menu.

A teraz uzupełnijmy menu o dalsze elementy.

• W sekcji Własne odnośniki podaj adres i wyświetlaną nazwę witryny.
• Kliknij Dodaj do menu.

• Dodaj inne adresy.
• Zapisz zmienione menu przyciskiem Zapisz menu.

• W sekcji Kategorie zaznacz pola wyboru przy kategoriach, jakie chcesz dodać do menu (kliknięcie kategorii wyświetli wszystkie wpisy z tej kategorii, powielając zresztą zadanie widżetu Kategorie w pasku bocznym).
• Kliknij przycisk Dodaj do menu.

• Zapisz zmienione menu przyciskiem Zapisz menu.

Sprawdź, jak wygląda teraz menu w blogu.

To oczywiście tylko przykład pokazujący możliwości - strukturę takiego menu powinieneś dobrze przemyśleć, aby najlepiej spełniało swoje zadanie. Jak powiedzieliśmy, takich menu możesz sporządzić kilka i stosować je wymiennie, zależnie od potrzeb - wybieramy je na liście Główne menu nawigacyjne i zapisujemy wybór.

Jeśli zechcesz powrócić do pierwotnego menu, wybierz na liście pustą pozycję.

Witryny Google - pozioma nawigacja

W Witrynach Google zazwyczaj tworzymy panel nawigacyjny po lewej lub prawej stronie, co pokazaliśmy we wpisie Witryny Google - tworzymy nawigację. Masz jednak także możliwość zbudowania dwupoziomowego, rozwijanego menu u góry strony.

• W zapleczu administracyjnym, na karcie Układ witryny, kliknij przycisk Zmień układ witryny.

Ukaże się okno Zmień układ witryny.

Rysunek - Modyfikowanie układu witryny

Poziomy pasek nawigacyjny nie jest domyślnie włączony. Gdy zaznaczysz tę opcję, po zapisaniu opcji kliknięciem OK zmieni się zawartość karty Układ witryny i będziesz mógł utworzyć poziomy pasek nawigacyjny znajdujący się nad stronami, ale poniżej nagłówka.

Rysunek - Edycja zawartości poziomego paska nawigacyjnego

Po kliknięciu linku edytuj zawartość ukaże się okno Właściwości nawigacji poziomej.

Rysunek - Okno dodawania stron do nawigacji poziomej

Gdy klikniesz Dodaj stronę, w oknie Wybierz stronę do dodania znajdź potrzebną ci stronę i wprowadź ją do poziomego paska nawigacyjnego.

Rysunek - Wybieranie strony do dodania

Domyślny styl elementów nawigacyjnych to Pola.

Rysunek - Style elementów nawigacyjnych

Po zapisaniu zmian pasek nawigacyjny wygląda następująco:

Rysunek - Pola w pasku nawigacyjnym

Karty mają bardzo podobny wygląd, natomiast Linki mają następującą postać:

Rysunek - Linki w pasku nawigacyjnym

Masz jeszcze możliwość tworzenia menu rozwijanego – najlepiej zilustruje to przykład.

Definicja nawigacji (zwróć uwagę na wcięcie stron niższego szczebla – są jednak maksymalnie dwa poziomy):

Rysunek - Definiowanie rozwijanego menu

Wynik w witrynie – menu rozwija się po przesunięciu nad nie kursora myszki:

Rysunek - Rozwijane menu w witrynie

WordPress - statyczne strony

Zobacz też: WordPress - własne menu

We wpisie Blogger - statyczne strony pokazywałem, jak sporządzić statyczne strony widniejące pod nagłówkiem (lub w skrzydełku - do wyboru) w Bloggerze.

Analogiczne - nawet bogatsze funkcjonalnie narzędzie - oferuje platforma WordPress. Pokażmy, krok po kroku, jak przygotować takie strony.

Blog już w momencie założenia jest tworzony z jedną statyczną stroną o nazwie About.

Przede wszystkim powinieneś zmienić nazwę takiej strony z About na O mnie.

• Wejdź do zaplecza administracyjnego blogu.
• W lewym panelu kliknij Strony.
• Przesuń kursor nad nazwę strony, aby ukazało się podręczne menu.

• Kliknij Edytuj i w wyświetlonym edytorze popraw tytuł oraz zmień anglojęzyczną treść przykładowej strony.

• Po prawej stronie kliknij przycisk Aktualizacja.

Po powrocie do blogu zobaczysz zmieniony tytuł.

• Aby utworzyć nową statyczną stronę, wejdź do zaplecza administracyjnego i kliknij Strony.
• Kliknij przycisk Dodaj nową.

• Wpisz tytuł i treść, a po zakończeniu kliknij po prawej stronie przycisk Opublikuj.

Po powrocie do blogu zobaczysz kolejną statyczną stronę.

Jeśli zechcesz ułożyć statyczne strony w żądanej kolejności, po prawej stronie, w Atrybutach, podawaj kolejne cyfry - pierwsza ma 0, druga 1 itd.

Masz jeszcze jedną możliwość, której nie ma w konkurencyjnym Bloggerze - strony ułożone hierarchicznie.

Załóżmy, że chcemy utworzyć rozwijane menu, na przykład:

---

Linki

- moje strony

- moje społeczności

---

W tym celu musimy się posłużyć dodatkową opcją, wykorzystując atrybut Rodzic.

Najpierw tworzymy stronę Linki.

Potem tworzymy podstronę Moje strony i jako atrybut Rodzic wybieramy Linki, nadając jednocześnie numer 0, jeśli ma to być pierwsza podstrona.

Następnie tworzymy podstronę Moje społeczności, znowu wybierając rodzica Linki i nadając numer 1.

Po opublikowaniu zobaczymy hierarchiczne menu.

W ten sposób możemy przygotować nieduży zestaw statycznych stron, które naszym zdaniem powinny być łatwo dostępne dla czytelników blogu.

Windows Live Writer 2011 - wideo z Internetu

Fragment z ebooka Bloguj jak mistrz. Windows Live Writer 2011.

Załóżmy, że chcemy osadzić we wpisie klip znajdujący się w serwisie YouTube. Wystarczy w tym celu skopiować w przeglądarce adres klipu, np. http://www.youtube.com/watch?v=cf3k7eQ-9I8, a następnie w edytorze kliknąć we wstążce Strona główna przycisk Wideo i wybrać polecenie Z sieci Web. W polu Adres internetowy wklejamy ze schowka adres – w podglądzie powinniśmy zobaczyć klip.

Rysunek - Osadzanie klipu o podanym adresie internetowym

Gdy interfejs klipu znajdzie się w edytorze, możesz jeszcze dodać podpis informujący o zawartości prezentowanego filmu.

Osadzony klip ma domyślny rozmiar interfejsu. Możesz go jednak zmienić, korzystając z nieco innej techniki.

Możesz otworzyć stronę z klipem w YouTube, a następnie kliknąć przycisk Umieść, wybrać rozmiar interfejsu i skopiować kod do schowka.

Rysunek - Kod do osadzania plików z YouTube

W oknie Wstaw plik wideo wklej kod – otrzymasz interfejs w innych rozmiarach niż domyślne.

Rysunek - Rozszerzony interfejs klipu

Tak przygotowany kod możesz umieścić zarówno w WordPressie, jak i Bloggerze czy Blox.pl.

Jest jeszcze druga technika osadzania, która w procesie modelowania interfejsu w YouTube wymaga zaznaczenia opcji Użyj kodu elementu iframe umieszczanego na stronie. Technika ta jednak jest bez problemu akceptowana przez Bloggera i Blox.pl, natomiast w przypadku platformy WordPress wymaga dopiero zainstalowania wtyczki obsługującej wbudowane ramki iframe.

Oczywiście wstawianie kodu za pośrednictwem okna Wstaw plik wideo można zastąpić przez wstawienie kodu w trybie edycji źródła wpisu.

Techniką bezpośredniego wklejania kodu trzeba się posłużyć, jeśli chcemy wstawić klip wideo pochodzący z serwisu Vimeo – można tam pobrać kod za pośrednictwem przycisku Embed, kopiując potem kod wbudowanej ramki iframe i wklejając go do źródła wpisu.

Rysunek - Kod do osadzenia klipu z serwisu Vimeo

Trzeba jeszcze mieć na uwadze, że niektórych klipów nie można osadzić w blogu, gdy ich autorzy, umieszczając je na swoich kontach, zabronili umieszczania ich w cudzych witrynach czy blogach. Motywacją jest tu chęć przyciągnięcia użytkowników do własnych kanałów w YouTube.

Swoje własne klipy umieszczone w YouTube możemy wstawiać, korzystając z polecenia Wideo – Z usługi wideo. Logujemy się za pomocą swojego loginu i hasła na konto w YouTube i wybieramy klip pochodzący albo z naszych zasobów, albo z ulubionych.

Rysunek - Klipy z własnych zasobów w YouTube

Gdy klikniesz dwukrotnie obszar klipu w edytorze, ukaże się kontekstowa wstążka z narzędziami.

Rysunek - Kontekstowa wstążka z narzędziami wideo

Dostępne we wstążce narzędzia pozwalają wybrać współczynnik proporcji (panoramiczny lub standardowy), wyrównanie klipu w wierszu oraz marginesy oddzielające klip od innych elementów we wpisie.