Najlepsze dodatki na bloga

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:".