Spersonalizowana grafika w poście - "Czytaj dalej"






Witajcie!


Dziś trochę coś innego niż zawsze! 

KURS HTML

czyli


spersonalizowana grafika w poście

"czytaj dalej"


Pewnie widziałyście małe zmiany u mnie na blogu?
Dlatego postanowiłam, spisać 
i podzielić się z Wami tym co ja odkryłam podczas 
moich przygód z kodami HTML
....

Może Wam to ułatwi życie

;-)



Od czego trzeba zacząć, aby w szablonie była taka grafika.
<---------------------------------------------------------->

1. Zapisz kopię zapasową szablonu 
(w razie jak coś nam nie wyjdzie;-)

2. Kliknij w edytuj kod HTML.



3. Zaznacz cały szablon (z odznaczeniem wszystkich wierszy)


4.Szukaj kod (skrót z klawiatury "Clrl F")

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


6. Znajdź kod ( podświetli się na żółto)





7. Pod nim jest kod do zamiany 

  • <div class='jump-link'>  <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>  </div>  </b:if>ß

Wklejamy URL do obrazka
  • <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>


Po wklejeniu kod wygląda tak

(przykład z mojego szablonu)

  • <div class='jump-link'>  <a expr:href='data:post.url + &quot;#more&quot;'><p align='center'><img border='0' src='https://lh4.googleusercontent.com/-jrLxb-zpMGU/U-YaBzdUr6I/AAAAAAAAH9Y/JLWggn2FnlI/w557-h310/czytaj%2Bdalej.png'/></p> </a>  </div>  </b:if>



8. Po wklejeniu sprawdź czy kod HTML  działa 
i zrób podgląd szablonu.



Przykładowe grafiki obrazka z tekstem "czytaj dalej"










Mam nadzieje, ze kursik się przyda 

i moje grafiki się Wam spodobały?


Następny post o ikonkach społecznościowych.



Miłego dnia

Kami

14 komentarzy :

  1. muszę przeczytać kilka razy, żeby zorientować się, o co chodzi, ale na pewno sie przyda- kiedy już zrozumiem;)
    Grafiki są świetne:)

    OdpowiedzUsuń
  2. Kami jesteś niesamowita :-) przyda się napewno kursik od Ciebie.Uściski.Kami :-)

    OdpowiedzUsuń
    Odpowiedzi
    1. Jeśli się przyda to tym bardziej mnie to cieszy! :-D
      Buziaki

      Usuń
  3. Ja akurat tej opcji nie używam, ale może kiedyś się przyda. Trzeba gdzieś sobie schować na kiedyś. Pozdrawiam http://karo-dekor.blogspot.com/

    OdpowiedzUsuń
  4. Ja wciąż mam z tym problem, ale spróbuję!
    pozdrawiam
    marta

    OdpowiedzUsuń
  5. jaka ty pomocna duszyczka jesteś :))))

    OdpowiedzUsuń
  6. dziękuję,że chcesz się dzielić swoimi umiejętnościami.grafiki bardzo ładne,zwłaszcza pierwsza.w ostatnie dwie wdarł się błąd.
    pozdrawiam
    lena

    OdpowiedzUsuń
    Odpowiedzi
    1. Dziękuję za zwrócenie uwagi, błąd już poprawiony:-)
      pozdrowionka

      Usuń
  7. Juhuuu! Zrobiłam! Chwilowo taki jak u Ciebie, dobrze? Jak dorwę się do Photoshopa to zrobię swój :)
    Dziękuję! I nie mogę doczekać się kolejnej instrukcji :)

    OdpowiedzUsuń
  8. Dzięki! Myślałam, że będzie to trudne, jednak dzięki Twojej instrukcji okazało się bardzo łatwe! :)

    OdpowiedzUsuń

Bardzo dziękuję za każde miłe odwiedziny i za każde ciepłe słowo zostawione na moim blogu:)
pozdrawiam
Kamila

Uwaga: tylko uczestnik tego bloga może przesyłać komentarze.

Related Posts Plugin for WordPress, Blogger...