Me gusta Facebook Google + y Twitter Popout para blogger


Atraer a los usuarios que visitan su blog a que compartan su pagina web en las redes sociales es algo que no puedes perder la oportunidad de hacerlo con un solo widget. 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.  

Me gusta Facebook Google + y Twitter Popout para blogger

A continuación mire su demostración en mi blog de demos


Te gusto!!!!

Algunas páginas web o blogger ya utilizan este sistema así que no es cosa de otro mundo.

Implementación del código

1 Ir a blogger

2 Da un clic en “Diseño

Me gusta Facebook Google + y Twitter Popout para blogger

3 Busca el gadget “Añadir un gadget” y ábrelo

Me gusta Facebook Google + y Twitter Popout para blogger

4 Se te abrirá una nueva ventana en la cual tendrás que buscar el widget que dice “HTML/Javascript” ábrelo e inserta en su interior las siguientes líneas de código


<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>

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.

Viste que era tan fácil.

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber

Saludos.





Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: