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 .podpis { width: 160px; position: fixed; bottom: 10px; height: 20px; left: 10px; } .szablon, .autor { font-family: Verdana; padding: 2px; display: table-cell;; vertical-align: middle; transition: 0.5s; text-align: center; } .szablon { width: 80px; background: #e35e55; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #f5f4f0; } .autor { width: 82px; background: #e35e55; font-size: 9px; color: white; opacity: 0; } .podpis:hover .autor { transform: translateX(-80px); opacity: 1; background: #333f4d; transition: 0.5s; } .autor a { color: #a6ebe8; text-decoration: none; }	Szablon Zielony KociakMRUwisko .podpis { width: 150; height: 50px; position: fixed; left: 10px; bottom: 10px; overflow: hidden; } .szablon { background: #d7460f; color: white; width: 40px; padding-top: 15px; height: 25px; border-radius: 20px; font-size: 7px; font-family: Tahoma; text-align: center; text-transform: uppercase; letter-spacing: 1px; transition: 0.5s; } .autor { font-family: Tahoma; font-size: 9px; width: 70px; display: inline-block; position:relative; margin-top: -85px; margin-left: 50px; letter-spacing: 1px; color: white; opacity: 0; transition: 0.5s; } .autor a { color: #d7460f; text-decoration: none; transition: 0.4s; } .autor a:hover { color: #333f4d; transition: 0.4s; } .podpis:hover .autor { margin-top: -35px; opacity: 1; transition: 0.5s; } .podpis:hover .szablon { transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); transition: 0.5s; background: #333f4d; }	Szablon Zielony KociakMRUwisko .podpis { width: 190px; height: 25px; font-weight: normal; display: table-cell; bottom: 10px; right: -80px; position: fixed; overflow: none; } .szablon { height: 25px; background: black; display: table-cell; text-align: center; vertical-align: middle; color: silver; font-family: Times; font-size: 8px; text-transform: uppercase; letter-spacing: 1px; padding: 2px; text-align: center; width: 95px; transition: 0.8s; } .autor { background: grey; color: white; display: table-cell; width: 95px; height: 25px; vertical-align: middle; transform: translateX(-95px); border: 1px solid black; opacity: 0; letter-spacing: 2px; text-align: center; font-family: Times; font-size: 9px; margin-left: -20px; transition: 0.5s; } .autor a { color: silver; text-decoration: none; } .podpis:hover .szablon { box-shadow: inset 0px 30px 0px silver; color: black; background: grey; transition: 0.8s; } .podpis:hover .autor { box-shadow: inset 0px -30px 0px #1c1c1c; color: white; transition: 0.8s; opacity: 1; }

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! :)

Czytaj dalej >>