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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyx4g6Ar0OF99bb8mMAlLAdB-CRd_ruWK9ajThyphenhyphenFqnyec_g6F5cBxltwxSDaHBYbsvhuf1Z_F26ZHkekbDqLdfkwxuYE_ooV4Plmg8PVxRFO-v3zLeNX0zyuZdqK6dM-Wm39hlBhGS7Az2/w557-h310/czytaj+dalej.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