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
Ten nasz cudny kod kopiujemy i wklejamy tuż nad </body> . Najprościej jest kliknąć "CTRL + F" i wpisać po prostu szukane </body> .<div class="autor">
Anaya
<a class="li" href='http://zatracone-dusze.blogspot.com/' target='_blank'>zatracone-dusze</a></div>
Teraz czas na CSS.
Najlepiej jest w tym przypadku operować wartościami "padding-top" i "padding-bottom".
.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;
}
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".
W sumie to ja korzystałam z instrukcji Yass, ale ta też dobra :P
OdpowiedzUsuń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ńA ja nie umiałam znaleźć instrukcji Yass, ha!....Ale ta instrukcja, to niezły wstęp, dziękuję. :))
OdpowiedzUsuń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ńŚ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ńChodzi Ci o to, żeby był nieruchomy? Zamiast "position:relative" wpisz "position:fixed" i już :)
Usuń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.
OdpowiedzUsuńMoże ja już całkiem ślepa jestem, żadne okulary mi już nie pomogają. ;c
Trochę późno odpowiem, ale trudno. xD
UsuńSpróbuj w left dać np. -30px (przy position:fixed oczywiście). Powinno się wtedy wyświetlić. ;)
Bardzo przydatna instrukcja... Tylko, że mi też nie wyświetla się kółeczko ;c...
OdpowiedzUsuńZrobiłam wszystko zgodnie z instrukcją i nic... ;c