Jump to content
  • Sky
  • Blueberry
  • Slate
  • Blackcurrant
  • Watermelon
  • Strawberry
  • Orange
  • Banana
  • Apple
  • Emerald
  • Chocolate
  • Charcoal
Tronlar

[MINI-MOD] Botones para compartir en redes sociales con efecto hover

Recommended Posts

Hola,las capturas es de una V5 pero vale para cualquier theme,si usas otro theme y no se ve bien,deja un comentario para adaptarlo.

 

Instalación:

 

main_header.tpl
themes/TUTHEME/templates/sections/main_header.tpl

 

Debajo de:

<!-- AGREGAMOS UN ESTILO EXTRA SI EXISTE -->

Agregar:

<link rel="stylesheet" href="{$tsConfig.css}/socialbutton.css">

 

m.posts_content.tpl

themes/TUTHEME/templates/modules/m.posts_content.tpl

 

Debajo de:

<div class="contenido">{$tsPost.post_body}</div>

 

Agregar:

{include file='modules/m.botonesredsocial_post.tpl'}

 

Suben el archivo a su theme y listo.

Pass:Tronlar

Archivo

 

f_08c65177ac5b.png

f_3a892e3fab4f.png

f_7682c68b610c.png

f_7d2a97eebdac.png

f_373df4a9395a.png

f_0cfe41101592.png

f_07a0ea88478c.png

 

 

 

 

 

 

  • Like 7

Share this post


Link to post
Share on other sites

se ven buenos, siempre me gustaron los efectos asi para hacer mas llamativos esos botones, no lo usare porque ya tengo otro pero me lo dejo en favoritos para mas adelante, +1 por el esfuerzo y por compartir

  • Like 1

Share this post


Link to post
Share on other sites
hace 8 horas, thedogetroll dijo:

en mi theme de v5 no tengo el archivo  themes/TUTHEME/templates/modules/m.posts_content.tpl que hago?

que theme tienes?

 

hace 1 hora, Rengo dijo:

Ya lo vi publicado por ahí, pero bueno gracias por compartir esos botones :D 

?????? en phpost?  lo he descargado y adaptado para el script,de nada :D

  • Like 1

Share this post


Link to post
Share on other sites

te hago una pregunta, esto aun no lo implemente en la pagina, pienso hacerlo en estos dias, pero lo que queria saber es a mi no me aparecen los botones en la misma forma que los de la imagen, sino que tienen otro formato, esto afectaria en algo tu mod o eso no tiene nada que ver?te paso imagen para que veas lo que te comento

 

Sin_t_tulo.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Miguel92
      Lo que se hará es agregar las opciones para que se pueda elegir entre el recaptcha v2 y el recaptcha v3.
       
      1 - Ejecutar estas consultas
      ALTER TABLE `w_configuracion` ADD `c_recaptcha` int(1) NOT NULL DEFAULT '0'; ALTER TABLE `w_configuracion` ADD `pkey3` varchar(55) NOT NULL; ALTER TABLE `w_configuracion` ADD `skey3` varchar(55) NOT NULL;  
      2 - Buscar en inc/class/c.registro.php
      /** reCAPTCHA **/         $recaptcha = 'https://www.google.com/recaptcha/api/siteverify?secret=' . $tsCore->settings['skey'] . '&response=' . $tsData['user_captcha'] . '&remoteip=' . $tsCore->getIP(); y la reemplazamos por
      /** reCAPTCHA **/         if($tsCore->settings['c_recaptcha'] == 0) {             $R_KEY = $tsCore->settings['skey'];         } else {             $R_KEY = $tsCore->settings['skey3'];         }         $recaptcha = 'https://www.google.com/recaptcha/api/siteverify?secret=' . $R_KEY . '&response=' . $tsData['user_captcha'] . '&remoteip=' . $tsCore->getIP();  
      3 - En config.inc.php que se encuentra en la raíz buscamos y la borramos
      define('RC_PUK',"6LcXvL0SAAAAAPJkBrro96lnXGZ56TBRExEmVM3L"); // public key recaptcha define('RC_PIK',"6LcXvL0SAAAAAEg1zizOxJPTjlD0ZtbbzubF2NjE"); // private key recaptcha  
      4 - En header.php buscamos
          // Mensajes     $smarty->assign('tsMPs',$tsMP->mensajes); y debajo pegamos
          if($tsCore->settings['c_recaptcha'] == 0) {         define('RC_PUK',$tsCore->settings['pkey']);         define('RC_PIK',$tsCore->settings['skey']);     } else {         define('RC_PUK',$tsCore->settings['pkey3']);         define('RC_PIK',$tsCore->settings['skey3']);     }  
      5 - Luego buscan en templates/sections/main_header.tpl
      </head> <body> <!--JAVASCRIPT--> y arriba agregan esto
      {if !$tsUser->is_member && $tsConfig.c_recaptcha == 1}   <script src="https://www.google.com/recaptcha/api.js?render={RC_PUK}"></script> {/if}  
      6 - Luego buscan en js/registro.js
                  /* Terminos */             case 'terminos':                 var value = $(el).is(':checked'); y arriba agregan
                  /* ReCaptcha V3 */             case 'recaptcha_response_field':                this.datos['g-recaptcha-response'] = $('#RegistroForm #recaptchaResponse').val();             break; y un poco más abajo buscan
      var rnum = h.substring(0, strpos(h, ':'));                     if (rnum != '1' || rnum != '2') {                         registro.datos['g-recaptcha-response'] = '';                         grecaptcha.reset();                     } y lo reemplazan por
      if(SelectR == 0){                     var rnum = h.substring(0, strpos(h, ':'));                     if (rnum != '1' || rnum != '2') {                         registro.datos['g-recaptcha-response'] = '';                         grecaptcha.reset();                     }                }  
      7 - Luego buscan en t.php_files/p.registro.form.tpl (en el caso del mod de registro buscan en t.registro.tpl)
              <div class="form-group">             <label>Confirme humanidad:</label>             <div class="g-recaptcha" data-sitekey="{$tsConfig.pkey}"></div>             <div class="help"><span><em></em></span></div>         </div> y la reemplazan por
      {if $tsConfig.c_recaptcha == 0}         <div class="form-group">             <label>Confirme humanidad:</label>             <div class="g-recaptcha" data-sitekey="{RC_PUK}"></div>             <div class="help"><span><em></em></span></div>         </div>         {else}         <div class="form-group">             <input type="hidden" name="g-recaptcha-response" id="response" class="g-recaptcha">             <div class="help"><span><em></em></span></div>         </div>         {/if} luego más abajo buscan
      <script src="https://www.google.com/recaptcha/api.js" async defer></script> <script type="text/javascript"> $.getScript("{$tsConfig.js}/registro.js{literal}", function(){     registro.change_paso(1);     mydialog.procesando_fin(); }); </script> {/literal} y lo reemplazan por
      {if $tsConfig.c_recaptcha == 0} <script src="https://www.google.com/recaptcha/api.js" async defer></script> {/if} <script type="text/javascript"> const SelectR = '{$tsConfig.c_recaptcha}'; $.getScript("{$tsConfig.js}/registro.js{literal}", function(){     registro.change_paso(1);     mydialog.procesando_fin(); }); </script> {/literal} {if $tsConfig.c_recaptcha == 1} <script type="text/javascript">     var keyv3 = '{RC_PUK}';     grecaptcha.ready(function () {     grecaptcha.execute(keyv3{literal}', {action: 'homepage'}).then(function (token) {            var response = document.getElementById('response');            response.value = token;        });     });     {/literal} </script> {/if}  
      8 - Por último en templates/admin_mods/m.admin_configs.tpl y buscan
      <dl>                 <dt>                     <label for="ai_xat">Xat ID:</label>                     <br /><span>Por defecto puedes agregar un chat de <a href="http://xat.com">Xat</a> para tu web, solo crea tu grupo he ingresa el nombre.</span></dt>                 <dd>                     <input type="text" id="ai_xat" name="xat" maxlength="20" value="{$tsConfig.xat_id}" /> </dd>             </dl> y debajo agregan
      <hr />             <fieldset class="selectRecaptcha">                 <legend>Seleccionar el reCaptcha</legend>                 <span>Puedes elegir entre el Recaptcha v2 o el Recaptcha v3</span>                 <select name="recaptcha" id="recaptcha">                     <option value="0"{if $tsConfig.c_recaptcha == 0} selected="selected"{/if}>Recaptcha v2</option>                     <option value="1"{if $tsConfig.c_recaptcha == 1} selected="selected"{/if}>Recaptcha v3</option>                 </select>                 <div id="recaptchav2">                     <h4>Recaptcha V2</h4>                     <dl>                         <dt>                             <label for="pkey">reCaptcha pública</label>                             <br /><span>Clave pública de <a href="https://www.google.com/recaptcha/admin">reCatpcha</a>.</span>                         </dt>                         <dd><input type="text" id="pkey" name="pkey"{if !$tsConfig.pkey}placeholder="Sin clave" {/if}value="{$tsConfig.pkey}" /></dd>                     </dl>                     <dl>                         <dt>                             <label for="skey">reCaptcha secreta</label>                             <br /><span>Clave privada de <a href="https://www.google.com/recaptcha/admin">reCatpcha</a>.</span>                         </dt>                         <dd><input type="text" id="skey" name="skey"{if !$tsConfig.skey}placeholder="Sin clave"{/if} value="{$tsConfig.skey}" /></dd>                     </dl>                 </div>                 <div id="recaptchav3">                     <h4>Recaptcha V3</h4>                     <dl>                         <dt>                             <label for="pkey3">reCaptcha pública</label>                             <br /><span>Clave pública de <a href="https://www.google.com/recaptcha/admin">reCatpcha</a>.</span>                         </dt>                         <dd><input type="text" id="pkey3" name="pkey3"{if !$tsConfig.pkey3}placeholder="Sin clave" {/if}value="{$tsConfig.pkey3}" /></dd>                     </dl>                     <dl>                         <dt>                             <label for="skey3">reCaptcha secreta</label>                             <br /><span>Clave privada de <a href="https://www.google.com/recaptcha/admin">reCatpcha</a>.</span>                         </dt>                         <dd><input type="text" id="skey3" name="skey3"{if !$tsConfig.skey3}placeholder="Sin clave"{/if} value="{$tsConfig.skey3}" /></dd>                     </dl>                 </div>             </fieldset>             <hr /> y por último en el mismo archivo agregar
      <script>{literal} var rv3 = '{/literal}{$tsConfig.c_recaptcha}{literal}'; (rv3 == '1') ? $('#recaptchav2').hide() : $('#recaptchav3').hide(); $("select[name=recaptcha]").change(function(){     var reCaptcha = $(this).val();     (reCaptcha == '1') ? $('#recaptchav2').slideUp(),$('#recaptchav3').slideDown() : $('#recaptchav2').slideDown(),$('#recaptchav3').slideUp(); }); {/literal}</script>  
      Y creo que eso sería todo, cualquier problema avisen!
    • By Cacho
      Hola, quisera saber si alguien sabe como hacer para agregar algún editor a los comentarios en el portal para poder comentar con imagenes, smiles y video, gracias.
       
      web https://boludinga.skn1.com
      usuario demo
      pass demo5
       
       

    • By Miguel92
      [SnackBar] Toaster para tu theme
       
      Bueno como dice el titulo es un complemento que puede ir a cualquier theme sin importar que formato, frameworks,etc tenga.
      Si quieren saber del tema o conocer el complemento visiten snackbarjs
       
      Ejemplo como les puede quedar:
      1 - INICIANDO SESIÓN CON UN USUARIO QUE NO EXISTE
      2 - INICIANDO SESIÓN CON CONTRASEÑA ERRONEA

       
      3 - CUANDO AGREGAS UN POST A FAVORITOS
      4 - CUANDO YA TIENES EL POST EN FAVORITOS

       
      ¿Que es lo que hace?
       - Simplemente da una mejor forma de verlo y además queda bonito. (Se que no todos tenemos la misma opinion)
       - Reemplaza el tipico mensaje estatico que tiene por defecto.
       
      ¿Solo sirve con los .tpl?
       - Por suerte no hace falta que sea solamente en los js y ni en los .tpl, se pueden agregar tanquilamente en los archivos php.
       
      ¿Es mucho lo que hay que modificar?
       - Hay que reemplazar donde se de una notificación estatica, como se los demostre en las imagenes fuerón agregados en los archivos c.posts.php y c.user.php
       
      ¿Se le puede cambiar de estilos?
      - Si tranquilamente no hay problema.
       
    • By IsaacArias
      Hola espero que vea la pagina, pero vi un efecto muy bueno en una pagina que es al mover el mouse sobre el fondo y me preguntaba si alguien sabe de algun complemente que haga algo parecido o si alguien lo sabe hacer https://www.canva.com/signup?signupRedirect=%2Fdesign%3Fcreate%3Dtrue%26category%3DtACZCki4tbY%26referrer%3Dresumes-landing-page%26utm_source%3Donboarding&loginRedirect=%2Fdesign%3Fcreate%3Dtrue%26category%3DtACZCki4tbY%26referrer%3Dresumes-landing-page%26utm_source%3Donboarding&referrer=resumes-landing-page   esa es la pagina y en el mismo registro pasar el mouse sobre el fondo de la web crea un efecto muy bueno desde ya muchas gracias!
    • By Miguel92
      Hola, este es un mod/mini-mod/complemento que aplica un background solo en el perfil... he tratado de hacerlo con home, fotos, tops, etc. desde la cuenta, en teoría lo que quería hacer es que los usuarios eligieran las imágenes que querían poner para las secciones ya mencionadas, pero solo logré para el perfil... Si el mod ya existía pido perdón, porque no lo he visto
       
      1) Ejecutar esta consulta
      ALTER TABLE `u_perfil` ADD `p_fondo` VARCHAR(200) NOT NULL;  2) Ir a c.cuenta.php y buscar 
      function loadHeadInfo($user_id){         global $tsUser, $tsCore;         // INFORMACION GENERAL y dentro de esta función buscamos 
      p.p_socials, p.p_empresa, y agregar a lado de esto
      p.p_fondo,  Luego buscar más abajo
      }         // COMPROBAR PORCENTAJE         $total = array(5,8,9,8,9); // CAMPOS EN CADA CATEGORIA         $tid = $save - 1; y arriba agregamos
                  case 9:                 // IN DB                 $perfilData = array(                     'fondo' => $tsCore->setSecure($_POST['fondo']), //Este es para el perfil                 );             break;  
      3) Vamos a estilos.css y en body dentro de las llaves {...} agregaremos esto
          background-position: center center;     background-repeat: no-repeat;     background-attachment: fixed;     background-size: cover;  
      4) Luego buscar tuTheme/templates/t.cuenta.tpl y debajo de 
      <li><a onclick="cuenta.chgtab(this)">Cambiar Nick</a></li> agregamos
      <li><a onclick="cuenta.chgtab(this)">Fondo</a></li> un poco más abajo debajo de
      {include file='modules/m.cuenta_nick.tpl'} agregamos
      {include file='modules/m.cuenta_fondo.tpl'}  
      5) Crearemos el archivo m.cuenta_fondo.tpl y la colocaremos en modules
      <div class="content-tabs fondo" style="display:none">     <fieldset>     <div class="alert-cuenta cuenta-9"></div>              <div class="field" style="padding: 5px 0">             <label for="fondo" style="display: inline-block;">Fondo del Perfil:</label>             <input type="text" value="{$tsPerfil.p_fondo}" maxlength="200" name="fondo" id="fondo" class="text cuenta-save-9" style="width:65%; display: inline-block;">         </div>    </fieldset>                   <div class="buttons">             <input type="button" value="Guardar" onclick="cuenta.save(9)" class="mBtn btnOk"/>         </div>                                      <div class="clearfix"></div> </div>  
      6) Último paso vamos a templates/sections/main_header.tpl y buscamos
      </head> <body> y arriba agregamos
      {literal} <style>     body {         background-image: url({/literal}{$tsInfo.p_fondo}{literal});     } </style> {/literal} RESULTADO FINAL:

       
       
      Para evitar las puntas blancas busquen en estilos.css
       /****** Bordes Redondos ******/  debajo agregan ↓ ↓ ↓ 
      .rtop { border-radius: 11px 11px 0 0; } .rbott { border-radius: 0 0 11px 11px; }  y listo quedará más lindo
      Para el fondo con opaco → ir a sections/main_header.tpl y buscar <body> debajo pegamos
      <div id="background_transparent"></div> y en estilo.css debajo de body { ... } pegamos
      Fondo 1
      #background_transparent {     background-color: rgba(255,255,255,.6);     position: fixed;     height: 100%;     top: 0;     width: 100%;     z-index: -1; } Fondo 2
      #background_transparent {     background-color: rgba(0,0,0,.8);     position: fixed;     height: 100%;     top: 0;     width: 100%;     z-index: -1; } Fondo1                                                           Fondo2

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Patrocinador



  • ×