Como personalizar sua Fan box Facebook com CSS?
A muito tempo procuro descobrir como personalizar minha
fan box. E esse dias achei esse tutorial no
DaddyDesigner e mesmo assim não entendi como funcionava. Mas acessando o
mybloggertricks eu entendi. Vou tentar reproduzi-lo aqui. Qualquer duvida comente, ok?
Lembrando que eu não sou nenhum Expert em códigos. Quero apenas passar informação útil.
Sinta se a vontade para corrigir qualquer erro meu. Atualizarei o post. Muitas duvidas acessem o post original no fim da postagem. Fico agradecido!
Bom, Vamos lá?
----------------------------------------------------------------------------------------------------------------
1. Vamos criar
Stylesheet para a Fan Box:
----------------------------------------------------------------------------------------------------------------
1.Vamos começar criando nosso arquivo
.CSS
Para isso você vai copiar esse código
CSS e colar no Bloco de notas
(Ctrl+R > Notepad)
/*---------------Fan Box Personalizada--------------*/
.fan_box a:hover{
text-decoration: none;
}
.fan_box .full_widget{
height: 200px;
border: 0 !important;
background: none !important;
position: relative;
}
.fan_box .connect_top{
background: none !important;
padding: 0 !important;
}
.fan_box .profileimage, .fan_box .name_block{
display: none;
}
.fan_box .connect_action{
padding: 0 !important;
}
.fan_box .connections{
padding: 0 !important;
border: 0 !important;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #666;
}
span.total{
color: #0080ff;
font-weight: bold;
}
.fan_box .connections .connections_grid {
padding-top: 10px !important;
}
.fan_box .connections_grid .grid_item{
padding: 0 10px 10px 0 !important;
}
.fan_box .connections_grid .grid_item .name{
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-weight: normal;
color: #0080ff !important;
padding-top: 1px !important;
}
.fan_box .connect_widget{
position: absolute;
bottom: 0;
left: 0px;
margin: 0 !important;
}
.fan_box .connect_widget .connect_widget_interactive_area {
margin: 0 !important;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
padding: 0 !important;
}
/*---------------Fan Box Personalizada--------------*/
2. Altere os valores Css que quiser, faça testes. Mas se for sua 1º vez aconselho seguir o tutorial.
ex. fáceis:
Mude a cor: #0080ff
Altere o tamanho da fonte: 11px;
Lembrando que isso é dentro do notepad;
3. E salve com a extensão
.css
4. Vamos hospedar o arquivo.
Eu usei o
Dropbox, mas você pode usar o site de hospedagem host de sua preferencia. Tutorial do DropBox
http://www.conectadores.com.br/tutoriais/dropbox
----------------------------------------------------------------------------------------------------------------
2. Script para a Fan box personalizada.
----------------------------------------------------------------------------------------------------------------
1.Acesse o
Painel do blogger > Layout > Adicionar Gadget > HTML/Java Script
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>
<script type="text/javascript">FB.init("");</script>
<fb:fan profile_id="
LIKE PAGE ID" stream="0" connections="10" width="300px" height="200px" header="0" logobar="0" css="
STYLE SHEET LINK"></fb:fan>
2. Substitua:
*
LIKE PAGE ID =
ID da sua pagina. Para saber a ID, acesse sua pagina > Gerenciar > Editar pagina:
Copie apenas os últimos números.
Ex: id=5248545121545
*
STYLE SHEET LINK = Substitua pelo arquivo link do arquivo
stylesheet. Que geramos no passos anteriores.
Agora salve e veja como ficou.
* Possível problema seja conflito, como aconteceu nesse blog.
Veja o artigo original aqui:
ww.mybloggertricks.com/2011/06/customize-facebook-like-box-with-css.html
Acesse a fonte aqui:
http://www.daddydesign.com/wordpress/how-to-customize-your-facebook-fan-box/
0 Comentários