Najlepsze dodatki na bloga

Ten wpis został już zapowiedziany w komentarzach do poprzedniej notki, pomysłodawczynią kolejny raz jest Avo_lusion. Pomogłam jej umieścić skrzynkę pocztową na samej górze wąskiej szpalty bloga. Tak to wygląda:

http://ksiazkizbojeckie.blox.pl

Wtyczka do Facebooka została tam wcześniej umieszczona w podobny sposób.

Każdy element: tekst, obrazek, link itd. można umieścić na pierwszym miejscu przed archiwum. Jest to potrzebne, jeżeli chcemy coś wyróżnić, uczynić bardziej widocznym.

KROK 1 – ROBIMY PUSTE MIEJSCE NAD ARCHIWUM

Aby coś umieścić na samej górze wąskiej szpalty najpierw musimy zrobić tam puste miejsce. Robimy to w arkuszu CSS. Jeżeli ktoś się boi go zmieniać, wystarczy najpierw cały skopiować i umieścić np. w Notatniku. Taka „kopia bezpieczeństwa”. Jeżeli coś pójdzie nie po naszej myśli, można skopiować z niej cały arkusz i wkleić z powrotem na bloga.

Arkusz CSS znajdziemy klikając w panelu administracyjnym bloxa: EDYTUJ -> WYGLĄD -> EDYCJA CSS.

W arkuszu tym wyszukujemy dwa selektory:

#BlogWazkaSzpalta – odpowiedzialny za wąską szpaltę na stronie głównej bloga

#SkomentujWazkaSzpalta - odpowiedzialny za wąską szpaltę na stronie z pojedynczym wpisem i stronę statyczną

Do szukania wykorzystuję funkcję przeglądarki. W Firefoxie wystarczy kliknąć EDYCJA -> ZNAJDŹ albo CTRL+F, wtedy na dole strony wyświetli nam się okienko, w które wpisujemy wyszukiwaną frazę. Można też szukać bez tego, jak kto woli.

Znajdujemy pod wspomnianymi selektorami "MARGIN" i zwiększamy liczbę pikseli od góry na np. 180px. Może być mniej lub więcej, zależy od tego jak duży mamy obrazek tytułowy. Można wpisywać różne liczby i sprawdzać efekt na blogu. Od razu będzie widać czy mamy dość miejsca, czy archiwum obniżyło się wystarczająco.

Tak może wyglądać przykładowy kod:

#BlogWazkaSzpalta {

MARGIN: 180px 0px 0px 0px;

...(tu będą jeszcze rożne inne rzeczy, nie zmieniaj ich)

}

#SkomentujWazkaSzpalta {

MARGIN: 180px 0px 0px 0px;

...(tu będą jeszcze rożne inne rzeczy, nie zmieniaj ich)

}

KROK 2 – DODAJEMY KOD ELEMENTU

Nasz nowy element, który ma się znaleźć przed archiwum należy jakoś nazwać. Jeżeli będzie to skrzynka pocztowa, to nazwiemy ją po prostu: SkrzynkaPocztowa. Ważne, żebyśmy potem umieli odnaleźć wymyślony przez nas element, więc nazwa musi być odpowiednia.

Gdy mamy już nazwę, trzeba jeszcze określić położenie elementu na blogu. Ja zrobiłam to w ten sposób:

#SkrzynkaPocztowa {

position: absolute;

top:230px;

left:auto;

}

Te liczby przy px mogą się u Was różnić, jeżeli macie inny szablon. Bez problemu można je zwiększyć albo zmniejszyć. TOP to odległość od górnej krawędzi bloku obejmującego (czyli w wielkim uproszczeniu: po prostu od góry). LEFT to odległość od lewej krawędzi bloku obejmującego. Musicie je tak dopasować, żeby nie nachodziły na inne elementy strony.

Gotowy kod umieszczamy na końcu arkusza CSS (panel administracyjny bloxa: USTAWIENIA -> EDYTUJ -> WYGLĄD -> EDYCJA CSS).

KROK 3 – DODAJEMY KOD ELEMENTU DO BOCZNEJ SZPALTY

Jak zrobić kod „skrzynki pocztowej” pisałam w poprzednim wpisie. Można tam zajrzeć. Aby element wyświetlił się w przygotowanym przez nas miejscu, należy go otoczyć odpowiednimi znacznikami:

<div id="nazwa_elementu">

KOD ELEMENTU

</div>

Tak może wyglądać przykładowy kod całości:

<div id="SkrzynkaPocztowa">

<div class="boks">

<center>

<div class="tyt">Skrzynka pocztowa</div>

<a href="mailto:ADRES E-MAIL">

<img src="ADRES URL OBRAZKA" />

Napisz do mnie e-mail

</a>

</center>

</div></div>

Gotowy kod wklejamy w POLE NA DODATKOWY HTML. Czyli trzeba w panelu administracyjnym kliknąć EDYTUJ -> USTAWIENIA -> BOCZNA SZPALTA -> wkleić i potwierdzić przyciskiem ZAPISZ ZMIANY. I gotowe!

To tylko przykłady i niestety nie obejmują wszystkich możliwych kombinacji. To wykracza poza moją wiedzę i możliwości opisania tego na tym blogu. Mam nadzieję, że może mój wpis okaże się dla kogoś inspiracją do zgłębienia tematu CSS i pozycjonowania elementów. Przydatne mogą się okazać podręczniki internetowe:

http://webmaster.helion.pl/index.php/pcss-marginesy-dopelnienia-i-obramowanie

http://www.kurshtml.edu.pl/css/absolutne,pozycjonowanie.html

Życzę wszystkim powodzenia w umieszczaniu elementów na górze wąskiej szpalty. Ja zdecydowałam, że skrzynka pocztowa pozostanie u mnie na dole bocznej szpalty, tak lepiej pasuje do szablonu.

Pytania można zadawać w komentarzach. Pomogę, jeżeli tylko będę potrafiła. A jeżeli we wpisie znalazły się błędy, to będę wdzięczna za informację, jak je poprawić.

Avo_lusion jeszcze raz dziękuję za pomysł na wpis.