Najlepsze dodatki na bloga

Dodatek stworzony przez sgk/eskey ma jeszcze jedną wspaniałą zaletę. Pozwala na wyświetlanie zakładek na stronie z komentarzami, co w starszych szablonach na blox.pl nie było możliwe.

Aby zakładki pojawiały się na stronie z komentarzami oprócz skryptu „Zwijane zakładki” potrzebny jest dodatkowy plik z wszystkimi zakładkami. Kiedyś można go było utworzyć jednym kliknięciem, teraz robi się to trochę na około. Innego sposobu nie znalazłam, ten pochodzi z wątku na forum:

http://forum.gazeta.pl/forum/w,8,101842886,,eksport_zakladek.html?v=2

Wchodzimy w panel administracyjny swojego bloga na blox.pl. Klikamy EDYTUJ. Następnie do adresu, który pojawi nam się w pasku adresu przeglądarki dodajemy taką końcówkę:

********.www.blox.pl/html/1048577.html

(Zamiast gwiazdek zostawiamy początkowy numer, który się pojawił w pasku adresu po kliknięciu EDYTUJ.)

Klikamy ENTER i wtedy otworzy nam się okno z dwiema możliwościami: otwarciem pliku z zakładkami i z zapisaniem pliku na komputerze. Wypieramy ZAPISZ PLIK i potwierdzamy OK. Po pobraniu, na swoim komputerze zmieniamy rozszerzenie pliku z „opml” na „xml”.

Gotowy plik dodajemy do zasobów bloga. I gotowe :-).

Za każdym razem, kiedy usuwamy lub dodajemy zakładki musimy wszystkie czynności powtórzyć jeszcze raz. Inaczej na stronie z komentarzami nic się nie będzie zmieniało.

DODATKOWE OPCJE:

ZMIANA ZAWARTOŚCI PLIKU Z ZAKŁADKAMI

Plik z zakładkami można edytować na swoim komputerze. Otwieramy go za pomocą programu Notatnik. Dodajemy lub usuwamy zakładki (według wzoru, który z pewnością tam dostrzeżemy), a następnie zmiany zapisujemy. Może to być przydatne, jeżeli np. chcemy mieć mniej lub więcej zakładek na stronie z komentarzami niż na stronie głównej. Wszystko zależy od naszej pomysłowości.

ZMIANA WYGLĄDU TYTUŁU FOLDERA ZAKŁADEK

Jeżeli nie odpowiada nam czcionka tytułu folderów z zakładkami, jej wielkość lub kolor, możemy to zmienić w arkuszu CSS. Tak wygląda przykładowy kod:

.TytulFolderaZakladek {

font-family: "Century Gothic", "URW Gothic L", "TW Cen MT", "MgOpen Modata", sans-serif;   /*rodzaj czcionki*/

PADDING: 0px 0px 5px 0px;   /*odstępy*/

FONT-SIZE: 1.4em;    /*rozmiar czcionki*/

COLOR: #584C39;    /*kolor czcionki*/

}

Starałam się pisać najprościej, jak to tylko możliwe, ale temat jest bardzo obszerny i pewnie o wielu rzeczach zapomniałam. O wszystko można pytać w komentarzach do tego wpisu. Jeżeli coś napisałam nie tak, jak trzeba, to również można mi zwrócić uwagę na błędy.



http://cowartoprzeczytac.blox.pl/

ROZWIJANIE I ZWIJANIE FOLDERÓW ZAKŁADEK

Domyślnie dzięki dodatkowi „Zwijane zakładki”, pierwszy folder zakładek zostaje rozwinięty, a pozostałe zwinięte. Możemy to zmienić i sami zdecydować, które foldery z zakładkami mają być zwinięte, a które rozwinięte. Możemy zwinąć wszystkie lub wszystkie rozwinąć. Za pomocą parametru „rozwinod”, czyli „Rozwiń od tego folderu zakładek”, decydujemy, od którego folderu zakładki będą rozwinięte. A za pomocą parametru „rozwinile”, czyli „Rozwiń tyle folderów”, decydujemy, ile folderów z zakładkami ma zostać rozwiniętych. Autor świetnie ujął to w małej tabeli, którą tu od niego kopiuję:

http://sgk74exp.blox.pl/2007/12/blox-i-dynamicznie-zwijane-zakladki-instrukcja.html

Zastosowanie tego na blogu wymaga jednak dodania jeszcze jednego kodu do pola na dodatki. Ważne by dodać go przed wcześniejszym kodem. Przykładowo może on wyglądać tak:

WSZYSTKIE ZAKŁADKI ZWINIĘTE:

<script type="text/javascript">

var rozwinod=99;

var rozwinile=1;

var kolstopka='#69e';

</scripts>

WSZYSTKIE ZAKŁADKI ROZWINIĘTE:

<script type="text/javascript">

var rozwinod=1;

var rozwinile=99;

var kolstopka='#69e';

</scripts>

ZMIANA KOLORU STOPKI

Domyślnie pod dodatkiem pokazuje się niebieski nick autora będący linkiem do jego blogu („skrypt: eskey”). Nie wolno go usuwać, ale można zmienić jego kolor. Służy do tego parametr „kol stopka”. Zamiast wpisanej w powyższym kodzie „var kolstopka='#69e';” nazwy koloru – „#69e”, możemy wpisać np. „black” (czarny) lub „red” (czerwony). Nazwy innych kolorów można sprawdzić na Wikipedii.

http://pl.wikipedia.org/wiki/Kolory_w_Internecie

USUNIĘCIE STOPKI ZE STRONY Z KOMENTARZAMI

Jeżeli nie chcemy, żeby stopka wyświetlała się na stronie z komentarzami (a będzie się wyświetlała nawet, jeżeli nie mamy tam zakładek), należy dodać taki fragment kodu do arkusza CSS:

#SkomentujWazkaSzpalta #ZakladkiOPML {display: none;}

W panelu administracyjnym bloxa klikamy EDYTUJ -> WYGLĄD -> EDYCJA CSS i wklejamy kod. Potwierdzamy klikając ZAPISZ I PUBLIKUJ.

OBRAZKI PRZY TUTUŁACH FOLDERÓW ZAKŁADEK

Możemy uatrakcyjnić wygląd folderów małymi obrazkami plus/minus lub strzałkami, które będą się wyświetlały po lewej stronie nazwy folderu zakładek. W tym celu należy najpierw znaleźć lub samemu zrobić takie obrazki, potem załadować je do zasobów bloga (tak jak wcześniej skrypt), a na koniec dodać do arkusza CSS taki kod:

.off, .on {

display: block;

padding-right: 4px;

cursor: pointer;

}

.off {

background: url('ADRES URL PLIKU Z OBRAZKIEM') center right no-repeat;

}

.on {

background: url('ADRES URL PLIKU Z OBRAZKIEM’) center right no-repeat;

}

W kodzie należy zmienić ADRES URL PLIKU Z OBRAZKIEM na konkretny adres URL swojego pliku. Sekcja „off” odpowiada za foldery zwinięte, „on” za rozwinięte.

Jeżeli mamy szablon zrobiony przez Kate_Mac to prawdopodobnie powyższy kod będzie już w nim dodany, podobnie powinny być już w zasobach odpowiednie obrazki. Należy to wcześniej sprawdzić. Jeżeli ich nie ma, to na jej blogu znajduje się instrukcja na temat „Zwijanych zakładek”, a w niej przykładowe obrazki plus/minus w różnych kolorach:

http://szablonykatemac.blox.pl/2008/01/Dynamicznie-zwijane-zakladki-wedlug-Eskey8217a.html

Inne ikony można znaleźć na blogu autora skryptu, w części „Krok A3”:

http://sgk74exp.blox.pl/2007/12/blox-i-dynamicznie-zwijane-zakladki-instrukcja.html

W następnym poście napiszę, jak umieścić zakładki na stronie z komentarzami.

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.



Czy szukaliście kiedyś na czyimś blogu adresu e-mail, żeby skontaktować się z autorem wpisów? A może ktoś Was prosił w komentarzach o podanie adresu kontaktowego? Ja nie miałam takiej sytuacji, ale często spotykałam się z tym na innych stronach. Postanowiłam więc umieścić na każdym z moich blogów „skrzynkę pocztową”. Jest to takie miejsce, w którym wstawiłam bezpośredni link do mojego adresu internetowego. Wystarczy kliknąć, a otworzy się Wam program pocztowy, który używacie na swoim komputerze albo np. poczta Gmail, a stąd już tylko jeden krok, żeby wysłać elektroniczny list.

Sprawa nie jest skomplikowana, a efekt można osiągnąć np. taki jak ja na tym blogu o dodatkach:

Skrzynkę pocztową umieściłam w bocznej szpalcie. Można tam teraz zajrzeć i wypróbować, jak działa.

Tak wygląda moja skrzynka pocztowa na blogu książkowym:

A tak na blogu ze scenariuszami lekcji:

Jeżeli też chcielibyście mieć taki dodatek na swoim blogu, to postępujcie zgodnie ze wskazówkami poniżej.

KROK 1 – ODSYŁACZ POCZTOWY

Na początku potrzebny nam będzie kod HTML, który wygląda tak:

<a href="mailto:adres e-mail">TWÓJ TEKST</a>

W miejsce „adres e-mail” wpisujemy oczywiście swój adres poczty elektronicznej, np. „jankowalski@wp.pl”.

W miejsce „TWÓJ TEKST” możemy wpisać również adres e-mail, jeżeli chcemy, żeby pojawił się bezpośrednio na stronie i był linkiem do programu pocztowego. Możemy także wpisać każdy inny wymyślony przez siebie tekst, np. „Napisz do mnie e-mail”, „Wyślij list do autora strony” itd.

Może to wyglądać np. tak:

<a href="mailto:jan.kowalski@wp.pl">Wyślij e-mail</a>



Na stronie wyświetli się oczywiście tylko to, co wpiszemy w miejsce „TWÓJ TEKST”, reszta pozostanie niewidoczna. Chyba że najedziemy na link myszką, wtedy na dole przeglądarki wyświetli się komunikat dokąd prowadzi link: „mailto:jankowalski@wp.pl”.

Właściwie już sam odsyłacz pocztowy, (a nawet sam adres internetowy), mógłby nam wystarczyć i można by go wstawić w boczną szpaltę lub w zakładki na blogu. Jednak prezentowałby się bardzo skromnie i przy wielu dodatkach mógłby być słabo widoczny. Proponuję więc dodać do niego: obrazek, ramkę, nagłówek lub tylko jeden z tych elementów. Według własnego uznania.

KROK 2 – DODAWANIE OBRAZKA DO ODSYŁACZA POCZTOWEGO

Kto czytał moje poprzednie wpisy pamięta, że trzeba użyć kodu HTML, aby dodać obrazek do bocznej szpalty. Można tam zajrzeć po szczegóły, a to wzór kodu:

<img src="ADRES URL OBRAZKA" />

Kod obrazka możemy wstawić przed lub po kodzie odsyłacza pocztowego, zależnie od tego, gdzie ma się on wyświetlić, przed czy po wpisanym przez nas tekście-linku. Ja wybrałam trzecie rozwiązanie. Umieściłam kod obrazka w kodzie odsyłacza, żeby obrazek też był linkiem. Gdy połączymy go w całość z odsyłaczem pocztowym, otrzymamy:

<a href="mailto:adres e-mail"><img src="ADRES URL OBRAZKA" />TWÓJ TEKST</a>

Skąd wziąć odpowiedni obrazek? Ja polecam stronę iconarchive.com, z której wzięłam wszystkie obrazki do moich skrzynek pocztowych. Najlepiej będą pasowały ikony tematycznie związane z wysyłaniem listów, np. koperta, skrzynka pocztowa, pióro, długopis itd. Ponieważ serwis jest po angielsku w wyszukiwarkę należy wpisać np. „contact”, „envelope”, „email” itp. Obrazki ściągamy w formacie „.png”, wtedy będą miały przezroczyste tło i dobrze wpasują się w stronę. Można również wykorzystać obrazki własne lub znalezione w sieci. Pamiętać należy o prawach autorskich.

Jeżeli obrazek jest większy od wysokości wpisanego przez nas w odsyłaczu pocztowym tekstu, warto posłużyć się wyśrodkowaniem go w pionie. Dopisujemy taki fragment kodu: „style="vertical-align: middle;" i umieszczamy go wewnątrz znacznika „img”:

<a href="mailto:adres e-mail">

<img style="vertical-align: middle;" src="ADRES URL OBRAZKA" />

TWÓJ TEKST

</a>

I w tym miejscu także moglibyśmy już zakończyć. Mamy odsyłacz pocztowy i ładny obrazek do niego. Ja proponuje jednak jako formę wyróżnienia skrzynki pocztowej dodanie nagłówka.

KROK 3 – DODAWANIE NAGŁÓWKA DO ODSYŁACZA POCZTOWEGO

Można to zrobić na różne sposoby. Wpisać tekst, użyć znaczników HTML, stylów, żeby go pogrubić czy wyśrodkować, dodać odpowiedni kolor (w przykładzie poniżej – fioletowy), zrobić odstępy między liniami. Mogłoby to być np. coś takiego:

<br/><br/>

<p style="text-align: center; color: purple;">

<strong>SKRZYNKA POCZTOWA</strong>

</p>

<br/><br/>

Ja posłużyłam się jednak zupełnie innym sposobem – boksami wymyślonymi przez Kate_Mac. Pisałam już o nich, więc nie będę się powtarzała, można zajrzeć do odpowiedniego wpisu.

Tak wygląda wzór kodu skrzynki pocztowej, którą mam na tym blogu:

<br/>

<div class="boks">

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

<a href="ADRES E-MAIL">

<img style="vertical-align: middle;"src="ADRES URL OBRAZKA" />

Napisz do mnie e-mail

</a>

</div>

Fioletowe elementy trzeba oczywiście odpowiedni pozmieniać na własny użytek.

OBRAMOWANIE SKRZYNKI POCZTOWEJ

W powyższy sposób zrobiłam skrzynki pocztowe na blogu o dodatkach i książkowym. Tę na blogu ze scenariuszami lekcji zrobiłam podobnie, tylko zamiast boksów zastosowałam obramowanie. Ramkę można zrobić na rożne sposoby, nawet w programie graficznym, niekoniecznie w HTML. Ja wybrałam sposób niestandardowy, użyłam znacznika „fieldset”, który tak naprawdę służy do „grupowania pól formularza” i znacznika „legend” (służy do nadawania tytułu formularzowi), który jest u mnie nagłówkiem, napisem „skrzynka pocztowa”. Długo by to wszystko opisywać, a pewnie niewiele osób będzie tym zainteresowanych, Jeżeli tak, proszę pisać w komentarzach.

Tak wygląda wzór tego kodu, który użyłam:

<br/><br/>

<fieldset>

<legend style="color: black;">Skrzynka pocztowa</legend>

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

<img style="vertical-align: middle;"src="ADRES URL OBRAZKA" />

</a>

<b>Napisz do mnie</b>

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

<b>e-mail</b>

</a>

</fieldset>

<br/><br/>

Zwróćcie uwagę, że w tym ostatnim przykładzie odnośnikiem pocztowym jest zarówno obrazek z kopertami, jak i słowo „e-mail”, natomiast tekst „Napisz do mnie” nie jest odnośnikiem. Można to też sprawdzić na stronie blogu.

Dodatkowo musiałam zmienić jeszcze parę rzeczy w CSS, żeby w IE wyświetlało się prawidłowo. Może kiedyś znacznikowi „fieldset” poświęcę osobny wpis, bo tu się zdecydowanie za bardzo rozpisałam.

UMIESZCZANIE KODU SKRZYNKI POCZTOWEJ W BOCZNEJ SZPALCIE

Kod HTML naszej skrzynki pocztowej umieszczamy w bocznej szpalcie. Aby to zrobić klikamy w panelu administracyjnym bloxa: EDYTUJ -> USTAWIENIA -> BOCZNA SZPALTA i wklejamy w POLU NA DODATKOWY HTML. Potwierdzamy klikając ZAPISZ ZMIANY. I gotowe :-)

UMIESZCZANIE KODU SKRZYNKI POCZTOWEJ W ZAKŁADKACH

Możliwe jest jeszcze jedno rozwiązanie. "Skrzynkę pocztową" dodajemy jako zakładkę do bocznej szpalty. Minusem takiego wyjścia jest to, że na stronach z pojedynczym wpisem zakładki się nie pokazują (przynajmniej na blogach na starym kodzie i bez odpowiednich skryptów). Plusem natomiast jest to, że nie musimy się martwić wyglądem nagłówka i dodawaniem boksów, bo tytuł zakładek jest już określony w CSS i będzie idealnie pasował do bloga. Na moim szablonie dałoby to efekt bardzo zbliżony do tego przy użyciu boksów:

Jak to zrobić?

Klikamy EDYTUJ -> WPISY -> LINKI. W miejscu opisanym jako "Nowy folder" wpisujemy "Skrzynka pocztowa". Potwierdzamy klikając DODAJ. Następnie klikamy na nowo utworzonym folderze i w polu opisanym "Nazwa" wpisujemy swój tekst, np. "Wyślij do mnie e-mail". Można też tam dodać kod obrazka albo wszystko razem wstawić w kod odsyłacza pocztowego, o czym pisałam powyżej. A w miejscu na "Adres" wpisujemy odsyłacz pocztowy, tylko że bez ostrych nawiasów, np. "mailto:jan.kowalski@wp.pl". Potwierdzamy klikając DODAJ LINK. I gotowe!

Inspiracją do napisania tego wpisu był blog Ćwiczenia z pamięci ze skrzynką pocztową w zakładkach. Widnieje tam tekst: "Ze skrzynki pocztowej.Tu możesz wrzucić do mnie list:".

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ć ;-).