Nie marnuj miejsca na swoim blogu! Dzięki tym trzem prostym krokom, stworzysz własny slider z like-boxem na np. bloga blogspot jaki i każdą inną stronę www..

Jak więc zrobić wysuwany like-box facebooka na blogspot?

Potrzebujemy trzech rzeczy :

Adres URL naszej strony facebookowej (fan-page)
Grafikę naszego wysuwanego okienka
Zamieszczenie poniższego kodu na stronie

1. Jeśli nie posiadasz jeszcze fan-page możesz założyć go w bardzo prosty sposób, logując się na Twoje prywatne konto na FB, a potem wejdź na stronę: http://www.facebook.com/pages/create.php

2. Pobierz grafikę wysuwanego okienka: kliknij tutaj i umieść ją na serwerze.

3. Skopiuj poniższy kod i wklej go w sekcji HEAD
(pomiędzy znaczniki <head>...</head>)
Przed wklejeniem kodu usuń z niego: TU WSTAW ADRES URL GRAFIKI i wstaw w to miejsce adres URL pobranej grafiki.

<style type="text/css">
#wysuwane
{
background: url("TU WSTAW ADRES URL GRAFIKI") 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(){
$("#wysuwane").css("left","-216px");
$("#wysuwane").hover(
function () {
$("#wysuwane").animate({left: "0px"}, 400 );
$(this).addClass("zamknij");
}, function () {
$("#wysuwane").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]-->

Zostało nam już tylko osadzić nasz like-box w sekcji BODY.
Aby to zrobić kopiujemy i wklejamy poniższy kod najlepiej zaraz przed znacznik </body>.

Przed wstawieniem kodu usuń z niego napis: ADRES TWOJEGO FANPAGE i wstaw w to miejsce adres URL własnego fanpage.

<div id="wysuwane">
<div id="wewnatrz" style="float: left; width: 216px; margin-left: 0px;">
<iframe allowtransparency="true" src="//www.facebook.com/plugins/likebox.php?href=ADRES TWOJEGO FANPAGE&amp;width=190&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;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>

I gotowe! Efekt będzie taki jak na tym blogu.

Strony

Wysuwany facebook na blogspot [blogger] i nie tylko...

Jak więc zrobić wysuwany like-box facebooka na blogspot?

Brak komentarzy:

Prześlij komentarz