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.
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/AVvXsEjGpSh_wPptBxk0A5u6Haw3A46XR8jrnaeqJqjDZLAFVhsP7Sc-3tgnlJ_G1RvSiwTfWsHj2StnpUiZF6MaCsipscxl7P0Fwcea-hQiU-0FgADi0IYRNvLfVBa792_D7bgaezfwjLFmw1tk/s400/rss_64x64.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoF7rehy-yGDM87CWqofaW9CaHYlrKkCwlmLJHrrW0DafB88VtDsCvRt4x2POIp31O2HEuiw6TDRc1Bf8G13jMWw65_-RmF9TokV24tr6e_3-lr2BgEDhMV0qSvt_JOznsYs_4W4Pw7Je-/s400/facebook_64x64.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga8AW07n3F12pMMe0BfvjNkCG7rTAgeiOL7ysB_ts7Uw_HaSFSNDCyufk0X3nrHyTO7ZTNHPMaKtQN6b1zo1iD18kG9rMSL1L_VgGLMA6QIgsVensQQxomIoHnxx4td5ahjwXJbWgiCG4d/s400/twitter_64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdYAOTFnxO0mc6ET7AvEzzvrarUI10TlVM9wDXYIZpCFV_xUi637WN1KLxOFeKluvBSAkJSuAbd0rovpjWexeyT7kZ2unonSPR4Nqn_cJx5beOZeDgBjdprcLQDVEaDQX9LZJoV28ZhV2-/s400/google_64x64.png);
}
ul#navigation .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjmI1dk3R6hpGqZ-KVFzzV-PbcZDlThjePfor-mb3Bff75qxEE5DpPilh7lU15VOtUdOwKRrN0nB0yWHoPTR78HspmF-nb7ZJCHPSYB27Qr0hEuVMiAGSCKkt3phtM3B5z2gzkV-92iMs/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>
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/AVvXsEjGpSh_wPptBxk0A5u6Haw3A46XR8jrnaeqJqjDZLAFVhsP7Sc-3tgnlJ_G1RvSiwTfWsHj2StnpUiZF6MaCsipscxl7P0Fwcea-hQiU-0FgADi0IYRNvLfVBa792_D7bgaezfwjLFmw1tk/s400/rss_64x64.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoF7rehy-yGDM87CWqofaW9CaHYlrKkCwlmLJHrrW0DafB88VtDsCvRt4x2POIp31O2HEuiw6TDRc1Bf8G13jMWw65_-RmF9TokV24tr6e_3-lr2BgEDhMV0qSvt_JOznsYs_4W4Pw7Je-/s400/facebook_64x64.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga8AW07n3F12pMMe0BfvjNkCG7rTAgeiOL7ysB_ts7Uw_HaSFSNDCyufk0X3nrHyTO7ZTNHPMaKtQN6b1zo1iD18kG9rMSL1L_VgGLMA6QIgsVensQQxomIoHnxx4td5ahjwXJbWgiCG4d/s400/twitter_64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdYAOTFnxO0mc6ET7AvEzzvrarUI10TlVM9wDXYIZpCFV_xUi637WN1KLxOFeKluvBSAkJSuAbd0rovpjWexeyT7kZ2unonSPR4Nqn_cJx5beOZeDgBjdprcLQDVEaDQX9LZJoV28ZhV2-/s400/google_64x64.png);
}
ul#navigation .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjmI1dk3R6hpGqZ-KVFzzV-PbcZDlThjePfor-mb3Bff75qxEE5DpPilh7lU15VOtUdOwKRrN0nB0yWHoPTR78HspmF-nb7ZJCHPSYB27Qr0hEuVMiAGSCKkt3phtM3B5z2gzkV-92iMs/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 Fuchsia
ayudadeblogger@gmail.com
eso es todo ahora dale un clic en “Guardar”
Fuente; ayudadeblogger
Publicado por;
0 comentarios: