Tutorial: Botones sociales en Web / Blogger / WP + Script oculta texto

  • Autor Autor intoroddex
  • Fecha de inicio Fecha de inicio
I

intoroddex

Lambda
Hola, betas aqui les comparto botones sociales , de que ya muchos buscan por aqui, espero que les guste.

Bueno empezemos:

Nos dirigimos a Share Buttons for Twitter, Facebook, Google Plus and other social networks (by Hupso) creamos nuestro boton personalizado:


Compatible con todos los principales navegadores




Botones toolbar





HTML:
<!-- Hupso Share Buttons -  --><div class="hupso-share-buttons"><a class="hupso_toolbar" href=""><img src="http://static.hupso.com/share/buttons/lang/es/share.png" style="border:0px; padding-top:5px; float:left;" alt="Share Button"/></a><script type="text/javascript">var hupso_services_t=new Array("Twitter","Facebook","Google Plus","Pinterest","Linkedin","Tumblr","StumbleUpon");var hupso_toolbar_size_t="big";</script><script type="text/javascript" src="http://static.hupso.com/share/js/share_toolbar.js"></script></div><!-- Hupso Share Buttons -->


Botones flotante




HTML:
<!-- Hupso Share Buttons - http://www.hupso.com/share/ --><div class="hupso-share-buttons"><a class="hupso_float" href="http://www.hupso.com/share/"></a><script type="text/javascript">var hupso_services_f=new Array("Twitter","Facebook","Google Plus","Pinterest","Linkedin","Tumblr","StumbleUpon");var hupso_icon_type_f = "icons";var hupso_background_f="#FFFFFF";var hupso_border_f="#4891B5";var hupso_float_right_f=true;</script><script type="text/javascript" src="http://static.hupso.com/share/js/float.js"></script></div><!-- Hupso Share Buttons -->

Botones contadores



HTML:
<!-- Hupso Share Buttons - http://www.hupso.com/share/ --><div class="hupso-share-buttons"><a class="hupso_counters" href="http://www.hupso.com/share/"><img src="" style="border:0px; padding-top:5px; float:left; padding-right:5px;" alt=""/></a><script type="text/javascript">var hupso_services_c=new Array("twitter","facebook_like","facebook_send","google","pinterest");var hupso_counters_lang = "es_LA";</script><script type="text/javascript" src="http://static.hupso.com/share/js/counters.js"></script></div><!-- Hupso Share Buttons -->

Plugin para WP:

https://wordpress.org/plugins/hupso-share-buttons-for-twitter-facebook-google/

Script ver y ocultar texto:



Facil de editar solo busquen este texto:

La escoba. - ¿Por qué? Porque

siempre va riendo...


HTML:
 <center></script>                <script type="text/javascript"><!--function MM_preloadImages() { //v3.0  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();    var 

i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_openBrWindow(theURL,winName,features) { //v2.0  

window.open(theURL,winName,features);}//--></script> <style>.demosMO {background-color: #000911;border: 1px solid #666;height: 75px;margin: 0 auto;padding: 20px;text-align: center;width: 500px;} .divbotones 

{width:500px;margin:0 auto;height:35px;} .elboton {border:1px solid #EEE;background-color:#CCC;border-radius:3px;padding:4px 0 5px;width:200px;text-align:center;cursor:pointer;color:#555;float:left;} .elboton:hover {border:1px 

solid #FFF;background-color:#D9D9D9;color:#333;} .sinodemos {border-radius:3px;margin-bottom:10px;padding:9px 10px 0;height:26px;border:1px solid #548954;background:#355C33;color:#79AF72;text-shadow:1px 1px 

#21341D;} #demoFADE1 {opacity:0;filter:alpha(opacity=0);} #demoFADE2 {opacity:0;filter:alpha(opacity=0);-moz-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-

in-out;} </style><script>function SINO2(cual) {var elElemento=document.getElementById(cual);if(elElemento.style.visibility == "visible") {elElemento.style.visibility = "hidden";} else {elElemento.style.visibility = "visible";}}function 

SINO3(cual) {var elElemento=document.getElementById(cual);if(elElemento.style.opacity == "1" || elElemento.style.filter == "alpha(opacity=100)") {elElemento.style.opacity = "0";elElemento.style.filter = "alpha(opacity=0)";} else 

{elElemento.style.opacity = "1";elElemento.style.filter = "alpha(opacity=100)";}} var fadeEffect=function() {return{init:function(id, flag, target){this.elem = document.getElementById(id);clearInterval(this.elem.si);this.target = target ? 

target : flag ? 100 : 0;this.flag = flag || -1;this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;this.si = setInterval(function(){fadeEffect.tween()}, 20);},tween:function() {if(this.alpha == this.target){clearInterval

(this.si);} else {var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);this.elem.style.opacity = value / 100;this.elem.style.filter = 'alpha(opacity=' + value + ')';this.alpha = value;}}}}(); function fadeEffectTRANS

(id,valor) {var cual = document.getElementById(id);cual.style.opacity = valor;cual.style.filter = 'alpha(opacity=' + valor + ')';} </script><div class="demosMO"><div id="demoFADE2" class="sinodemos">La escoba. - ¿Por qué? Porque 

siempre va riendo...</table></div><div class="divbotones"><div class="elboton" onclick="fadeEffectTRANS('demoFADE2',1)">Respuesta</div><div class="elboton" onclick="fadeEffectTRANS('demoFADE2',0)" 

style="float:right">Ocultar Respuesta</div></div></div><br>

Bueno hasta aqui llegamos, Espero sus comentarios.....
 
Es bueno, pero no para ganarse mi pulgar 😱nthego:
 
Genial, no podrías conseguir un sociale share pero con efectos hover?
 
Esta bueno ya lo aplique en mi sitio web gracias.