29.01.2014

Jak zrobić graficzne odnośniki odsyłające do postów oznaczonych daną etykietą lub podstron?

Dzisiaj notka specjalnie dla Eweliny i Sylwii :* Wczoraj próbowałam im wytłumaczyć jak zrobić graficzne odnośniki do danych etykiet na blogu a dzisiaj stwierdziłam, że po prostu zrobię o tym notkę. No to zaczynamy :)

Ja zawsze robię napisy do podstron jako grafika, bo w programie mam dużo większe pole manewru jeśli chodzi o czcionki niż w bloggerze.

1. Tworzymy grafikę, która ma nam się pokazywać na blogu i odsyłać do postów oznaczonych jedną etykietą. Posłużę się jedną zrobioną przeze mnie wcześniej. Umieszczamy ją na stronie do hostingu zdjęć i kopiujemy link, który jest do danej grafiki przypisany (w imageshack.com nazywa się to link bezpośredni lub w tej nowej wersji - Direct).


2. Kiedy już mamy gotową grafikę, przechodzimy do kodu. Link pokazujący nam się w pasku przeglądarki przy kliknięciu jakiejś etykiety to http://po-prostu-piekno.blogspot.com/search/label/nazwa etykiety. Spróbujcie kliknąć w jakąś etykietę u siebie na blogu i zobaczcie jak to działa :)

3. Przechodzimy do wstawiania danej grafiki z odsyłaczem na naszego bloga. W Projekcie -> Układ wybieramy "Dodaj gadżet" i klikamy "HTML/Java Script". Pojawia nam się okienko do uzupełnienia. Oczywiście nazwy nie wpisujemy żadnej, zostawiamy górne okienko puste.


4. W dolnym (większym okienku) wklejamy kod:

<a href="link odsyłający do postów z daną etykietą";"><img border="0" src="link obrazka odsyłającego " /></a>

Możemy również wzbogacić ten kod o wycentrowanie. Ja zawsze tak robię, ponieważ wyśrodkowane grafiki lepiej się prezentują niż takie wyrównane automatycznie do lewej strony. Kod wtedy wygląda tak: 

<center><a href="link odsyłający do postów z daną etykietą";"><img border="0" src="link obrazka odsyłającego " /></a></center>

Zapisujemy gadżet i gotowe :) Takim sposobem możemy zrobić zarówno pojedyncze grafiki jak i kilka obok siebie czy każdą pod sobą.

5. Jeśli chcemy zrobić kilka etykiet obok siebie (czyli coś na kształt menu pod nagłówkiem), musimy wkleić ten kod w jednym gadżecie obok siebie kilka razy, najlepiej oddzielając każdy kod kilkoma spacjami. Oczywiście każdy wklejony kod dostosujemy pod inną etykietę i wklejamy link do innego stworzonego przez nas obrazka odsyłającego.

 6. Jeśli chcemy zrobić kilka etykiet i każdą pod sobą po każdym kodzie musimy dać enter, którym w kodzie jest znacznik <br>. Jeden taki znacznik to jeden enter, możemy dać tyle ile nam się podoba a im więcej enterów, tym odstęp będzie większy :)

7. Tak samo tworzy się podstrony "kontakt", "współpraca" i podobne, tylko wtedy link do podstrony będzie wyglądał następująco: http://po-prostu-piekno.blogspot.com/p/nazwa podstrony.html. i taki wklejamy do kodu.

Mam nadzieję, że odrobinę Wam pomogłam. Dajcie znać w komentarzach czy udało Wam się stworzyć takie graficzne podstrony na swoim blogu  :)

20 komentarzy:

  1. Przydatny post. Zawsze kogoś prosiłam o pomoc, a teraz chcąc mieć etykiety sama będę mogła to zrobić ;)

    OdpowiedzUsuń
  2. Świetnie wszystko wytłumaczyłaś :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Bałam się właśnie, że czegoś mogłam nie wytłumaczyć zrozumiale, ale już się nie boję o to :)

      Usuń
  3. o jaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <3<3<3, post dla mnie. No po prostu BIG LOVE I kwiatuszki. Dziękujemy, że o nas myślisz :). I w ogóle skąd Ty takie rzeczy wiesz..., idź na jakiegoś komputerowca !!!

    OdpowiedzUsuń
    Odpowiedzi
    1. Taaaa ja i komputerowiec hahaha :D A o kim mam myśleć jak nie o Was? :*

      Usuń
  4. Po długiej przerwie w prowadzeniu bloga muszę wziąć się za mój szablonik, ale póki co to jeszcze odległa przyszłość, być może pomyślę nad tymi etykietami, wydaje się całkiem łatwe :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Nic w tym trudnego nie ma, naprawdę. No może oprócz decyzji przy tworzeniu grafik :)

      Usuń
  5. A jak zmienić grafikę w gadżetach? Najbardziej mnie interesuje jak pozbyć się np. Dołączysz do witryny... w Obserwatorach. Coś innego bym tam wstawiła. Podobnie jak spersonalizować Archiwum, Blogrolla. Pomożesz? ładnie proszę :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Chodzi Ci o zmianę tekstu na grafikę tak? Mogę zrobić o tym osobny post :) A jeśli chodzi o tą resztę zmian, to musiałabym się nieco bardziej w to wdrożyć, ale postaram się pomóc :)

      Usuń
  6. Bardzo przydatny post! Choć i tak ja mam gotowca od CIebie i już nic zmieniać nie chcę :D :*

    OdpowiedzUsuń
  7. Ciuum Ciuum! :***
    NAUCZĘ SIĘ TEGO, zobaczysz! :D

    OdpowiedzUsuń
  8. Hmmm... Nie wydaje się takie trudne jak myślałam... Chyba czas się zmobilizować w końcu i zabrać za wiosenne porządki na blogu :)
    Dzięki za instrukcje łopatologiczne- tego szukałam :D

    OdpowiedzUsuń
    Odpowiedzi
    1. Staram się wszystko dokładnie tłumaczyć, żeby nawet największy laik mógł zrozumieć :)

      Usuń
    2. Melduję, że nie taki diabeł straszny jak go malują! Porządki na blogu w toku i dzięki Tobie dałam radę :*

      Usuń
  9. jesteś cudowna! takie przydatne posty! :*
    dodaję do obserwowanych z wielką przyjemnością :*

    OdpowiedzUsuń
  10. Jesteś Wielka!!!! Cieszę się, że trafiłam na Twojego bloga, w naprawdę jasny sposób wszystko wytłumaczyłaś i przedstawiłaś <3

    OdpowiedzUsuń
  11. Mam problem z wybraniem odpowiedniego rozmiaru przy tworzeniu etykiet ;(

    OdpowiedzUsuń