WIDGET FLOTANTE DE REDES SOCIALES PARA BLOGGER
enero 16, 2019
Este widget tiene un conjunto de cinco medios de comunicación social como Facebook, Twitter, RSS, Google + y Pinterest. Este sistema de redes sociales funciona con algunos simples pero eficaces CSS y el código java-scripts.
El widget tiene efecto deslizante cada vez que un visitante se sitúe en un perfil social, que aparecerá con un efecto de diapositivas de ese perfil.
El widget de redes sociales apareceré a la izquierda de su blog de blogger y no le causara ningún error en el proceso de SEO en el diseño de su página, esta creado para cuando un visitante pase el cursor por una pestaña se desplace automáticamente y se abra el perfil social y de este modo el usuario podrá seguirlo.
¿Dónde insertare el código?
El código lo insertaran en un gadget widget y lo podrán ubicar donde mejor les parezca
A continuación mire su demostración en mi blog de demos, el widget flotante está ubicado a lado izquierdo de la página de mi blog de demos.
Un clic en “Diseño”
3 Abre un gadget “Añadir un gadget”
4 Busca el widget que dice “HTML/Javascript” ábrelo e inserta las siguientes líneas de código en su interior
<style type="text/css">
ul#social {
position: fixed;
margin: 0px;
padding: 0px;
top: 10px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#social li {
width: 100px;
}
ul#social li a {
display: block;
margin-left: -2px;
width: 100px;
height: 70px;
background-color:#fff;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
}
ul#social .twitter a{
background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnTLNKqSgDGTVlewzXXgpJKMfkZvzQfbwoINDpacKUazXREWoMiM_wd3dgZuy9yuBikz9i74p3EJr6vv9yV-cdHJhjnOwBsjZQQck1v5YzJMvsV38oKwseDEATcWcMcFTQ-7UmYoNA_EA/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#social .googleplus a {
background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR54qg8e6k8DTq-JBWJVCLkwxPxAh8YFitB3Gz9Mt0qI4fk0prcHmSOa04hdkG4z5tMt6Jjhm4nihHVXoTgRfJRHDu2mPJ1rltRQyYmSKLzySGLOQ8FadeQCcredkNCap7xSkX94h2TPw/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#social .facebook a {
background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5sHgwenWD1YNrwJey9_xNE1iTRxAKKpYXT8D9Rzkw5hfkDf5C7lYwrwQqUr_lKvigy5o_rRUhQyANt2lRFq9aPM1Y-sFeiRJ1mgLV4waLuXdkhP2inVvlRBstJujrieUxQy_KPEjTeUQ/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#social .rss a {
background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx5U4gc90_KXMtkpQtT4lpEKakifh8smP5NJvCVpZ1wkXjSn4VCyRdnSKJOdkpWWBofP0QsDolQHDhe6_atlJeUh3oS6Mw5dwJyZdXsjK9GyO_-tRJDw8AIi3ObkWfH2Z6jpTcqN8waBg/s1600/rss.png)no-repeat;
background-position:center center;
}
ul#social .pinterest a {
background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWKBADNAop6s7QCnp6TRxn982KgisKmPMA6NCb-HK0Ctkemn2v1quXATYbIZalMfptOSL-LQ5bAh25bqqa0dIXBj1oUtcr7mz9EUaXNP4IJGeBu-VE96zMCN01n-HpQ-3qGNBZiOALppw/s1600/Pinterest.png)no-repeat;
background-position:center center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function () {
$('#social a').stop().animate({
'marginLeft': '-85px'
}, 1000);
$('#social > li').hover(
function () {
$('a', $(this)).stop().animate({
'marginLeft': '-2px'
}, 200);
},
function () {
$('a', $(this)).stop().animate({
'marginLeft': '-85px'
}, 200);
}
);
});
</script>
<ul id='social'>
<li class='twitter'><a href='https://www.twitter.com/ayudadeblogger' title='Twitter'></a></li>
<li class='googleplus'><a href='https://plus.google.com/114283163993086871162' title='Google Plus'></a></li>
<li class='facebook'><a href='http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017' title='Facebook'></a></li>
<li class='rss'><a href='http://www.ayudadeblogger.com/feeds/posts/default' title='Rss'></a></li>
<li class='pinterest'><a href=''https://www.pinerest.com' title='Pinterest'></a></li>
</ul>
ul#social {
position: fixed;
margin: 0px;
padding: 0px;
top: 10px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#social li {
width: 100px;
}
ul#social li a {
display: block;
margin-left: -2px;
width: 100px;
height: 70px;
background-color:#fff;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
}
ul#social .twitter a{
background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnTLNKqSgDGTVlewzXXgpJKMfkZvzQfbwoINDpacKUazXREWoMiM_wd3dgZuy9yuBikz9i74p3EJr6vv9yV-cdHJhjnOwBsjZQQck1v5YzJMvsV38oKwseDEATcWcMcFTQ-7UmYoNA_EA/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#social .googleplus a {
background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR54qg8e6k8DTq-JBWJVCLkwxPxAh8YFitB3Gz9Mt0qI4fk0prcHmSOa04hdkG4z5tMt6Jjhm4nihHVXoTgRfJRHDu2mPJ1rltRQyYmSKLzySGLOQ8FadeQCcredkNCap7xSkX94h2TPw/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#social .facebook a {
background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5sHgwenWD1YNrwJey9_xNE1iTRxAKKpYXT8D9Rzkw5hfkDf5C7lYwrwQqUr_lKvigy5o_rRUhQyANt2lRFq9aPM1Y-sFeiRJ1mgLV4waLuXdkhP2inVvlRBstJujrieUxQy_KPEjTeUQ/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#social .rss a {
background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx5U4gc90_KXMtkpQtT4lpEKakifh8smP5NJvCVpZ1wkXjSn4VCyRdnSKJOdkpWWBofP0QsDolQHDhe6_atlJeUh3oS6Mw5dwJyZdXsjK9GyO_-tRJDw8AIi3ObkWfH2Z6jpTcqN8waBg/s1600/rss.png)no-repeat;
background-position:center center;
}
ul#social .pinterest a {
background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWKBADNAop6s7QCnp6TRxn982KgisKmPMA6NCb-HK0Ctkemn2v1quXATYbIZalMfptOSL-LQ5bAh25bqqa0dIXBj1oUtcr7mz9EUaXNP4IJGeBu-VE96zMCN01n-HpQ-3qGNBZiOALppw/s1600/Pinterest.png)no-repeat;
background-position:center center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function () {
$('#social a').stop().animate({
'marginLeft': '-85px'
}, 1000);
$('#social > li').hover(
function () {
$('a', $(this)).stop().animate({
'marginLeft': '-2px'
}, 200);
},
function () {
$('a', $(this)).stop().animate({
'marginLeft': '-85px'
}, 200);
}
);
});
</script>
<ul id='social'>
<li class='twitter'><a href='https://www.twitter.com/ayudadeblogger' title='Twitter'></a></li>
<li class='googleplus'><a href='https://plus.google.com/114283163993086871162' title='Google Plus'></a></li>
<li class='facebook'><a href='http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017' title='Facebook'></a></li>
<li class='rss'><a href='http://www.ayudadeblogger.com/feeds/posts/default' title='Rss'></a></li>
<li class='pinterest'><a href=''https://www.pinerest.com' title='Pinterest'></a></li>
</ul>
Nota: Si ya utilizas en tu blog de blogger un código jQuery en tu plantilla, tendrás que borrar el código que está marcado de color amarillo <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>, y si no utilizas ningún código jQuery, cópialo tal como está.
Realiza estos cambios:
He marcado de color azul a los 5 perfiles de mis redes sociales, tendrás que borrarlos y poner ahí en cada una de ellas, los perfiles de tus redes sociales correspondientes.
Eso es todo, ahora dale un clic en “Guardar” y ubícalo donde tú quieras.
Fuente; ayudadeblogger
Publicado por;
0 comentarios