Wskazówka

Chcąc znaleźć pożądaną instrukcję skieruj się do zakładki spis instrukcji, gdzie znajdziesz wszystkie dotychczasowo opublikowane posty z podziałem na trzy kategorie.

Uwaga! Niektóre instrukcje mogą nie działać. Staramy się na bieżąco je poprawiać. Prosimy o wyrozumiałość.

Cel bloga

Instrukcje dotyczące języka HTML czy kodów CSS, artykuły na temat ciekawych funkcji czy poradniki pomagające początkujących - to wszystko i jeszcze więcej tylko u nas!

Cytat

Instrukcje dotyczące języka html czy kodów css, artykuły na temat ciekawych funkcji czy poradniki pomagające początkujących - to wszystko i jeszcze więcej tylko u nas!

Chcąc znaleźć pożądaną instrukcję, skieruj się do zakładki
spis instrukcji, gdzie natrafisz na wszystkie dotychczasowo opublikowane posty z podziałem na trzy kategorie. Uwaga! Niektóre instrukcje mogą nie działać. Staramy się na bieżąco je poprawiać. Prosimy o wyrozumiałość.

Zamiana "czytaj dalej" na grafikę

Blogger to platforma wielu możliwości. Ludzie zaczęli to doceniać, stąd też pojawiło się zapotrzebowanie na poradniki, które pomogą eksperymentować z kodem HTML. W dniu dzisiejszym przedstawiam bardzo pożądaną ostatnim czasem instrukcję, dzięki której nudny tekst "Czytaj dalej" przenoszący nas do rozwinięcia posta możemy zamienić na jakąś interesującą i przyciągającą uwagę grafikę.

1. Na samym początku tworzymy napis, który zastąpi nam wprowadzone przez bloggera "Czytaj dalej". Może to być obrazek, ale i słowo. W moim przypadku jest to ta sama nazwa, jaką przedstawiłam na początku, ale w graficznej wersji zaaranżowanej przeze mnie. Obrazek zastępujący "Czytaj dalej" możemy stworzyć w Paint'cie lub znaleźć gotowy w internecie.


2. Kolejnym istotnym krokiem jest wrzucenie naszego obrazka na serwer hostujący zdjęcia (może to być ImageShack lub Tinypic - jak wolicie) - potrzebny nam jest bowiem bezpośredni link do obrazka.

3. Teraz czeka nas standardowa procedura, którą znacie z poprzednich instrukcji. Wchodzimy kolejno w panel Bloggera > Projekt > Szablon > Edytuj kot HTML. Gotowe? Nie zgubiliście się? W takim razie jedziemy dalej.

4. Przed sobą widzimy calusieńki kod HTML naszego bloga. Klikamy obojętnie gdzie (w pole kodu), a następnie klikamy na klawiaturze ctrl + f. W prawym górnym rogu powinno wyskoczyć nam okienko "Search:". Wklejamy tam poniższą frazę, po czym klikamy enter.

<b:if cond='data:post.hasJumpLink'>


5. Wyskakuje nam powyżej pokazany tekst, który został podkreślony na żółto. Nas interesuje jednak ta część, którą otoczyłam różowym kolorkiem na poniższym screenie. Zaznaczamy ją, a w jej miejsce wklejamy następujący kod:


<div class='jump-link'> <a expr:href='data:post.url + &quot;#more&quot;'><p align='center'><img border='0' src='URL DO OBRAZKA'/></p> </a> </div> </b:if>

6. Zamiast "URL DO OBRAZKA" wklejamy wcześniej wygenerowany przez serwis hostujący zdjęcia kod. W moim przypadku ma on postać http://i60.tinypic.com/2jcy555.jpg. Jeśli chcemy podejrzeć czy wszystko w porządku, wybieramy opcję Podgląd szablonu.

7. Jeśli wszystko się zgadza, klikamy Zapisz szablon. Od tej pory możemy cieszyć się nowym odnośnikiem rozwijającym nasz post. Gotowe!

10 komentarzy:

  1. skasuj ostatnie i działa mi

    OdpowiedzUsuń
    Odpowiedzi
    1. Coś jest nie tak?? O.o

      Usuń
    2. Bez "< /b :if >" ostatniego działa z nic nie działało.
      W poprzednim komentarzu usunęło mi (< /b:if >) z wiadomości.

      Usuń
    3. Wszystko sprawdziłam i instrukcja jest prawidłowa. Ważne, żeby tego (/b :if) nie było za dużo i żeby niczego mu nie brakowało.

      Usuń
    4. Ja tylko mówię że bi działa beż ostatniego (/b :if) z miałam error. ale tak to super robota. Jeszcze raz dzięki :)

      Usuń
  2. Odpowiedzi
    1. Kurczę, niemożliwe! Instrukcja na pewno jest dobrze napisana. Opisz proszę swój problem :)

      Usuń
  3. Nie mam tej linijki w kodzie. Ktoś wie dlaczego?

    OdpowiedzUsuń
    Odpowiedzi
    1. Tak wygląda prawidłowy kod: klik
      Na szaro zaznaczyłam konkretnie fragment odpowiedzialny za "czytaj dalej". Spróbuj odnaleźć w html'u treści mu towarzyszące (post-footer, post-header...), a w razie potrzeby uzupełnić brakujący tekst. Radzę najpierw zapisać szablon na dysku.

      Usuń
  4. działa jak najbardziej ;-) dobra instrukcja ;-)

    OdpowiedzUsuń

© Agata | WS | x x.