ICONOS DE SUSCRIPCIÓN CON EFECTODE BORDES REDONDEADOS

by - noviembre 22, 2020

ICONOS DE SUSCRIPCIÓN CON EFECTODE BORDES REDONDEADOS.


 



Haciendo uso nuevamente de la propiedad img class=»redondeado» expuesta por El Potro tiempo atrás hoy he creado unos iconos de suscripciones con bordes redondeados que al pasar el cursor sobre ellos despliegan un bello efecto.


A continuacion una imagen de como funciona el truco.




Para agregar este truco a tu blog pega antes de ]]></b:skin> el siguiente codigo:



Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:




1 Un clic en “Plantilla”                                    





   2 Un clic en “Editar HTML”                                  




  Ahora se te abrirá el Editor HTML de tu plantilla


     



En  este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,

debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, 




3 Busca el siguiente código



]></b:skin> 

 




.redondeado {
border-radius: 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:0;
border:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.redondeado:hover {
box-shadow: 0; /* Con esto eliminamos la sombra */
border-radius: 0; /* Con esto eliminamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}



Cuando lo hayas Encontrado el código deberás insertar las siguientes líneas de código justo arriba del código que encontraste




Ahora en un elemento HTML/JavaScript pega lo siguiente :


Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:



Ir a Blogger  


1-Un clic en “Diseño”                                      



2-Clic en “Añadir un gadget”                                              



3-Busca el widget que dice “HTML-Javascript” y ábrelo                     



4-Coloca el siguiente codigo en el interior



<div class="ads">
<a href="URL DE TU FACEBOOK" target="_blank" title="¡Facebook!"><img class="redondeado" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM_NBdrpOO2u8mu2fMyQzsaECebxKPuiVI4jYEeeXv3KdDuGpNUmPt9vz88hwru1u0ii0XpK5wIoOXluQXgwmhKe3Lg0qnzOrjbBmleUazUwzhTpsA-7fRodVDwEGMnOCLwG7hV0y7u2c/s128/Facebook.png" /></a>
<a href="URL DE TU TWITTER" target="_blank" title="¡Twitter!"><img class="redondeado" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjigx278IQD3-LfU1mAER7Ch6rxKF0nJy3DEoYuVzneGxeKK5qgk1eeLHkhz3YA35bxfXCvV-ymjDKCrNEtfW-rr5cJnhfzXIXnqSI2mv-MHcw7234UntqEj14WjQuK30kSlPVZAO1sT-U/s128/Twitter.png" /></a>
<a href="URL DE TU YOUTUBE" target="_blank" title="¡YouTube!"><img class="redondeado" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinhnyE62sW_uBTFBQDA_hCD5Oxap86EN15DFRWwrMUli-dn1S4O5hJjdtk6P_sLga0dU2PJ4P9VvZRSUzk8Ts_YhXqpfwRV6LZHrKiWpbfI8QENq_-amyBWS1URwSnm9PtfWcsxvfs-8A/s128/Youtube.png" /></a>
<a href="URL DE TU RSS" target="_blank" title="¡RSS!"><img class="redondeado" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVST1BLwqhdp3qhnaek9uRJyO9rWMbyfhIEFVeNvx5PLJ9QGKzxBEUL0rKyIlBn1w0WD7ZigfoiNH3AyebTGrpy4rZ45EYpEnpe2iO2j0AHPNwZiNhD9F9OD0cxEVzkpxP1xFm7pHS2MA/s128/RSS.png" /></a>
</div>


Despues de haber insertado el código, un clic en  "Guardar"










Fecha de la Publicación;  22/11/2020



Fuente miltrucosblogger.




Publicado por:                                            
















You May Also Like

0 comentarios