Cargando...
Notificaciones Password  Username

Regresar CPortada - Mas que un foro, tu Comunidad.  » Recursos para Forumotion - Foroactivo » PUNBB
Actualizar esta página [MOD] Google Material floating button
Nombre de Usuario:
Contraseña:
   

Responder al tema
 
Herramientas [MOD] Google Material floating button 2x97uModos de visualización [MOD] Google Material floating button 2x97u

[MOD] Google Material floating button UFXmlYj[MOD] Google Material floating button ZcHKMjL
(#1)
Old  Supervisor
">
Miko
Supervisor
Miko
38711722805/02/2009PeruMy dream is you.https://i.imgur.com/Nh2lbrq.png
 
[MOD] Google Material floating button Empty [MOD] Google Material floating button - 3/7/2019, 10:01 am

[MOD] Google Material floating button Captur20

Descripción

:

Hoy me complace compartir con ustedes cómo tener un botón flotante para Nuevo tema y Responder tema

Códigos HTML:


En primer lugar, coloque esta fuente de Google antes de {JQUERY_PATH} en overall_header template
Código:
  <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
  <script src="{JQUERY_PATH}" type="text/javascript"></script>


Paso 2: busque y elimine completamente el contenido dentro de estas etiquetas que ve en viewforum_body y viewtopic_body (opcional)
Código:
<!-- BEGIN switch_user_authreply -->
...
<!-- END switch_user_authreply -->
 
<!-- BEGIN switch_user_authpost -->
...
<!-- END switch_user_authpost -->


Paso 3: ponga este código HTML en cualquier lugar en viewforum_body y viewtopic_body
Código:
<div id="cfr">
  <!-- BEGIN switch_user_authreply -->
  <div class="nd2 nds">
      <a href="{U_POST_REPLY_TOPIC}" class="qb blue" title="{L_POST_REPLY_TOPIC}" rel="nofollow"><i class="material-icons">reply</i></a>
  </div>
  <!-- END switch_user_authreply -->
  <!-- BEGIN switch_user_authpost -->
  <div class="nd1 nds">
      <a href="{U_POST_NEW_TOPIC}" class="qb red" title="{L_POST_NEW_TOPIC}" rel="nofollow"><i class="material-icons">add</i></a>
  </div>
  <!-- END switch_user_authpost -->
  <div id="floating-button" class="qb white">
      <span class="plus">+</span>
      <span class="letter edit"><i class="material-icons">close</i></span>
  </div>
</div>


Paso 4: Agrega esto a CSS
Código:
.red{background:#dd4b39!important}
.blue{background:#4285f4!important}
.red, .blue{color:#FFF!important}
.white{background:#FFF!important;color:#3689d1!important}
.qb{display:block;position:fixed;right:15px;bottom:15px;width:50px;height:50px;border-radius:100%;text-align:center;line-height:50px;font-size:25px;z-index:100;cursor:pointer}
.qb i{margin-top:12px}
.plus{animation:plus-out .3s;transition:all .3s}
.edit{opacity:0;transform:rotateZ(-70deg);transition:all .3s;animation:edit-out .3s}
#floating-button{box-shadow: 0px 2px 5px #666}
#cfr{position:fixed;bottom:0;right:0;z-index:95}
#cfr:hover{height:50%;width:100px}
#cfr:hover .plus{animation:plus-in .15s linear;animation-fill-mode:forwards}
#cfr:hover .edit{animation:edit-in .2s;animation-delay:.1s;animation-fill-mode:forwards}
#cfr:hover .nds{animation:bounce-nds .1s linear;animation-fill-mode:forwards}
#cfr:hover .nd2{animation-delay:.08s}
#cfr:hover .nd3{animation-delay:.15s}
#cfr:hover .nd4{animation-delay:.2s}
.nds{display:block;transform:scale(0);position:fixed;right:0;animation-fill-mode:forwards}
.nd1{bottom:60px;animation-delay:.2s;animation:bounce-out-nds .3s linear}
.nd2{bottom:120px;animation-delay:.15s;animation:bounce-out-nds .15s linear}
.nd3{bottom:180px;animation-delay:.1s;animation:bounce-out-nds .1s linear}
.nd4{bottom:240px;animation-delay:.08s;animation:bounce-out-nds .1s linear}
.letter{position:absolute;left:0;right:0;top:0;bottom:0}
@keyframes edit-in {
from{opacity:0;transform:rotateZ(-70deg)}
to{opacity:1;transform:rotateZ(0deg)}
}
@keyframes edit-out {
from{opacity:1;transform:rotateZ(0deg)}
to{opacity:0;transform:rotateZ(-70deg)}
}
@keyframes plus-in {
from{opacity:1;transform:rotateZ(0deg)}
to{opacity:0;transform:rotateZ(180deg)}
}
@keyframes plus-out {
from{opacity:0;transform:rotateZ(180deg)}
to{opacity:1;transform:rotateZ(0deg)}
}
@keyframes bounce-nds {
from{opacity:0}
to{opacity:1;transform:scale(1)}
}
@keyframes bounce-out-nds {
from{opacity:1;transform:scale(1)}
to{opacity:0;transform:scale(0)}
}


Optimizar tu CSS : Elige No

Step 5: Guardar & Publicar

DEMO: Live | Prueba

Nota: en caso de que su sitio use una función de blog, repita el paso 3, luego coloque el código HTML en la plantilla viewcomment_body

Fuente: Material floating button CSS

Comentar con facebook:
[MOD] Google Material floating button Imagen11
 » Temas similares en otros foros
» 10 genios en Google
» Tiburones en Google Earth
» Convierte Google+ en Facebook
» Facebook vs Google batalla de gigantes!
» Google Chrome: Justin Bieber
 
Permisos de este foro:
No puedes responder a temas en este foro.

 Los Códigos BB están Activado
 Los Emoticonos están Activado
 Código [IMG] está Activado
 Código HTML está Activado