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!

Zadaj pytanie!

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.

Archiwum

Statystyka

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. 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ń