Najlepsze dodatki na bloga

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



Niesamowite ile osób ma problem z instalacją tego dodatku na swoim blogu. Ja też miałam, więc się nie śmieję. Chociaż sprawa jest naprawdę prosta. Już zmiana napisu z angielskiego na polski była bardziej zakręcona, ale o tym za chwilę.

http://www.linkwithin.com/

Wchodzimy na stronę pokazaną na powyższym obrazku. Wypełniamy puste pola: adres e-mail, link do bloga, wybieramy platformę (OTHER). Potem wybieramy szerokość: trzy, cztery albo pięć linków do postów. Jeżeli nasz blog ma ciemne tło i jasną czcionkę dla lepszego efektu możemy zaznaczyć My blog has light text on a dark background. Na koniec klikamy GET WIDGET.

Na następnej stronie pojawi się kod, który trzeba skopiować i wkleić na bloga. Wklejamy jak zawsze na bloxie w panelu administracyjnym klikając EDYTUJ -> USTAWIENIA -> BOCZNA SZPALTA, wklejając w polu DODATKI.

Nie byłoby w tym nic trudnego prawda? Otóż twórca serwisu zapomniał o umieszczeniu tu jednej małej informacji. Sam wygenerowany przed chwilą kod nie wystarczy. Dopiero z angielskiego FAQ na tej stronie dowiadujemy się, że trzeba jeszcze wkleić malutką linijkę kodu, żeby wszystko zaczęło dzialać. Zresztą wspomniane FAQ okaże się jeszcze raz przydatne.

<div class="linkwithin_div"></div>

Ten fragment kodu wklejamy w panelu administracyjnym bloxa tym razem klikając EDYTUJ -> USTAWIENIA -> WPISY, umieszczając w polu DODAJ POD KAŻDYM WPISEM i potwierdzając kliknięciem ZAPISZ. Teraz na pewno będzie działać :-)

LINKWITHIN NA STRONIE GŁÓWNEJ BLOGA

Ważna uwaga, kiedy zastosujemy powyższy sposób, widżet pojawia się na stronie z pojedynczym postem, nie na stronie głównej. Jeżeli byśmy chcieli mieć go na stronie głównej, teoretycznnie trzeba by go dodawać do każdego posta, tzn. na koniec notki umieszczać podaną wyżej linijkę kodu.

Jak to dokładnie zrobić odkryłam przypadkiem szukając rozwiązania zupełnie innego problemu, zgłoszonego w pierwszym komentarzu do tego posta. Rzeczywiście trzeba wkleić powyższą linijkę kodu do treści posta, ale należy to zrobić w prostym edytorze tekstowym, a nie w zaawansowanym. Tylko wtedy działa. I nie można potem edytować tego posta w zaawansowanym edytorze, bo kod html znika. Jak zmienić edytor tekstowy na prosty? Klikamy w naszym panelu administracyjnym na blox.pl EDYTUJ -> USTAWIENIA -> EDYTOR -> rozwijamy menu, klikając haczyk i wybieramy PROSTY EDYTOR TEKSTOWY. Na koniec potwierdzamy klikając ZAPISZ. Efekt można zobaczyć na stronie głównej mojego bloga, przy wpisie o LinkWithin. Zła wiadomość uzyskana dzięki drugiemu komentarzowi pod tym postem brzmi, że niestety tym sposobem można dodać LinkWithin tylko do jednego posta na stronie głównej.

ZAMIANA "YOU MIGHT ALSO LIKE" NA "ZOBACZ TAKŻE"

Sposób opisany oczywiście na stronie FAQ tegoż dodatku, ale kto tam zagląda? Jak widać niewiele osób, bo na blogach widuje się raczej wersję angielską. Chyba, że niektórzy taką wolą?

Polską wersję robimy następująco. Dodajemy kolejną króciutką linijkę kodu:

<script>linkwithin_text='Your custom text:'</script>

W miejsce Your custom text wpisujemy własny, ja zamieniam na: Zobacz także, można wpisać dokładnie wszystko. Później wklejamy to przed poprzednio dodanym skryptem w USTAWIENIA -> BOCZNA SZPALTA -> DODATKI. Klikamy ZAPISZ ZMIANY i gotowe. Jeżeli ktoś nie wierzy, proszę sprawdzić u mnie na blogu, wystarczy przeczytać którykolwiek post, poza stroną główną. Wyjątkowo także w tym poście umiesciłam LinkWithin na stronie głównej, więc można po prostu spojrzeć w dół.

PS Wszystko działa poza momentami takimi, jak ten, kiedy serwis LinkWithin ma awarię lub planową przerwę w działaniu. Na ich stronie głównej wyświetla się informacja: We are currently down for system maintenance. Please check back in a few hours!