Po lewej stronie mojego bloga znajduje się wysuwane okienko facebooka, dzięki któremu automatycznie można polubić moją stronę. Jak dodać taki gadżet na bloga?
1. Wchodzimy w projekt bloga, naciskamy "szablon" a następnie "edytuj kod HTML"
2. Wciskamy na klawiaturze ctrl + f aby wyświetlić okienko do wyszukiwania
3. Wyszukujemy frazę </head>
4. Nad </head> wpisujemy następujący kod:
<style
type="text/css">
#wys
{
background: url("http://dl.dropbox.com/u/106645823/facebook.png") no-repeat scroll 0 0 transparent;
padding: 10px;
width: 235px;
height:402px;
position: fixed;
margin-top: -100px; /*połowa wysokości panelu w górę */ left: 0px;
top: 50%;
}
.zamknij
{
background-position: 0px 0px -242px 0px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#wys").css("left","-216px");
$("#wys").hover(
function () {
$("#wys").animate({left: "0px"}, 400 );
$(this).addClass("zamknij");
}, function () {
$("#wys").animate({left: "-216px"}, 400 );
$(this).removeClass("zamknij"); }
);
});
</script>
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->
{
background: url("http://dl.dropbox.com/u/106645823/facebook.png") no-repeat scroll 0 0 transparent;
padding: 10px;
width: 235px;
height:402px;
position: fixed;
margin-top: -100px; /*połowa wysokości panelu w górę */ left: 0px;
top: 50%;
}
.zamknij
{
background-position: 0px 0px -242px 0px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#wys").css("left","-216px");
$("#wys").hover(
function () {
$("#wys").animate({left: "0px"}, 400 );
$(this).addClass("zamknij");
}, function () {
$("#wys").animate({left: "-216px"}, 400 );
$(this).removeClass("zamknij"); }
);
});
</script>
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->
5. Wyszukujemy frazę </body> i nad nią wpisujemy kod:
<div
id="wys">
<div
id="wewnatrz" style="float: left; width: 216px; margin-left:
0px;"> <iframe allowtransparency="true"
src="//www.facebook.com/plugins/likebox.php?href=tu wklej adres fanpage'u&width=190&colorscheme=light&show_faces=true&border_color&stream=false&header=false&height=378"
style="border: medium none ; overflow: hidden; width: 190px; height:
378px; background-color: rgb(243, 247, 255);" frameborder="0"
scrolling="no"></iframe></div> </div>
6. Naciskamy "zapisz szablon" i gotowe! :)
Mam nadzieję, że chociaż dla kogoś ten post będzie przydatny :))
Pozdrawiam ~ Dagmara ♥
