Cómo crear un boletín informativo de nuestro blog

Respondiendo a una de las más clásicas preguntas de los que están comenzando en el mundo blog, voy a comentar ahora los pasos que tienen que realizarse para poder enviar de forma automática un email con las noticias de cada día a los lectores que así lo soliciten.

La idea es presentar un formulario como el que veis en el menú derecho de wwwhatsnew.com (el que veis en la miniatura lateral) para que los visitantes puedan informar su dirección de correo electrónico y recibir un email diario con las noticias del día anterior.

Aunque los más veteranos recordarán a feedblitz.com como uno de los servicios más populares para este tipo de tarea, voy a explicar el paso a paso usando Feedburner, aplicación de gestión de suscriptores que Google compró en 2007.

Lo primero que tenemos que hacer es identificarnos con nuestra cuenta de Google en feedburner.google.com, accediendo a un panel de control con todos nuestros feeds. Podemos crear uno nuevo para nuestro blog en la parte inferior, donde se indica en la captura:



Una vez indicada la url del blog, pulsamos a “Next” y esperamos a que se genere la nueva dirección de nuestro feed (en el caso de la imagen la dirección creada es feeds.feedburner.com/minuevoblog, un canal que obtendrá el contenido de minuevoblog.com y lo ofrecerá tanto por email como en formato RSS.



Ahora podemos acceder al panel de control pulsando en Skip directly to feed management de la siguiente pantalla, un panel que contiene la opción Publicize, tal y como muestro en la siguiente imagen.



Al pulsar en esta opción podremos especificar las características del formulario de entrada de email que los lectores tendrán que rellenar para solicitar la Newsletter. Este formulario tiene un solo campo de texto (email) y tendremos que ponerlo en el menú lateral para que los visitantes de nuestro blog puedan informar su correo electrónico y recibir el email diario con las noticias del día anterior.

Pulsamos en la opción “Activate” para poder comenzar a detallar dicho formulario:



Ahora podemos acceder a las opciones de personalización del formulario que mostremos. Allí vemos el código HTML que debemos pegar en nuestro menú lateral, mostrando un campo de texto para que los lectores informen su email.

Es posible, en lugar de mostrar un campo de texto, informar un enlace que, al ser pulsado, mostrará una ventana emergente donde los visitantes indicarán el email deseado.

Aunque, como veis en la imagen, es posible indicar el idioma del formulario, es necesario alterar algunos puntos del HTML, como el texto del botón (Enviar, en lugar de Subscribe) o el “Delivered by“.



En el menú izquierdo, en la sección Communication Preference, podemos alterar el texto que los suscriptores recibirán en su email como bienvenida, algo necesario para nuestro idioma, ya que dicho texto se encuentra inicialmente en inglés:



En la sección Email Branding podemos especificar detalles relacionados con la estética de la newsletter (tamaño de fuente, tipo de letra, logomarca, etc.), aunque no hay mucha flexibilidad en este punto, la verdad sea dicha.

Por último, en Delivery Options indicaremos la hora del envío de nuestro email, correo que se enviará a todos aquéllos que hayan solicitado la newsletter y la hayan activado al recibir el email de bienvenida.

Una vez publicado el formulario de entrada de emails en nuestro blog, solo tenemos que esperar a que el contenido despierte el suficiente interés como para atraer suscriptores. El número total se verá en la imagen inferior, donde podremos ver los emails registrados y desactivarlos manualmente en caso de que alguno de ellos lo solicite.

Fuente: wwwhatsnew

Sigue leyendo →

Flare, barra flotante de redes sociales para WordPress

Flare es un plugin que adhiere a un sitio web hecho en WordPress una flamante barra flotante de botones de redes sociales para compartir los artículos en Facebook, Twitter, Google Plus, Pinterest, Linkedin, Buffer y otros. Tiene algo de parecido a las recientes barras que lanzó AddThis pero su diseño es mucho más llamativo, e incluso es mucho más fácil de implementar.

Su elegante panel permite editar las opciones básicas para definir el lugar donde se desplegará (flotando a la izquierda o a la derecha) y opcionalmente sumar un par de pequeñas barras horizontales que se muestren arriba y abajo de cada artículo. Las demás opciones son más específicas: el color de fondo (negro, blanco o transparente), restricciones para el contador, el diseño de los botones (cuadrados, redondos, con bordes especiales y más) y mostrar un botón de promoción para sus creadores.

En la parte inferior se van añadiendo una a una las redes preferidas para mostrar en forma de botón, los perfiles a los que apuntará y las secciones del sitio donde estará activa (entradas y páginas). Por si fuera poco, en la pestaña Follow será posible definir algunas opciones para un widget que viene incluido con el plugin y que se puede mostrar en la barra lateral del sitio. Resta mencionar la sección de metricas, con una muy buena pinta, de la que informan que pronto estará disponible.

Enlace | Página de Flare en WordPress.org

Fuente: wwwhatsnew

Sigue leyendo →

YouTube estrena botón de suscripción para páginas web

Youtube ha creado un botón de suscripción que permite seguir con clic a cualquier canal sin salir de una página. La idea viene después de la intención de la compañía en aumentar el número de suscriptores, lo que incrementa el consumo de contenidos, y sigue la línea de todas las redes sociales.

Este botón incrustable de YouTube lanzado por Googleguarda un parecido similar a botones como Twitter,Facebook o Google+ y se puede añadir a blogs y páginas webs. Se puede configurar con tres diferentes diseños desde los canales estándar y los canales de pago pasando del color rojo al verde con diferentes tamaños.

Para ello, el procedimiento para incrustar este botón a diferentes páginas webs basta con copiar el código que se genera tras configurar y diseñar las opciones del botón y pegarlo donde el usuario quiera que aparezca.

Eso sí, este botón posee unas condiciones de uso especiales entre las que destaca la prohibición de dar premios o recompensas a cambio de hacer clic en este botón.

Fuente: europapress

Sigue leyendo →

Anonimizar los enlaces en Blogger

Muchos se preguntaran que es anonimizar, pues buen anonimizar es hacer que los enlaces externos que tengas en tu web antes de dirigirse al enlace de destino primero redirecciona a otra pagina para luego si volver a redireccionar a la web de destino.

Si no has entendido este concepto un poco enredado te lo voy a explicar con un ejemplo sencillo, un usuario tuyo da clic en un enlace de referencia de una entrada, pero antes de ir a la web de referencia el usuario vera un pantallazo negro de otra pagina, luego si ira a la pagina de referencia.

¿Qué ventajas tiene anonimizar enlaces externos?

Con esta herramienta, los webmasters pueden evitar aparecer como referente en los ficheros log de los servidores de las páginas enlazadas. Los que llevan las páginas enlazadas ya no pueden ver de dónde vienen sus visitantes.
Usar el truco para eliminar referentes es muy fácil:
http://anonym.to/?http://www.gulli.com/ enlaza con gulli.com de forma anónima sin que la página de origen aparezca en los ficheros log de la página enlazada.

Este truco es especialmente útil para sitios de descargas, ya que así evitan que los servidores donde tienen alojados los archivos tomen sus URLS como referencia y por ende hay menos probabilidades que les eliminen los enlaces.

Para usar este truco solo ve a Diseño, Añadir Gadget, HTML/JavaScript y pega allí lo siguiente:

<script src="http://js.anonym.to/anonym/anonymize.js" type="text/javascript"></script>
<script type="text/javascript"><!--
protected_links = "";
auto_anonymize();
//--></script>

Ahora solo guardas los cambios y listo.

Puedes ver el truco en acción en el siguiente blog de pruebas, haz clic en el enlace de Taringa! y lo veras en acción.

Fuente: Mil Trucos Blogger


http://www.miltrucosblogger.info/2013/07/anonimizar-los-enlaces-en-blogger.html?m=1

Sigue leyendo →

Gadget para tus redes sociales con efecto hover

En Tutoriales-Blogger he visto este interesante Widget que podría gustar a muchos, para alimentar nuestras redes sociales. Por aquí te dejo un ejemplo.

El código es muy simple de implementar. Una vez en el Dashboard de Blogger, nos vamos a "Diseño" e insertamos un widget de HTML/Javascript. Una vez ahí, insertamos el siguiente código:

<style type="text/css">
ul#social {
position: fixed;
margin: 0px;
padding: 0px;
top: 10px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#social li {
width: 100px;
}
ul#social li a {
display: block;
margin-left: -2px;
width: 100px;
height: 70px;
background-color:#fff;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
}
ul#social .twitter a{
background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixeg6UHzdVJJW5Lnfoo45-gnLIUbW1q2ZOgG3XbADHj3qD1u6y6wZ4CKBz0bwk-3Tt4n2GsgTKkWbCRhVgOZiulgYR4SB-b5UMZQFKAtH9Eets34BpXzeWOs9RAnewhU3Wbeb8eN0p4_0/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#social .googleplus a {
background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEo91llXHKIFrq4rzzy3LS1D0yo6HSnhmWuZT8nUBKK2eacbJPy3EyaC_3b2dhTRPdkfxXGxIzeVFr_ILV_LazATZkhisPQTSSM5r_U3ddbMelL-tnlsPdWkoMmgPh76VEdr_VkRlTjJw/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#social .facebook a {
background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQw1EU6xcnjqiGPKXfJtirPcR8i5oeqjnCqoFWEOy231TtkLMqLGdAdSAMuag2gjepF2XsdfaIeTdjWH21ptBPRuMd1o-Ucii57k29rqaXc_ZUARvO-hefhuJdfR9U-Lty0Ew8Nuhfauo/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#social .rss a {
background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmuR7RSowPp5DFM2JyDUZ6Oqhe4GjF2I9vbeH9f8OIAuvUcm1osoNdxNt9dYoGEf5dE-mJEtGc1mw4QrBoJqp4HCY0k6J_O2hY7RbHZaCmo2FiG9q3_31Vlz2JeINl9kmrc7w2RvJVFN8/s1600/rss.png)no-repeat;
background-position:center center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type='text/javascript'>
$(function () {
$('#social a').stop().animate({
'marginLeft': '-85px'
}, 1000);
$('#social > li').hover(
function () {
$('a', $(this)).stop().animate({
'marginLeft': '-2px'
}, 200);
},
function () {
$('a', $(this)).stop().animate({
'marginLeft': '-85px'
}, 200);
}
);
});
</script>
<ul id='social'>
<li class='twitter'><a href='#' title='Twitter'></a></li>
<li class='googleplus'><a href='#' title='Google Plus'></a></li>
<li class='facebook'><a href='#' title='Facebook'></a></li>
<li class='rss'><a href='#' title='Rss'></a></li>
</ul>

 La línea en azul debe borrarse en caso de que ya tengamos implementado algún otro widget o truco que utilice las librerías JQuery, que suelen ser casi todas las utilidades que muestran diapositivas. En las últimas líneas del código, los # los sustituiremos por los respectivos enlaces a nuestras redes sociales y rss. Y eso es todo.

¿Qué te parece?

Sigue leyendo →

Los nuevos botones y badges de Google+ para insertar en nuestra web

El viernes se cumplían 2 años de la llegada de Google+, la red social o mejor dicho, la capa social que envuelve todos los servicios de Google bajo un manto que nos permite tener una experiencia integral en todos sus productos y servicios. La verdad es que este segundo aniversario ha pasado un poco desapercibido más allá del rediseño del servicio que Google nos mostró en el pasado Google I/O hace ya algo más de un mes y, desde entonces, hemos vuelto al ciclo de cambios menores y pequeñas mejoras en esta red social. Una de las muestras de Google+ que más encontramos por la web son sus botones para compartir y los badges que vinculan una web con el perfil de su autor o la página de una empresa o un marca en Google+; un conjunto de recursos que Google acaba de renovar y vale la pena conocer para ponerlos en uso en nuestra página web.

Si bien los cambios no son especialmente sustanciales no está de más tenerlos presentes para actualizar nuestra página web o tenerlos en cuenta en nuestro próximo proyecto puesto que estos botones de Google+ nos permiten tender un puente entre nuestro blog o la página web de nuestra empresa y los perfiles de nuestros visitantes en Google+, contribuyendo a amplificar nuestro mensaje.

El botón para seguir un sitio a través de Google+ sufre un ligero cambio de diseño que nos ofrece 3 variaciones del botón (con texto y contador tanto en disposición horizontal como en vertical y sin el contador), selección de idioma y un rediseño en los colores una vez que un usuario nos sigue (el botón se torna en color azul).



El badge para las Comunidades en Google+, el de páginas en Google+ y el badge para los perfilestambién sufren cambios en su diseño y se vuelven mucho más vistosos y atractivos para que podamos insertarlos en nuestra página web y promocionar nuestra actividad en Google+. En los tres casos contaremos con cierto grado de libertad a la hora de personalizar el look and feel tanto en el tamaño del badge, su disposición (horizontal o vertical), las imágenes a mostrar o el idioma del texto del botón para seguir.



¿Y qué pasa con los botones actuales? ¿Cómo migrar a estos nuevos botones? Teniendo en cuenta que para muchos usuarios el cambio de estos botones tiene un impacto directo en el diseño de su página web, Google+ nos deja un período de 90 días para que nos adaptemos y, por tanto, en este tiempo los antiguos botones ybadges seguirán operativos hasta que se fuerce el cambio a los nuevos automáticamente.
Fuente: http://bitelia.com/2013/06/botones-de-google-plus

Sigue leyendo →

Everypost: facilita publicación de artículos desde tu smartphone en redes sociales

Everypost es una aplicación para teléfonos inteligentes (Android-iPad/iPhone) desarrollada por dos argentinos, que te permite capturar, publicar y almacenar contenido multimedia en forma simultánea en las principales redes sociales. Con Everypost podrás publicar contenidos al mismo tiempo a Facebook, Twitter, Google+, Pinterest, Linkedin, Tumblr y a tus contactos de la libreta de direcciones. De manera rápida y fácil.



Ya no tendrás que ceñirte a escribir en 140 caracteres de Twitter, pues con el modo “Acortador de texto para Twitter” todo quedará bien en esta red social.



Dirección de descarga: EveryPost para Android ; desde Itunes

Fuente: Geeksroom

Sigue leyendo →

Nuevo widget de formulario de contacto en Blogger

Esta noticia es para todos los Blogueros que sus blogs funcionen bajo la plataforma de Google (Blogger) como es nuestro caso, acaba de ser lanzado un sencillo Gadget para el Blog el "Formulario de Contacto", recuerdo hace unos 3 y 4 años cuando me iniciaba como Blogero... muchos como yo buscábamos la manera de crear un formulario de contacto para blogger que fuese sencillo y no dependiera de servicios externos que nos limitaban a "X" numero de envíos por mes (como siempre). Si este gadget hubiese existido hace 4 años todo hubiese sido mas simple en ese entonces, pero aquí lo tenemos.

Nosotros ya lo hemos incorporado al Blog, lo podrás encontrar al Pie del Blog.



Para Agregarlo, simplemente Vamos al Panel de Blogger > Diseño > Añadir Gadget
En la ventana que se nos abre par añadir gadget pulsamos sobre mas Gadget.



Y listo.

Sigue leyendo →

Fanbox flotante de Twitter, Facebook y Google+

Desde que Mil Trucos Blogger comparten este widget para tener un fanbox de facebook, Twitter y Google plus que se ven en la parte lateral del blog. Es muy fácil de añadir, y tiene un efecto deslizante, sin código javascript ni nada más que sobrecargue el blog.

Así se ve cuando esta desplegado:



Así cuando esta plegado:

Para añadir este truco a tu blog, solo tienes que ir a Diseño, Añadir Gadget, HTML/JavaScript y pegar lo siguiente:

<style>
#flotante1 {
position:fixed;
top:100px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1002;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante2 {
position:fixed;
top:240px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1003;
border-radius:10px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante3 {
position:fixed;
top:380px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1004;
border-radius:10px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante1:hover, #flotante2:hover, #flotante3:hover {
right:0px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
div.likeboxwrap {
margin-top:-5px;
margin-left:-45px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
}
</style>
<!-- Primera pestaña -->
<div id='flotante1'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq2Gl7hyAtuFsQDz8UdhLwI4uj8B5OURVvN2FRq3V1iyLOM9JjZbUYr9wJcoXrkbKeHFARuQ6MGjHrh9O3CZVR3b325-IgjDD3q_qWKQqCuMtHP0cGzGJCDuCF08aejqq3IeWUUYhkyvs/' style='float:left;'/>
<div style='background: #3c5a98; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap'><iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnombre-de-la-página-de-facebook&width=240&colorscheme=light&connections=15&stream=false&header=false&height=350' style='border:none; overflow:hidden; width:240px; height:325px;'/></iframe>
</div></span></div></div>
<!-- Segunda pestaña -->
<div id='flotante2'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtU3AtYdOOxxizJBJNw7LIio4dU3XUAIZC1CDL13ZrAwr-jdTeGDA40AkvJQ4hyphenhyphentubsARQLs_yoG33ILoI7E6Pp1K8jQ1L8__YDLvzvv0rlpHHpVTi2PXE269eFnQ0_qkpYYUR5RyniW0/s159/goo_tab.png' style='float:left;'/>
<div style='background: #9A9FA8; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap' style="padding-left:20px; padding-top:15px; height:310px !important;">
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/XXXXXXXXXXXXXX" data-source="blogger:blog:followers" data-width="240">
</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></span></div></div>
<!-- Tercera pestaña -->
<div id='flotante3'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJMS5DVvoIsNBJaE7I6nPS21ICBUlXfv-v9baez1N72KH0_6AtbAmncTXtEt9JY5MpBBaiKKfkG6o76lsGDh6uSN2Ibj6NPn25NBaqw6M1FU-RAiowMLvyEir5fRxMIrfGLwaKtRzvY8k/' style='float:left;'/>
<div style='background: #00a0e8; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<style>
.follow_box_widget{overflow: hidden; padding-left: 5px; padding-right: 5px; padding-top: 5px; background-color: #fff transparent; position: relative; margin: auto;}
.follow_box{font-size: 11px; font-family: "lucida grande",tahoma,verdana,arial,sans-serif; color: #333; line-height: 1.28; text-align: left; direction: ltr;}
.follow_box .follow_top{padding: 5px 10px 0px 5px; margin-bottom: 8px; min-width: 230px; overflow: hidden;}
.follow_box .profileimage{float: left; width: 40px; height: 40px; padding: 0px; margin: 0 10px 4px 0;}
.follow_box img{border: 0;}
.follow_box a{cursor: pointer; color: #3B5998; text-decoration: none;}
.follow_box a:hover{text-decoration: underline;}
.follow_action{padding: 0 0 0 8px;}
.follow_box .follow_action .name{line-height: 15px; font-size: 14px; font-weight: bold;}
.follow_box .follow_button{margin: 5px 0 0;}
.follow_box .total{min-width: 230px; overflow: hidden; display: block;}
.follow_box .connections{padding: 5px 0 4px 0px; border-top: solid 1px #D8DFEA; border-bottom: 1px solid #CCC; min-height: 150px;}
.follow_box .connections .connections_grid{padding-top: 5px; overflow: hidden;}
.follow_box .clearfix{zoom: 1;}
.follow_box .connections .connections_grid .grid_item{float: left; margin:0px; margin-right: 5px; margin-bottom: 8px; overflow: hidden; width: 50px;}
.follow_box .connections .connections_grid .grid_item .name{font-size: 9px; color: gray; overflow: hidden; padding-top: 2px; text-align: center; white-space: nowrap;}
.follow_box .connections .connections_grid .grid_item img{width: 48px; height: 48px;}
.follow_box .follow_widget_footer{ cursor: default; width: 100%; min-width: 230px; overflow: hidden;}
.follow_box .footer_border{ margin-top: 5px;}
.follow_box .uiImageBlock{line-height: 14px;}
.follow_box .follow_widget_footer .footer_logo{float: left; margin-right: 5px;}
.follow_box .follow_widget_footer .footer_text{cursor: default; color: #808080; font-size: 9px; float: left;}
.follow_box .follow_widget_footer .footer_text a.footer_text_link{color: #808080;}
.follow_box .titlecase{text-transform:capitalize;}
</style>
<script>
/*
* Twitter Follow Box jQuery Plugin
* http://jobyj.in/twitter-follow-box-widget/
* Copyright 2012, Joby Joseph
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function(a){a.fn.followbox=function(b){function f(a,b){if(a>100)a=100;var c=new Array;for(var d=0;d<a;d++){c.push(b[d])}var e=c.join();return e}var c=a(this);var d="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi28AeEfBZSiiZJQLQuISMobShaXoDz6gOESANsfWrRtYm4NY7vDOoO1M-zPRDU4JK34C96abf5YiNpC5dCZ6LxLt8Kg_xYdoeih67OZ5kHQPeGnmgWNV9rfKuapmyeienJTibqRkeTUHQ/";var e=a.extend({user:"jobysblog",width:292,height:252,theme:"light",border_color:"#AAA",bg_color:"#fff",bg_image:"",title_color:"#3B5998",total_count_color:"#333",follower_name_color:"#BBB"},b);a.ajax({url:"http://api.twitter.com/1/users/lookup.json?screen_name="+e.user+"&include_entities=true",dataType:"jsonp",success:function(b){var g=e.width-2;var h=e.height-2;var i=e.height-115;var j=parseInt(e.width/55);var k=parseInt(i/69)+1;var l=j*k;c.html('<div class="follow_box_main" style="border: 1px solid #bbb; width: '+g+"px; height: "+h+'px;"><div class="follow_box_widget"><div class="follow_box"><div><div class="follow_top clearfix"><a href="http://www.twitter.com/'+e.user+'" target="_blank"><img class="profileimage img" src="'+b[0].profile_image_url_https+'" alt="'+b[0].name+'"></a><div class="follow_action"><div class="name_block"><a href="http://www.twitter.com/'+e.user+'" target="_blank"><span class="name titlecase">'+b[0].name.toLowerCase()+"</span> @"+b[0].screen_name+'</a></div><div class="follow_button"><iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/follow_button.html?screen_name='+e.user+'&show_count=false&show_screen_name=false&lang=es" style="width:100px; height:20px;"></iframe></div></div></div><div class="connections"><span class="total"><span class="follow_box_follower_count">'+b[0].followers_count+'</span> personas siguen a <b class="titlecase">'+b[0].name.toLowerCase()+'</b></span><div class="connections_grid clearfix" style="height:'+i+'px;"></div></div></div><div style="height: 23px"><div class="follow_widget_footer"><div class="footer_border"><div class="clearfix uiImageBlock"><a class="footer_logo" target="_blank" href="http://jobyj.in/twitter-follow-box-widget"><img src="'+d+'"/></a><div class="footer_text"><a class="footer_text_link" target="_blank" href="http://jobyj.in/twitter-follow-box-widget">Twitter Social Plugin</a></div></div></div></div></div></div></div></div>');if(e.theme=="dark"){c.find(".follow_box_main").addClass("dark")}c.find(".follow_box_follower_count").text(c.find(".follow_box_follower_count").text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"));if(a.browser.msie&&!a.support.boxModel)a(".follow_box .connections").css("padding-bottom","14px");if(e.theme=="custom"){c.find(".follow_box_main").css({"border-color":e.border_color,"background-color":e.bg_color,"background-image":'url("'+e.bg_image+'")'});c.find(".follow_box a").css({color:e.title_color});c.find(".follow_box .total").css({color:e.total_count_color})}a.ajax({url:"https://api.twitter.com/1/followers/ids.json?cursor=-1&screen_name="+e.user,dataType:"jsonp",success:function(b){var d=f(l,b.ids);a.ajax({url:"https://api.twitter.com/1/users/lookup.json?user_id="+d+"&include_entities=true",dataType:"jsonp",success:function(b){for(var d=0;d<b.length;d++){var f=a.trim(b[d].name);var g=f.split(" ");var h='<div class="grid_item"><a href="http://twitter.com/'+b[d].screen_name+'" target="_blank"><img class="img" src="'+b[d].profile_image_url+'" alt=""><div class="name titlecase">'+g[0].toLowerCase()+"</div></a></div>";c.find(".connections_grid").append(h)}if(e.theme=="custom"){c.find(".connections .connections_grid .grid_item .name").css({color:e.follower_name_color})}}})}})}})}})(jQuery)
</script>
<script>
$(document).ready(function(){
$('#twitterfollowbox').followbox({
'user':'usuarioTwitter',
'height':'300',
'width':'260',
'theme':'custom',
'border_color':'#ffffff',
'bg_color':'#ffffff',
'bg_image':'',
'title_color':'#3B5998',
'total_count_color':'#333333',
'follower_name_color':'#BDBDBB'
});
});
</script>
<div id="twitterfollowbox" class="follow-box-container"> </div>
</div></span></div></div>

Lo único a modificar sería lo que está en rojo. Reemplaza lo que esta en rojo, por lo que se indica, en el caso de facebook donde dice nombre-de-la-página-de-facebook reemplazalo por el nombre de tu pagina en facebook, lo mismo con el usuario de Twitter, lo que cambia es en la parte de Google Plus donde dice XXXXXX la cambias por tu ID de G+, esta la puedes hallar en la URL de tu perfil o pagina en G+, en mi caso la URL de mi perfil es:

https://plus.google.com/103122101899468839014/posts

Donde 103122101899468839014 es la ID en G+.

Ahora solo queda que guardes los cambios.

¿Qué te parece?

Fuente: Mil Trucos Blogger

Sigue leyendo →

Plugin para incrustar el sistema de comentarios de Google+ en blogs de WordPress

Brandon Holtsclaw es un ingeniero de software freelance que acaba de desarrollar un plugin para poder incrustar el sistema de comentarios de Google+ en blogs de la plataforma WordPress.

Comenta Holtsclaw en un artículo en su blog que anoche se cruzó con la noticia de que google había implementado el sistema de comentarios de Google+ en los blogs de Blogger y también que en algunos blogs que no son de Blogger comenzaron a usarlo, por lo luego de investigar un poco y escribir unas líneas de código, desarrolló el plugin de Comentarios de Google+ para WordPress.

Dice que es la primer versión y por supuesto le faltan muchas características, pero expresa que se pondrá a trabajar inmediatamente para mejorarlo.

Si quieren ver el plugin funcionando lo pueden hacer en su blog Cloud Hero y si desean bajar el plugin también lo pueden descargar de allí mismo.

En una actualización del artículo menciona que ya ha terminado de completar todos los formularios, el archivo Readme.txt, los ficheros de la Licencia y ha publicado el plugin en WordPress.org, pero para descargarlo de allí habrá que esperar a que pase el proceso de aprobación, el cual es manual y lleva su tiempo.

Fuente: Geeksroom

Sigue leyendo →

Cómo colocar varios widgets de Blogger con pestañas

Les vamos a mostrar 2 maneras de colocar varios widgets juntos, pero separados por pestañas, lo cual nos ayudará a reducir y aprovechar mejor el espacio del blog, para que sea más fácil de visualizar por los usuarios. En las imagenes anteriores podrán ver dos ejemplos (El de la derecha es el que se utiliza en este mismo blog).

Primer método:

Primero vamos con el más fácil (imagen de la izquierda), y es más fácil porque no es necesario modificar la plantilla de nuestro blog. Para ello, una vez en Blogger, nos vamos a diseño -> Agregar widget -> HTML/Javascript, y escribimos el siguiente código:

<style type="text/css">
.tabber {
padding: 0px !important;
border: 0 solid #bbb !important;
}
.tabber h2 {
float: left;
margin: 0 1px 0 0;
font-size: 12px;
padding: 3px 5px;
border: 1px solid #bbb;
margin-bottom: -1px; /*--Pull tab down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
cursor:pointer;
}
html .tabber h2.active {
background: #fff;
border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
border: 1px solid #bbb;
padding: 10px;
background: #fff;
clear:both;
margin:0;
}
.codewidget, #codeholder {
display:none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script><script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#codeholder').bloggerTabber ({
tabCount : 3 });
});
</script>
<!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'><p>Get this <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">tabber widget</a></p></div>

El título se deja en blanco, y el widget lo vas colocar (en la sección diseño), justo arriba de los widget que quieres colocar en pestañas, tal como lo muestra la siguiente imagen.

Lo señalado en rojo, indica el número de widget a colocar dentro de pestañas. Si en lugar de 3, sólo quisieras colocar dos widgets en pestañas, pues sólo cambia el valor 3 por un 2, quedando así: "tabCount : 2". Los colores del widget también se pueden modificar. Lo resaltado en amarillo indica que se está cargando una librería JQuery, que por lo general es necesaria para los efectos de deslizamientos, desvanecimiento o similares, así que si ya tienes algo así es mejor borrar esa línea. Para que las pestañas funcionen correctamente, los widgets a colocar en pestañas deben tener un título. También es necesario probarlo con todos los navegadores, en especie IE, ya que suele dar error. Si ese es tu caso, entonces este gadget no es para ti.

Segundo método:

Ahora el otro método para colocar tus widgets en pestañas, un poco más complicado con mejores efectos, lo hacemos de este modo: Dentro de Blogger, nos vamos a plantilla -> Editar HTML. Y sin expandir los artilugios, vamos a buscar: "]]></b:skin>". Y justo antes de eso vamos a colocar este código:

.widgets{width:100%; overflow:hidden; margin-top:5px; padding:0px 0px 0px 0px; background:#FFF; border:1px solid #ccc}
.widgets a{color:#222; text-decoration:none}
.widgets a:hover{color:#009; text-decoration:underline}
ul.tabnav{padding:0px 0px 0px 0px; height:27px; margin:0px 0px}
.tabnav li{display:inline; list-style:none; float:left; text-align:center; margin-right:4px}
.tabnav li a{text-decoration:none; text-transform:uppercase; font-weight:normal; padding:5px 8px; width:90px; line-height:18px; font-weight:bold; font-family:Century gothic,Arial,sans-serif; color:#262B2F; text-decoration:none; display:block}
.tabnav li a:hover, .tabnav li a:active, .tabnav li.ui-tabs-selected a{text-decoration:none; background:url(none/catm.pg) repeat-x; color:#0283C7}
.tabdiv{margin-top:2px; padding:5px 5px 5px 5px; font-family: Tahoma,Georgia,Century gothic,Arial,sans-serif; background:#EBF3FB}
.tabdiv a:link, .tabdiv  a:visited{color:#333}
.tabdiv a:hover{color:#2676A1}
.tabdiv ul{list-style-type:none; margin:0px 0px; padding:0px 0px}
.tabdiv ul li{height:100%; line-height:28px; padding:0px 0px 0px 0px; color:#333; border-bottom:1px dotted #61696F}
.tabdiv li a:link, .tabdiv li a:visited{margin-left:5px; overflow:hidden; height:18px; line-height:24px; padding:0px 0 0px 0px; margin:3px 0px; color:#99A6AF; font-size:13px}
.tabdiv li a:hover{background:url(none/la.jpg) no-repeat; color:#fff; text-decoration:none}
.ui-tabs-hide{display:none}
.tagcloud{width:300px; float:left; height:100%; padding:5px 15px; margin:0px 0px; background:#fff url(YOUR-IMAGE-HOSTING-LOCATION-HERE/tbody.jpg) repeat-y; font-family:Tahoma,Century gothic,verdana,Arial, sans-serif}
.tagcloud a:link, .tagcloud a:visited{color:#0282D9}
.tagcloud a:hover{color:#BC0C0F}

NOTA: Se puede ajustar el tamaño y color del código según el gusto.

Ahora buscamos la etiqueda "</head>", y justo antes insertamos el siguiente código:

<script src='http://yourjavascript.com/4393201331/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/3433123309/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'/>
<script src='http://yourjavascript.com/1303932443/sprinkle.js' type='text/javascript'/>
<script src='http://yourjavascript.com/3931349203/hoverintent.js' type='text/javascript'/>
<script src='http://yourjavascript.com/3335347091/scroll.js' type='text/javascript'/>
<script src='http://yourjavascript.com/9438113033/spy.js'/>

Ahora vamos a buscar este otro código:

<div id='sidebar-wrapper'>

Y justo después insertamos este código:

<div class='widgets' id='tabzine'>
<ul class='tabnav'>
<li class='pop'><a href='#popular'> Recent</a></li>
<li class='fea'><a href='#tags'> Labels </a></li>
<li class='rec'><a href=' #recent'> Followers </a></li>
</ul>
<div class='tabdiv' id='popular'>
<b:section class='cahaya13' id='cahaya16' showaddelement='yes'>
<b:widget id='HTML144' locked='false' title='Recent Post' type='HTML'/></b:section>
</div>
<div class='tabdiv' id='tags'>
<b:section class='cahaya4' id='cahaya4' showaddelement='yes'>
<b:widget id='Label122' locked='false' title='Labels' type='Label'/></b:section>
</div>
<div class='tabdiv' id='recent'>
<b:section class='cahaya13' id='cahaya14' showaddelement='yes'>
<b:widget id='Followers152' locked='false' title='Followers' type='Followers'/></b:section>
</div>
</div>

Lo que está en rojo se puede sustituir por el nombre de tus pestañas. Para agregar tus propios widgets a las pestañas sólo tienes que cambiar lo que está en azul por el código de tu widget (Dichos códigos los puedes encontrar en la propia plantilla, ya que tienen que estar agregados a la plantilla previamente, y que están construidos de modo similar a los que están en azul).

Sigue leyendo →

Ocultar widgets de distintas partes de Blogger

Con anterioridad vimos cómo mostrar los gadgets sólo en la portada, pero en este caso veremos algunos ejemplos para ocultar elementos en distintas partes del blog. Para ello necesitamos dos cosas, saber identificar los IDs de los gadgets o contenedores, y saber cuál condicional usar.

Primero, entramos en Diseño | Edición de HTML y SIN expandir plantillas de artilugios buscamos el nombre del gadget que queremos ocultar y en seguida veremos su ID.

Lo que está entre comillas simples después de id= es el nombre del ID del gadget. En el ejemplo anterior el ID del gadget que ocultaremos es HTML1

Ahora antes de </head> pegamos alguno de estos códigos:

Ocultar un elemento SÓLO en la portada del blog

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#NOMBRE {
display: none;
}
</style>
</b:if>

Ocultar un elemento en todas partes MENOS en la portada del blog

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style type='text/css'>
#NOMBRE {
display: none;
}
</style>
</b:if>

Ocultar un elemento SÓLO en las entradas individuales

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#NOMBRE {
display: none;
}
</style>
</b:if>

Ocultar un elemento en todas partes MENOS en las entradas individuales

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
#NOMBRE {
display: none;
}
</style>
</b:if>

Ocultar un elemento SÓLO en las páginas del archivo del blog

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<style type='text/css'>
#NOMBRE {
display: none;
}
</style>
</b:if>

Ocultar un elemento en todas partes MENOS en las páginas del archivo del blog

<b:if cond='data:blog.pageType != &quot;archive&quot;'>
<style type='text/css'>
#NOMBRE {
display: none;
}
</style>
</b:if>

Ocultar un elemento SÓLO en las páginas estáticas

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#NOMBRE {
display: none;
}
</style>
</b:if>

Ocultar un elemento en todas partes MENOS en las páginas estáticas

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
#NOMBRE {
display: none;
}
</style>
</b:if>

Ocultar un elemento en una entrada específica o etiqueta específica

<b:if cond='data:blog.url == &quot;URL de la entrada o etiqueta&quot;'>
<style type='text/css'>
#NOMBRE {
display: none;
}
</style>
</b:if>

Ocultar un elemento en todas partes MENOS en una entrada o etiqueta específica

<b:if cond='data:blog.url != &quot;URL de la entrada o etiqueta&quot;'>
<style type='text/css'>
#NOMBRE {
display: none;
}
</style>
</b:if>

En cualquiera de esos casos cambiaremos donde dice NOMBRE por el ID del gadget que queremos ocultar, y listo.

¿Te funcionó?

Fuente: Ciudad Blogger

Sigue leyendo →

FeederNinja, widgets de Facebook, Twitter y RSS para tu sitio web

Para plantearse la creación de un sitio web hoy en día no sólo hay que tener en cuenta el diseño, la programación de éste o el contenido, sino también pensar en cómo aumentar el engagement de la audiencia y cómo incorporar elementos sociales en la experiencia de nuestros visitantes. Una manera de hacer esto es colocar widgets que den acceso a redes sociales, cosa que nos permite hacer FeederNinja.

Con esta utilidad podremos añadir páginas de Facebook, biografías de Twitter y feeds RSS en nuestro sitio web, con lo cual los lectores vean dichas páginas enlazadas en la misma visita y desde la misma pantalla. Los widgets insertables en el sitio son muy personalizables (podremos cambiar el número de items, el tamaño del widget, el color…) y fáciles de crear, pues sólo crearemos un código para éste y lo insertaremos en el código del sitio web.

Disponemos de tres modalidades de suscripción: una gratis con limitación de elementos y colores, una cuota mensual de 3,99$ que nos eliminará las restricciones de personalización y una cuota anual de 39,99$ por si preferimos realizar un único pago por el servicio.

Fuente: wwwhatsnew

Sigue leyendo →

Gadget de Top Comentaristas para Blogger

Los comentaristas son una parte fundamental de cualquier blog, ya que ellos son los que le dan vida al blog, abriendo y causando debates lo que genera mas actividad en las entradas.

Por eso es muy importante saber cuales son los usuarios mas activos del blog, los usuarios que mas comentan, y es por esto que hoy les presento un espectacular método para la lista de top comentaristas del blog.

El gadget se vera de la siguiente manera:

Esta nueva forma del gadget de Top Comentaristas, viene con el avatar del usuario y esta hecho en JavaScript, este código pertenece a MS-Potilas, yo solo he modificado algunos atributos dando como resultado un código mas optimizado.

Para agregar este gadget tienes que entrar a Diseño, Añadir gadget, HTML/JavaScript y pegar el siguiente código:

<style type="text/css">
.top-commenter-line {margin: 3px 0;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {vertical-align:middle;}
</style>
<script type="text/javascript">
//
// Top Commentators gadget with avatars, by MS-potilas 2012.
// Gets a list of top commentators from all comments, or specified number of days in the past.
// See http://yabtb.blogspot.com/2012/05/top-commenters-gadget-with-avatars.html
//
// CONFIG:
var maxTopCommenters = 8; // how big a list of top commentators
var minComments = 1; // how many comments must top commentator have at least
var numDays = 0; // from how many days (ex. 30), or 0 from "all the time"
var excludeMe = true; // true: exclude my own comments
var excludeUsers = ["Anonymous", "someotherusertoexclude"]; // exclude these usernames
var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = ''; // empty, or Anonymous user name localized if you want to localize
//
var sizeAvatar = 28;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNaTPF-ddp1DC__be0Ub_jLirNnwJHlmcdIlJuWsqPJJ2dcX85KJPhOBXpy4JIgIXLYj2KFzFFKK-I4ybZWVyO243wmgvVXwGrmSrHJg6H9R0wLsOCYJLqBz7azWWVmcR2YBqYE-DLLnk/"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlMyProfile = ''; // set if you have no profile gadget on page
var urlMyAvatar = ''; // can be empty (then it is fetched) or url to image
// config end
// for old IEs & IE modes:
if(!Array.indexOf) {
Array.prototype.indexOf=function(obj) {
for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
return -1;
}}
function replaceTopCmtVars(text, item, position)
{
if(!item || !item.author) return text;
var author = item.author;
var authorUri = "";
if(author.uri && author.uri.$t != "")
authorUri = author.uri.$t;
var avaimg = urlAnoAvatar;
var bloggerprofile = "http://www.blogger.com/profile/";
if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
avaimg = author.gd$image.src;
else {
var parseurl = document.createElement('a');
if(authorUri != "") {
parseurl.href = authorUri;
avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
}
}
if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
avaimg = urlMyAvatar;
if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
avaimg = urlNoAvatar;
var newsize="s"+sizeAvatar;
avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
if(cropAvatar) newsize+="-c";
avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
var authorName = author.name.$t;
if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
authorName = txtAnonymous;
var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
authorName = authorName.substr(0, maxUserNameLength-3) + "...";
var authorcode = authorName;
if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>';
text = text.replace('[user]', authorcode);
text = text.replace('[image]', imgcode);
text = text.replace('[#]', position);
text = text.replace('[count]', item.count);
return text;
}
var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
var one_day=1000*60*60*24;
var today = new Date();
if(urlMyProfile == "") {
var elements = document.getElementsByTagName("*");
var expr = /(^| )profile-link( |$)/;
for(var i=0 ; i<elements.length ; i++)
if(expr.test(elements[i].className)) {
urlMyProfile = elements[i].href;
break;
}
}
if(json && json.feed && json.feed.entry && json.feed.entry.length) for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
if(numDays > 0) {
var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
//Calculate difference btw the two dates, and convert to days
var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
if(days > numDays) break;
}
var authorUri = "";
if(entry.author[0].uri && entry.author[0].uri.$t != "")
authorUri = entry.author[0].uri.$t;
if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
continue;
var authorName = entry.author[0].name.$t;
if(excludeUsers.indexOf(authorName) != -1)
continue;
var hash=entry.author[0].name.$t + "-" + authorUri;
if(topcommenters[hash])
topcommenters[hash].count++;
else {
var commenter = new Object();
commenter.author = entry.author[0];
commenter.count = 1;
topcommenters[hash] = commenter;
}
}
if(json && json.feed && json.feed.entry && json.feed.entry.length && json.feed.entry.length == 200) {
ndxbase += 200;
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
return;
}
// convert object to array of tuples
var tuplear = [];
for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);
tuplear.sort(function(a, b) {
if(b[1].count-a[1].count)
return b[1].count-a[1].count;
return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
});
// list top topcommenters:
var realcount = 0;
for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
var item = tuplear[i][1];
if(item.count < minComments)
break;
document.write('<di'+'v class="top-commenter-line">');
document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
document.write('</d'+'iv>');
realcount++;
}
if(!realcount)
document.write(txtNoTopCommenters);
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>

Ahora solo queda guardar los cambios y listo.

Para modificar el numero de usuarios que se muestran en el gadget, busca en el código var maxTopCommenters = 8; y cambia el 8 por el numero que quieras.

Para modificar el tamaño del avatar de los comentaristas busca en el código var sizeAvatar = 28; y cambia el numero 28 por el numero de pixeles que desees.

Fuente: Mil Trucos Blogger

Sigue leyendo →

Mostrar gadgets sólo en la portada de Blogger

Hay veces en las que necesitamos hacer que nuestra página sea un poco más ligera, y nos gustaría que algunos de los widgets de Blogger no estuvieran todo el tiempo, sino sencillamente en la portada. O incluso, también es posible que, por razones estéticas, sólo queramos que un widget aparezca sólo en la portada de nuestra página. De ese modo, dicho widget desaparecerá en cuanto el usuario vaya a leer alguna entrada.

Para lograr esto modificaremos el código del widdget que queremos ocultar en las entradas. Tomaremos como ejemplo el código de un gadget HTML/Javascript. Para esto nos vamos a Blogger, entramos en la sección "Plantilla", y después "Edición de HTML" y luego activamos "Expandir plantilla de artilugios". Ahora sólo hay que localizar el widget. Como cada widget es distinto, puede que sea algo complicado encontrarlo entre tanto código, sin embargo, la búsqueda se nos hará más fácil si este widget tiene un título, con lo que nos bastaría buscar con Control+F el título del widget.

El código del widget sería algo similar a esto (repito, cada widget es diferente, con códigos diferentes, pero tienen una estructura similar):

<b:widget id='HTML1' locked='false' title='Gadget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'><!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if></b:includable>
</b:widget>

Lo que se encuentra en amarillo es lo que debemos agregar al código del widget. Como ven, la primera parte que agregamos va justo después de <b:includable id='main'> y la segunda parte justo antes de </b:includable>.

Esto lo hacemos con cada uno de los gadgets que queremos esconder. De esta forma todos los gadgets se mostrarán en la portada, pero en las entradas se ocultarán aquellos que hayamos modificado.

¿Te gustó? ¿Te funcionó? Déjanos un comentario.

Fuente: Ciudad Blogger

Sigue leyendo →

Crear pestañas en Blogger sin modificar la plantilla

Hoy os voy a mostrar una forma sencilla de colocar un gadget de pestañas en el blog sin tener que tocar o modificar el Html de nuestra plantilla.

Resulta de mucha utilidad pues nos ayudará a REDUCIR espacio en la barra lateral. Dentro de ellas podemos colocar cualquier código que deseemos.

Pasos a seguir:

Diseño > añadir gadget (elemento de página) > html-javascript




Incluye esto en su interior:

<style type="text/css">
div.TabView div.Tabs a{float: left;display: block;width: 90px; height: 22px;
text-align: center; margin: 5px 0px 0px 3px; background-color: #ccc; /* color de fondo */padding-top: 2px; border: 1px solid #ffffff; /* color del borde */
border-bottom: 1px solid #ccc;font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */font-weight: 900;}
div.TabView div.Pages{clear: both;border: 1px solid #cccccc; overflow: hidden;
background-color: #fff;}
div.TabView div.Pages div.Page{height: 100%;padding: 5px;overflow: hidden;}
div.TabView div.Pages div.Page div.Pad{padding: px 5px;}
</style>
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a href="http://www.blogger.com/blogger.g?blogID=7554176144388995890"><span style="color: black;">Nombre 1</span></a>
<a href="http://www.blogger.com/blogger.g?blogID=7554176144388995890"><span style="color: black;">Nombre 2</span></a>
<a href="http://www.blogger.com/blogger.g?blogID=7554176144388995890"><span style="color: black;">Nombre 3</span></a>
</div>
<div class="Pages" style="height: 250px; width: 300px;">
<div class="Page">
<div class="Pad">
Código a mostrar 1
</div>
</div>
<div class="Page">
<div class="Pad">
Código a mostrar 2
</div>
</div>
<div class="Page">
<div class="Pad">
Código a mostrar 3
</div>
</div>
<script src="http://yourjavascript.com/34141325491/tab-viewmaskolis.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script></div>
</div>
</form>

Modificaciones:1.-Escritura roja es el color del título de cada Pestaña
2.-Número 300 en el 'Ancho' es la longitud de la caja y 250 es la 'altura'. Cambiar por el valor del tamaño de su sidebar.
3.-El texto en negrita es el contenido a mostrar. Sustituir con códigos, links, banners o el gadget que desees.

Fuente original: Amor Sevillista

Sigue leyendo →