Plik css
#wysuwane
{
background: url(../../../images/fbpodklad.png) no-repeat scroll 0 0 transparent;
padding: 10px;
width: 235px;
height:402px;
position: fixed;
margin-top: -200px; /*połowa wysokości panelu w górę */
left: 0px;
top: 50%;
z-index:15;
}
.zamknij
{
background-position:-242px ;
}
plik HTML ( kod facebooka zaczyna się zaraz po <body> a konczy przed divem wrapper)
<?php
/**
* @copyright Copyright (C) 2005 - 2008 Open Source Matters. All rights reserved.
* @license GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/
defined('_JEXEC') or die('Restricted access');
?>
<?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/_system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/joomla.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/screen.css" type="text/css" />
<script <script type="text/javascript" src="templates/<?php echo $this->template ?>/js/likeit.js"></script>
<script type="text/javascript">
$(function(){
$("#wysuwane").css("left","-210px");
$("#wysuwane").hover(
function () {
$("#wysuwane").animate({left: "0px"}, 1000 );
$(this).addClass("zamknij");
},
function () {
$("#wysuwane").animate({left: "-210px"}, 1000 );
$(this).removeClass("zamknij");
}
);
});
</script>
<script type="text/javascript">
function _writenmail(nazwa, subdomena, domena, opis) {
var malpka = new String('%' + '4' + '0');
var kropka = new String('%' + '2' + 'E');
var czlon1 = new String('<a href="mailto:' + nazwa + malpka + subdomena + kropka + domena + '"');
var czlon2 = new String(' title="' + opis + '">' + opis + '</a>');
document.writeln(unescape(czlon1 + czlon2));
}
</script>
<title>Portfolio - Sebastian Sykała</title>
</head>
<body>
<div style="visibility:hidden;">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="http://www.facebook.com/apps/application.php?id=174109449301617" width="185" colorscheme="dark" show_faces="true" stream="false" header="false"></fb:like-box>
</div>
<div id="wysuwane">
<div id="wewnatrz" style="float:left;width:150px; display:block; margin-left:0px;">
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fa pps%2Fapplication.php%3Fid%3D174109449301617&width =185&colorscheme=dark&show_faces=true&stream=false &header=false&height=370" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:185px; height:370px;" allowTransparency="true"></iframe>
</div>
</div>
<div id="wrapper">
<h1 id="logo"><a href="http://www.sebastian-sykala.pl" title="PORTFOLIO - Kraków">Webdesign, tworzenie stron internetowych w Krakowie</a></h1>
<div id="top-menu">
<ul>
<li class="active"><a href="index.php?option=com_content&view=article&id=1"><span>Start</span></a></li>
<li><a href="index.php?option=com_contact&view=contact&id=1" title=""><span>Kontakt</span></a></li>
<li><a href="index.php?option=com_content&view=article&id=3" title=""><span>Portfolio</span></a></li>
<li><a href="index2.php?option=com_flippingbook&book_id=1" title=""><span>Galeria 3D</span></a></li>
</ul>
</div>
<div id="baner">
<jdoc:include type="modules" name="top" style=""/>
</div>
<div id="content">
<div id="lewe" class="lewe-menu">
<center><jdoc:include type="modules" name="left" style=""/></center>
</div>
<div id="srodek" class="srodek-menu"><jdoc:include type="component" /></div>
<div id="prawe">
<h3 class="h3-content">Szybki kontakt</h3><br />
<p><img src="http://status.gadu-gadu.pl/users/status.asp?id=6882862&styl=1">
<a href="gg:6882862"> <strong>Napisz do mnie</strong></a><br />
e-mail : <strong><script type="text/javascript">
_writenmail('sebastianxp', 'op', 'pl', 'Napisz do mnie')
</script></strong></p>
<jdoc:include type="modules" name="right" style=""/>
</div>
</div>
<div id="stopka">
<div id="stopka-text">Copyright © 2009-2010 PORTFOLIO - Sebastian Sykala All rights reserved.
<!-- stat.4u.pl NiE KaSoWaC -->
<a target=_top href="http://stat.4u.pl/?seboxp2202" title="statystyki stron WWW"><img src="http://adstat.4u.pl/s4u.gif" alt="stat4u" border="0" align="right"></a>
<script language="JavaScript" type="text/javascript">
<!--
function s4upl() { return "&r=er";}
//-->
</script>
<script language="JavaScript" type="text/javascript" src="http://adstat.4u.pl/s.js?seboxp2202"></script>
<script language="JavaScript" type="text/javascript">
<!--
s4uext=s4upl();
document.write('<img alt="stat4u" src="http://stat.4u.pl/cgi-bin/s.cgi?i=seboxp2202'+s4uext+'" width="1" height="1">')
//-->
</script>
<noscript><img alt="stat4u" src="http://stat.4u.pl/cgi-bin/s.cgi?i=seboxp2202&r=ns" width="1" height="1"></noscript>
<!-- stat.4u.pl KoNiEc -->
</div>
</div>
</div>
</body>
</html>