Jak spersonalizowac “Czytaj dalej” pod postem na Bloggerze?

Dzisiaj proponuję Wam mały tutorial, ktory mam nadzieję przyda się Wam w upiększaniu bloga. To tylko taka mała porcja inspiracji, ale jak to powiedział Pablo Picasso

[Tweet “„Inspiracja istnieje, ale musi zastać Cię przy pracy.” Pablo Picasso”]

Dlatego do dzieła. Ja w koncu zakasałam rękawy, podłubałam tu i owdzie i wierzcie mi: nie taki diabeł straszny, jak go malują. Nawet grzebanie przy Szablonie i wklejanie kodow HTML. Sama ich nie napisałam, skorzystałam z tutorialu przygotowanego przez HAFIJA.

Ale najpierw czy w ogole wiecie do czego wykorzystac taką planszę “Czytaj dalej”. 

Otoz każdy wpis możecie w dowolnym miesjcu “zawinąc” (czyli przeciąc na 2 częsci)  korzystając z ikonki:

W ten sposob czytelnik, ktory trafia na Waszego bloga widzi zapowiedzi kilku kolejnych wpisow. Jezeli tak jak ja, siadacie by napisac cos krotko i zwięzle, a i tak wychodzi Wam z tego tasiemiec, to myslę, że warto z taką ikonką się zaprzyjaznic (macie ją rownież na wordpressie, jeżeli Wasz szablon nie robi tego automatycznie). Co więcej warto dodac do niej trochę własnego charakteru, czyli stworzyc własną grafikę. Ale spokojnie w dobie internetu i dostępnych on line prostych programow to na prawdę nic trudnego. Wystarczy 5 minut, ale jak to powiedział Platon najpierw trzeba do tego usiąsc:

 „Początek jest najważniejszą częścią pracy.” 

No, ale zanim zakasacie rękawy i zasiądziecie do tworzenia własnych grafik, 

mała porcja motywacji:

• “Chcesz uwolnic się od pracy? Wykonaj ją”. (przyslowie staropolskie)

•  “Możesz zrobic wszystko co chcesz, jeżeli tylko trzymasz się tego wystarczajaco długo”. Helen Keller

• „Zawsze wydaje się, że coś jest niemożliwe, dopóki nie zostanie to zrobione.” Nelson Mandela

•  Umysły są jak spadochrony – działają tylko gdy są otwarte.” Thomas Dewar

•  „Cel to nic innego, jak marzenie z terminem realizacji.” Joe L.Griffith

Marzysz o pięknym blogu? Zobacz ile fajnych rzeczy można zrobic w programach dostępnych on line typu PICMONKEY   czy CANVA.

Ja wybrałam dla Was Picmonkey dlatego że lepiej go znam i mam wrażenie, że więcej osob z niego korzysta.

Grafiki można tu przygotowac sobie w bardzo prosty sposob. Każdy, kto ma dostęp do internetu, ma dostęp do tego programu : takie must have blogera.

Jeżeli chcecie, by Wasza grafika wpasowywała się w kolorystykę szablonu, warto sprawdzic jakie oznaczenie ma zastosowany w nim kolor. Ja np chciałam, by moja grafika wspołgrała z kolorem etykiet. W tym celu weszłam w Szablon, Dostosuj, Zaawansowane i tu sprawdziłam (i pobrałam tj. skopiowałam Ctrl C) – kolor tła kart.

Teraz wchodzimy w PicMonkey. Ale skoro mamy przygotowac grafikę, wybieramy zakładkę Design

Najpierw musimy przygotowac sobie “płotno” – kanwę, na ktorej będziemy kreslic nasze grafiki. Wybieramy tu opcję Transparent Canva (czyli przezroczyste płotno) i klikamy na Apply (Zastosuj).

Ja osobiscie wolę przygotowac sobie na wejsciu płotno odpowiednich wymiarow (tak, żeby “poczuc” proporcje). W tym celu skorzystałam z opcji Resize, gdzie możemy wpisac dowolne wymiary.

Teraz możemy “tworzyc” nasze grafiki. Wiele ciekawych opcji znajdziecie w rubryce Overlays (ikonka motyla). Ja wybrałam sobie geometryczną formę (jak tło grafiki) i pokolorowałam ją w odcieniu mojego szablonu. Czyli wpisałam kod koloru (pobrany z Szablonu Bloggera) w miejsce, ktore oznaczyłam dla Was czerwoną ramką.

Z powodzeniem można wykorzystac tu rownież opcje geometryczne czyli Overlays Geometric.

Jeszcze dodałam tekst (ikonka T) i pobawiłam się w dorzucenie małej strzałki. (znalezionej w Overlays – motylek i Arrows czyli strzałki).

Oto moja pierwotna wersja Czytaj dalej. W międzyczasie jeszcze przeszła kilka modyfikacji. No coż wciąż szukam swojego stylu. A ta obecna jest z założenia tylko tymczasowa. Czekam na kolejny napad natchniania estetycznego.

A żeby podsunąc Wam kilka innych pomysłow, podłubałam trochę w PicMonkey ( na prawdę wiele idzie zrobic w kilka minut).

No i teraz zaczynają się schody, czyli grzebanie w kodzie HTML. Przepis jak to zrobic znalazłam u HAFIJA
Moze istnieje jakies prostsze rozwiązanie. Ale TO wcale nie jest takie trudne, tylko wygląda na strasznie długie.

Będzie nam potrzebny adres URL naszej grafiki.

W tym celu możemy zapisac ją sobie np na Photobucket czy tak jak ja to zrobiłam w IMAGESHACK; Możecie zalogowac się tu korzystając z Waszego facebooka (nie ma więc potrzeby zakładania osobnego konta).

A gdy już tu jestescie, musicie pobrac Waszą grafikę (zapisaną na komputerze z Pickmonkey – nie zapomnijcie nacisnąc tam na ikonkę Save) i załadowac ją na IMAGESHACK.

Gdy grafika jest już załadowana – sprawdzacie jej adres URL.

Albo jeżeli nie zrobicie tego od razu, pozniej po załadowaniu Waszej grafiki – klikacie na Get links.

I tu rownież macie adres URL (pamiętajcie, by pobrac tylko adres URL Waszego zdjęcia, a nie cały kod HTML).

Teraz wchodzimy do Bloggera w Szablon, Edytuj HTML (na wszelki wypadek zrobcie sobie kopię zapasową szablonu – nigdy nie wiadomo).

Teraz kilkamy na Formatuj Szablon, za pomocą CTRL F wyszukujemy w szablonie taki kawałek kodu (podaję za HAFIJA)

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

Teraz zamieniamy następujący po nim fragment, czyli:

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

na

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

Zapisujemy i cieszymy się nowym udoskonaleniem na blogu.

U mnie poki co wygląda to tak, chcialam, by wspolgralo z moimi zakladkami – linkami do Stron: O mnie, O blogu itp znajdującymi sie w kolumnie bocznej. Ale to juz duzo prostsza sprawa. Jak to zrobilam opowiem Wam wkrotce.

Pozdrawiam serdecznie. A jak macie ochote to gorąco zaparaszam do polubienia mnie na Facebooku, Twiterze, czy Pinterescie. Nie pozostanę Wam dluzna.