Graficzne przyciski nawigacyjne (nowsze posty, strona główna, starsze posty)

20 paź 2014

Niedawno pisałam o tym jak umieścić na blogu graficzne "czytaj dalej" i przygotowałam dla Was kilka gotowych przycisków do wykorzystania. Dzisiaj idziemy dalej i do kompletu robimy graficzne menu nawigacyjne. O co chodzi? Zmieniamy napisy "nowsze posty", "strona główna"  i "starsze posty" na własne grafiki. Tak jak ostatnio, możecie wybrać wersję statyczną lub zmieniającą kolor po najechaniu kursorem.



! Przed dokonywaniem jakichkolwiek zmian w szablonie zrób jego kopię zapasową !

SZABLON>EDYTUJ KOD HTML
*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
** URL OBRAZKA z poniższych kodó zamieniamy na adres naszej grafiki.
*** przy wersji ZMIENIAJĄCEJ KOLOR obrazek widoczny przed najechaniem na niech kursorem to URL OBRAZKA (...) 1, a ten widoczny po najechaniu kursorem to URL OBRAZKA (...) 2
**** URL OBRAZKA uzyskacie klikając na otwartą w przeglądarce grafikę prawym przyciskiem myszy i wybierając "Kopiuj adres url obrazka"

 

1. NOWSZE POSTY


Szukamy w kodzie fragment:
<data:newerPageTitle/>
aby zrobić PRZYCISK STATYCZNY zmieniamy go na:
<img src='URL OBRAZKA NOWSZE POSTY'/>
aby zrobić PRZYCISK ZMIENIAJĄCY KOLOR zmieniam go na:
<img src="URL OBRAZKA NOWSZE POSTY 1" onmouseover="this.src = 'URL OBRAZKA NOWSZE POSTY 2'"
onmouseout="this.src = 'URL OBRAZKA NOWSZE POSTY 1'"/>

2. STRONA GŁÓWNA


Szukamy w kodzie fragment:
<data:homeMsg/>
aby zrobić PRZYCISK STATYCZNY zmieniamy go na:
<img src='URL OBRAZKA STRONA GŁÓWNA'/>
aby zrobić PRZYCISK ZMIENIAJĄCY KOLOR zmieniam go na:
<img src="URL OBRAZKA STRONA GŁÓWNA 1" onmouseover="this.src = 'URL OBRAZKA STRONA GŁÓWNA 2'"
onmouseout="this.src = 'URL OBRAZKA STRONA GŁÓWNA 1'"/>


3. STARSZE POSTY


Szukamy w kodzie fragment:
<data:olderPageTitle/>
aby zrobić PRZYCISK STATYCZNY zmieniamy go na:
<img src='URL OBRAZKA STARSZE POSTY'/>
aby zrobić PRZYCISK ZMIENIAJĄCY KOLOR zmieniam go na:
<img src="URL OBRAZKA STARSZE POSTY 1" onmouseover="this.src = 'URL OBRAZKA STARSZE POSTY 2'"
onmouseout="this.src = 'URL OBRAZKA STARSZE POSTY 1'"/>

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

DARMOWE PRZYCISKI

Jeśli stworzysz własne przyciski musisz umieścić je na jakimś portalu hostującym. Ja wykorzystuję najczęściej albumy google. Jeśli korzystasz z moich przycisków wystarczy, że klikniesz prawym przyciskiem myszy na wybranym i wybierzesz "Kopiuj adres URL grafiki". PS Jeśli przeszkadza Ci w tym mój "PIN IT" w pierwszej kolejności kliknij na obrazek lewym przyciskiem myszy - otworzy się w osobny okienku.



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

Na koniec przypomnę, że wszystkie posty związane z tematyką blogową znajdziecie w STREFIE BLOGEREK, a w sprawie indywidualnego upiększania bloga możecie pisać na zyj.kochaj.tworz@gmail.com. W najbliższych dniach będę wysyłać drugi numer mojego newslettera - kto chętny może zapisać się na pasku bocznym:)





Dołącz do mnie na:

  Image Map

23 komentarze:

  1. Musze sie tym pobawic. Dzieki Karolino. POzdrawiam Beata

    OdpowiedzUsuń
  2. Twój blog to kopalnia wiedzy! Super, że dziewczyny mogą popróbować same upiększyć swoje blogi :) Ja tym razem oddałam się w ręce specjalisty i za chwile będzie nowa odsłona, ale znając siebie, będę chciała za chwilę coś pokombinować i wtedy skorzystam z Twoich wskazówek :)

    OdpowiedzUsuń
  3. Aaaa!!! .... już nowości, a ja ciągle nie ruszyłam przycisku "czytaj dalej" :/ utknęłam na cięciu postów bo nie mogłam sobie poradzić z wrzuceniem obrazku do kodu HTML. Chyba muszę jeszcze raz na spokojnie przeanalizować twój post o tym przycisku.
    No i jak najszybciej porobić dzisiejsze przyciski ;)
    Pozdrawiam!

    OdpowiedzUsuń
  4. Super, właśnie tego u mnie brakuje, kiedyś próbowałam to pozmieniać ale coś nie wychodziło, dzisiaj się za to zabieram, dzięki <3

    OdpowiedzUsuń
  5. Ja Cię uwielbiam za to, że akurat wtedy, kiedy na własną rękę chcę się dowiedzieć, gdzie w HTMLu znajdę to i owo - oto jest! Nowy post na Twoim blogu i już nie muszę szukać :) niech no ja sobie przypomnę... czego to jeszcze szukałam? :)

    OdpowiedzUsuń
  6. Myśl, myśl i pisz! Będę miała więcej tematów dla Was "szytych na miarę":)

    OdpowiedzUsuń
  7. Dziękuję Ci bardzo za miłe słowa i nie mogę się doczekać Twojej nowej odsłony!

    OdpowiedzUsuń
  8. Jak coś nie będzie zrozumiale napisane to pytaj, postaram się wytłumaczyć inaczej:)

    OdpowiedzUsuń
  9. Już ostatnio zmieniłam sobie przyciski w ten sposób, ale Twoje kolorowe bardzo mi się podobają. Może niedługo je wykorzystam :)

    OdpowiedzUsuń
  10. Udało się :):) Przyciski gotowe!

    OdpowiedzUsuń
  11. No i cudnie! Byłam i sprawdziłam - są i pięknie działają:)

    OdpowiedzUsuń
  12. O widzisz! Tego jeszcze nie ogarnęłam, dzięki!

    OdpowiedzUsuń
  13. bardzo przydatne. Jak mnie najdzie dzień na dopieszczanie wizualne bloga to pewnie walnę sobie takie graficzne przyciski :)

    OdpowiedzUsuń
  14. O! Ten ostatni, granatowy wariant to chyba sobie przygarnę :D

    OdpowiedzUsuń
  15. Właśnie zastosowałam powyższe triki :) jesteś mistrzem , dziękuję. Jeśli chcesz ocenić to zapraszam http://modnania.blogspot.com/

    OdpowiedzUsuń
  16. Bardzo fajnie u Ciebie wyglądają!:)

    OdpowiedzUsuń
  17. Dziękuję za wszystkie porady! :)

    OdpowiedzUsuń
  18. Chociaż z tym wpisem mam problem. Zrobiłam ikony, wpisuje je w dobrym miejscu w kodzie, robię wszystko jak w Twoim, ale 'Strona Główna' nie chce się zmienić, hm...

    OdpowiedzUsuń
  19. Już działa! :) Oczywiście od ponad 30minut nie chciało:)

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