Wysuwany pasek boczny facebook po najechaniu myszą

wersja skryptu MyBB: 1.6.9
adres forum: www.cs-wujkowo.pl
na czym polega problem (screen, opis, komunikaty):

Witam Serdecznie!

Chciałbym, aby ktoś mi opisał jak zrobić wysuwany pasek boczny facebook po lewej stronie po najechaniu na niego myszką. Czyli jak najadę na ten pasek boczny facebook to się sam już wysunie. Czyli coś takiego jak pasek boczny BanID na mojej stronce. Chce, aby on był po pasku BanID, tylko nie gdzieś 10/20 cm za tym paskiem bocznym tylko 2/3 cm chodzi mi dokładnie oto:



Wiem, jest dużo poradników na ten temat i wogóle, ale mi właśnie chodzi o wysuwaniu się tego pasku po najechaniu myszką..

Proszę o pomoc!

PS. Jeżeli nie ten dział to bardzo przepraszam!

Matslom napisał 13.02.2013, 21:21:
Przenosze do odpowiedniego działu.

Akcja "Pokochaj wyszukiwarkę"

https://webboard.pl/wiki.php?facebook-slider.html

Dobra, ale teraz mam zasadniczy błąd, który przed chwilką zauważyłem :/

Chodzi oto, że jak nie mam tego paska BanID (bocznego wysuwanego), to spokojnie mogę sobie kliknąć, gdy jestem zalogowany na strzałkę przy moim nicku:



A jeżeli mam ten BanID to wgl nie mogę na tą strzałkę kliknąć Jest na to jakiś sposób?

---

Dobra poradziłem sobie już z tym. Musiałem kod od banid wkleić na sam początek pliku index i teraz jest wszystko git. Tylko jeszcze mały problem co do tego paska bocznego facebook, a mianowicie wyskakuje mi coś takiego:



Zamiast, paska bocznego...

global.css:

body {
    background: #D3D6DE;

    color: #000;
        font: 13px arial,verdana,tahoma,sans-serif;

    text-align: center; /* IE 5 fix */

        margin: 0;
}
strong {
font-weight: bold;
}

.thead strong {
font-size: 13px;
}

a:link {
    color: #026CB1;

    text-decoration: none;
}

a:visited {
    color: #026CB1;

    text-decoration: none;
}

a:hover, a:active {
    color: #328586;

    text-decoration: underline;
}

#container {
    background: #fff;

    width: 87%;

    color: #000000;

    border: 1px solid #e4e4e4;

    margin: auto auto;

    padding: 20px;

    text-align: left;

box-shadow: 0 0 10px #787878;
}

#content {
    /* FIX: Make internet explorer wrap correctly */

    width: auto !important;
}

.menu {
    background: url(images/navigation.png) repeat-x scroll center bottom #323232;
    color: #FFFFFF;
    text-align: left;
    padding-top: 8px;
    height: 23px;
}

.menu a:link {
    padding: 8px;
    
    text-decoration: none;
}

.menu a:visited {
    color: #FFFFFF;
    padding: 8px;
    
    text-decoration: none;
}

.menu a:hover {
    background: #204066;
    color: #FFFFFF;
    padding: 8px;
    
    text-decoration: none;
}

#panel {
        height: 20px;

    font-size: 11px;

    padding: 8px;

background: url(images/user_navigation.png) repeat-x scroll 0 0 #0F3854;

color: #ffffff;
}

#panel .remember_me input {
    vertical-align: middle;

    margin-top: -1px;
}

#panel li {
list-style-type: none;
}

#panel ul {
margin: 0;
padding: 0;
}

#panel .active_menu {
    background-color: #ffffff;
    color: #000000;
    border-radius: 3px 3px 0 0;
    padding-top: 10px;
        padding-bottom: 13px;
    font-size: 13px;
}

table {
    color: #000000;

    font-family: Arial,Verdana,Tahoma,"Trebuchet MS",Sans-Serif,Georgia,Courier,"Times New Roman",Serif;

    font-size: 12px;
}

.tborder {
    width: 100%;

    margin: auto auto;
}

.thead {
    background: url(images/ipb/thead.png) repeat-x scroll center top #2C5687;

    color:#fff;    

        padding: 10px 10px 11px;

        font-size: 15px;

        font-weight: bold;    

-moz-border-radius:4px 4px 0 0;

-webkit-border-top-left-radius:4px;

-webkit-border-top-right-radius:4px;

border-radius:4px 4px 0 0;

-webkit-box-shadow:inset 0px 1px 0 #528cbc;

-moz-box-shadow:inset 0px 1px 0 #528cbc;

box-shadow:inset 0px 1px 0 #528cbc;

border-width:1px 1px 0 1px;

border-color:#316897;

border-style:solid;
}

.thead a:link {
    color: #ffffff;
    text-decoration: none;
}

.thead a:visited {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
}

.thead a:hover, .thead a:active {
    color: #ffffff;

    text-decoration: underline;
}

.tcat {
    background: #DBE2EC;

    color: #204066;

    font-size: 12px;

padding-bottom: 10px;

padding-top: 10px;
}

.tcat a:link {
    color: #000000;
}

.tcat a:visited {
    color: #000000;
}

.tcat a:hover, .tcat a:active {
    color: #000000;
}

.trow1 {
    background: #F7FBFC;
padding-top: 10px;
padding-bottom: 10px;
}

.trow1 {
    background: #F7FBFC;
padding-top: 10px;
padding-bottom: 10px;
border-top: 1px solid #F3F3F3;
}

.trow_shaded {
    background: #ffdde0;
}

.trow_selected td {
    background: #FFFBD9;
}

.trow_sep {
    background: #e5e5e5;

    color: #000;

    font-size: 12px;

    font-weight: bold;
}

.tfoot {
    background: none repeat scroll 0 0 #EBF0F3;
        padding-top: 10px;
        padding-bottom: 10px;
}

.tfoot a:link {
    color: #000000;

    text-decoration: none;
}

.tfoot a:visited {
    color: #000000;

    text-decoration: none;
}

.tfoot a:hover, .tfoot a:active {
    color: #ffffff;

    text-decoration: underline;
}

.bottommenu {
    background: url(images/ipb/thead.png) repeat-x scroll left 50% #1D3652;

    color: #ffffff;

    border-radius: 6px 6px 6px 6px;
        font-size: 10px;

    padding: 10px;
}

.bottommenu a:link, .bottommenu a:visited {
    color: #ffffff;
}

.navigation {
    color: #000000;

    font-size: 13px;

    font-weight: bold;
}

.navigation a:link {
    text-decoration: none;
}

.navigation a:visited {
    text-decoration: none;
}

.navigation a:hover, .navigation a:active {
    text-decoration: none;
}

.navigation .active {
    color: #878787;

    font-size: 13px;

    font-weight: bold;
}

.smalltext {
    font-size: 11px;
}

.largetext {
    font-size: 16px;

    font-weight: bold;
}

input.textbox {
    background: #ffffff;

    color: #000000;

    border: 1px solid #0f5c8e;

    padding: 1px;
}

textarea {
    background: #ffffff;

    color: #000000;

    border: 1px solid #0f5c8e;

    padding: 2px;

    font-family: Verdana, Arial, Sans-Serif;

    line-height: 1.4;

    font-size: 13px;
}

select {
    background: #ffffff;

    border: 1px solid #0f5c8e;
}

.editor {
    background: #f1f1f1;

    border: 1px solid #ccc;
}

.editor_control_bar {
    background: #fff;

    border: 1px solid #0f5c8e;
}

.autocomplete {
    background: #fff;

    border: 1px solid #000;

    color: black;
}

.autocomplete_selected {
    background: #adcee7;

    color: #000;
}

.popup_menu {
    background: #ccc;

    border: 1px solid #000;
}

.popup_menu .popup_item {
    background: #fff;

    color: #000;
}

.popup_menu .popup_item:hover {
    background: #C7DBEE;

    color: #000;
}

.trow_reputation_positive {
    background: #ccffcc;
}

.trow_reputation_negative {
    background: #ffcccc;
}

.reputation_positive {
    color: green;
}

.reputation_neutral {
    color: #444;
}

.reputation_negative {
    color: red;
}

.invalid_field {
    border: 1px solid #f30;

    color: #f30;
}

.valid_field {
    border: 1px solid #0c0;
}

.validation_error {
    background: url(images/invalid.gif) no-repeat center left;

    color: #f30;

    margin: 5px 0;

    padding: 5px;

    font-weight: bold;

    font-size: 11px;

    padding-left: 22px;
}

.validation_success {
    background: url(images/valid.gif) no-repeat center left;

    color: #00b200;

    margin: 5px 0;

    padding: 5px;

    font-weight: bold;

    font-size: 11px;

    padding-left: 22px;
}

.validation_loading {
    background: url(images/spinner.gif) no-repeat center left;

    color: #555;

    margin: 5px 0;

    padding: 5px;

    font-weight: bold;

    font-size: 11px;

    padding-left: 22px;
}

/* Additional CSS (Master) */
img {
    border: none;
}

.clear {
    clear: both;
}

.hidden {
    display: none;

    float: none;

    width: 1%;
}

.hiddenrow {
    display: none;
}

.selectall {
    background-color: #FFFBD9;

    font-weight: bold;

    text-align: center;
}

.float_left {
    float: left;
}

.float_right {
    float: right;
}

.menu ul {
    list-style: none;

    margin: 0;
}

.menu li {
    display: inline;

    padding-left: 5px;
}

.menu img {
    padding-right: 5px;

    vertical-align: top;
}

#panel .links {
    margin: 0;

    float: right;
}

.expcolimage {
    float: right;

    width: auto;

    vertical-align: middle;

    margin-top: 3px;
}

img.attachment {
    border: 1px solid #E9E5D7;

    padding: 2px;
}

hr {
    background-color: #000000;

    color: #000000;

    height: 1px;

    border: 0px;
}

#copyright {
    font: 11px Verdana, Arial, Sans-Serif;

    margin: 0;

    padding: 10px 0 0 0;
}

#debug {
    margin-top: 0;
}

blockquote {
    border: 1px solid #ccc;

    margin: 0;

    background: #fff;

    padding: 4px;
}

blockquote cite {
    font-weight: bold;

    border-bottom: 1px solid #ccc;

    font-style: normal;

    display: block;

    margin: 4px 0;
}

blockquote cite span {
    float: right;

    font-weight: normal;
}

blockquote cite span.highlight {
    float: none;

    font-weight: bold;

    padding-bottom: 0;
}

.codeblock {
    background: #fff;

    border: 1px solid #ccc;

    padding: 4px;
}

.codeblock .title {
    border-bottom: 1px solid #ccc;

    font-weight: bold;

    margin: 4px 0;
}

.codeblock code {
    overflow: auto;

    height: auto;

    max-height: 200px;

    display: block;

    font-family: Monaco, Consolas, Courier, monospace;

    font-size: 13px;
}

.subforumicon {
    border: 0;

    vertical-align: middle;
}

.separator {
    margin: 5px;

    padding: 0;

    height: 0px;

    font-size: 1px;

    list-style-type: none;
}

form {
    margin: 0;

    padding: 0;
}

.popup_menu .popup_item_container {
    margin: 1px;

    text-align: left;
}

.popup_menu .popup_item {
    display: block;

    padding: 3px;

    text-decoration: none;

    white-space: nowrap;
}

.popup_menu a.popup_item:hover {
    text-decoration: none;
}

.autocomplete {
    text-align: left;
}

.subject_new {
    font-weight: bold;
}

.highlight {
    background: #FFFFCC;

    padding-top: 3px;

    padding-bottom: 3px;
}

.pm_alert {
    background: #FFF6BF;

    border: 1px solid #FFD324;

    text-align: center;

    padding: 5px 20px;

    margin-bottom: 15px;

    font-size: 11px;
}

.red_alert {
    background: #FBE3E4;

    border: 1px solid #A5161A;

    color: #A5161A;

    text-align: center;

    padding: 5px 20px;

    margin-bottom: 15px;

    font-size: 11px;
}

.high_warning {
    color: #CC0000;
}

.moderate_warning {
    color: #F3611B;
}

.low_warning {
    color: #AE5700;
}

div.error {
    padding: 5px 10px;

    border-top: 2px solid #FFD324;

    border-bottom: 2px solid #FFD324;

    background: #FFF6BF;

    font-size: 12px;
}

div.error p {
    margin: 0;

    color: #000;

    font-weight: normal;
}

div.error p em {
    font-style: normal;

    font-weight: bold;

    padding-left: 24px;

    display: block;

    color: #C00;

    background: url(images/error.gif) no-repeat 0;
}

div.error.ul {
    margin-left: 24px;
}

.online {
    color: #15A018;
}

.offline {
    color: #C7C7C7;
}

.pagination {
    font-size: 11px;

    padding-top: 10px;

    margin-bottom: 5px;
}

.tfoot .pagination, .tcat .pagination {
    padding-top: 0;
}

.pagination .pages {
    font-weight: bold;
}

.pagination .pagination_current, .pagination a {
    padding: 2px 6px;

    margin-bottom: 3px;
}

.pagination a {
    border: 1px solid #81A2C4;
}

.pagination .pagination_current {
    background: #F5F5F5;

    border: 1px solid #81A2C4;

    font-weight: bold;

    color: #000;
}

.pagination a:hover {
    background: #F5F5F5;

    text-decoration: none;
}

.thread_legend, .thread_legend dd {
    margin: 0;

    padding: 0;
}

.thread_legend dd {
    padding-bottom: 4px;

    margin-right: 15px;
}

.thread_legend img {
    margin-right: 4px;

    vertical-align: bottom;
}

.forum_legend, .forum_legend dt, .forum_legend dd {
    margin: 0;

    padding: 0;
}

.forum_legend dd {
    float: left;

    margin-right: 10px;
}

.forum_legend dt {
    margin-right: 10px;

    float: left;
}

.success_message {
    color: #00b200;

    font-weight: bold;

    font-size: 10px;

    margin-bottom: 10px;
}

.error_message {
    color: #C00;

    font-weight: bold;

    font-size: 10px;

    margin-bottom: 10px;
}

.post_body {
    padding: 5px;
}

.post_content {
    padding: 5px 10px;
}

.quick_jump {
    background: url(images/jump.gif) no-repeat 0;

    width: 13px;

    height: 13px;

    padding-left: 13px; /* amount of padding needed for image to fully show */

    vertical-align: middle;

    border: none;
}

.repbox {
    font-size:16px;

    font-weight: bold;

    padding:5px 7px 5px 7px;
}

._neutral {
    background-color:#FAFAFA;

    color: #999999;

    border:1px solid #CCCCCC;
}

._minus {
    background-color: #FDD2D1;

    color: #CB0200;

    border:1px solid #980201;
}

._plus {
    background-color:#E8FCDC;

    color: #008800;

    border:1px solid #008800;
}

.pagination_breadcrumb {
    background-color: #f5f5f5;

    border: 1px solid #fff;

    outline: 1px solid #ccc;

    padding: 5px;

    margin-top: 5px;

    font-weight: normal;

    white-space: nowrap;
}

.pagination_breadcrumb_link {
    vertical-align: middle;

    cursor: pointer;
}

#search {
    color: #556b85;
    font-size: 0.85em;
    margin: 20px 20px auto auto;    
    position: relative;
    right: 0px;
    float: right;
display: block;
}

#search .submit_input {
    background: url(images/ipb/search_icon.png) no-repeat;
    text-indent: -3000em;
        width: 26px;
        height: 26px;
        border: 0;
    padding: 0;
    float: left;
-webkit-box-shadow:0px 2px 4px rgba(0,0,0,0.2);
-moz-box-shadow:0px 2px 4px rgba(0,0,0,0.2);
box-shadow:0px 2px 4px rgba(0,0,0,0.2);
}

#search input#main_search {
    padding-top: 3px;
        padding-left: 3px;
    border: 0;
    width: 230px;
    background-color: #fff;
color: #ACA899;
}

#search_wrap {
background: #fff;
float: left;
height: 24px;
width: 233px;
padding: 1px 5px 0 0;
border: 0;
-moz-border-radius:3px 4px 4px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
-webkit-border-bottom-left-radius:3px;
border-radius:3px 0px 0px 3px;
-webkit-box-shadow:0px 2px 4px rgba(0,0,0,0.2);
-moz-box-shadow:0px 2px 4px rgba(0,0,0,0.2);
box-shadow:0px 2px 4px rgba(0,0,0,0.2);
}

#adv_search {
    width: 25px;
    height: 20px;
    margin: 3px;
    background: url(images/ipb/advanced_search.png) no-repeat 50%;
    text-indent: -3000em;
    float: left;
    display: inline-block;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

#adv_search:hover {
    background-color: #2b4f74;
}

input.button {
height:22px;
line-height:22px;
font-size:12px;
padding:0 10px;
background:#f6f6f6;
background: -moz-linear-gradient(top, #f6f6f6 0%, #e5e5e5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#e5e5e5));
border:1px solid #dbdbdb;
-moz-box-shadow:0px 1px 0px rgba(255,255,255,1) inset, 0px 1px 0px rgba(0,0,0,0.3);
-webkit-box-shadow:0px 1px 0px rgba(255,255,255,1) inset, 0px 1px 0px rgba(0,0,0,0.3);
box-shadow:0px 1px 0px rgba(255,255,255,1) inset, 0px 1px 0px rgba(0,0,0,0.3);
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
color:#1D3652;
display:inline-block;
padding-bottom: 2px;
white-space:nowrap;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
cursor: pointer;
}

input.button:hover {
color:#3D70A3;
border-color:#9a9a9a;
}

.button {
height:22px;
line-height:22px;
font-size:12px;
padding:0 10px;
background:#f6f6f6;
background: -moz-linear-gradient(top, #f6f6f6 0%, #e5e5e5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#e5e5e5));
border:1px solid #dbdbdb;
-moz-box-shadow:0px 1px 0px rgba(255,255,255,1) inset, 0px 1px 0px rgba(0,0,0,0.3);
-webkit-box-shadow:0px 1px 0px rgba(255,255,255,1) inset, 0px 1px 0px rgba(0,0,0,0.3);
box-shadow:0px 1px 0px rgba(255,255,255,1) inset, 0px 1px 0px rgba(0,0,0,0.3);
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
color:#1D3652;
display:inline-block;
padding-bottom: 2px;
white-space:nowrap;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
cursor: pointer;
}

.button:hover {
color:#3D70A3;
border-color:#9a9a9a;
}

#register_link {
    background: none repeat scroll 0 0 #7BA60D;
    border: 1px solid #7BA60D;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 4px rgba(0, 0, 0, 0.4);
    color: #FFFFFF;
    display: inline-block;
    padding: 3px 8px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.bakgrand {
background: #000000;
border-radius: 6px 6px 6px 6px;
padding: 4px;
font-size: 9px;
}

.forumsborder {
background-color: #EBF0F3;
padding: 10px 5px 8px;
margin-bottom: 20px;
}

#ipb_stats ul {
    text-align: center;
}

#ipb_stats li {
    display: inline;
    font-size: 12px;
    background: #E2E2E2;
    color: #4A4A4A;
    padding: 2px 6px;
    font-weight: bold;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    margin-right: 3px;
}

#ipb_stats_online {
    margin: 20px 0 0 0;
    padding: 10px 0;
    border-top: 3px solid #D8D8D8;
    font-size: 12px;
    color: #777;
}

.ipb_stats_onlineNav {
    font-size: 14px;
    font-weight: bold;
}

.ipb_stats_onlineLinks li {
    float: right;
    font-size: 12px;
    display: inline;
    margin: 5px;
}

#footer {
padding: 10px;
}

.footer_links a {
font-size: 11px;
padding: 4px 10px;
float: left;
margin: 0 3px;
}

.footer,
.footer a {
font-size: 11px;
text-shadow: 0px 1px 0px white;
float: right;
color: #848484;
}
#menu_user_menu_popup
{
margin-top: -9px;
border-radius: 0 0 5px 5px;
background: #ffffff;
min-width: 340px;
padding: 10px;
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.58);
}
.panelImage {
height: 49px;
width: 49px;
vertical-align: middle;
border: 1px solid #D5D5D5;
position: relative;
float: left;
}
.ver_sub {
margin: 0;
padding: 0;
list-style: none;
}
.ver_sub li {
width: 100%;
float: left;
}    
.tablehead { padding: 5px 10px; background: #026CB1 url(images/thead_bg.gif) repeat-x; border: solid 1px #026CB1; border-radius: 5px 5px 0 0; font: 16px Arial, sans-serif; color: #FFF; }
.tablehead .right { float: right; margin: 0; padding-top: 1px; font-size:  13px; }
.tablehead a { color: #FFF !important; text-decoration: none; }

#shoutbox_data { font: 13px Arial, sans-serif; }
#shoutbox { margin-bottom: 5px; }
#shoutbox .panel { padding: 2px; }
#shoutbox .panel-blocked { margin: 1px 0; padding: 5px; background: #FCEFEF; font-size: 11px; color: #543A3A; }
#shoutbox .panel-away { margin: 1px 0; padding: 5px;  background: #EDEDED; font-size: 11px; color: #7A7A7A; }
#shoutbox .panel-away button { margin-right: 5px; padding: 5px; font-family: Tahoma, sans-serif; color: #FFF; font-size: 11px; font-weight: bold; text-align: center; text-shadow: 0 -1px 0 #297318; border-radius: 5px; background: #962725; border: none; border-radius: 3px; }
#shoutbox .trow1 { background-color: #FFF; }
#shoutbox .panel-minposts { margin: 1px 0; padding: 5px; background: #FFFED8; font-size: 11px; color: #727250; }
img#dvz_sb_loading { position: relative; top: 3px; left: 5px; }
input#shout_text { margin-right: 2px; padding: 5px 6px 6px 6px; width: 90%; background: #FFF; border: 1px solid #898989; border-radius: 2px; font-family: Tahoma, sans-serif; font-size: 12px; color: #000; }
input#shout_button { padding: 5px; font-family: Tahoma, sans-serif; color: #FFF; font-size: 11px; font-weight: bold; text-align: center; text-shadow: 0 -1px 0 #297318; border-radius: 5px; background: #499338; border: solid 1px #499338; border-radius: 3px; }
#shoutbox .trow1 { background-color: #FFF; }
#shoutbox .trow2 { background-color: #FAFAFA; }
.sbentry { padding: 0; }
#shoutbox .userdata { margin: 0; padding: 6px; float: left;  text-align: right; }
#shoutbox .text { margin: 0; padding: 6px; color: #333333; }
#shoutbox .insUser { cursor: pointer; color: #AAAAAA; }
#shoutbox .info { float: right; margin-top: 5px; margin-right: 5px; font-size: 11px; color: #888888; }
#shoutbox .info .date { margin-right: 5px; }
#shoutbox .info .ip { margin-right: 5px; color: #CECECE; }
#shoutbox .mod { padding: 2px 5px; background: #333333; border-radius: 3px; font-size: 10px; font-weight: bold; color: #FFF; text-decoration: none; }
#shoutbox .dvz_sb_del { background-color: #6B0100; }
#shoutbox img.avatar { float: left; display: inline-block; margin-top: -1px; margin-right: 5px; max-height: 16px; max-width: 16px; border: solid 1px #FFF; box-shadow: 0 0 2px #E0E0E0;
}    
* {    margin:0;
    padding:0;
    }
#facebook_slider
{
    background: #3B5997;
    padding: 10px;
    width: 232px;
    height:420px;  
    position: fixed;
    margin-top: -100px;
    left: 0px;
    top: 25%;
}

.fb_slider_slide_button
{
    background: url(przycisk.gif);
    display: block;
    height: 112px;
    text-indent: -9999px;
    width: 27px;

    position: absolute;
    right: -27px;
    top: 0px;
}

.fb_slider_close
{
    background-position: -20px 0px;
}

headerinclude:

<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}{$stylesheets}<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script type="text/javascript">
jQuery(function(){

    jQuery("#facebook_slider").css("left","-252px");

jQuery("#facebook_slider").hover(function(){

        jQuery("#facebook_slider").stop().animate({left: "0px"}, 500 );
        jQuery(this).addClass("fb_slider_close");
        return false;
    },
    function(){    
        jQuery("#facebook_slider").stop().animate({left: "-252px"}, 500 );
        jQuery(this).removeClass("fb_slider_close");
        return false;
    });

});
    </script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
<!--
    lang.no_new_posts = "{$lang->no_new_posts}";
    lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
</head>
<body>
{$header}{$dvz_shoutbox}
{$forums}
{$boardstats}
<br style="clear: both" />
{$footer}
</body>
</html>

index:

<script src="http://code.jquery.com/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="http://banid.pl/banid-widget.js" type="text/javascript"></script>
<link href="http://banid.pl/banid-widget.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
    banidwidget.init({
        side: 'left',
        action: 'hover',
        border: 'white'
    });
</script>
<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
    lang.no_new_posts = "{$lang->no_new_posts}";
    lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
</head>
<body>
{$header}
<div id="facebook_slider">

<iframe scrolling="no" frameborder="0" src="http://www.facebook.com/connect/connect.php?id=127702277393842&connections=10&stream=0&css=http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/pl_PL" allowtransparency="true" style="border: none; width: 230px; height: 400px;"></iframe>

    <a href="#" class="fb_slider_slide_button" >FB</a>

</div>
<iframe src="http://cs-wujkowo.pl/status.php" width="100%" height="170" frameborder="0" scrolling="no"/></iframe>
<table border="0" width="100%" cellspacing="0" cellpadding="0" align="center">
{$dvz_shoutbox}
<td class="thead" colspan="2">
<center>Partnerzy/Sponsorzy</center>
</td>
<tr>
<td class="tcat"><center><b><font color="#000000">Nasi partnerzy oraz sponsorzy</font></b></center></td>
<td class="tcat"><center><b><font color="#000000">Informacje</font></b></center></td>
</tr>
<tr>
<td class="tcat">&nbsp&nbsp<a href="http://www.hekko.pl/?ref=34111" title="Tanie domeny"><img src="http://www.ad.hekko.pl/9_tani_hosting_www.jpg" /></a></td>
<td class="tcat"><center><font size="2"><b>Hekko.pl</b> - Sponsor domeny oraz hostingu forum</font></center></td>
</tr>
<tr>
<td class="tcat">&nbsp&nbsp<a href="http://gameserv.pl" target="_blank"><img src="http://gameserv.pl/reklama/bannery/06.jpg" border="0"></a></td>
<td class="tcat"><center><font size="2"><b>GameServ.pl</b> - Sponsor serwera 4FUN i COD</font></center>
</tr>
<tr>
<td class="tcat"><a href="http://fpsmax.pl/"><img src="http://imageshack.us/a/img201/1825/logoaap.png" alt="FPSMax.pl" /></a></td>
<td class="tcat"><center><font size="2"><b>FPSMax.pl</b> - Sponsor serwera DM</font></center></td>
</tr>
<tr>
<td class="tcat">&nbsp&nbsp<a href="http://www.idel.pl/?ref=34111" title=""><img src="http://idel.pl/tmp/logo.png" /></a></td>
<td class="tcat"><center><font size="2"><b>iDel.pl</b> - Sponsor hostingu dodatków do serwera</font></center></td>
</tr>
</td>
</table>
<a class="sbp_buton" style="float: right;" title="{$lang->sbplus_sidebarkapat}"></a>
<a class="sbp_tbuton" style="float: right;" title="{$lang->sbplus_sidebarac}"></a>
<div class="sbp_sbar" style="float: right;width: 25%;">
    {$sb_welcome}{$sb_search}{$sb_latestthreads}{$sb_additional}{$sb_whosonline}{$sb_stats}
</div>
<div class="sbp_forum" style="float: left;width: 74%;">
{$forums}<dl class="forum_legend smalltext">
    <dt><img src="{$theme['imgdir']}/on.gif" alt="{$lang->new_posts}" title="{$lang->new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
    <dd>{$lang->new_posts}</dd>

    <dt><img src="{$theme['imgdir']}/off.gif" alt="{$lang->no_new_posts}" title="{$lang->no_new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
    <dd>{$lang->no_new_posts}</dd>

    <dt><img src="{$theme['imgdir']}/offlock.gif" alt="{$lang->forum_locked}" title="{$lang->forum_locked}" style="vertical-align: middle;" /></dt>
    <dd>{$lang->forum_locked}</dd>
</div>
</dl>
<br style="clear: both" />
{$footer}
</body>
</html>

Oczywiście plik przycisk.gif wkleiłem do folderu images oraz wkleiłem ten sam plik tylko, że z końcówką .png, czyli przycisk.png, ponieważ w tym poradniku pisze o .png, a w paczce był plik .gif.

Proszę sprawdzić co zrobiłem źle, ponieważ sprawdzałem to 2x i nic