Bueno gente, hace tiempo empece con mi blog:
y desde ahí empece a investigar y personalizar con las mejores alternativas, ahora que dejé como me gusta quiero compartir con ustedes algunos trucos y códigos que utilizo.
Estos códigos lo agregas en la opción Diseño, añadir un gadget y HTML/Javascript
Observación: debes reemplazar los textos marcados en rojo.
1 - Menu lateral de Redes Sociales Desplegable.
Para obtener mas seguidores en las redes sociales puedes agregar un menu elegante y que no sea molesto en la parte lateral izquierda de tu navegador, lo puedes ver aqui , con el siguiente código:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <style> #fb_like_box { position:fixed; z-index:10000; top:1px; left:-540px; width:370px; height:180px; padding:50px 100px 0 130px; background:url(http://4.bp.blogspot.com/-x95_aU4wj0o/UXROj6JkaNI/AAAAAAAAARs/dsYG2z4FGko/s1600/fb-like-box-slider.png) no-repeat; } #twitter_follow_us_box { position:fixed; z-index:10000; top:210px; left:-540px; width:370px; height:180px; padding:50px 100px 0 130px; background:url(http://2.bp.blogspot.com/-ZQtzDezpUcM/UXROj6htQdI/AAAAAAAAARw/rNjAXa3R3ZI/s1600/tw-like-box-slider.png) no-repeat; } #g-plus-seguidores { position:fixed; z-index:10000; top:420px; left:-540px; width:370px; height:180px; padding:50px 100px 0 130px; background:url(http://3.bp.blogspot.com/-YJ_i2GnER_c/UXROjgz0cJI/AAAAAAAAARo/9TVzLoXjCZ8/s1600/gp-like-box-slider.png) no-repeat; } </style> <div id="fb_like_box"> <h3 style="color: #3b5998;"> Acompañanos en Facebook </h3> <div style="color: #3b5998;"> Dale un Me gusta y síguenos</div> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftupaginadefacebook&width=370&height=62&colorscheme=light&show_faces=false&border_color&stream=false&header=true&appId=334915956563249" style="border: none; height: 72px; overflow: hidden; width: 370px;"></iframe> </div> <div id="twitter_follow_us_box"> <h3 style="color: #3ec3f0;"> Síguenos en Twitter </h3> <div style="color: #3ec3f0;"> Recibe nuestras actualizaciones</div> <br /> <a class="twitter-follow-button" data-show-count="true" data-size="large" href="https://twitter.com/tucuentadetwitter">Seguir @tucuentadetwitter</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs";</script> </div> <div id='g-plus-seguidores'> <h3 style="color: #cf4232;"> Síguenos en Google+ </h3> <div style="color: #cf4232;"> Únete con nocotros</div> <br /> <div class="g-plus" data-action="followers" data-height="100" data-href="https://plus.google.com/tuiddegoogleplus" data-source="blogger:blog:followers" data-width="350"> </div> <script type="text/javascript"> (function() { window.___gcfg = {'lang': 'es'}; var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </div> <script type="text/javascript"> jQuery(document).ready(function(){ if (!window.Touch) { $('#fb_like_box').mouseenter(function() { $(this).stop(true,true).animate({left: '-100'}, 200, function() {}); }).mouseleave(function() { $(this).stop(true,true).animate({left: '-540'}, 200, function() {}); }); } else { $('#fb_like_box').toggle(function() { $(this).stop(true,true).animate({left: '-100'}, 200, function() {}); }, function() { $(this).stop(true,true).animate({left: '-540'}, 200, function() {}); }); } }); </script> <! -- creado por http://www.focoblogger.com/ --> <script type="text/javascript"> jQuery(document).ready(function(){ if (!window.Touch) { $('#twitter_follow_us_box').mouseenter(function() { $(this).stop(true,true).animate({left: '-100'}, 200, function() {}); }).mouseleave(function() { $(this).stop(true,true).animate({left: '-540'}, 200, function() {}); }); } else { $('#twitter_follow_us_box').toggle(function() { $(this).stop(true,true).animate({left: '-100'}, 200, function() {}); }, function() { $(this).stop(true,true).animate({left: '-540'}, 200, function() {}); }); } }); </script> <script type="text/javascript"> jQuery(document).ready(function(){ if (!window.Touch) { $('#g-plus-seguidores').mouseenter(function() { $(this).stop(true,true).animate({left: '-100'}, 200, function() {}); }).mouseleave(function() { $(this).stop(true,true).animate({left: '-540'}, 200, function() {}); }); } else { $('#g-plus-seguidores').toggle(function() { $(this).stop(true,true).animate({left: '-100'}, 200, function() {}); }, function() { $(this).stop(true,true).animate({left: '-540'}, 200, function() {}); }); } }); </script></!>
2 - Barra flotante para compartir tu post
Esta barra flotante se sitúa en la parte derecha del post y va deslizando a medida se va leyendo el contenido por eso es llamativo y será fácil para los lectores compartir tu post. demo
<!-- Inicia barra flotante compartir --> <style> /*Pageshare Terrenoblogger.co*/ #pageshare { float:left; margin-left:-100px; background: #fafafa; position:fixed; bottom:200px; border:1px solid #e5e5e5;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} #pageshare:hover { background-color:#ffffff;-webkit-box-shadow:0px 2px 2px rgba(0,0,0,.1);-moz-box-shadow:0px 2px 2px rgba(0,0,0,.1);box-shadow:0px 2px 2px rgba(0,0,0,.1);} #pageshare .sbutton { float:left;clear:both;margin:5px 5px 0 5px;} </style> <div id='pageshare' title="Obten este Widget en Terrenoblogger.co"> <div class='sbutton' id='tweet'> <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="usuariotwitter">Tweet</a> </div> <div class='sbutton' id='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone> </div> <div class='sbutton' id='fbshare'> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-like" data-send="true" data-layout="box_count" data-width="50" data-show-faces="false"></div></div> <div style="clear: both;font-size: 10px;text-align:center;"><a href="http://direccióndetublog/">Widget</a></div><!-- No remover este link --> </div> <!-- Finaliza barra flotante compartir -->
3 - Articulos relacionados al finalizar de leer el post
Una forma interesante de retener los visitantes es agregar el widget de recomendaciones de post similares al terminar de leer un articulo.
Para obtenerlo debes ingresar a este enlace: http://www.linkwithin.com
y completar este formulario con tu email, blog y cantidad de enlaces recomendados a mostrar (cantidad recomendada 5 o 4)
Clic en Get widget y permitir añadir a blogger o wordpress el código.
4 - Condicionar la descarga a cambio de un Me gusta, +1 o twitear
Si tu pagina es de descargas puedes condicionar a los usuarios para que muestre el enlace de descarga despues de darle me gusta, tiwttear o +1 a tu blog, DEMO con el siguiente codigo:
<center> <html xmlns:fb="http://ogp.me/ns/fb#"> <head> <title>paga con un Tweet, Me gusta o +1</title> <html xmlns:fb="http://ogp.me/ns/fb#"> <head> <title>paga con un Tweet, Me gusta o +1</title> </head> <body> <div id="fb-root"></div> <script type="text/javascript"> function labnol() { // The file URL that visitors can download after their Like/tweet/+1 var url = "direccion de descarga a mostrar"; url = "<a href='" + url + "'>Click aquí</a> para descargar."; document.getElementById("restricted".innerHTML = url; } window.fbAsyncInit = function() { FB.init({ status : true, cookie : true, xfbml : true }); FB.Event.subscribe('edge.create', function(response) { labnol(); }); }; (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); window.twttr = (function (d,s,id) { var t, js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } }); }(document, "script", "twitter-wjs"); twttr.ready(function (twttr) { twttr.events.bind('tweet', function(event) { labnol(); }); }); (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> <div id="restricted"> Para ver el enlace Twittea <a href="https://twitter.com/share" data-text="Recomiendo este blog" data-via="tuuserdetwitter" class="twitter-share-button" data-lang="en"></a> +1 <g:plusone size="medium" callback="labnol" href="Direccion de descarga a mostrar"></g:plusone> o Dale Me gusta <fb:like href="http://www.facebook.com/tupaginadefacebook" send="false" layout="button_count" width="220" show_faces="false"></fb:like> </div> </body> </html> </center>
Esto es todo, cualquier novedad lo iré publicando, siganme en las redes sociales:
Saludos