Jak zrobić graficzne "czytaj dalej"?

Ładny przycisk "czytaj dalej" jest kropką nad "i" dopełniającą wygląd bloga. Powinien pasować do innych elementów i być czytelny. Ale po co zmieniać skoro blogger oferuje napis "czytaj więcej":)  Żeby ładniej było, ale też aby napis był bardziej widoczny. Po to, aby w ogóle pojawił się na blogu musicie w pierwszej kolejności korzystać z zawijania tekstu. Jak je włączyć pisałam w poście o pięknych postach:).

Sprawa nie jest skomplikowana, a żeby Wam ją jeszcze ułatwić przygotowałam kilka przycisków, które za darmo możecie wykorzystać u siebie.

Zacząć należy od przygotowania grafiki/grafik, które wykorzystamy jako przycisk. Jeśli przycisk ma być statyczny (nie zmieniać się po najechaniu nań kursorem) wystarczy jedna. Jeśli chcecie, aby zmieniał kolor potrzebne będą dwie. Przy drugiej opcji bardzo ważne jest, aby obie grafiki miały ten sam rozmiar, położenie napisu itp (mają być bliźniacze tylko różnić się kolorami)

KROK PO KROKU

(Jeśli korzystasz z moich przycisków pomijasz dwa pierwsze kroki)

1. Przygotuj grafikę/grafiki "czytaj dalej"

2. Umieść je np. w albumie google

3. Otwieramy bloggera. Przed nanoszeniem zmian proponuję zrobić kopię zapasową szablonu, a następnie SZABLON>EDYTUJ KOD HTML

4. Wyszukujemy w kodzie poniższy fragment: (aby wyszukać kliknij na dowolny fragment kodu, wciśnij jednocześnie CTRL i F. Wklej poniższą frazę w okienku, które się pojawi i wciśnij Enter)

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

5. Podmieniamy poniższy kod:

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

a) jeśli chcemy STATYCZNY przycisk, na:

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

* ADRES URL GRAFIKI z powyższego kodu zamieniamy na adres naszej grafiki. Adres uzyskacie klikając na otwartą w przeglądarce grafikę prawym przyciskiem myszy i wybierając "Kopiuj adres url obrazka" 

b) jeśli chcemy ZMIENIAJĄCY kolor przycisk, na:

<div class='jump-link'> <a expr:href='data:post.url + &quot;#more&quot;'><p align='center'><img src="ADRES URL GRAFIKI 1"  border="0" onmouseover="this.src = 'ADRES URL GRAFIKI 2'" onmouseout="this.src = 'ADRES URL GRAFIKI 1'"/></p> </a> </div> </b:if>

* ADRES URL GRAFIKI 1 - to grafika widoczna przed najechaniem na nią kursorem.

** ADRES URL GRAFIKI 2 - to grafika, która będzie widoczna po najechaniu kursorem

*** Adres uzyskacie klikając na otwartą w przeglądarce grafikę prawym przyciskiem myszy i  wybierając "Kopiuj adres url obrazka" 

**** Zwróćcie uwagę, że ADRES URL GRAFIKI 1 jest do podmiany w dwóch miejscach

DARMOWE PRZYCISKI

Poniższe przyciski przygotowałam tak, że możecie je zestawiać w dowolnych konfiguracjach. Jeśli coś jeszcze z matematyki pamiętam to pozwolą one na utworzenie 153 różnych par. Biorąc pod uwagę, że każdą parę możecie zastosować w odwrotnej kolejności, daje to 306 kombinacji. Poprawcie jeśli się mylę:)

PRZYKŁADY

Przykładowe zestawienia w wersji zmieniającej kolor (najedź kursorem, aby zobaczyć, jak się zmienia) To tylko 5 propozycji z 306 (?) możliwych:)

      

   

Powyższe przyciski są dość proste i klasyczne. Powinny znaleźć zastosowanie u większości z Was. Zachęcam Was jednak do kreatywności o tworzenia także swoich własnych projektów.

----------------------------------------------------------------------------------------------------------------------

Jeśli posiadając nawet powyższą instrukcję na myśl o grzebaniu w kodzie HTML dostajesz mdłości, pamiętaj, że mogę pomoc, z resztą nie tylko w tej kwestii. Mam za sobą, jak sądzę, kilka udanych metamorfoz blogowych. ---> INDYWIDUALNA POMOC BLOGOWA

Przemknęłaś przez instrukcję jak burza i chcesz więcej? Wskakuj do STREFY BLOGEREK i zobacz co jeszcze możesz sama upiększyć:)

Na koniec przypominam kochane, że do wyzwania blogowo-fotograficznego możecie przyłączyć się tylko do końca jutrzejszego dnia.

Jeśli podoba Ci się ten wpis podziel się nim i/lub śledź mnie, aby być na bieżąco.