Widget para blogger Menú de Redes Sociales
En Widgets para blogger voy a publicar un
widget el cual podrán usarlo en su blog de blogger. A este widget se lo conoce
como Menú de Redes Sociales, es fácil de implementarlo en su blog, lo que hará
este widget Menú de Redes Sociales será mostrarse en la parte superior antes de
la cabecera principal de su blog, esto hará que los usuarios que visitan su
blog logren seguirlos por las redes sociales mas importantes como Facebook,
Twitter y Google +, también tiene un desplegable el cual al hacer clic en el
icono de Email, se abrirá automáticamente una ventana en el cual podrán dejarle
algún mensaje directamente en su correo electrónico. Este truco para blogger es muy sencillo de
realizarlo, solo tendrán que seguir un solo paso para poder tener este
espectacular widget Menú de Redes Sociales.
A continuación mire su demostración en
mi blog de demos
Ahora si a trabajar
1 Ir a blogger
2 Da un clic en “Diseño”
3 Abre el gadget que dice “Añadir un
gadget”
4 Busca el widget que dice “HTML/Javascript”
5 Pega el siguiente código en su
interior
<style>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
border:0;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#eeeeee;
background-repeat:no-repeat;
background-position:50%
10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px
10px 10px;
-webkit-border-bottom-right-radius:
10px;
-webkit-border-bottom-left-radius:
10px;
-khtml-border-bottom-right-radius:
10px;
-khtml-border-bottom-left-radius:
10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.96;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
background-color:#CAE3F2;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
font-family:trebuchet-ms,
arial, tahoma, Sans-Serif;
font-weight:bold;
text-shadow: 0 -1px 1px
#fff;
}
ul#navigation .rss a{
background-image:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpLdu0B_KdZOMq9wKsIg2Wg25IZOdyvTAA0Z8ExeLUfu5uIZkdlPCfcWqrdAeNUW6FhRAhgwBcM9n673fYBthaWW74mKPm3SAnp4FDXaFGYGOQFTJG8xkK4LMO1luFesR-K5uPp9rJ6Tg3/s400/rss_64x64.png);
}
ul#navigation .facebook a
{
background-image:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2O3m5p84tFGdd6Tyk63bydmBcMo6BToXWAqB5GUw8b2d2xt2DlaCoZsQ6ZFUSZqosvdd20JbVmnie78azBJVhehiCP1xPefdX0x_TcrbSp56dQzJVh9TiHLdGzHt3BXEcoUXsj8l7bWlv/s400/facebook_64x64.png);
}
ul#navigation .twitter a {
background-image:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNlnaPUJW5yM2Aeb3gqA1RjY1zhyPWnmD68PhSFMpvilb6G3jV0zSd4jPOpLTGKMQME0V5JiTYt0JjUL751fSXoo26Gjkfy4QlHvDmZCfmadwkOBy_tZLkms7dJBicniaRnftmZsg02SjD/s400/twitter_64x64.png);
}
ul#navigation
.googlebookmarks a {
background-image:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi1043yD6cvD4qCZDmqeL-Dc29zl0wuyPWCIRyoa4A6XLfaAuDH9V2ln8UOp9YufnIYOl5Ni5tjc8tmsuxnUlsW4D99edhMm34LOZeR0OlPkJTGC0uZZxrn3MUtUHjP-xi8EzdihDtQqP3/s400/google_64x64.png);
}
ul#navigation .e-mail a {
background-image:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghgDvH4gjztHbQqb6CSkZ95nL_6SIVmeooMrMtXwNm2_oIi_CgePPnygf9kO0GAWMy_n9Ej-PixrRqiV-M1SfZksdxe4hteEgVoiJyOxiPTpuwqN4E2vFMN-Nz9Ly9rG8oA0Nj6bh9Nk4/s1600/email.jpg);
}
</style>
<script
src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"
type="text/javascript">
</script>
<script
type="text/javascript">
$(function() {
var d=300;
$('#navigation
a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation >
li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function
() {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>
<ul
id="navigation">
<li
class="rss"><a href="http://feeds.feedburner.com/ForoAyudaDeBlogger"
target="_blank">RSS Feed</a></li><li
class="facebook"><a href="http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017"
target="_blank">Facebook</a></li><li
class="twitter"><a href="https://www.twitter.com/ayudadeblogger"
target="_blank">Twitter</a></li><li
class="googlebookmarks"><a href="https://plus.google.com/114283163993086871162"
target="_blank">Google</a></li>
<li
class="e-mail"><a href="mailto:ayudadeblogger@gmail.com" target="_blank">E-mail!</a></li></ul>
|
Realiza estos cambios:
1 Cambia el siguiente link
http://feeds.feedburner.com/ForoAyudaDeBlogger
E inserta el link completo de tu
FeedBurner
2 Cambia el link de Facebook
http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017
E inserta el link perteneciente de tu
Fanpage de Facebook
3 Cambia el link de Google +
https://plus.google.com/114283163993086871162
E inserta todo el link perteneciente de
tu Google +
4 Cambia la dirección de email que esta
marcado de color rojo
ayudadeblogger@gmail.com
E inserta tu dirección de email, eso es
todo ahora dale un clic en “Guardar”
Ahora ubica el widget donde tú quieras,
y mira tu nuevo cambio en tu blog.
Fácil verdad!!!!!
¿Necesitas ayuda?
Cualquier pregunta no duden en hacérmelo
saber y de inmediato les responderé
Saludos
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
4 comentarios: