15 lutego 2016

Swój własny niepowtarzalny podpis


Ja bardzo często to wykorzystuje tworząc innym szablony. Nie jest to jakiś rodzaj reklamy, akurat w moim przypadku, ponieważ i tak pewnie nikt nawet w to nie klika. Mianowicie chodzi tu o takie małe cuś na dole ekranu (przeważnie), co ma za zadanie pokazać kto np. wykonał dany szablon. A więc jak to wygląda. A no może to wyglądać jak wam się tylko podoba. Krótka instrukcja jak powinniśmy zacząć a potem wybieramy swój typ podpisu.

I.
1. Wchodzimy w Edytuj kod HTML i szukamy za pomocą CTRL + F: </body>
2. Jak już znajdziemy </body> w kodzie, zaraz nad nim wklejamy to:
<div class='podpisik'>
Wykonała
<a class='li' href=' LINK DO WASZEGO BLOGA ' target='_blank'> WASZ NICK</a></div> 
3. Zapisujemy kod i przechodzimy do CSS. Teraz czeka was wybór, ponieważ ja znalazłam kilka już gotowych podpisików ((c)graphic-catchers-illusion) do was należy wybór, którego użyjecie.

(Po najechaniu zmienia się w kółko)
KOD:
.podpisik {
position:absolute;
width: 50px;
height:35px;
top:250px;
left:650px;
color:#555;
padding:10px;
background:orange;
border-radius:90% 90% 90% 0%;
font-family: verdana;
font-size: 9px;
text-align:center;
padding-top:25px;
line-height:14px;
letter-spacing: 0.5px;
z-index:300;
-moz-transition:all 2s;
-webkit-transition:all 2s;
-o-transition:all 2s;}
a.li:link,  a.li:visited, a.li:active{
font-size:9px;
text-decoration:none;
position:relative;
top:-5px;
text-transform:uppercase;
color:#111;
letter-spacing: 2px;
-moz-transition:all 2s;
-webkit-transition:all 2s;
-o-transition:all 2s;}
.podpisik:hover {
border-radius:90%;
transform:rotate(360deg);
-moz-transition:all 2s;
-webkit-transition:all 2s;
-o-transition:all 2s;
z-index:300;
background:#111;
color:#eee;}
a.li:hover {
font-size:12px;
color:#ccc;
-moz-transition:all 2s;
-webkit-transition:all 2s;
-o-transition:all 2s;}
II.
1. Wchodzimy w Edytuj kod HTML i szukamy za pomocą CTRL + F: </body>
2. Jak już znajdziemy </body> w kodzie, zaraz nad nim wklejamy to:
<div class='autor'><a href='ADRES BLOGA'>NASZ NICK</a></div>
3. Zapisujemy kod i przechodzimy do CSS.

.autor {position: fixed; bottom: 10px; left: 5px; width: 100px; text-align: center; background: #fff; text-transform: uppercase; letter-spacing: 2px; font-family: verdana !important; color: #666 !important; font-size: 8px !important; padding: 5px; box-shadow: inset 0px 0px 5px #999;}
Efekt:

Pasek na samym dole:

1. Nad </body> wklejamy:
  <div class='content-cap-bottom cap-bottom'>    <div class='cap-left'/>    <div class='cap-right'/>  </div><center><div class='ronnietworzy'><div style='letter-spacing:2px;color:#000000;font-size:8px;font-family:calibri;text-transform:uppercase;'>  SZABLON WYKONANY PRZEZ <a href='LINK DO BLOGA'>NICK</a></div></div></center>

Brak komentarzy:

Prześlij komentarz