Jakub Olszewski
Tworzymy Like Box w przygotowanym przez Facebook kreatorze
Następnie umieszczemy wygenerowany "Get Code" w kodzie poniżej
<div id="like-box"> <div class="outside"> <div class="inside"> <!-- TU WKLEJ WYGENEROWANY KOD NR 2 --> </div> </div> <div class="belt">facebook</div> </div>
W dalszej kolejności dopisujemy w stylu CSS:
/* glowny div z like box'em */
#like-box {
position: fixed;
z-index: 99;
top: 150px; /* jego polozenie od gory */
left: -296px; /* szerokosc wygenerowanego boxa + 4px obramowania */
-webkit-transition: left 0.5s ease-out;
-moz-transition: left 0.5s ease-out;
-o-transition: left 0.5s ease-out;
transition: left 0.5s ease-out;
}
/* wysuniecie like box'a */
#like-box:hover {
left: 0px;
}
/* zewnetrzna ramka boxa */
#like-box .outside {
position: relative;
z-index: 1;
background: #3b5999;
padding: 2px;
min-width: 1px;
float: left;
}
/* wewnetrzne tlo boxa */
#like-box .inside {
position: relative;
z-index: 2;
background: #fff;
}
/* pasek z logo FB */
#like-box .belt {
position: relative;
z-index: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
float: left;
width: 100px;
height: 40px;
padding: 7px 0px 0px 20px;
margin: 50px 0px 0px -55px;
background: #3b5999;
color: #fff;
font-weight: bold;
font-family: Verdana;
font-size: 16px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
