Przerobienie kodu tak aby działał .

wersja skryptu MyBB:1.6.11
adres forum:http://cs-dziobaczek.eu
na czym polega problem (screen, opis, komunikaty):


Cześc mam problem otóż zrobiłem wysuwane Slidery Facebook i Youtube po czym umieściłem je na stronie w index. Moje pytanie jest takie jak przerobić te kody zeby z siebie nie korzystały ponieważ są bardzo podobne i nie działają ze sobą, tylko pojedynczo.

<!---FACEBOOK--->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css" media="screen">
.slide-out-div {
position: relative;
padding: 5px;
width: 300px;
height: 570px;
background: #f2f2f2;
border: #29216d 0px solid;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://3tool.eu/slider/jquery.tabSlideOut.v1.3.js"></script>
<script>
$(function(){
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle',
pathToTabImage: 'http://cs-dziobaczek.eu/button_fb.png',
imageHeight: '50px',
imageWidth: '50px',
tabLocation: 'right',
speed: 300,
action: 'hover',
topPos: '280px',
leftPos: '280px',
fixedPosition: true
});
});
</script>



<div class="slide-out-div">
<a class="handle" href="">Content</a>
<a href="#"></a><img style="position: absolute; left:-33px;">
<iframe id="fr" src="https://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FCs-Dziobaczekeu%2F148577418656810%3Ffref%3Dts&width&height=590&colorscheme=light&show_faces=true&header=true&stream=true&show_border=true" style="overflow: hidden; height: 570px; width: 300px; border: 0;" scrolling="no" frameBorder="0"></iframe>
<!---END FACEBOOK---> 


<!---YOUTUBE--->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css" media="screen">
.slide-out-div {
position: relative;
padding: 5px;
width: 299px;
height: 105px;
background: #f2f2f2;
border: #29216d 0px solid;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://3tool.eu/slider/jquery.tabSlideOut.v1.3.js"></script>
<script>
$(function(){
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle',
pathToTabImage: 'http://cs-dziobaczek.eu/YT.png',
imageHeight: '50px',
imageWidth: '53px',
tabLocation: 'right',
speed: 300,
action: 'hover',
topPos: '340px',
leftPos: '340px',
fixedPosition: true
});
});
</script>

<div class="slide-out-div">
<a class="handle" href="">Content</a>
<a href="#"></a><img style="position: absolute; left:-33px;">
<iframe id="fr" src="http://www.youtube.com/subscribe_widget?p=szymon6684" style="overflow: hidden; height: 105px; width: 300px; border: 0;" scrolling="no" frameBorder="0"></iframe>
</div>
<!---END YOUTUBE---> 


Spróbuj tego. U mnie fajnie działa i można sobie modyfikować zawartość dowolnie.
http://katmpbsoft.blogspot.com/2012/03/f...be-nk.html

Wstawiłem ten co mi poleciałeś ale się nie wysuwa.

Wysuwa się.