Es de suma importancia dar a conocer nuestro blog en las redes sociales mas conocidas como, Facebook, Google + y Twitter, poder compartir lo que haces y que la gente lo comparta, en sus perfiles, dará como lugar a que tu blog sea visitado por mas personas en todo el mundo. Una buena opción para promocionar tu blog de blogger.
No voy hacer este tutorial demasiado extenso ya que solo deberán insertar un solo código en un widget y realizar tres simples cambios.
El widget que van aprender a insertar en su blog de blogger se mostrara al momento que un visitante abra su blog y se abrirá automáticamente un popout de bienvenida en la cual estará presente los iconos de compartir un me gusta de Facebook, Google + y Twitter.
Así que es un código que no le dará errores en el proceso de SEO.
Implementación del código
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>
#stp-bg{
display:none;
position:fixed;
_position:absolute; /* star by ayudadeblogger.com*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
z-index:998;
}
#stp-main{
position:fixed;
top:220px;
_position:absolute; /* hack for IE 6*/
display:none;
width:450px;
border:7px solid #2f2f2f;
background:#fff;
z-index:999;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
margin:0pt;
padding:0pt;
color:#333333;
text-align:left;
font-family:arial,sans-serif !important;
font-size:13px;
}
#stp-title{
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
font-size:18px;
padding:13px 0 13px 15px;
}
#stp-close{
float:right;
font-size:14px;
font-weight:bold;
font-family:Verdana, Geneva, sans-serif;
color:#777777 !important;
margin:0 13px 0 0;
border-bottom:0px !important;
text-decoration:none !important;
}
#stp-close:hover{
text-decoration:none !important;
}
#stp-msg{
background:#4074CF;
padding:10px 15px;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif !important;
font-weight:bold;
line-height:20px;
}
#stp-buttons{
margin:25px 0px 25px 120px;
padding:0 0 0 15px;
}
#stp-bottom{
padding:15px 10px;
background:#EFEFEF;
color:#95989F;
border-top:1px solid #DDE0E8;
}
#stp-counter{
font-size:11px !important;
text-align:right;
font-weight:bold;
}
.stp-button{
float:left;
width:120px;
}
.stp-clear{
clear:both !important;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://connect.facebook.net/es_LA/all.js#xfbml=1"></script>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript">
</script>
<script type="text/javascript" src="http://yourjavascript.com/114356611/jquery-stp-min.js">
</script>
<script> $(document).ready(function(){ $().socialTrafficPop({ timeout: 30, title: "Bienvenido a Ayudadeblogger.com",
message: 'No te olvides de Recomendarnos <em> en las redes sociales</em>! ', google_url: "http://www.ayudadeblogger.com/", google_size: "tall", fb_url: "http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017", fb_layout: "box_count", closeable: true, advancedClose: false, opacity: '0.45', twitter_on: true
});
});
</script>
#stp-bg{
display:none;
position:fixed;
_position:absolute; /* star by ayudadeblogger.com*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
z-index:998;
}
#stp-main{
position:fixed;
top:220px;
_position:absolute; /* hack for IE 6*/
display:none;
width:450px;
border:7px solid #2f2f2f;
background:#fff;
z-index:999;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
margin:0pt;
padding:0pt;
color:#333333;
text-align:left;
font-family:arial,sans-serif !important;
font-size:13px;
}
#stp-title{
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
font-size:18px;
padding:13px 0 13px 15px;
}
#stp-close{
float:right;
font-size:14px;
font-weight:bold;
font-family:Verdana, Geneva, sans-serif;
color:#777777 !important;
margin:0 13px 0 0;
border-bottom:0px !important;
text-decoration:none !important;
}
#stp-close:hover{
text-decoration:none !important;
}
#stp-msg{
background:#4074CF;
padding:10px 15px;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif !important;
font-weight:bold;
line-height:20px;
}
#stp-buttons{
margin:25px 0px 25px 120px;
padding:0 0 0 15px;
}
#stp-bottom{
padding:15px 10px;
background:#EFEFEF;
color:#95989F;
border-top:1px solid #DDE0E8;
}
#stp-counter{
font-size:11px !important;
text-align:right;
font-weight:bold;
}
.stp-button{
float:left;
width:120px;
}
.stp-clear{
clear:both !important;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://connect.facebook.net/es_LA/all.js#xfbml=1"></script>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript">
</script>
<script type="text/javascript" src="http://yourjavascript.com/114356611/jquery-stp-min.js">
</script>
<script> $(document).ready(function(){ $().socialTrafficPop({ timeout: 30, title: "Bienvenido a Ayudadeblogger.com",
message: 'No te olvides de Recomendarnos <em> en las redes sociales</em>! ', google_url: "http://www.ayudadeblogger.com/", google_size: "tall", fb_url: "http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017", fb_layout: "box_count", closeable: true, advancedClose: false, opacity: '0.45', twitter_on: true
});
});
</script>
Realiza estos cambios:
He marcado tres puntos de diferentes colores en los cuales tendrás que cambiarlos, donde dice Bienvenido a Ayudadeblogger.com cámbialo por un tema de bienvenida de tu blog.
También deberás remplazar el link que esta marcado de color azul http://www.ayudadeblogger.com/ y poner el link de tu blog de blogger.
Y por ultimo en la misma posición vas a encontrar un link marcado de color verde http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017 este link es el que uso en mi Fanpage de Facebook, deberás borrarlo y poner el link de tu Fanpage de Facebook.
Eso es todo ahora dale un clic en “Guardar” y ubica tu widget donde tu quieras, y mira tus nuevos cambios en tu blog.
0 comentarios: