Blogger, Tutoriales

Blogger: Cómo dividir el widget de etiquetas en dos columnas

Publicado por Claudia en Noviembre 10, 2009

Etiquetas-BloggerCuando tienes muchas etiquetas y una barra lateral lo suficientemente ancha, siempre tienes la opción de dividir el widget de etiquetas en dos o más, por una cosa de orden y estética.

Hace un tiempo, Cebong mostraba una forma de crear un widget de etiquetas multicolumnas añadiendo una nueva sección en el footer o la sidebar.

En realidad, es mucho más simple de lo que parece: no es otra cosa que determinar anchos (%) para las listas de esa sección. En otras palabras, puedes hacer lo mismo si ya añadiste un widget de etiquetas a tu sidebar, pero con un código CSS simplificado a ser añadido antes de ]]></b:skin>:

#Label1 ul li{
float: left;
width: 45%;
}

A considerar:

  • El ancho (width) va a depender de cuántas columnas quiera incluir, y no siempre es exacto, porque el widget de etiquetas va a heredar el padding de las listas de la sidebar (.sidebar ul li o similar). En este caso, 45% está bien para dos columnas; para 3 columnas, quizá ande bien con 30 ó 33%.
  • El selector #Label1, puede variar. Por defecto, el widget de etiquetas (si tienes sólo uno), debiera ser Label1; pero, si tienes dos, tendrías un widget de ID Label1, y otro Label2.
  • Puedes dividir cualquier widget de lista (ejemplo, lista de enlaces) de la misma forma, averiguando su ID.

sidebar-blogger

Tags: , ,
Blogger

Crea un panel de acceso en tu blog de Blogger

Publicado por Claudia en Junio 25, 2009

BoyProdx (vía Viet Blog Guide) nos enseña a añadir un sencillo widget de acceso/login para los blogs de Blogger, similar en apariencia a los que podemos poner en Wordpress.

El código, para el widget en español, sería:

<div id="loginform"><form action="https://www.google.com/accounts/ServiceLoginBoxAuth" method="post" onsubmit="onlogin()">
<input value="http://draft.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fdraft.blogger.com%2F" name="continue" type="hidden"/>
<br/>
<div>
<label for="Email"> Cuenta: 
<br/><input id="Email" tabindex="1" name="Email" size="20" type="text"/>
</label>
</div>
<br/>
<div>
<label for="Passwd"> Contraseña: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Olvidé mi contraseña">?</a>) 
<br/>
</label>
<input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/>
</div>
<br/><br/>
<input id="signin-btn-ns" tabindex="0" value="Enviar" class="ubtn ubtn-block" name="submit" type="submit"/>
</form></div>

Debes pegar digo código en en un nuevo gadget de HTML/Javascript de la sección Diseño/Elementos de tu blog. Si quieres darle un poco más de “estilo”, puedes añadir un poco de CSS básico a tu plantilla:

#Email, #Passwd{
border: 1px solid #ff0084;
}
 
#signin-btn-ns { 
color: #FFF;
background: #FF55AA;
border: 1px solid #ff0084;
}

¿Simpático? A mí me parece una monería, pero puede ser bastante útil además de cómodo. El formulario trabaja en base al panel de acceso de Blogger, y como es posible darse cuenta, redirecciona al panel de Blogger in Draft. Ahora, si lo que quieres es que te lleve al panel tradicional de Blogger, deberás cambiar la url del input escondido que hace la redirección (mira el código del widget), quitando los dos “draft.” que aparecen allí para que en vez de ir a draft.blogger.com vayas a blogger.com.
Si no pudiste acceder a tu cuenta, ingresa tu e-mail de Gmail en “Cuenta” y tu contraseña en los campos correspondientes. Es un formulario que puedes usar tranquilamente, porque no almacena tus datos de acceso.

Tags: ,
Productos Google

Permite que recomienden tus posts con Friend Connect

Publicado por Claudia en Mayo 16, 2009

En Social Web Blog, Google anuncia la creación de un nuevo gadget para Google Friend Connect, que anima a tus lectores a que compartan tus posts en redes sociales (Facebook, Twitter, Menéame, otras) o sus contactos de correo electrónico.

friend-connect
Puedes añadir un botón a tus entradas individuales y un widget configurable (número de ítems, ancho, colores) que muestra los posts con más recomendaciones, viendo qué personas recomendaron tus artículos.

Cómo integrar

1. Accede a Google Friend Connect con tu cuenta Google, y añade la URL de tu blog.

2. Selecciona la opción Social Gadgets.

3. Selecciona el gadget “Recommendation“.

recomendar4. Configura el gadget y el botón a añadir en cada post.

5. Genera los respectivos códigos HTML. El primero corresponde al widget que puedes añadir a tu sidebar (sólo copiar y pegar); el segundo, al botón (button) para incluir al final de cada post.

6. Copia y pega el código correspondiente al botón en el archivo single.php (en Wordpress) en el lugar que quieres que se muestre, o en Blogger de la siguiente manera:

1) Accede a la edición de HTML y expande los artilugios.
2) Busca la sección “div class=’post-footer-line post-footer-line-3′” y copia y pega el código correspondiente al botón justo debajo (o donde prefieras) usando condicionales:

<b:if cond='data:blog.pageType == "item"'>
 
código-del-botón
 
</b:if>
Tags: ,