10# Podpis na szablonie

Cześć wszystkim!
Tym razem post na życzenie Fantazji, która prosiła o tę instrukcję od jakiegoś czasu. Pokażę Wam jak wykonać własny, niepowtarzalny podpis na szablonie, który z pewnością ułatwi nie tylko reklamę Twojego bloga, ale również sprawi, że osoby, którym do tej pory zdarzyło się zapomnieć o dodaniu linka szabloniarni, z której pobrały szablon na bloga będą miały kłopot z głowy. Na końcu notki znajdziecie również kilka gotowców! Za pomoc z ogarnięciem tego bardzo dziękuję niezastąpionej Lizz Kaviste. <33 br="">

Efekt, który uzyskamy:

Szablon
Zielony Kociak
MRUwisko


Nie przedłużając już... Przejdźmy do zasadniczych rozważań nad dzisiejszym tematem.

Krok 1 - HTML

Zaczynamy od kliknięcia w naszym panelu administracyjnym bloga na szablon > Edytuj kod HTML. Zakładając, że nasz podpis umieścimy pod stopką bloga, na samym dole wyszukujemy w kodzie </footer>, by tuż pod nim wkleić następujący kod:

<div class="podpis">
    <div class="szablon">
        <span>Szablon</span>
    </div>
    <div class="autor">
        <span>nick autora<br/><a href="adres bloga">nazwa bloga</a></span>
    </div>
</div>

Krok 2 - CSS

Po stworzeniu szkieletu naszego podpisu przechodzimy ponownie do sekcji Szablon > Dostosuj > Zaawansowane > Dodaj arkusz CSS.
Tam też możemy nadać mu styl. W przypadku podanego powyżej przykładu kod prezentuje się następująco:

.szablon, .autor {
  font-family: Arial;
  font-size: 8px;
  text-transform: uppercase;
  width: 90px !important;
  overflow: hidden;
  vertical-align: middle;
  text-align: center;
  display: block;
  padding: 6px;
  transition: 0.5s;
}

.podpis:hover .autor {
  transform: translateY(-100%);
  transition: 0.5s;
}

.szablon {
  background-color: #2a2a2a;
  z-index: 1!important;
  color: #d8d8d8;
   height: 20px;
  padding-top: 20px;
}

.autor {
  background-color: #206700;
  color: silver;
  z-index: -1;
  transform: translateY(0%);
  height: 25px;
  padding-top: 15px;
}

.autor a {
  color: #a5d463;
  text-decoration: none;
}

.podpis  {
    width: 90px;
    height: 25px;
    z-index: 1;
    overflow: hidden;
    padding: 20px;
    text-align: center;
    letter-spacing: 1px;
    font-size: 8px;
}

Krok 2 i 1/2 - opcjonalny CSS

Aby nasz przycisk był jeszcze bardziej widoczny możemy ustawić go nieruchomo w dowolnej części bloga. Żeby to zrobić wklejamy jeden z poniższych kodów do naszego arkuszu CSS.

LEWY DOLNY RÓG
.podpis {
    position: fixed;
    bottom: 5px; 
    left: 5px;
}

LEWY GÓRNY RÓG
.podpis {
    position: fixed;
    top: 5px;   
    left: 5px;
}

PRAWY DOLNY RÓG
.podpis {
    position: fixed;
    bottom: 10px;
    right: 10px;
}

PRAWY GÓRNY RÓG
.podpis {
    position: fixed;
    top: 10px; 
    right: 10px;
}
Pogrubione w powyższych kodach wartości określają odległość naszego podpisu od krawędzi strony.

GOTOWCE

Poniżej zamieszczam kilka gotówców. Mam nadzieję, że będą dla Was inspiracją i okażą się być przydatne. :) Zawierają one jedynie CSS, żeby ich użyć należy powtórzyć krok pierwszy.

Szablon
Zielony KociakMRUwisko


Szablon
Zielony KociakMRUwisko
Szablon
Zielony KociakMRUwisko



Uh, muszę przyznać, że to chyba jeden z moich najbardziej pracochłonnych postów. Kompletnie nie miałam pomysłów na efekty i dopiero dziś i wczoraj dotknęła mnie wena. Udało mi się coś niecoś wymodzić... Mam nadzieję, że instrukcja przypadła Wam do gustu. Zapraszam do opiniowania posta w komentarzach i obserwowania mojego bloga. Zajrzyjcie również koniecznie na bloga Lizz Kaviste! :)

27 komentarzy:

  1. Wow! Kolejna super pomocna instrukcja! Z pewnością niebawem (kiedy już trochę podszkolę się w kodowaniu) z niej skorzystam ;)
    Pozdrawiam.
    I.

    OdpowiedzUsuń
    Odpowiedzi
    1. Bardzo dziękuję za komentarz! :) Jeśli natomiast chodzi o kodowanie - zapraszam na swojego maila lub GG, chętnie udzielę wskazówek. :)
      Pozdrawiam!

      Usuń
  2. Dzięki serdeczne, już od jakiegoś czasu tego szukałam :D. Na pewno skorzystam!

    OdpowiedzUsuń
    Odpowiedzi
    1. Proszę bardzo. :) Nie mogę doczekać się efektów, bo kto jak kto, ale Ty potrafisz z każdej instrukcji wymodzić coś ciekawego. ^^

      Usuń
  3. O, jakie świetne, pewnie kiedyś mi się przyda :D W ogóle genialne rzeczy tutaj publikujesz, miałam napisać wcześniej, ale ciągle jakoś mi to wypadało lmao :')

    OdpowiedzUsuń
    Odpowiedzi
    1. Bardzo dziękuję za komentarz. ;3 Mam nadzieję, że coś stąd Ci się przyda. ;>

      Usuń
  4. Genialna notka! ♥
    Naprawdę bardzo mi się przyda ;d Bo szukałam takiej instrukcji, gdyż nie miałam pojecia jak to zrobić <3

    Pozdrawiam :*

    OdpowiedzUsuń
    Odpowiedzi
    1. Baaardzo dziękuję za komentarz. :D Nie mogę się doczekać aż zobaczę efekty. :)

      Usuń
  5. O jejku! Ale cudowna instrukcja! Nawet nie wiesz, że spadłaś mi własnie z nieba ♥ Tyle myślałam jak zrobić coś podobnego, a tu proszę :3
    Super post!
    Pozdrawiam!

    OdpowiedzUsuń
    Odpowiedzi
    1. Dziękuję za komentarz! :3 Cieszę się, że instrukcja przypadła do gustu i szczerze mam nadzieję, że okaże się być przydatna. ;D

      Usuń
  6. Dzięki za instrukcje ! Na pewno się przyda :)

    OdpowiedzUsuń
    Odpowiedzi
    1. To ja dziękuję za komentarz. ;3

      Usuń
    2. TO DZIAŁA !!! :D Jeszcze raz ogromne podziękowania za instrukcję ♥ Właśnie umieściłam podpis na moim najnowszym szablonie i jest pięknie ! Wcześniej znalazłam gdzieś jakąś instrukcję, ale nie działała a ta działa perfekcyjnie !

      Usuń
  7. Nie będę gorsza bo wyjdzie zaraz, ze komentuje ostatnia, a ten post jest moj ._.

    Chwała ci za ten post, dobrze wiemy ze ludzie sa leniwi -my tez- ale zdecydowanie szybciej będzie dorobić taki fajny podpis niż, zeby zamawiający martwil sie ze button czy link nie będzie mu pasował, a tak to mamy fajne... Ba zajebiste rozwiazanie :)
    Nie moge sie doczekac, az wejdę do domu, zrobię szablon i dodam podpisik ^^

    Wiecej takich instrukcji xx

    OdpowiedzUsuń
    Odpowiedzi
    1. SKOMENTOWAŁAŚ JAKO SIÓDMA, A TO TWÓJ POST. Przyznam, że kilka razy już niemal zrezygnowałam z pisania tego, bo kompletnie nie miałam pomysłu na fajne efekty, a jak miałam to nie umiałam sobie z tym poradzić. Chwała Lizz, że znalazła dla mnie czas i pomogła mi to ogarnąć. ;D

      Byndzie więcej!
      Dziękuję za komcia. ;3

      Usuń
    2. Wybacz mi ten błąd ;-; usuń reszte i bede pierwsza ;D

      Usuń
  8. Przydatna instrukcja skorzystam :D
    Chociaż podpis już mam,ale i tak zamierzam poprawić efekt:)

    OdpowiedzUsuń
    Odpowiedzi
    1. Zachęcam do zabawy z tymi efektami, bo naprawdę mozna coś ciekawego wymodzić. :)
      Dziękuję za komentarz~!

      Usuń
  9. Genialna instrukcja! Bardzo przydatna :888

    OdpowiedzUsuń
  10. Na pewno będę z niej korzystała! (Poprawię swój napis xd) Zapewniam ci to Kociaku ^^

    OdpowiedzUsuń
    Odpowiedzi
    1. Poprawiaj, poprawiaj. Po to są instrukcje żeby z nich korzystać. ;3

      Usuń
  11. A może kiedyś stworzyłabyś posta o komentarzach? Jakieś ciekawe efekty dla profilówek w nich. Np, jak zrobić, aby były po prawej, a nie lewej stronie? O, albo ładne efekty dla "odpowiedz" "usuń". :3 Bo jak mi już jakiś szablon wyjdzie, to potem jak patrze na te komentarze, takie zwykłe... psują mi efekt. :( Ale to tylko propozycja!
    Pozdrawiam. :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Już myślałam nad takim postem, a Twój komentarz z pewnością mnie do tego zachęcił. :) Poeksperymentuję trochę z komentarzami i z pewnością w przyszłości pojawi się taka instrukcja! ^^

      Usuń
  12. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  13. Co ty na to aby pojawiła się instrukcja na efekty obrazków w poście? Używałam filtrów typu czarno-biały czy rozmazanie...ale kiedy używam tego w kółko i w kółko, to robi się to zbyt monotonne i nudne. :(

    OdpowiedzUsuń

statystyka

Archiwum bloga

Obserwatorzy