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.

http://cowartoprzeczytac.blox.pl/

Ostatnio pisałam o tym, jak zwinąć archiwum do postaci listy lat zamiast listy miesięcy, a dziś napiszę o tym, jak zwinąć zakładki do postaci listy z tytułami folderów zakładek. Na bloxie nie byłoby to możliwe, gdyby nie sgk/eskey, który przygotował odpowiedni skrypt i instrukcje. Teraz wystarczy zrobić kilka kroków. Oto one:

KROK 1 – pobieranie skryptu

Pobieramy na dysk naszego komputera plik blox.zakladki.2.js z bloga „Experymenty informatyczne”:

http://sgk74exp.blox.pl/2008/03/zwijane-zakladki-wersja-druga.html

(Przy okazji odwiedzin tego bloga możemy w komentarzach podziękować autorowi „Zwijanych zakładek”. Można też zapoznać się z jego instrukcjami, które na pewno są bardziej szczegółowe niż moje.)

KROK 2 – dodawanie skryptu do zasobów bloga

W panelu administracyjnym na blox.pl klikamy EDYTUJ - > PLIKI -> NOWY PLIK - > wybieramy lokalizację pliku ze skryptem na naszym komputerze i klikamy OTWÓRZ.

KROK 3 – dodawanie kodu do bocznej szpalty

Kopiujemy poniższy kod i wklejamy w odpowiednie miejsce na blogu. Czyli wybieramy w panelu administracyjnym bloga EDYTUJ -> USTAWIENIA -> BOCZNA SZPALTA i wklejamy w POLE NA DODATKI, potwierdzamy klikając ZAPISZ ZMIANY.

<script type="text/javascript" src="/resource/blox.zakladki.2.js"></script>

I to właściwie wszystko. Dodatkowe opcje: dostosowanie rozwijania i zwijania folderów do swoich potrzeb, zmianę koloru stopki, usunięcie stopki ze strony z komentarzami, obrazki przy tytułach folderów, a także zakładki na stronie z komentarzami, opiszę w następnych postach.

Po kilku latach prowadzenia bloga archiwum na bloxie rozrasta się w bardzo długą listę. Jest prosty sposób, żeby temu zapobiec – wystarczy listę miesięcy zamienić w listę lat. Oczywiście nie byłoby to takie proste, gdyby wcześniej nie zajęły się tym dwie osoby – profesjonaliści: S.z.y.m.o.n i Kate_Mac.

Jeżeli mamy szablon zrobiony przez Kate, to sprawa przemiany archiwum zajmie nam z dwie minuty.

KROK 1 – POBIERANIE SKRYPTU

Potrzebny nam będzie plik blox.archmenu.js, który stworzył i na swoim blogu umieścił S.z.y.m.o.n. Pobieramy go na swój komputer, a potem dodajemy do zasobów na bloxie (czyli w panelu administracyjnym na blox.pl klikamy EDYTUJ - > PLIKI -> NOWY PLIK - > wybieramy lokalizację pliku na naszym komputerze i klikamy OTWÓRZ).

KROK 2 – DODAWANIE KODU NA BLOG

Teraz wystarczy tylko skopiować poniższy kod i umieścić go na blogu (czyli wybieramy w panelu administracyjnym bloga EDYTUJ -> USTAWIENIA -> BOCZNA SZPALTA i wklejamy w POLE NA DODATKI, potwierdzamy klikając ZAPISZ ZMIANY).

<script type="text/javascript" src="/resource/blox.archmenu.js"></script>



 I gotowe! Możemy zobaczyć efekt na swoim blogu.

INSTRUKCJE S.Z.Y.M.O.N.A

Dla osób, które nie mają szablonów zrobionych przez Kate_Mac podaję linki do instrukcji stworzonych przez S.z.y.m.o.n.a:

http://testblog.blox.pl/2007/02/Zaczaruj-archiwum-bloksa.html - część 1

http://testblog.blox.pl/2007/02/Zaczaruj-archiwum-bloksa-cz-2.html - część 2

http://testblog.blox.pl/2007/02/Zaczaruj-archiwum-bloksa-cz-3.html  - część 3

Instrukcje te są bardzo szczegółowe, choć wymagają dużo cierpliwości i samozaparcia. Dla początkujących, na końcu trzeciej części, umieszczone zostały gotowe szablony CSS do pobrania na bloga.

GOTOWE SZABLONY CSS

Mamy do wyboru dwa szablony: menu poziome i menu pionowe.

Tutaj je kopiuje, na wypadek, gdyby kiedyś znikły z bloga S.z.y.m.o.n.a:

MENU POZIOME:

/*Szablon dla menu Archiwum by s.z.y.m.o.n[at]gazeta.pl*/

#nav, #nav ul{

   list-style-type: none;

   padding: 0;

   margin:0}

#nav ul { 

        position: absolute;

        left: -9999px;

        top: 1.2em;

        z-index: 9;

        border: 1px solid black;

   background-color: #f3f3f3;

        padding: 5px 0}

#nav li:hover ul, #nav li.over ul { left: 0ex }

#nav li {

        position: relative;

        float: left;

        padding: 0 0.5ex}

#nav li:hover, #nav li.over {

   background-color: black;

   color: white;

        cursor: default}

#nav li li {

        float: none;

        width: 13.5ex;

   padding: 0;

   margin: 0; }

#nav a {

   display: block;

   color: black;

   padding: 0 7px }

#nav a:hover {

   background-color: black;

   color: white}

MENU PIONOWE:

/*Szablon dla menu Archiwum by s.z.y.m.o.n[at]gazeta.pl*/

#nav, #nav ul{

   list-style-type: none;

   padding: 0;

   margin:0}

#nav ul { 

        position: absolute;

        left: -9999px;

        top: 0em;

        z-index: 9;

        border: 1px solid black;

   background-color: #f3f3f3;

        padding: 5px 0}

#nav li:hover ul, #nav li.over ul { left: 5.5ex }

#nav li {

        position: relative;

        width: 4.5ex;

   padding: 2px 0.7ex}

#nav li:hover, #nav li.over {

   background-color: black;

   color: white;

        cursor: default}

#nav li li {

        width: 13.5ex;

   padding: 0;

   margin: 0; }

#nav a {

   display: block;

   color: black;

   padding: 0 7px }

#nav a:hover {

   background-color: black;

   color: white}

Należy wybrać jeden z szablonów, skopiować go i umieścić w arkuszu CSS na swoim blogu (W panelu administracyjnym bloxa klikamy EDYTUJ -> WYGLĄD -> EDYCJA CSS i wklejamy kod. Potwierdzamy klikając ZAPISZ I PUBLIKUJ).

Później wykonać krok 1. i 2. mojej instrukcji.

Archiwum zwinięte za pomocą szablonów przygotowanych przez Szymona będzie czarno-białe. Kolory można zmienić. Opisuje to autor w swoich instrukcjach, do których linki podałam powyżej. Podaje tam również sposoby na inne „upiększenia” zwijanego archiwum.

Wbrew pozorom instalacja tego dodatku okazała się nieskomplikowana i szybka. Obie wersje (skrócona „dwukrokową” i dłuższą „szablonową”) przetestowałam na swoich blogach. Obie działają. W tym miejscu więc należą się wielkie podziękowania dla autora skryptu – S.z.y.m.o.n.a oraz dla autorki szablonów – Kate_Mac, która dopasowała jego skrypt do każdego ze swoich projektów. Bardzo Wam obojgu dziękuję! :-)

PS Na koniec informacja zupełnie niezwiązana z tematem, ale dla mnie bardzo miła. Pochwalę się, że mój blog znalazł się w TOP 10 najczęściej czytanych blogów na blox.pl w kategorii KOMPUTERY, INTERNET:

http://www.blox.pl/html/10289153,237.html?4

Bardzo dziękuję czytelnikom za tak liczne odwiedziny! :-)



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

Na swoim blogu pod rocznicowym wpisem Bookfa wyraziła życzenie, żeby się kiedyś dowiedzieć, jak działa TrackBack. Odpowiedziałam jej również tam, w komentarzu, ale pomyślałam, że może jeszcze kogoś nurtuje ta sama kwestia stąd ten wpis.

Ja sama dopiero niedawno odkryłam jak działa TrackBack. Jeszcze czasami mi się nawet myli i zapomina. Zamiast TrackBack URL wpisu czasami kopiuje samo URL wpisu. Nie róbcie tak, nie działa :-).

A CO TO JEST TRACKBACK?

Niezorientowani w temacie pewnie teraz się nad tym zastanawiają :-). Najprościej: jest to link umieszczany przez nas pod wpisem, który nas zainspirował albo jest zbliżony tematycznie do tego, co napisaliśmy u siebie na blogu.

Wyjątkowość TrackBack polega na tym, że taki link sami możemy zamieścić u kogoś na blogu, żeby poinformować wszystkich, że napisaliśmy wpis na podobny temat.

Np. ja wysłałam TrackBack do wpisu Bookfy o książce "Gwałt" Chmielewskiej, ponieważ chciałam, żeby inni przeczytali też moją recenzję na temat tej książki. Można to zobaczyć tu:

bookfa.blox.pl/2011/09/Historia-pewnej-cnoty.html

TrackBack ukazuje się bezpośrednio pod treścią wpisu, przed komentarzami.

Pamiętajcie, że TrackBack możecie wysyłać również między notkami na swoim blogu!

Ja często wysyłam TrackBacki między moimi wpisami o podobnej tematyce, żeby je połączyć i żeby inni mogli trafić na wszystko, co napisałam na dany temat. Np. połączyłam TrackBackami recenzje książek Chmielewskiej na moim książkowym blogu. Może dzięki temu ktoś na nie trafi. TrackBackami połączyłam tez wszystkie wpisy o bocznej szpalcie na moim blogu o dodatkach.

JAK WYSŁAĆ TRACKBACK?

1. Kopiowanie TrackBack URL wpisu.

Aby wysłać TrackBack trzeba skopiować ten link, który jest pod wpisem po słowach "TrackBack URL wpisu". Np. TrackBack do wpisu Bookfy, który mnie zainspirował do napisania tej instrukcji wygląda tak:

http://bookfa.blox.pl/2011/10/To-juz-dwa-lata.trackback?key=c4798d83fc

2. Wklejanie TrackBack URL wpisu pod swoją notką.

Potem należy wkleić TrackBack URL wpisu pod wybraną notką na swoim blogu (koniecznie tą, do której TrackBack ma prowadzić). Jak to zrobić?


W panelu administracyjnym bloxa klikamy: EDYTUJ przy nazwie odpowiedniego bloga. Otworzy się zakładka WSZYSTKIE WPISY. Wybieramy wpis, pod którym chcemy umieścić TrackBack. Klikamy pod tym wpisem EDYTUJ. Otworzy się edytor z wpisem. Pod treścią wpisu będzie "Komentarze do wpisu i trackback". Trzeba kliknąć ten napis i tam w polu "Wyślij ping na URL:" wkleić skopiowany TrackBack. Kliknąć ENTER i gotowe. Potem trzeba poczekać trochę aż pokaże się na czyimś blogu.

Oczywiście można dodać Trackback w tym samym momencie, w którym dodajemy nowy wpis.

Niektórzy mają włączoną moderację TrackBack i wtedy najpierw oni muszą go zaakceptować, żeby pokazał się na ich blogu. Tak jak to jest z moderowanymi komentarzami.

JAK ZEZWOLIĆ NA TRACKBACK NA SWOIM BLOGU?

A jeżeli ktoś nie ma ochoty sam dodawać TrackBacków, to niech chociaż da szansę innym, by mogli wysłać coś takiego na jego bloga.

W panelu administracyjnym bloga trzeba wybrać EDYTUJ -> KOMENTARZE -> KONFIGURACJA. A potem w ustawieniach TrackBack wybrać: "Zezwalam na TrackBack do wpisów". I gotowe :-) 

To chyba wszystko na ten temat. W razie wątpliwości zapraszam do komentarzy. Z chęcią odpowiem na wszystkie pytania, jeżeli tylko będę znała odpowiedź.

Bookfa, bardzo dziękuję za podsunięcie tego tematu! :-) Pozwoliłam sobie wykorzystać TrackBack z Twojego bloga jako przykład do mojej instrukcji, mam nadzieję, że Ci to nie przeszkadza?