Tutorial - Zmiana odnośników starsze/nowsze posty na grafikę

Dzisiaj realizuje kolejne 'zamówienie'. Panna Marchewka poprosiła o instrukcje jak zmienić te nudne napisy pod postem pokazujące nam starsze i nowsze posty na rzucające się w oko grafiki. Tutorial ten nie należy do najprostszych dla początkujących ale umieściłam pod nim przykład więc mam nadzieję, że wszyscy sobie poradzą. Darmowe drobiazgi przekładam na jutro jako iż będą to strzałki a wolałam tym razem najpierw dać do nich instrukcje :)

Jeśli macie jakieś pytania lub coś jest nie jasne to piszcie w komentarzach 

1. Zaloguj się do panelu bloggera. Pamiętaj aby utworzyć kopie zapasową bloga zanim zaczniesz wprowadzać zmiany w szablonie (Jak to zrobić sprawdź TUTAJ).

2. Wybierz z lewego menu opcje 'Szablon'.

3. Teraz kliknij na 'Edytuj kod HTML'

4. W następnym oknie kliknij kontynuuj.

5. Teraz widzisz przed sobą cały kod odpowiedzialny za wygląd Twojego bloga. Zanim zaczniemy wprowadzać w nim zmiany pamiętaj aby zaznaczyć pole 'Rozszerz szablony widżetów' nad nim.

6. Naszym zadaniem jest odnalezienie w tym kodzie elementów odpowiedzialnych za wyświetlanie na dole strony linków 'starsze posty', 'nowsze posty' i strona główna. Aby to zrobić naciskamy CTRL + F na klawiaturze i w nowym polu przeglądarki które się pojawi wpisujemy następujące wyrażenia:

<data:newerPageTitle/> - aby znaleźć link 'nowsze posty'
<data:homeMsg/> - aby znaleźć link 'strona główna'
<data:olderPageTitle/> - aby znaleźć link 'starsze posty'

Prawdopodobnie odnajdziemy te elementy w 2 miejscach. Interesuje nas pierwsze patrząc od góry gdyż ono dotyczy wyglądu bloga w przeglądarce. Drugi znacznik odpowiada za ten sam element ale podczas przeglądania bloga na komórce.

7. Aby zamienić wybrany element grafiką wystarczy usunąć znaleziony element w kodzie a na jego miejsce wkleić:

<img src="adres obrazka który chcemy użyć" />

8. Po zamianie klikamy 'podgląd' aby upewnić się że wygląda to jak powinno. Jeśli jesteśmy zadowoleni ze zmian klikamy 'zapisz szablon'

Aby lepiej zrozumieć ten dość trudny dla początkujący tutorial przedstawię tutaj przykład.

Przypuśćmy, że chce zamienić linki strona główna na dole mojej strony na taką grafikę:

Pierwsze co muszę zrobić to wykonać czynności od 1-5 z powyższego tutoriala aby widzieć kod mojego bloga. Teraz wyszukuje fragment odpowiadający linkowi do strony głównej czyli: <data:homeMsg/> .

Po wyszukaniu odnajduje taki fragment kodu:

Musze teraz zastąpić znaleziony fragment odpowiednim kodem. W tym celu potrzebuje adres obrazka który będę używać. Aby go zdobyć klikam prawym klawiszem myszy na obrazek i wybieram 'kopiuj adres URL grafiki' (opcja może różnić się odrobinkę w zależności od przeglądarki). Adres mojej grafiki to:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5jb0DqxV0JNcFikkzx8RagX96m_ZdZEmvL2myyI_wfAJQXcoBQRAbv90QIMXKjW5BC9Wtl43BHfYRuxEwHb8LpDswBDa2FWIyOrtNJ0Nee4CGid9shQPLqkzBsjj_Kd-GW88K1-I6cok/s128/glowna.jpg

A więc kod na zamianę będzie wyglądał:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5jb0DqxV0JNcFikkzx8RagX96m_ZdZEmvL2myyI_wfAJQXcoBQRAbv90QIMXKjW5BC9Wtl43BHfYRuxEwHb8LpDswBDa2FWIyOrtNJ0Nee4CGid9shQPLqkzBsjj_Kd-GW88K1-I6cok/s128/glowna.jpg" />

Wymieniam podświetlony na poprzednim obrazku element <data:homeMsg/> na przygotowany kod i wykonuje czynności z ostatniego punktu (8) powyższego tutorialu.

Jeśli ktoś ma ochotę zachęcam do testowania na grafikach z mojego bloga: 

 

Można je też sobie przygarnąć :). Po więcej opcji zapraszam jutro gdyż zamierzam przygotować strzałki jako darmowe drobiazgi w tym tygodniu. Jeśli ktoś był na tyle wytrwały i doczytał do końca to zapraszam do zamówienia konkretnych strzałek (styl/kolor/dodatek) a na pewno umieszczę je w jutrzejszej (lub następnej jeśli ktoś nie zdąży dopisać się do jutra) paczce :).