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.

JAK ZAMIESZCZAĆ DODATKI, ŻEBY ŁADNIE WYGLĄDAŁY?

             Już dawno chciałam napisać na ten temat, bo widziałam kilka naprawdę ciekawych blogów, na których boczna szpalta aż się prosiła, żeby coś z nią zrobić.

             Jest kilka rodzajów błędów, które możemy popełnić wzbogacając naszego bloga. Będę je po kolei omawiać i może w przyszłości, jak trafię na coś nowego, to też tu dodam.

ODSTĘPY MIĘDZY DODATKAMI W BOCZNEJ SZPALCIE

            Problem, z którym sama się spotkałam pisząc mojego pierwszego bloga, to brak odstępu między dodatkami. Kiedy w bocznej szpalcie dodajemy kolejne statystyki, obrazki, reklamy itd., to często nachodzą one na siebie, łączą się z sobą. Po prostu brakuje między nimi odstępu, bo nie jest on dodawany automatycznie. Samemu trzeba wpisać tylko parę znaków kodu HTML, żeby to ładnie wyglądało. W miejscu, w którym wklejamy kod dodatków, czyli w panelu administracyjnym bloxa, klikamy EDYTUJ -> USTAWIENIA -> BOCZNA SZPALTA i tam w polu DODATKI dodajemy taki znacznik:

<br/>

             Gdzie go umieszczamy? Najlepiej przed i po kodzie każdego dodatku. Znacznik działa podobnie jak ENTER, czyli przenosi treść do następnej linii, stąd czasami trzeba wpisać podany powyżej znacznik podwójnie, albo nawet potrójnie, jeżeli chcemy uzyskać duży odstęp.

<br/>

<br/>

Najlepiej użyć metody „prób i błędów”, czyli wpisywać znacznik w różnych miejscach i w różnej liczbie, a następnie sprawdzać efekt na blogu.

WYŚRODKOWANIE ELEMENTÓW W BOCZNEJ SZPALCIE

            Dodatki o różnej szerokości i wysokości będą dobrze wyglądać w bocznej szpalcie pod warunkiem, że ułożymy je w prawidłowy sposób. Najlepiej sprawdza się w tym wypadku wyśrodkowanie, czyli wyrównanie ich do środka. Używamy do tego również prostego znacznika HTML. Wpisujemy go w panelu administracyjnym bloga, klikamy EDYTUJ -> USTAWIENIA -> BOCZNA SZPALTA i w polu DODATKI. Na samym początku pola na dodatki wpisujemy znacznik otwierający <center>, a na końcu, już po wszyskich kodach z dodatkami, znacznik zamykający </center>:

<center> Tu wklejamy kody wszystkich dodatków, może być ich bardzo dużo </center>

             Pamiętać należy, że samo wyśrodkowanie, to może być za mało. Warto przemyśleć ułożenie dodatków. Można zgrupować je według kolorów, funkcji albo po prostu według wielkości, np. od najszerszego do najwęższego. Efekt takich zabiegów można zobaczyć na moim blogu w bocznej szpalcie.

DODATKI NIE MIESZCZĄ SIĘ W BOCZNEJ SZPALCIE?

             Generalnie im mniej dodatków tym ładniej, to wygląda, chyba że rzeczywiście przyłożymy się trochę do ich dostosowania do szablonu. Większość dodatków można zmniejszyć w danym serwisie, zakładając tam konto. Pamiętajmy, żeby nigdy dany element nie nachodził na treść wpisów w głównej szpalcie! Jeżeli tak się dzieje, a nie ma możliwości, żeby go wyśrodkować albo zmniejszyć, pozostaje jedynie zmiana szablonu. Można próbować modyfikować własny szablon, ale wymaga to znajomości CSS i zazwyczaj nie przynosi spodziewanych efektów. Skoro autor szablonu wybrał daną szerokość bocznej szpalty, znaczy, że taka będzie wyglądała najlepiej i nie ma sensu jej powiększać, żeby zmieścić jakiś dodatek, bo cały szablon może przez to stracić swój urok. Wybór szablonów na bloxie jest duży i na pewno znajdziemy taki, który pomieści nawet najszersze dodatki. Tradycyjnie w tym miejscu polecę KATALOG SZABLONÓW  Kate_Mac.

KOLEJNOŚĆ ZAKŁADEK W WĄSKIEJ SZPALCIE

            Zakładki w wąskiej szpalcie układają się alfabetycznie. Jest kilka sposobów, żeby to zmienić. Ja przedstawię tu dwa najlepsze. Można zrobić listę numerowaną albo rozpoczynająca się od kolejnych liter alfabetu (czyli wpisać przed nazwy folderów lub zakładek liczby lub kolejne litery alfabetu). Można też zastosować prosty trick – użyć spacji. W panelu administracyjnym naszego bloga na bloxie wchodzimy w EDYTUJ -> WPISY -> LINKI. Możemy zmieniać zarówno kolejność folderów, jak i poszczególnych zakładek. Wystarczy dodać spację na początku nazwy. Spacja nie wyświetli się na blogu, ale spowoduje, że dany folder czy zakładka zostaną wyświetlone jako pierwsze. Pierwszy folder zakładek musi mieć jedną spację przed nazwą więcej niż pozostałe. Czyli, jeżeli mamy cztery foldery, to pierwszy będzie miał trzy spacje przed nazwą, drugi dwie spacje, a trzeci jedną spację, czwarty żadnej. Proste prawda? Co do zakładek zazwyczaj wystarczy jedna spacja, a potem już przydatny jest układ alfabetyczny.

TEMATYCZNE BOKSY W BOCZNEJ SZPALCIE

            Co to za boksy, o których mowa w nagłówku? Mam tu na myśli specjalnie wyróżnione części bocznej szpalty, które wyglądają właśnie jak „boksy”. Każdy taki boks posiada swój nagłówek i jest odsunięty od pozostałych boksów. U mnie w bocznej szpalcie są tylko dwa takie boksy: dodatki na bloga i ostatnie komentarze. Lepiej można to zobaczyć na przykładowych szablonach Kate_Mac:

http://handmade04szablonkatemac.blox.pl/

            Boksy możemy stworzyć samodzielnie i używać ich do najróżniejszych rzeczy. Można tam np. wstawić obrazki – linki do swoich blogów, albo blogów znajomych, można umieścić tam różne ważne informacje itd., co tylko przyjdzie nam do głowy. Pamiętajmy, by użyć czcionek i kolorów pasujących do bloga.

            Jeżeli chcemy, żeby nasze boksy były idealnie dopasowane do szablonu, to w przypadku szablonów autorstwa Kate_Mac wszystko już zostało w CSS napisane, trzeba jedynie wkleić króciutki kod w boczną szpaltę (panel administracyjny bloxa, klikamy EDYTUJ -> USTAWIENIA -> BOCZNA SZPALTA i w polu DODATKI wpisujemy), żeby stworzyć nowy boks:

<div id="Trzecia">

<div class="boks">

<div class="tyt">Tutaj wpisujemy tytuł naszego boksu</div>

Tu wklejamy treść, która ma się w boksie znaleźć. Może to być tekst, kody dodatków albo obrazków. Można użyć prostych znaczników HTML omówionych wyżej, czyli center i br.

</div>

</div>

Jeżeli boksów będzie więcej, to i kod będzie dłuższy, a raczej trzeba go będzie powtórzyć tyle razy, ile będzie boksów, jak w tym przykładzie:

<div id="Trzecia">

 

<div class="boks">

<div class="tyt">Tutaj wpisujemy tytuł pierwszego boksu</div>

Tu wklejamy treść, która ma się w boksie znaleźć.

</div>

<div class="boks">

<div class="tyt">Tutaj wpisujemy tytuł drugiego boksu</div>

Tu wklejamy treść, która ma się w boksie znaleźć.

</div>

</div>

            Niestety nie wiem, jak to działa na innych szablonach, których nie zrobiła Kate_Mac.  Można popróbować własnych sił i samemu dopisać potrzebny fragment kodu CSS, jeżeli ktoś się na tym zna.

W komentarzach można pytać, o te rzeczy, które opisałam według Was niejasno, można się też pochwalić swoimi osiągnięciami w komponowaniu dodatków w bocznej szpalcie. Może macie jeszcze jakieś wskazówki, które powinny się w tym temacie znaleźć?