BOTONES SOCIALES PARA TU BLOG CON CCSS
Blogger es una plataforma muy flexible y como muestra de ello, es la gran cantidad de trucos que se pueden hacer con CSS, como el truco de hoy en el que veremos como añadir botones sociales, qué gracias a un poco de CSS se hacen circulares pero cuando se pasa el cursor encima de ellos vuelven a su forma cuadrada original; sin duda alguna un efecto muy vistoso que llamará la atención de tus lectores. Así que, veamos como añadirlos a nuestros blogs…
Para agregar este truco a tu blog solo debes ir a Diseño, Añadir Gadget, HTML/JavaScript y pegar allí el siguiente código:
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
<style type='text/css'>
/* BOTONONES SOCIALES */
.fb-icon, .gp-icon, .t-icon, .rss-icon {
-moz-transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s;
transition: all 300ms ease-in-out 0s;
border: 3px solid #FFFFFF;
border-radius: 40px;
float: left;
height: 40px;
margin: 0 7px 0 0;
opacity: 0.8;
width: 40px;
}
.fb-icon:hover, .gp-icon:hover, .t-icon:hover, .rss-icon:hover {
border-radius: 0;
opacity: 1;
}
.fb-icon{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEWOxQR6J3TW_G9OQnUs9X_0ZE-dzkPIKZEEyqh0E5JkAuXBMMd-m2Hgtj6jKtIKJ776rKGqBz4PoxvkBYmdCQ10T5IN-bRJqHl-HUx_Vx8TbZQxk6cih5R8oes7x1eYL0ttR2iQyvrlpt/h120/f-logo.jpg") no-repeat scroll 0 0 transparent}
.gp-icon{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicA_Rm9MJlYZewvpjdmx8wXY8MFJ4YPJO10pnxkkerJohbEbZCGtwWgr-VPBu4SadYxWTJ7HZwtMUNhyphenhyphenSdEbtP8IyNebduc4V9mqgt0KE0I3cNs0LBSuSoecvNrbdb2CeIDMppCY4yOhXg/h120/g-logo.jpg") no-repeat scroll 0 0 transparent}
.t-icon{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU7Z8XdHADiLyLlN8bAtp2FaRTNd5qFRjJKa3M1E1DkrC7ycoJgeozVqhJEEm0hr861q5XWc9wCwEAGRj5n_MBtw_CCgk54T0SuxfDDXaziFItwB2kw99seGCeK04eHlkR1HjSANCVrUAG/h120/t-logo.jpg") no-repeat scroll 0 0 transparent}
.rss-icon{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPF6MsabuvhUhJYiNu5BV4WsTaOIeEsJgbCut8YI77UO5zJ4XTMPYSvWFvOWaRuE0NqUhQbuK6geCzluEf5gC9cggb2n-wLmQQgmnerXSCqdyqCO3R_RjGJWl_-R7CGHYukS7_H-6mStN-/h120/rss-logo.jpg") no-repeat scroll 0 0 transparent}
</style>
<div id='contenido-social'>
<a class='fb-icon' href='URL CUENTA FACEBOOK'/></a>
<a class='gp-icon' href='URL CUENTA G+'/></a>
<a class='t-icon' href='URL CUENTA TWITTER'/></a>
<a class='rss-icon' href='URL RSS FEED'/>
</a></div>
Despues de haber insertado el código, un clic en "Guardar"
Fecha de la Publicación; 10/11/2020
Fuente miltrucosblogger.
Publicado por: 
0 comentarios