Jak zrobić graficzne "czytaj dalej"?

29 wrz 2014

jak zrobić czytaj dalej, blogger, przycisk, graficzny, obrazek, grafika
Ł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. Image Map

58 komentarzy:

  1. Jak zawsze super przydatny wpis i bardzo fajne grafiki pozdrawiam Beata

    OdpowiedzUsuń
  2. Wpis genialny :) a ja mam już swoje "czytaj dalej" dawno :P

    OdpowiedzUsuń
  3. Dziękuję bardzo za piękne przyciski i bardzo czytelną instrukcję ich zamieszczania.

    OdpowiedzUsuń
  4. wow- kiedy ja mam znaleźć czas na te wszystkie zmiany, ulepszania?? :)... matko:) może się uda niedlugo :)

    OdpowiedzUsuń
  5. Baaardzo przydatny wpis. Ja jednak muszę najpierw "powalczyć" z zawijaniem tekstu, co oczywiście wciąż odkładam :/

    OdpowiedzUsuń
  6. Cudowne. Muszę to zrobić. W tym tygodniu.

    OdpowiedzUsuń
  7. Nie walcz. Zacznij dodawać do nowych wpisów, ale na początek dodaj do tych, które są aktualnie na pierwszej stronie. Mało kto wertuje bloga przewijając strony - tak mi się wydaje:)

    OdpowiedzUsuń
  8. Dasz radę - to kilka minut. Choć łatwo pisać, a mój blog też czeka w kolejce na zmiany. Innym robię fajniejsze rzeczy na blogach niż sobie:)

    OdpowiedzUsuń
  9. Od pewnego czasu zastanawiam się, czy zrobić graficzny przycisk, czy nie? Na innych blogach zwykle robiłam, ale nie chcę przedobrzyć...

    OdpowiedzUsuń
  10. Przyda się, przyda:). Dziękuje bardzo za podzielenie się z nami wiedzą na ten temat:).
    Miłego dnia życzę
    Ania

    OdpowiedzUsuń
  11. Cudowne!
    Pomimo tego, że Twoje mi się podobają, nie będą pasować do mojego bloga ;) ale z pewnością zrobię swoje ;)

    OdpowiedzUsuń
  12. Rób, rób. Chętnie zobaczę co zmajstrowałaś!

    OdpowiedzUsuń
  13. Karolina, ponownie dziękuję za moje "czytaj dalej". Tym razem w blogosferze :)

    OdpowiedzUsuń
  14. Pomocy!:) Utknęłam w momencie kiedy miałam zdobyć adres URL przycisku, przerosło mnie to:(. Chciałabym użyć Twój szablon (białe tło, szare literki i szara ramka). Czy jest szansa, żebyś mi napisała jaki ten szablon ma adres? Chciałam się jeszcze upewnić, czy ten adres mam wkleić w tym miejscu gdzie jest napisane ADRES URL GRAFIKI?

    OdpowiedzUsuń
  15. Najpierw kliknij na obrazek lewym przyciskiem myszy (aby przycisk wyświetlił się w w osobnym oknie - będziemy miec pewność, że przycisk pinterest nam nic nie psuje) Wtedy naciśnij na wyświetlony przycisk czytaj dalej prawym przyciskiem myszy i z listy, która się rozwinie wybierz "kopiuj adres URL grafiki". Następnie wklej go w do kodu zamiast napisu ADRES URL GRAFIKI

    OdpowiedzUsuń
  16. Jak rozwijam listę, to u mnie nie ma opcji "kopiuj adres URL grafiki":(

    OdpowiedzUsuń
  17. No wklejam CI tu adres:
    http://1.bp.blogspot.com/-Wxr1laZRijM/VCevfOs5YJI/AAAAAAAAWXs/2jrJVmudlhE/s1600/7.png

    OdpowiedzUsuń
  18. Dziękuję i przepraszam, że tak zawracam głowę, ale jeśli chodzi o sprawy techniczne, to jestem totalnie zagubiona:)

    OdpowiedzUsuń
  19. Nie przepraszaj. Jeśli tylko umiem to z przyjemnością pomagam!)

    OdpowiedzUsuń
  20. A w którym miejscu trzeba umieścić ten kod? W moim kodzie nie ma tego fragmentu, który każesz odszukać i nie wiem gdzie w takim trzeba wrzucić ten fragment (i czy to wystarczy..) ?

    OdpowiedzUsuń
  21. Wiesz co, bez znalezienia tego fragmentu ani rusz. Napiszę do Ciebie, może uda mi się pomóc.

    OdpowiedzUsuń
  22. Takie proste przyciski lepiej robić za pomocą CSS. Dzięki temu w każdej chwili można pozmieniać kolory, marginesy, czcionki, nie tracąc czasu na odpalanie programów graficznych, wgrywanie nowych obrazów i podmianę linków.

    OdpowiedzUsuń
  23. Pewnie lepiej bo dają większą elastyczność, jednak te porady nie są dla osób znających CSS. W większości korzystają z nich kobiety, które pierwszy raz dokonują jakichkolwiek modyfikacji poza tymi dostępnymi w menu bloggera:)

    OdpowiedzUsuń
  24. Jesteś wspaniała, zawsze chciałam mieć taki piekny napis czytaj dalej. Podziwiałam go na innych blogach i marzyłam, że kiedyś i mi się to uda zrobić. I jest! Dzieki Tobie jest mój wymarzony gradientowy napis czytaj dalej! Uwielbiam tutaj zaglądać. Nurtuje mnie jeszcze porządek w stopce posta tak aby był tylko napis autor. Nie potrafię się tym zająć więc liczę , że niebawem napiszesz dla mnie specjalną instrukcję! :) Serdecznie Cię pozdrawiam i proszę i więcej takich postów.

    OdpowiedzUsuń
  25. Super, że instrukcja się przydała! A temat stopki posta ciekawy. Jak o tym napisałaś przyszło mi do głowy od razu kilka kwestii z nią związanych! Dziękuję za podrzucenie pomysłu!!!

    OdpowiedzUsuń
  26. Dziękuję, dziękuję, dziękuję x MILION :) :*

    OdpowiedzUsuń
  27. Świetny wpis, chciałam skorzystać, jednak w moim kodzie nie ma frazy ani żadnego Jump :(

    OdpowiedzUsuń
  28. Dziękuje Ci bardzo za wytłumaczenie jak dodac te wazna na blogu ikonkę :) juz dawno chcialam ja zainstalowac , ale ciagle cos mi sie nie dogrywało, ale dziś juz w ostanim dniu roku się udało. :) Bardzo lubię zaglądać na Twojego bloga i bardzo mi się podoba :) Pozdrawiam

    OdpowiedzUsuń
  29. Upewnij się, że pod wyszukiwaniem kliknęłaś na dowolną część kodu. Jeśli tego nie zrobisz to wyszukujesz zamiast w kodzie to na stronie i wówczas nic nie znajdziesz. Jeśli mimo to się nie uda to napis, postaram się coś zaradzić:)

    OdpowiedzUsuń
  30. Dziękuję. Udało się. I znowu potwierdził się fakt, że mi to trzeba "jak krowie na rowie".

    OdpowiedzUsuń
  31. nie wiem dlaczego ,ale nie mam tej frazy ;(

    OdpowiedzUsuń
  32. Upewnij się, że przed wyszukiwaniem kliknęłaś na dowolną część kodu. Jeśli tego nie zrobisz to wyszukujesz zamiast w kodzie to na stronie i wówczas nic nie znajdziesz. Jeśli mimo to się nie uda to napisz, postaram się coś pomóc:)

    OdpowiedzUsuń
  33. kamilka_byculewicz5 lutego 2015 12:34

    Niestety u mnie w szablonie nie da się wyszukać tego jump-linku ;[ próbowałam na wszystkie sposoby i nic. Co robic? Pomocy :)

    OdpowiedzUsuń
  34. Upewnij się, że pod wyszukiwaniem kliknęłaś na dowolną część kodu. Jeśli tego nie zrobisz to wyszukujesz zamiast w kodzie to na stronie i wówczas nic nie znajdziesz. Jeśli mimo to się nie uda to napis, postaram się coś zaradzić:)

    OdpowiedzUsuń
  35. cudowne, dziękuję za instrukcję - jakiś czas temu próbowałam to zrobić według innej instrucji ale namieszałam w kodach i nie zapisałam szablonu i straciłam nadzieję, że będę miała ten gadżet na blogu! a tu taka niespodzianka :)

    xoxo, aneciablog.pl

    OdpowiedzUsuń
  36. To ąświetnie, że mogłam pomóc odzyskać nadzieję:)

    OdpowiedzUsuń
  37. wszystko cudownie wyjaśnione! niestety w moim życiu wszystko musi być na odwrót więc i mój problem odwrotny ;D chciałabym się pozbyć zwijanych postów i przycisku 'read more' z mojego bloga... nokombinowałam się w tym temacie, ale bezskutecznie, a od kilku dni spędza mi to sen z powiek. Będę bardzo wdzięczna za pomocne słówko :)

    Pozdrawiam!

    OdpowiedzUsuń
  38. Hej, obawiam się, że trzeba to zmienić usuwają zawijanie tekstu z każdego posta osobno.

    OdpowiedzUsuń
  39. mam tylko kilka postów bo dopiero zaczynam, niestety problem jest w kodzie szablonu :(
    dziękuje bardzo za szybką odpowiedź :) Powodzenia we wszystkim!!! :>

    OdpowiedzUsuń
  40. Wreszcie zabrałam się za zindywidualizowanie mojego przycisku CZYTAJ DALEJ. Dzięki za wskazówki:)

    OdpowiedzUsuń
  41. Lepiej późno niż wcale ;) Wreszcie stworzyłam przycisk CZYTAJ DALEJ. Dziękuję za instruktaż ;)

    OdpowiedzUsuń
  42. Moja droga, zmieniłam swój blog dzięki Twoim poradom. Zawsze marzyłam by na moim blogu najpierw widoczne były zdjęcia. Mam jednak kilka problemów. Chciałabym wiedzieć jak powiększyć nieco ten obraz czytaj dalej aby pasowało do szerokości zdjęć na moim blogu? Napisz proszę o zaletach i wadach disquis i czy warto go instalować na blogu? Czy stracę dotychczasowe komentarze pod każdym postem po zainstalowaniu tej wtyczki?
    Ostatnia rzecz, chciałabym bardzo aby zdjęcia komentujących były w kółeczku jak moje zdjęcie ale nie wiem jak to zrobić. Proszę pomóż!

    OdpowiedzUsuń
  43. Czy korzystasz z zewnętrznego szablonu? Daj proszę link do bloga.

    OdpowiedzUsuń
  44. Powiększanie przycisków, które przygotowałam skończy się znaczącym spadkiem ich jakości. Najlepiej, abyś przygotowała własny przycisk w dowolnym programie graficznym (wystarczy nawet picmonkey.com). Umieszczasz go w Internecie, np. w albumie google i dalej robisz jak w instrukcji.

    O Disqus pisałam, krótko po jego instalacji tu: http://www.zyj-kochaj-tworz.pl/2014/10/disqus-tak-czy-nie.html


    Cały czas z niego korzystam i jestem zadowolona bo przenosi dialog z czytelnikami na inny poziom. Nie zrezygnowałam z niego nawet po tym jak po zmianie domeny nie wszystkie komentarze mi zmigrowały (pracuję nad tym)

    OdpowiedzUsuń
  45. M. z Head Full of Ideas26 marca 2015 11:49

    Hej, a u mnie to nie działa... nie wiem czemu - w poprzednim szablonie udało mi się bez problemu, a teraz wyskakuje jakiś błąd i kod HTML nie chce się zapisać...

    A skoro już pytam, czy mogłabyś mi pomóc w przesunięciem graficznego podpisu pod każdym postem w prawo? Teraz wyświetla się po lewej i nie umiem tego zmienić :( Dziękuję z góry! M.

    http://zglowynapapier.blogspot.com/

    OdpowiedzUsuń
  46. Jeszcze dziś zrobię sobie guzik i dzięki Twojej pomocy go podmienię! Strrrasznie się cieszę! dzieki!

    OdpowiedzUsuń
  47. U mnie nie działa na nowym szablonie;( Wyskakuje błąd XML

    OdpowiedzUsuń
  48. wszystko świetnie opisane, mi niestety nie udaje się tego zrobić na 4 kroku, bo nie mam w swoim szablonie takiej frazy, którą należy wyszukać i podmienić -.-

    OdpowiedzUsuń
  49. Na stówę fraza jest. Sprawdź czy na pewno wyszukujesz w kodzie, a nie na stronie. Dla pewności przed wykonaniem punktu 4 ustaw kursor w dowolnym fragmencie kodu. Daj znać czy się udało.

    OdpowiedzUsuń
  50. No moim blogu robię opcję " zwykłą " czytaj dalej, bez zadneej grafiki i tak mi nie działa :( co mam zrobić??

    OdpowiedzUsuń
  51. Bardzo przydatny post :-) sama nie dałabym rady :) ściągnęłam sobie wersję różową, dziękuję :))))

    OdpowiedzUsuń
  52. A dodałaś zawijanie tekstu w treści posta?

    OdpowiedzUsuń

Zostaw po sobie ślad. Każdy komentarz napędza do działania i dodaje skrzydeł. Właśnie Twój głos chcę usłyszeć!