[TUTORIAL] Adicionar Share nos tópicos

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

[TUTORIAL] Adicionar Share nos tópicos Empty [TUTORIAL] Adicionar Share nos tópicos

Mensagem por Ace 30.01.13 1:47


[TUTORIAL] Adicionar Share nos tópicos Alerte10

Adicionar Share nos tópicos

A ferramente "Share" serve para compartilhar um conteúdo na internet, e neste tutorial estaremos aprendendo como adicionar esta ferramenta nos tópicos do vosso fórum


--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Adicionar Share nos tópicos



- Adicionando o CSS:
Para que o efeito tenha uma aparência agradável e elegante iremos adicionar um código CSS para personaliza-lo, para isso devemos aceder ao:
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS

E então, iremos colocar o código abaixo:
Código:
.sharing-cl{
overflow:hidden;
margin:-20px 0 0 0;
padding:0;
list-style:none;
width:530px;
}
.sharing-cl a{
overflow:hidden;
width:75px;
height:20px;
float:left;
margin-right:5px;
text-indent:-200px;
background:url(http://sd-2.archive-host.com/membres/up/24071559914142709/tuto_partager/partager.png) no-repeat;
}
a.sh-su{background-position:-210px -40px;}
a.sh-feed{background-position:-70px -40px;}
a.sh-tweet{background-position:-140px -40px;}
a.sh-mail{background-position:0 -40px;}
a.sh-digg{background-position:-280px -40px;}
a.sh-face{
margin-right:0;
background-position:-350px -40px;
}
a.sh-mail:hover{background-position:0 1px;}
a.sh-feed:hover{background-position:-70px 1px;}
a.sh-tweet:hover{background-position:-140px 1px;}
a.sh-su:hover{background-position:-210px 1px;}
.sh-digg:hover{background-position:-280px 1px;}
a.sh-face:hover{
background-position:-350px 1px;
}
#text{
margin-top:5px;
font-weight:bold;
font-family:helvetica,arial,sans-serif;
}
#text a{
text-indent:0;
height:auto;
text-align:center;
font-size:11px;
padding-top:35px;
color:#999;
text-decoration:none;
}

- Revisando o código Js:
Neste passo iremos procurar o código para a versão correspondente do seu fórum:

PHPBB3
Código:
jQuery(document).ready(function(){var url=document.URL;jQuery(".left-box:eq(1)").append('<div class="h3">Siga esta página :<hr></div><table cellspacing=0 cellpadding=0 width=100%><tr><td align=right valign=center style="margin-right:20px;"><ul class="sharing-cl" id="text"> <li><a target="_blank" class="sh-mail" href="mailto:?subject=Cette page devrait te plaire.&body='+url+'">Email</a></li> <li><a target="_blank" class="sh-feed" href=" /feed">RSS</a></li> <li><a target="_blank" class="sh-tweet" href="http://twitter.com/home?status=Mon ForumActif '+url+'" target="_blank" onclick="javascript:pageTracker._trackPageview (\'/outbound/twitter.com\');">Twitter</a></li> <li><a target="_blank" class="sh-face" href="http://www.facebook.com/share.php?u='+url+'">Facebook</a></li> <li><a target="_blank" class="sh-su" href="http://www.stumbleupon.com/submit?url='+url+'">Stumbleupon</a></li> <li><a target="_blank" class="sh-digg" href="http://digg.com/submit?phase=2&url='+url+'">Digg</a></li> </ul></td><td width="180" align="right" valign=center><fb:like href="'+url+'" layout="button_count" width="45"></fb:like></td></tr></table><br>')});

PHPBB2
Código:
jQuery(document).ready(function(){var url=document.URL;jQuery('form[name="post"]').before('<div class="h3">Siga esta página :<hr></div><table cellspacing=0 cellpadding=0 width=100%><tr><td align=right valign=center style="margin-right:20px;"><ul class="sharing-cl" id="text"> <li><a target="_blank" class="sh-mail" href="mailto:?subject=Cette page devrait te plaire.&body='+url+'">Email</a></li> <li><a target="_blank" class="sh-feed" href=" /feed">RSS</a></li> <li><a target="_blank" class="sh-tweet" href="http://twitter.com/home?status=Mon ForumActif '+url+'" target="_blank" onclick="javascript:pageTracker._trackPageview (\'/outbound/twitter.com\');">Twitter</a></li> <li><a target="_blank" class="sh-face" href="http://www.facebook.com/share.php?u='+url+'">Facebook</a></li> <li><a target="_blank" class="sh-su" href="http://www.stumbleupon.com/submit?url='+url+'">Stumbleupon</a></li> <li><a target="_blank" class="sh-digg" href="http://digg.com/submit?phase=2&url='+url+'">Digg</a></li> </ul></td><td width="180" align="right" valign=center><fb:like href="'+url+'" layout="button_count" width="45"></fb:like></td></tr></table><br>')});

PUNBB
Código:
jQuery(document).ready(function(){var url=document.URL;jQuery("div.pun-crumbs:last").append('<div class="h3">Siga esta página :<hr></div><table cellspacing=0 cellpadding=0 width=100%><tr><td align=right valign=center style="margin-right:20px;"><ul class="sharing-cl" id="text"> <li><a target="_blank" class="sh-mail" href="mailto:?subject=Cette page devrait te plaire.&body='+url+'">Email</a></li> <li><a target="_blank" class="sh-feed" href=" /feed">RSS</a></li> <li><a target="_blank" class="sh-tweet" href="http://twitter.com/home?status=Mon ForumActif '+url+'" target="_blank" onclick="javascript:pageTracker._trackPageview (\'/outbound/twitter.com\');">Twitter</a></li> <li><a target="_blank" class="sh-face" href="http://www.facebook.com/share.php?u='+url+'">Facebook</a></li> <li><a target="_blank" class="sh-su" href="http://www.stumbleupon.com/submit?url='+url+'">Stumbleupon</a></li> <li><a target="_blank" class="sh-digg" href="http://digg.com/submit?phase=2&url='+url+'">Digg</a></li> </ul></td><td width="180" align="right" valign=center><fb:like href="'+url+'" layout="button_count" width="45"></fb:like></td></tr></table><br>')});

Invision
Código:
jQuery(document).ready(function(){var url=document.URL;jQuery(".posting-buttons:last").after('<div class="h3">Siga esta página :<hr></div><table cellspacing=0 cellpadding=0 width=100%><tr><td align=right valign=center style="margin-right:20px;"><ul class="sharing-cl" id="text"> <li><a target="_blank" class="sh-mail" href="mailto:?subject=Cette page devrait te plaire.&body='+url+'">Email</a></li> <li><a target="_blank" class="sh-feed" href=" /feed">RSS</a></li> <li><a target="_blank" class="sh-tweet" href="http://twitter.com/home?status=Mon ForumActif '+url+'" target="_blank" onclick="javascript:pageTracker._trackPageview (\'/outbound/twitter.com\');">Twitter</a></li> <li><a target="_blank" class="sh-face" href="http://www.facebook.com/share.php?u='+url+'">Facebook</a></li> <li><a target="_blank" class="sh-su" href="http://www.stumbleupon.com/submit?url='+url+'">Stumbleupon</a></li> <li><a target="_blank" class="sh-digg" href="http://digg.com/submit?phase=2&url='+url+'">Digg</a></li> </ul></td><td width="180" align="right" valign=center><fb:like href="'+url+'" layout="button_count" width="45"></fb:like></td></tr></table><br>')});

- Adicionando o código Js:
Após escolhermos o código referente a versão do vosso fórum iremos agora adiciona-lo em nossa gestão de códigos Js, para isso acederemos há:
Painel de controle -> Módulos -> HTML & JAVASCRIPT -> Gestão dos códigos Javascripts
Clicaremos no botão escrito "Criar um código java Script", e então colocaremos estas propriedades:
(carregue na imagem para aumentar)
[TUTORIAL] Adicionar Share nos tópicos Painel13
[TUTORIAL] Adicionar Share nos tópicos 110111Seta Titulo O que desejar, não irá interferir no código.
[TUTORIAL] Adicionar Share nos tópicos 110210Seta Investimento Deve estar marcada a opção "Nos tópicos".
[TUTORIAL] Adicionar Share nos tópicos 110310Seta Código Javascript O qual estudamos no passo anterior.




© Fórum dos Fóruns


[TUTORIAL] Adicionar Share nos tópicos Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Adicionar Share nos tópicos
Ace

Ace
Membro Entusiasta

Membro desde : 06/07/2011
Mensagens : 8881
Pontos : 11608

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos