REDES SOCIALES EN BLOGGER

REDES SOCIALES EN BLOGGER.

 Los métodos de insertar un código de redes sociales en blogger es tan simple de realizarlo,
lo que vamos a ser el día de hoy es insertar un código que contiene botones de redes sociales con efectos de transición, al cual cuando un usuario pasa el cursor por cualquier icono social se desprenderá el nombre de su red social.




Vamos a trabajar



 Un clic en “Diseño”

 Abre un gadget “Añadir un gadget”

 Busca el widget que dice “HTML/Javascript”

 Ábrelo he ingresa el siguiente código en su interior

<style type="text/css">
#ayudadeblogger ul {margin:10px 15px;padding:0px;}
#ayudadeblogger ul li {list-style-type: none;padding: 0;background: transparent;margin: 0;}
#ayudadeblogger ul li a{background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXTpgeLJrLtfppja8fVyYcdxPkwSDjCX0NpUedpmgEU1LZOT4wIT_Hk9Js8LsjGxYQYNOEPSr4WpyuUN-Gyz40NpvHiEfumeg7PHFZe8xIqO0DsIDSf3L_W1CGtUTkHYEcSaRBfVZ5q4c/s1600/blsocial12.png') 0 0 no-repeat;   height:48px;padding-left: 48px;cursor: pointer;text-decoration: none;border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;-o-border-radius:0.5em;display:inline-block;margin:0;width: 220px;}
#ayudadeblogger ul li:hover span {margin-left: 10px;opacity: 1;}
#ayudadeblogger ul li span {border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
color: white;
margin-left: 100px;
opacity: 0;
position: relative;
text-align: center;
width: auto;
padding: 5px 10px;
transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
-moz-transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
-webkit-transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
top: 14px;}
#ayudadeblogger span{padding:5px;background:#000;color:#fff;margin:0 5px;}
#ayudadeblogger .fb span {background-color: #0853A3;}
#ayudadeblogger .twiter span {background-color: #00B1F7;}
#ayudadeblogger .google span {background-color: #9E0202;}
#ayudadeblogger .pint span {background-color: #D00;}
#ayudadeblogger .linkedin span {background-color: #005075;}
#ayudadeblogger .devart span {background-color: #4C7A4A;}
#ayudadeblogger .ytube span {background-color: #A00;}
#ayudadeblogger .rss span {background-color: #EC5601;}
#ayudadeblogger a.fb {  background-position: 0 -384px;}
#ayudadeblogger a.twiter {  background-position: 0 -432px;}
#ayudadeblogger a.google {  background-position: 0 -480px;}
#ayudadeblogger a.pint {  background-position: 0 -528px;}
#ayudadeblogger a.linkedin {  background-position: 0 -576px;}
#ayudadeblogger a.devart { background-position: 0 -624px;}
#ayudadeblogger a.ytube {  background-position: 0 -672px;}
#ayudadeblogger a.rss {  background-position: 0 -720px;}
#ayudadeblogger a.fb:hover { background-position: 0 0px;color: #0374DD;}
#ayudadeblogger a.twiter:hover {  background-position: 0 -48px;color: #00A1DF;}
#ayudadeblogger a.google:hover {  background-position: 0 -96px;color: #A70000;}
#ayudadeblogger a.pint:hover {  background-position: 0 -144px;color: #C00;}
#ayudadeblogger a.linkedin:hover {  background-position: 0 -192px;color: #005772;}
#ayudadeblogger a.devart:hover { background-position: 0 -240px;color: #4C7A4A;}
#ayudadeblogger a.ytube:hover {  background-position: 0 -288px;color: #A00;}
#ayudadeblogger a.rss:hover {  background-position: 0 -336px;color: #EC5601;}
</style>

<div id="ayudadeblogger">
<ul>
   <li ><a href="https://www.facebook.com/pages/GrupoDelecluse/116336675191122" class="icon fb" ><span>Visítanos en Facebook</span></a></li>
   <li ><a href="https://twitter.com/grupodelecluse" class="icon twiter" ><span>Recomiéndanos en Twitter</span></a></li>
   <li ><a href="https://plus.google.com/104165660096684906208" class="icon google" ><span>Síguenos en Google +</span></a></li>
   <li ><a href="http://www.pinterest.com/luischavez/" class="icon pint" ><span>Pinterest</span></a></li>
   <li ><a href="http://ec.linkedin.com/pub/luis-chavez/53/549/a91/" class="icon linkedin" ><span>Contáctame en LinkedIn</span></a></li>
   <li ><a href="http://www.deviantart.com/" class="icon devart" ><span>DeviantArt</span></a></li>
   <li ><a href="http://www.youtube.com/" class="icon ytube" ><span>Youtube</span></a></li>
   <li ><a href="http://feeds.feedburner.com/ForoAyudaDeBlogger" class="icon rss" ><span>Suscríbete a nuestro RSS</span></a></li>
</ul>
</div>

Realiza estos cambios:

Cambia las URLs que están marcadas de color azul por las direcciones URLs de tus páginas sociales.

Eso es todo, ahora dales un clic en “Guardar” y ubica tu nuevo widget social donde mejor te parezca.

Fecha de la Publicación; 08-08-2019

 Fuente;  ayudadeblogger

 Publicado por;