dicashot
Gata da vez
(+18)
DicasHot
HBO MOVIES ONLINE
TV
dicashot
Cartoon Network PT
TV
dicashot
ANI ROCHA NO FUNK
DANÇANDO MUITO



Box Flutuante de Redes Sociais ao Lado das Postagens



Neste post irei falar aqui no DicasHot a respeito de como colocar em seu blog um deste Gadgets seguidores de redes sociais personalizadas no seu blog; 


Geralmente não se vê muito destes Gadgets em blogs, mas, se vê mais em sites profissionais como, por exemplo, wordpress.


Mas, se você quizer colocar este gadget em seu blog é muito fácil.


– Acesse o Painel de seu Blog e clique no Botão Editar HTML.

– Em seguida clique em Editar Modelo selecione a caixa ” Expandir modelos Widgets” .


– Agora pressione as teclas CTRL + F (atalho de busca na página) e procure pela seguinte Tag:

]]></b:skin>
ACIMA dela adicione o seguinte código:
#box{border:1px solid #ccc; padding:5px; background:#fff; z-index:9999; display:block; position:absolute; top:300px; float:left; margin:0 0 0 -100px; text-align:center;}
#box div{margin: 10px 0;}
– Agora iremos procurar pela seguinte Tag:
<div class='post-footer-line post-footer-line-3'>
– E ABAIXO dela adicione o seguinte código:
<b:if cond='data:blog.pageType == "item"'>
<div id='floating-box'><div id='box'>
<div><a class='twitter-share-button' data-count='vertical' data-via='bcf_oficial' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a></div>
<div><g:plusone size='tall'/></div>
<div><fb:like expr:href='data:post.url' font='arial' layout='box_count' send='true' show_faces='false' width='54'/></div>
</div>
</div>
</b:if>
– Agora iremos procurar pela seguinte Tag:
</head>
– E ABAIXO dela adicione o seguinte código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
     var offset = $("#box").offset();
     var topPadding = 210;
     $(window).scroll(function() {
         if ($(window).scrollTop() > offset.top) {
             $("#box").stop().animate({
                 marginTop: $(window).scrollTop() - offset.top + topPadding
             });
         } else {
             $("#box").stop().animate({
                 marginTop: 0
             });
         };
     });
 });
</script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'>
{lang: 'pt-BR'}
</script>
<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1' type='text/javascript'/>
Tendo feito isto, clique em salvar e pronto!!!


Box Flutuante de Redes Sociais ao Lado das Postagens Box Flutuante de Redes Sociais ao Lado das Postagens Reviewed by Muca on 8/19/2013 09:15:00 AM Rating: 5