Caja de Texto para que nos enlacen (Blogger)

Con este código en nuestra sidebar daremos la posibilidad a otros bloggers de que nos enlacen con un pequeño banner.
Vamos a Diseño | Añadir un gadget | HTML/Javascript y pegamos este código:

<center><textarea rows="3" cols="30" onclick="this.select();"><a href="URL de tu blog"><img alt="Nombre de tu blog" src="URL de la imagen"/></a></textarea></center>
<center><a href="URL de tu blog"><img alt="Nombre de tu blog" src="URL de la imagen"/></a></center>

El resultado es algo como este:

Este código está programado para que cuando se dé click sobre él se seleccione automáticamente todo el texto, si desean quitar esta función entonces eliminan donde dice: onclick="this.select();"
Cambian los datos en color rojo por los suyos y listo, tendrán un código para que los enlacen con una imagen. El área de texto donde aparecerá el código puede ser modificado, esto según el tamaño que lo quieran, sólo cambian el tamaño de rows (el alto) y el de cols (ancho).

Read More

Links y banners en movimiento (Blogger)

Este truco les dará movimiento a tus links estilo marquesina, y hará que el link se detenga cuando el mouse pasa sobre él. Lo haremos de dos formas, una con links de texto y otra con imágenes.

Para los links de texto el código es el siguiente:

<marquee direction="up" style="text-align: center; width:200px;height:150px;border:1px solid #ccc;padding:3px" onMouseOver="this.stop()" onMouseOut="this.start()" scrollamount="1" >
<a href="URL del enlace 1">Nombre del enlace 1</a><br/>
<a href="URL del enlace 2">Nombre del enlace 2</a><br/>
<a href="URL del enlace 3">Nombre del enlace 3</a>
</marquee>

Para los links con imágenes el código es el siguiente:

<marquee direction="up" style="text-align: center; width:200px;height:150px;border:1px solid #ccc;padding:3px" scrollamount="1" onMouseOver="this.stop()" onMouseOut="this.start()">
<a href="URL del enlace 1"><img src="URL de la imagen 1"/></a><br/>
<a href="URL del enlace 2"><img src="URL de la imagen 2"/></a><br/>
<a href="URL del enlace 3"><img src="URL de la imagen 3"/></a>
</marquee>

Personalización:
Debes cambiar los datos en color rojo por los tuyos.
<marquee direction="up" es la dirección a donde se mueve, up arriba, down abajo, right derecha, leftizquierda.
width:200px;height:150px; es el tamaño del cuadro donde aparecen los links
border:1px solid #ccc; es el ancho y color del borde.
scrollamount="1" es la velocidad con la que se mueven los links, números más altos dará mayor velocidad.

El resultado es este:

Obtén un review de tu blog GRATIS

Agrega tu favicon aquí

Read More

Gadget para que nos enlacen a otro blog

Si bien hemos visto cómo poner en el blog un código para que nos enlacen, algunos tienen algúnscript u otro método para que no se pueda copiar nada en el blog, por lo que los lectores no pueden seleccionar y copiar el código para que nos enlacen.

En esos casos podemos recurrir a un gadget que servirá como un agregador de modo que con un sólo click el lector podrá poner en su blog nuestro banner para que nos enlacen sin necesidad de seleccionar, copiar y pegar, sólo hay que hacer click en el botón y Blogger lo agregará en el blog que el lector elija.

Para ponerlo entra en Diseño | Añadir un gadget | HTML/Javascript y ahí pega lo siguiente:

<img src="URL de la imagen"/>
<form action="http://beta.blogger.com/add-widget" method="post">
<input value="Blog Recomendado" name="widget.title" type="hidden"/>
<textarea style="display:none;" name="widget.content">

<a href="URL de tu blog" target="blank"><img title="Título del blog" src="URL de la imagen" /></a>

</textarea>
<input value="http://buzz.blogger.com" name="infoUrl" type="hidden"/>
<input value="http://www.blogger.com/favicon.ico" name="logoUrl" type="hidden"/>
<input value="Enlázame" name="go" type="submit"/>
</form>

Cambia la URL de la imagen, o sea tu banner, la URL de tu blog y el título del blog donde se indica y listo.

Donde dice Blog Recomendado es el nombre que tendrá el gadget del banner, puedes ponerle otro título o dejarlo vacío.

Donde dice Enlázame es el texto que tendrá el botón.

Por supuesto este botón podemos personalizarlo como vimos en cómo personalizar botones, de modo que si quieres darle un color o poner una imagen de fondo en el botón tendrías que modificar esta línea:

<input value="Enlázame" name="go" type="submit"/>

Ahí agregaríamos los estilos que queremos para el botón, por ejemplo, si lo modificamos de este modo:

<input style="border:0;height:27px;width:90px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3IMrV90pbuMk9MT98R9V7kseS5fZKyyI5YNMHXYZmin33vFus8Srf-M7EORWKKoLir7IBiTwVO-Y7umC3esjIp27shOr8ukJ6MbRCTLpM6SE0Xcggoh7f9Qs_XejZL3FTRkSLCQDoC2g/s400/boton.png);" value="Enlázame" name="go" type="submit"/>

El botón se verá así:

Como ves puedes darle un estilo al botón que se adecue a tu blog si lo deseas.
Con este gadget tus lectores podrán enlazarte de una manera fácil y sin necesidad de copiar y pegar códigos.

GRACIAS A: CIUDAD BLOGGER

Read More

Gadget para compartir enlaces de las entradas del blog

Promocionar las entradas del blog es de suma importancia si queremos darlo a conocer a más gente, pero de igual forma es de suma importancia ofrecerle a los lectores las herramientas para que puedan hacerlo de una forma sencilla.

Un recurso muy útil es colocar un área donde los lectores puedan copiar la URL de las entradas que quieren compartir, ya sea que copien la URL de la entrada, el código HTML que enlaza a ella, o el código para colocar el enlace de la entrada en un foro.

El resultado será un área como esta debajo de todas las entradas del blog que al hacer click en el área de texto se seleccionará el enlace (este ejemplo no, es sólo una imagen):

Para agregarlo a tu blog entra en Diseño | Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta etiqueta:

<data:post.body/>

O si usas el Leer más automático busca este código:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right;'><a expr:href='data:post.url'>Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Justo debajo de cualquiera de esos dos agrega lo siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='compartir-post'>
<p>Si has encontrado útil este artículo puedes compartirlo desde tu blog, página Web o foro.</p>
<p>&lt;label for=&quot;aa-url&quot;&gt;URL:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-url&quot; value=&quot;<data:post.url/>&quot; /&gt;</p><p>&lt;label for=&quot;aa-forum&quot;&gt;Link HTML:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;&lt;a href=&amp;quot;<data:post.url/>&amp;quot;&gt;<data:post.title/>&lt;/a&gt;&quot; /&gt;</p><p>
&lt;label for=&quot;aa-forum&quot;&gt;Link para foros:&lt;/label&gt;&lt;br /&gt;
&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;[url=<data:post.url/>]<data:post.title/>[/url]&quot; /&gt;</p>
</div>
</b:if>

Ahora agrega antes de ]]></b:skin> esto:

/* Compartir entradas
----------------------------------------------- */
.compartir-post {
background:#EFF5FB; /* Color de fondo del contenedor */
margin-top:30px;
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
}
.compartir-post p {
font-size:12px; /* Tamaño de texto del mensaje */
}
.compartir-post input {
background:#ffffff;
border: 1px solid #A4A4A4; /* Borde de las celdas */
}

Guarda los cambios y listo. El resultado sólo aparecerá en las entradas individuales así que para verlo debes entrar a un post para cerciorarte que ha funcionado.

Por supuesto que a la caja para compartir le podemos cambiar el estilo, ya sea el color de fondo, agregar una imagen de fondo, tamaño de la letra, etc. Esas partes se modifican en las áreas que he puesto en color verde.

El contenedor como tal no tiene un tamaño específico pues se ajusta al ancho de las entradas, sin embargo, el ancho de las celdas donde aparecen los enlaces puede ajustarse modificando los números del primer código que insertamos y que están en color rojo.

Con esto hasta los lectores más novatos sabrán cuál es la URL de la entrada que les ha gustado y tendrán una forma más sencilla de poder copiar el enlace para compartirlo donde deseen.

Read More