Jak dodać podpis do wszystkich postów na blogu!

12:33

Tego kodu szukałam od dawna. Znalazłam go TU i teraz tłumaczę i wyjaśniam najprościej jak się da. Można nim automatycznie dodać obraz podpis do każdego (starego i nowego) wpisu na blogu.

To bardzo proste! Każdy, nawet nie mający pojęcia o CSS ani html sobie z tym poradzi. Dla mnie ważne, że wystarczy to zrobić tylko raz, a podpis pojawia się automatycznie pod każdym wpisem. W każdym momencie możesz zmienić podpis i zostanie on automatycznie zaktualizowany pod wszystkimi postami. Grafika z podpisem nie ma ramek! To znaczy, że podpis nie będzie definiowany jak wszystkie zdjęcia na twoim blogu i nie zostaną mu przypisane ramki, jakie blogger dodaje do każdego obrazu na twoim blogu. I co równie fajne - jeśli masz dodany kod PIn IT BUTTON, o którym pisałam TU, nie musisz się martwić, że Twój podpis będzie można sobie przypiąć na Pinterest, gdyż zdjęcia dodane przez kod CSS są ignorowane przez PIN IT BUTTON! Fajnie co?

No to zaczynamy!

Krok 1
Wstaw swoje zdjęcie podpisu


Prześlij swoje zdjęcie podpisu do albumu Picasa Web na swoim blogu. Możesz to zrobić bardzo prosto tworząc Nowy Post na blogu. Ja swój zatytułwałam "Roboczy" i mam go w kopiach roboczych na swojej liście postów.

Nowy post --> Wstaw obraz --> Prześlij --> Wybierz pliki --> (po załadowaniu grafiki) Kopiuj adres URL grafiki.



po skopiowaniu URL, kliknij Anuluj, a następnie wklej adres pliku do okna posta. Nie zamykaj okna posta roboczego, będzie Ci jeszcze potrzebne.



Krok2
Dodaj CSS


Aby dodać kod CSS do swojego bloga, przejdź do szablonu --> Dostosuj --> Zaawansowane --> Dodaj arkusz CSS w Bloggerze.





Wklej poniższy CSS w polu "Dodaj niestandardowy arkusz CSS":


.Entry-content:after{
content:url(URL_OBRAZKA);
margin-left:250px;
}


Teraz, wymień URL_OBRAZKA na link obrazu z który masz w poście roboczym. Upewnij się, że udało Ci się skopiować i wkleić pełny adres URL w miejsce URL_OBRAZKA dokładnie między nawiasy ()

Oto wypełniony przykład:

.Entry-content:after{content:url(http://3.bp.blogspot.com/-vTXY1MvyQpo/UX5FYxPm-rI/AAAAAAAAfD0/7CIM58VriMA/s320/PODPIS.png);margin-left:250px;}

Margin-left 250px jest punktem wyjścia; zwiększ lub zmniejsz tę liczbę, aż Twój podpis będzie umieszczony dokładnie tam, gdzie chcesz by się pojawiał. Wszystko będzie widoczne na bieżąco w podglądzie bloga, to na pewno ułatwi Ci pracę.

Gdy wszystko wyświetla się jak należy, naciśnij przycisk "Zastosuj do bloga". Teraz możesz podziwiać swoją pracę - swój podpis pod każdym postem na blogu!

Jeśli masz jakiekolwiek pytania lub potrzebujesz pomocy - pisz śmiało, to dla mnie ogromna przyjemność wiedzieć, że czasem jestem komuś potrzebna :D

Do przeczytania

18 komentarze

  1. Dzięki kochana za instrukcję, kiedyś miałam taki podpis ustawiony ale kiedy zmieniałam szablony gdzieś mi to umknęło a potem zapomniałam jak to wstawić. Dziękuję :)

    OdpowiedzUsuń
  2. czemu mi to nie działa? :( zrobiłam wszystko zgodnie z instrukcją nawet dwa razy i nic się nie zmieniło.

    OdpowiedzUsuń
    Odpowiedzi
    1. Ciężko powiedzieć, coś musiało pójść nie tak. Podaj link do bloga.

      Usuń
  3. Ratunku!
    Dopiero zaczynam przygodę z blogowaniem i w sumie WSZYSTKO jest dla mnie nowe. Od kilku dni zaczytuję się na temat prowadzenia z blogiem. Obecnie utknęłam nad podpisaniem zdjęć. Chciałabym, żeby na każdym zdjęciu pojawiał się podpis, który już udało mi się zrobić za pomocą MyLiveSignature. Blog mam założony na Bloggerze. Będę Bardzo Wdzięczna za wszelką pomoc!

    OdpowiedzUsuń
  4. Wgrałam kiedyś za pomocą tego wyjaśnienia, ale teraz chciałabym usunąć i nie umiem :(

    OdpowiedzUsuń
    Odpowiedzi
    1. Chyba się udało, bo nie widzę Pinteresta na blogu ;)

      Usuń
  5. nie potrafię :\ ale i tak dziękuję bo bardzo jasno to wytłumaczyłaś ;)

    OdpowiedzUsuń
    Odpowiedzi
    1. Jeśli mam pomóc muszę wiedzieć na czym polega problem :/

      Usuń
  6. instrukcja super ale u mnie nie zadzialało :/ nie wiem dlaczego. Podpis powinien pojawić się na końcu pod postem przed komentarzami? prawda?

    OdpowiedzUsuń
  7. Niestety u mnie też nie działa, ma jakieś znaczenie,że mam włączone zawijanie tekstu ?

    OdpowiedzUsuń
    Odpowiedzi
    1. Proszę o screen z widokiem pola "Dodaj niestandardowy arkusz CSS", wtedy będę mogła cokolwiek więcej powiedzieć

      Usuń
  8. Hej, chciałam podziękować za ten post, udało mi się :) <3

    OdpowiedzUsuń
  9. A jeśli mogę coś powiedzieć, to musiałam poczynić pewne korekty w kodzie, są tam niepotrzebne spacje, pomogło też dodanie "after" zamiast "po" i zmiana wielkości liter.

    OdpowiedzUsuń
    Odpowiedzi
    1. Bardzo dziękuję JaMajka za info! Po edycji postu przez telefon wkradły się te spacje w kodzie. Już poprawiłam kod we wpisie. Jeszcze raz dzięki!

      Usuń
  10. Ten kod mi nie działa :( Wpisuję go, a nic się nie pojawia pod postem.

    OdpowiedzUsuń
  11. Wkradła Ci się literówka w postaci dużego "E" w kodzie. Po poprawieniu kod działa. Dzięki za wyjaśnienie krok po kroku :D

    OdpowiedzUsuń

Kropelka do kropelki

Twój 1% ma znaczenie!
Blogging tips