Najlepsze dodatki na bloga

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.