poniedziałek, 24 marca 2014

Swój własny, niepowtarzalny podpis

Dzisiaj przedstawię prosty sposób na swój własny podpis na szablonie. Jest to obecnie dość popularny zabieg. Wielu szabloniarzy umieszcza ten dodatek. Jest on bardzo praktyczny, a przy okazji nieco upiększa szablon (bynajmniej moim zdaniem).



Zacznijmy od napisania kodu, który umieścimy bezpośrednio w HTMLu

<div class="autor">
Anaya
<a class="li" href='http://zatracone-dusze.blogspot.com/' target='_blank'>zatracone-dusze</a></div>
 Ten nasz cudny kod kopiujemy i wklejamy tuż nad </body> . Najprościej jest kliknąć "CTRL + F" i wpisać po prostu szukane </body> .


http://funkyimg.com/i/GEGw.png

 No dobrze. Do dyspozycji mamy dwie klasy "autor" i "li". Będą one naszymi selektorami, żebyśmy mogli jakoś to upiększyć. Jak pewnie zauważyliście, dodałam zapis "target='_blank'". Dzięki temu nasz link będzie otwierał się w nowym oknie.

Teraz czas na CSS.

.autor {
position:relative; 
width: 90px;  /*szerokość widżetu*/
height:60px;  /*wysokość widżetu*/
background:#d38daf;
color:white;
font-family: 'georgia';
font-size:15px;
text-align:center;
border-radius:90px;
padding-top:20px;
padding-bottom:10px;
bottom:0px;
left:-630px;
}
Najlepiej jest w tym przypadku operować wartościami "padding-top" i "padding-bottom". 

a.li:link, a.li:hover, a.li:visited, a.li:active{font-family:'arial';font-size:8px;color:#611d3e;text-decoration:none;position:relative;top:-5px;text-transform:uppercase;}

Selektor "li" odpowiada za nasz link. W tym miejscu również możecie zaszaleć. Możecie zmienić czcionkę, jej kolor, wielkość. Za każdym razem może być inna.
Możecie szaleć do woli. Robić różne efekty. Albo zakręcić, albo ukryć, cuda niewidy i co tylko zapragniecie. Ja wolę prosty podpis, choć czasem zdarzy mi się wstawić tło obrazkowe :)


EDIT
Jeśli chcecie, aby wasz podpis był nieruchomy, zamiast "position:relative", wpiszcie "position:fixed". 

9 komentarzy:

  1. W sumie to ja korzystałam z instrukcji Yass, ale ta też dobra :P

    OdpowiedzUsuń
    Odpowiedzi
    1. Akurat z tej korzystam, więc pomyślałam, że warto napisać instrukcję. Również i w niej można zrobić wiele bajerów, jak np efekty po najechaniu itd ;p

      Usuń
  2. A ja nie umiałam znaleźć instrukcji Yass, ha!....Ale ta instrukcja, to niezły wstęp, dziękuję. :))

    OdpowiedzUsuń
    Odpowiedzi
    1. Nie wiedziałam nawet, że Yass taką instrukcję zrobiła xd Możliwe, że jest bardziej czytelna. Ja nie jestem niestety specem od HTMl'a, muszę się podszkolić, bo aż wstyd. Cieszę się, że instrukcja się przyda. Zawsze można dodać tutaj swoje efekty.

      Usuń
  3. Świetna instrukcja C: . Tylko mam pytanie, czy wiesz jak zrobić, żeby ten podpis nie był na samym końcu posta tylko, np. ruszał się w raz z postem? Jest mi to bardzo potrzebne, a nie wiem kompletnie jak to zrobić :c.

    OdpowiedzUsuń
    Odpowiedzi
    1. Chodzi Ci o to, żeby był nieruchomy? Zamiast "position:relative" wpisz "position:fixed" i już :)

      Usuń
  4. Wszystko super i w ogóle, ta instrukcja jest boska. <3 Zresztą jak wszystkie inne zamieszczone na tym blogu, ale ja nie wiem dlaczego to kółeczko mi się nigdzie nie wyświetla. Zrobiłam wszystko tak jak napisałaś w instrukcji, to nie wiem czemu mi się ono nie pokazuje.
    Może ja już całkiem ślepa jestem, żadne okulary mi już nie pomogają. ;c

    OdpowiedzUsuń
    Odpowiedzi
    1. Trochę późno odpowiem, ale trudno. xD
      Spróbuj w left dać np. -30px (przy position:fixed oczywiście). Powinno się wtedy wyświetlić. ;)

      Usuń
  5. Bardzo przydatna instrukcja... Tylko, że mi też nie wyświetla się kółeczko ;c...
    Zrobiłam wszystko zgodnie z instrukcją i nic... ;c

    OdpowiedzUsuń