Widgets

crie caixa de ícones sociais elegante no rodapé do blog

0 comentários
icons-sociais-em-lote



crie caixa de ícones sociais elegante no rodapé do blog

Olá meus amigos leitores, sempre digo aqui, que a usabilidade do blog ou site é vital para o sucesso, mas tudo o que fazemos em nossos blogs e sites, visam tão somente a divulgação de ideias e conceitos, e ai, torna-se também vital a divulgação destas ideias e conceitos para um maior numero de pessoas para que possamos nos sentir uteis na sociedade, propagando coisas úteis, e neste item, nada supera as redes sociais, que desempenham um papel primordial na divulgação de novidades na rede.. então, para que todos tenham a mesma oportunidade, estou disponibilizando, dentre os muitos já apresentados aqui, este novo widget para redes sociais,que é simples de ser implantado, não requer nenhum conhecimento de html ou scripts, basta seguir os passos que indico e ele funcionara perfeitamente em seu blog ou site... então:

Vá ao painel do blogger e no menu “layout”,clique em'adicionar um gadget, no modo HTML/javascript cole o seguinte código abaixo:

poup-up para redes sociais


<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script> <script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#mbsocial").show("slow");else $("#mbsocial").hide("slow");});function closeMBsocial(){$('#mbsocial').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script> <style> #mbsocial{background:#f3f3f3;border-radius:9px;-moz-border-radius:9px;-webkit-border-radius:9px;-moz-box-shadow:inset 0 0 3px #333;-webkit-box-shadow:inset 0 0 3px #333;box-shadow:inner 0 0 3px #333;padding:12px 14px 12px 14px;width:300px;position:fixed;bottom:13px;right:2px;display:none;z-index:3;height:100px;} .getmore a{display: inline-block;font-weight: normal;text-decoration: none;font-size:9px;color:#333!important; float:right;} .getmore a:visited{ color:#ddd;}</style> <div style="display: none;" id="mbsocial"> <a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeMBsocial();">(X)</a> <span style="font-family: Verdana; font-size: 15px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;font-weight:bold;color:#555;">Siga-nos nas redes sociais!</span><br />  <a href="LINK-PAGINA-FACEBOOK" target="_blank"><img src="http://1.bp.blogspot.com/-FXL0E6RnH08/UQminUAsaGI/AAAAAAAAAN8/j4gToU0zdFo/s1600/Facebook.png" height="72" /></a> <a href="LINK-DO-TWITTER" target="_blank"><img src="http://3.bp.blogspot.com/-pxKhNAQi0EQ/UQmin2KcESI/AAAAAAAAAOI/GzwWqcLfoQI/s1600/Twitter.png" height="72" /></a> <a href="LINK-DO-GOOGLEPLUS" target="_blank"><img src="http://4.bp.blogspot.com/-Kwl0hnNDjws/UQmioQGP4_I/AAAAAAAAAOU/DExWUDguX_0/s1600/Google%2BPlus.png" height="72" /></a> <a href="LINK-DO-LINKEDIN" target="_blank"><img src="http://2.bp.blogspot.com/-Amr9foLL3Z0/UQmkRUPpCbI/AAAAAAAAAOg/wMNUe5Ey1uw/s1600/LinkedIn.png" height="72" /></a> <div class="getmore"> <a href="http://www.tudoseo.com/2013/11/crie-caixa-de-icones-sociais-elegante.html" target="_blank">adquira este widget </a> </div> </div>  <div class='clear'></div>

Importante!  ALTERARE os trechos marcados em vermelho, incluindo os links das suas redes sociais.

Recomendo que salve no seu pc, os ícones usados neste widget, e hospede-os no seu blog,caso não saiba fazer isto, siga este texto que ensina como hospedar imagens no próprio blog.

Após hospedar os ícones, basta substituir os endereços das imagens  de cada ícone.

Por favor, se tiver alguma dúvida, não hesite em perguntar, pois tenho imenso prazer em ajudar...

O que achou deste post? comente agora

Todo comentário é bem vindo, pois acrescenta muito aos nossos posts, portanto, fique a vontade para debater sobre nossos assuntos...

setaretornoaotopo