Najlepsze dodatki na bloga

Ten wpis będzie kontynuacją poprzedniego o dodawaniu obrazków do bocznej szpalty. Pomyślałam, że omawianie tych kwestii razem zajmie za dużo miejsca i może niektórych zniechęcić nadmiarem informacji. Wolę to omówić szczegółowo i dokładnie, niż szybko i po łebkach. Więc do dzieła.

PO CO NAM LINKI W BOCZNEJ SZPALCIE?

Najpierw napiszę, po co nam potrzebne linki w bocznej szpalcie. Oczywiście wszystko zależy od naszej pomysłowości i odpowiedzi jest bardzo wiele. Ja wykorzystałam linki w bocznej szpalcie na moim blogu książkowym, by miniaturki okładek książek oraz tytuły książek i nazwiska autorów były jednocześnie odnośnikami do recenzji na ich temat. Omówię więc tutaj nie tylko, jak dodać link do bocznej szpalty, ale również, jak z obrazka zrobić link. Dzięki takiemu rozwiązaniu możemy zrobić obrazkowe menu czy spis treści bloga, w którym każda pozycja na liście będzie linkiem do podstrony.

JAK DODAĆ LINK DO BOCZNEJ SZPALTY NA BLOGU?

Są na to dwa sposoby. Jeden dla początkujących, drugi dla zaawansowanych lub lubiących się uczyć (to prawie to samo).

Pierwszy sposób:

Wyobraź sobie, że chcesz dodać LINK do wpisu w zaawansowanym edytorze tekstowym. Zrób to w taki sposób, w jaki robiłeś to zawsze (kliknij kolejno: EDYTUJ -> NOWY WPIS -> wpisz swój tekst -> zaznacz go lewym przyciskiem myszki -> DODAJ/EDYTUJ LINK -> wklej adres URL -> potwierdź, klikając WSTAW). Na końcu skopiuj powstały kod HTML, klikając przycisk HTML i wklej kod w zakładce USTAWIENIA -> BOCZNA SZPALTA w POLU NA DODATKOWY HTML. Potwierdź, klikając ZAPISZ ZMIANY. Gotowe!

Tu przykład kodu linku zrobionego tym sposobem wzięty z mojego książkowego bloga:



Drugi sposób:

Tekst, który ma być linkiem „ubieramy” w znaczniki HTML. Tak naprawdę potrzebny będzie jeden, najważniejszy „a”:



<a href="ADRES URL">TWÓJ TEKST</a>



Dla przypomnienia: adres URL to ten zaczynający się od http://, znajdziemy go w pasku adresu przeglądarki po otwarciu strony, do ktorej ma prowadzić nasz link. Fioletowy tekst należy oczywiście zastąpić własnym.

Kod mamy. Teraz wklejamy go w POLU NA DODATKOWY HTML w zakładce USTAWIENIA -> BOCZNA SZPALTA. Potwierdzamy klikając ZAPISZ ZMIANY. I gotowe.

ZAMIANA OBRAZKA W LINK

Sposób pierwszy:

W edytorze tekstu dodajemy obrazek (jak to zrobić opisałam szczegółowo we wpisie o dodawaniu obrazków do bocznej szpalty), a potem zamieniamy go w link (zaznaczamy prawym przyciskiem myszki cały obrazek i klikamy WSTAW/EDYTUJ LINK, wklejamy adres URL, potwierdzamy klikając WSTAW). Następnie klikamy przycisk HTML i kopiujemy kod. Później wklejamy go w zakładce USTAWIENIA -> BOCZNA SZPALTA -> POLE NA DODATKOWY HTML.

Tu przykład kodu obrazka będącego linkiem:



Sposób drugi:

Dodajemy kolejny znacznik HTML. Tym razem img, znany nam już z poprzedniego wpisu.



<a href="ADRES URL STRONY"><img src="ADRES URL OBRAZKA" /></a>



Adres URL strony, do której ma prowadzić link kopiujemy z paska adresu przeglądarki, po otwarciu tej strony. Natomiast adres URL obrazka najłatwiej wziąć z zasobów naszego bloga, tylko wcześniej trzeba dodać tam plik (EDYTUJ ->  zakładka WPISY -> PLIKI -> klikamy dwa razy NOWY PLIK i wybieramy odpowiedni obrazek z komputera -> potwierdzamy klikając OTWÓRZ).

Kod mamy. Teraz wklejamy go w POLU NA DODATKOWY HTML w zakładce USTAWIENIA -> BOCZNA SZPALTA. Potwierdzamy klikając ZAPISZ ZMIANY. I gotowe.

POŁĄCZENIE OBRAZKA I TEKSTU W LINK

W HTML będzie wyglądać następująco:



<a href="ADRES URL STRONY"><img src="ADRES URL OBRAZKA" />TWÓJ TEKST</a>



Oczywiście można to również zrobić w edytorze w analogiczny sposób do tego, co opisałam wyżej. Będzie to wyglądało np. tak:

DODATKOWE OPCJE

Do tego pierwszego, podstawowego sposobu dodawania linku możemy dołączyć różne wariacje. Plusem tego rozwiązania jest to, że nie trzeba znać HTML, a wystarczy umieć obsługiwać zaawansowany edytor tekstowy i osiągniemy te same efekty, co jakbyśmy znali HTML.

Przydatne może się okazać dodanie tytułu do linku, żeby np. poinformować czytelników, do jakiej strony zostaną przekierowani. Albo dodanie opcji otwierania odsyłacza w nowej karcie, wtedy czytelnik nie opuści naszego bloga. Wszystkie te możliwości daje nam okienko w edytorze tekstu po kliknięciu przycisku DODAJ/EDYTUJ LINK.

Można również pogrubić niektóre elementy tekstu lub zmienić w pisane kursywą, czy podkreślone. Dodać odstępy. Możemy zrobić wszystko, co tylko można w edytorze wykonać. Potem wystarczy już tylko skopiować HTML i umieścić go w bocznej szpalcie.

WYGLĄD LINKÓW W BOCZNEJ SZPALCIE

Aby wstawione w boczną szpaltę linki ładnie wyglądały również należy się posłużyć albo edytorem albo wprost znacznikami HTML. Najważniejsze znaczniki: br, center opisałam we wpisie o bocznej szpalcie. Polecam również dodawanie boksów, które opisałam w tym samym wpisie.

U mnie, kiedy dodałam pogrubienie tekstu, odstęp między autorem i tytułem, a do tego otwarcie linku w nowej karcie i tytuł po najechaniu myszką, a i jeszcze tekst alternatywny dla niewidomych, wygląda to tak:



<p><a href="http://cowartoprzeczytac.blox.pl/2011/10/Orson-Scott-Card-Tropiciel.html" target="_blank"><img title="Tropiciel, Orson Scott Card" src="http://cowartoprzeczytac.blox.pl/resource/Tropiciel_150x150.jpg" alt="Tropiciel, Orson Scott Card" /><br /><b>Orson Scott Card</b><br />Tropiciel</a></p>

W razie niejasności proszę o wszystko pytać w komentarzach. Chętnie pomogę początkującym :-). Starałam się pisać możliwie jasno, ale temat jest szeroki jak rzeka i czuję, że mogłabym o tym książkę napisać ;-).



Ostatnio na moim blogu o książkach zachciało mi się dodać obrazki do bocznej szpalty jako urozmaicenie dość pustego szablonu. Szczególnie na stronach z pojedynczym wpisem boczna szpalta świeciła pustkami. Aby temu zaradzić, najpierw w edytorze zaawansowanym na bloxie zrobiłam z wszystkich obrazków miniaturki, a potem za pomocą kodu HTML dodałam do bocznej szpalty.

http://cowartoprzeczytac.blox.pl

Miniaturki obrazków można oczywiście zrobić także w programie graficznym, jak kto woli. Jeżeli wybierzemy rozwiązanie bloxowe, dostaniemy od razu gotowy kod HTML, czyli to rozwiązanie lepsze dla początkujących. Do tego od razu będziemy mieli miniaturki w zasobach bloga.

JAK ZROBIĆ MINIATURKĘ OBRAZKA?

Aby zrobić miniaturkę obrazka najpierw udajemy, że chcemy dodać nowy wpis. Czyli klikamy na bloxie: EDYTUJ -> NOWY WPIS.

Później udajemy, że chcemy do tego wpisu dodać obrazek. Czyli w zaawansowanym edytorze klikamy ikonkę dodawania obrazka (lub napis DODAJ ZDJĘCIE) i w oknie, które się wyświetli wybieramy obrazek do zmniejszenia, jeżeli już go mamy w zasobach lub dodajemy najpierw z własnego komputera na blog. Obok nazwy obrazka pokażą nam się dwie opcje: oryginał i miniatura. My oczywiście klikamy MINIATURA. W kolejnym oknie, które się otworzy wybieramy rozmiar docelowy miniaturki i potwierdzamy klikając PRZERÓB. Mi na blogu książkowym najlepiej sprawdził się do robienia miniaturek okładek rozmiar z wysokością 150px. Oczywiście można wybrać dowolny, pamiętając jedynie o rozmiarze swojej bocznej szpalty. Obrazek nie może z niej wystawać albo nachodzić na tekst! Po to przecież go zmniejszamy. Po wybraniu odpowiedniego rozmiaru dodajemy obrazek do treści posta klikając WSTAW. I w ten sposób mamy już miniaturkę w zasobach bloga.

SKĄD WZIĄĆ KOD HTML?

Sposób pierwszy:

Najlepiej po dodaniu miniaturki do treści wpisu w edytorze kliknąć guzik z napisem HTML. W oknie, które nam się otworzy zobaczymy gotowy kod miniaturki, który wystarczy skopiować. Zadziała, chociaż można trochę się pobawić i nad nim popracować.

Kiedy już skopiujemy kod HTML z wpisu, można z wyjść z edytora bez zapisywania.

Sposób drugi:

JAK WYGLĄDA PRAWIDŁOWY KOD HTML OBRAZKA?

Wyjątkowo kod do wstawienia obrazka nie ma zamykającego znacznika. Tworzymy go według wzoru:

<img src="ADRES URL OBRAZKA" />

Adres URL obrazka znajdziemy klikając w panelu administracyjnym EDYTUJ -> PLIKI. Wyświetli się lista zasobów naszego blogu. Klikamy interesujący nas plik obrazka i kopiujemy adres URL, widoczny w pasku adresu, na górze naszej przeglądarki.

To przykładowy kod miniaturki z mojego książkowego bloga:

<img src="http://cowartoprzeczytac.blox.pl/resource/Morderca_bez_twarzy_150x150.jpg" />

Jeżeli chcemy, żeby w przeglądarkach nie obsługujących obrazków pojawił się w ich miejscu napis, dodajemy jeszcze jeden fragment od słów „alt” według wzoru:

<img src="ADRES URL OBRAZKA" alt="TYTUŁ OBRAZKA" />

U mnie na blogu wygląda to następująco:

<img src="http://cowartoprzeczytac.blox.pl/resource/Morderca_bez_twarzy_150x150.jpg" alt=”Morderca bez twarzy” />

Jest to przydatne np. dla osób niewidomych, którym naszą stronę internetową będzie czytał syntezator mowy.

GDZIE WKLEIĆ GOTOWY KOD HTML?

Gotowy kod obojętnie czy uzyskany pierwszym opisanym sposobem, czy drugim, wklejamy tam, gdzie zawsze, czyli w panelu administracyjnym bloxa klikamy: EDYTUJ -> USTAWIENIA -> BOCZNA SZPALTA -> wklejamy i potwierdzamy klikając ZAPISZ.

CO ZROBIĆ, ŻEBY OBRAZKI ŁADNIE WYGLĄDAŁY W BOCZNEJ SZALCIE?

Oczywiście należy używać znaczników HTML, które dokładnie omówiłam we wpisie pod tytułem BOCZNA SZPALTA. Mam tu na myśli znaczniki center i br. Polecam również obrazki umieścić w osobnym boksie. Instrukcja, jak stworzyć taki boks również jest we wpisie o bocznej szpalcie. Dzięki temu nagłówek nad obrazkami będzie w takim samym stylu, jak np. tytuły folderów zakładek, czy napis archiwum.