15 ebooks que todo Blogger debería leer

Knowledge empowers us with an in-depth understanding about different aspects of life as well as business which in turn gives us the confidence to deal with varying problems and also find apt solutions to it. We can enrich our knowhow in different ways; however one of the best ways to gain knowledge is by reading books. Setting up a new business not only requires hard work but also precise knowledge. This is true for the new as well as the seasoned bloggers.

Although the concept of developing blogging sites for online marketing has been introduced recently but it has been well accepted by the internet users from all over the world resulting in the proliferation of this business. Therefore, bloggers should be well informed and have all the technical knowhow and latest updates so that it can create a niche for itself amidst this aggressive competition. E-books are one of the richest resources that the bloggers had at their disposal and these will be of great help to all the bloggers for enhancing their knowhow. Many free e-books are available on the internet which the bloggers can download and use to gain useful knowledge.

The fifteen e-books that are present on this blog post have been collected by our team members after thoroughly searching the internet. These are the best and the most popular in this genre. It will definitely deepen the knowhow of the bloggers and enrich them with techniques which they can apply to enhance the traffic of their website. Read and enjoy!!

1. 279 Days to Overnight Success

2. Effective Internet Presence

3. How to Start a Business Blog

4. The Corporate Weblog Manifesto

5. BlogBash 30 days 30 experts

6. Blog Profits Blueprint

7. Everyone’s an expert

8. Killer Flagship Content

9. Make Money Blogging

10. Make Money Online

11. New version of Handbook for Bloggers and Cyber Dissidents

12. The Beginner’s Guide to SEO

13. The Long Tail

14. The Zen of Blogging

15. Unleashing the Ideavirus

Gracias a http://www.2expertsdesign.com  http://www.2expertsdesign.com/resources/15-best-free-e-books-to-enhance-your-blogging

Read More

El Slider J Query más sencillo de instalar

Artículo por Olo Man escrito para OloBlogger, visita su blog



¿Tenéis jQuery en vuestro blog y espacio para insertar 10 líneas de código? Sí la respuesta es afirmativa y además queréis tener un carrusel de imágenes automático, este es el código más simple que he visto hasta la fecha y seguro que no hay otro que lo sea mucho más. Si acaso con algún que otro carácter menos, pero pocos, pocos menos.

Ese código que después veremos y una sucesión de imágenes simples metidas dentro de una caja, con un contenedor general común, nos daría este resultado:

1. Instalación JavaScript necesario

Por empezar desde cero, si no tenemos jQueryprimero añadimos esta línea justo después de }]]></b:skin> para cargar esta conocida librería:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/>

Una vez seguros de que tenemos la librería en nuestra plantilla, a continuación de esa misma línea añadimos lo que hace que la serie de imágenes funcionen como slider:

<script type="text/javascript">//<![CDATA[
$(function(){
    $('#slider div:gt(0)').hide();
    setInterval(function(){
      $('#slider div:first-child').fadeOut(0)
         .next('div').fadeIn(1000)
         .end().appendTo('#slider');}, 4000);
});
//]]></script>

Podemos guardar los cambios en la plantilla porque eso es todo. Es simple pero veréis que funciona y hace lo que tiene que hacer. Ahora ya sólo tenemos que poner las imágenes dónde queremos que aparezcan, de la manera que veremos a continuación.

2. Crear el slider

Con esto anterior en nuestra plantilla (aunque nada impide ponerlo directamente en un gadget, en una página o incluso en una entrada como veis aquí) ya podremos crear un visor como el que habéis visto arriba. Sólo tenemos que usar esta estructura HTML para añadir las imágenes:

<div id="slider">
    <div><img src="URL_IMAGEN1"/></div>
    <div><img src="URL_IMAGEN1"/></div>
    <div><img src="URL_IMAGEN1"/></div>
</div>

No sé cómo lo veis pero ya está todo lo necesario.

Para mí esto es bastante ligero y eficiente, mucho más que la mayoría de librerías que se usan quizás demasiado habitualmente.

Ajustes

Los tres últimos números del plugin permiten ajustar algunas cosillas. Todos van expresados en milisegundos (4000 = 4 segundos)

• fadeOut(0): Tiempo en desaparecer la imagen saliente
• fadeIn(1000): Tiempo en aparecer la imagen entrante
• ('#slider');},4000): Tiempo de permanencia de cada imagen

Cómo funciona

Y para los curiosos que quieren aprender cosas...

$('#slider div:gt(0)').hide();
Con gt(x) seleccionamos todos los div a partir del número x. En este caso 0 es el primero, así que lo que hacemos con esta línea es esconder (hide) todas las cajas excepto la primera, que será la imagen inicialmente visible.

setInterval(function(){ [lo que haremos] }, 4000);
Necesitamos reiterar una serie de cosas cada cierto tiempo y eso lo hacemos con setInterval, indicando el tiempo de retardo entre cada serie.

$('#slider div:first-child').fadeOut(0)
Dentro de cada uno de esos intervalos hacemos desaparecer (fadeOut) la primera caja (div:first-child) que haya en la relación de imágenes...

.next('div').fadeIn(1000)
... y hacemos que la siguiente caja (next) aparezca poco a poco (fadeIn).

.end().appendTo('#slider');
Por último tomamos la que hasta ese momento es la primera imagen y la situamos al final (appendTo) de la "lista".

end() resetea el contador de elementos que hicimos avanzar con next(). De esa manera, el primer hijo que antes hicimos desaparecer es el que enviamos al final de la pila y no la imagen que ahora tenemos visible. Para el siguiente ciclo la que hasta este momento era visible (que era la segunda) será la primera y por tanto la que haremos desaparecer.

Referencias sobre las funciones usadas:

• :gt()
• .hide()
• setInterval()
• :first-child
• .fadeOut()
• .fadeIn()
• .end()
• .appendTo()

Variantes y personalización

Como habéis visto no es necesario CSS para que el slider funcione, pero si lo usamos podremos cambiar su aspecto, permitir el uso de imágenes de diferente tamaño, incluir rótulos e incluso mejorar la transición. A continuación algunas ideas.

Cuestión de centímetros

No sabe hablar, pero se fija mucho

Limitar el tamaño del contenedor general y evitar el desbordamiento para que las imágenes más grandes no ocupen más espacio. Y ya que estamos le ponemos unas esquinas redondeadas, un borde y lo centramos. El position:relative nos vendrá bien para otra cosa que haremos después.

#slider {
position: relative;
overflow: hidden;
width: 500px;
height: 300px;
border:10px solid #333;
border-radius: 40px;
margin: 0 auto;
padding: 0;
}

Si situamos las cajas padre de las imágenes de manera absoluta con respecto al contenedor general (para eso pusimos antes el relative), estas se dispondrán solapadas una encima de otra. De esta manera al fadeOut le podremos dar un tiempo para que sea "visible" (hemos cambiado el 0 por un 1000) y la transición entre imágenes más suave. Es esa mezcla de imágenes que se produce en la segunda demo.

En las imágenes, el max-width nos sirve para que siempre ocupen todo el ancho y el min-height para que aunque sean deformadas, no se nos quede hueco por debajo cuando sean de menos de 300px de alto.

#slider > div {
position:absolute;
top:0;
left:0;
}
#slider img {
width:100%;
min-height:300px;
margin:0;
padding:0;
border:0;
}

Y ya si queremos añadir otros elementos sobre las imágenes (en este ejemplo un texto), sólo tendremos que etiquetarlos con un span o como párrafo (p) y en el CSS posicionarlos de manera absoluta, ubicándolos en el lugar exacto dónde queramos con top/bottom - left/right.

#slider p {
position: absolute;
bottom: 30px;
left: 0;
display: block;
width: 400px;
height: 24px;
margin:0;
padding: 5px 0;
color: #eee;
background: #990000;
font-size: 22px;
line-height:22px;
text-align:center;
}

El marcado en el HTML para esto último, incluyendo además un enlace sobre la imagen, sería tal que así:

<div id="slider">
<div><a href="URL_ENLACE1"><img src="URL_IMAGEN1" /></a><p>TEXTO1</p></div>
<div><a href="URL_ENLACE2"><img src="URL_IMAGEN2" /></a><p>TEXTO2</p></div>
<div><a href="URL_ENLACE3"><img src="URL_IMAGEN3" /></a><p>TEXTO3</p></div>
</div>

-Redactado por Olo Man para OloBlogger Link

Read More

Sustituye la leyenda Entradas Antiguas o Entradas Recientes por una imagen

Artículo escrito en el Balcón de Jaime, uno de los mejores blogs de ambiente blogger. Te insto a visitarlo y dejarle a un mensaje a Jaime ¡Que vuelva del retiro!

http://elbalcondejaime.blogspot.com/2008/10/iconos-de-navegacin-sustituyendo.html

En tu blog, cuando ves una entrada, te darás cuenta de que debajo de ella, sale lo siguiente:

*Entrada más recientes *Página principal *Entradas antiguas

Pero hay una manera de cambiar esas frases por iconos...

Diseño>edición HTML>expandimos artilugios 

Busca esto:

<b:includable id='nextprev'>

Ahora busca la línea <b:includable id='nextprev'> y la línea que finaliza el bloque: </b:includable>

Borra todo ese bloque incluidas las líneas de <b:includable id='nextprev'> y </b:includable>

Pega esto en su lugar:

<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'>
<img src='URL FLECHA IZQUIERDA'/></a>
</b:if>
<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>
<img src='URL FLECHA DERECHA'/></a>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src='URL IMAGEN DE INICIO'/></a>
</div>
<div class='clear'/>
</b:includable>

Ahora te toca rellenar con URL (direcciones) las tres líneas marcadas.

Si también quieres los iconos de navegación encima de las entradas, para mejorar la navegación de tus usuarios, busca esto y añades la línea que está en rojo:

<b:includable id='main' var='top'>
<div id='blog-posts'>
<b:include name='nextprev'/>

Por último, buscamos la etiqueta ]]></b:skin> y antes de ella le pegamos esto:

#blog-pager-older-link {
float: right;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager {
text-align: center;
}

La función del bloque que hemos añadido ahora consiste en "recordar" dónde va cada icono, y así cuando cambiemos algo de los posts en la plantilla, no se descolocarán, si no lo haces tus iconos se acabarán juntando o descolocando.

Puedes encontrar muchos iconos de flechas en las siguientes páginas web...

Icon Finder

Icon let

Icon look

Nota:
Las páginas están en inglés, por lo que si deseas las flechas debes buscarlas así:

Left arrow: flecha izquierda
Right arrow: flecha derecha
Home: Inicio (la casita :-D)

Read More

Cómo crear vínculos en el mismo artículo o entrada

Los enlaces no sólo facilitan la navegación al lector sino que también pueden vincular apartados dentro de un artículo extenso en donde se crea un índice con los temas tratados.

Este índice permite acceder a cualquier apartado con un click, sin abandonar la entrada.

Supongamos que nuestro índice se compone por la siguiente estructura:

Primer apartado
Segundo apartado
Tercer apartado

El primer paso constará de crear la tabla de contenido. Para ello utilizamos el atributo href al que atribuímos un nombre único (en lugar de una URL):

<a href="#primero">Primer apartado</a>
<a href="#segundo">Segundo apartado</a>
<a href="#tercero">Tercer apartado</a>

Seguidamente y haciendo uso del atributo name especificamos el área a donde conducirá cada enlace.

Para el primer apartado emplearíamos lo siguiente:

<a name="primero">Primer apartado</a>

Este sería el contenido perteneciente al primer apartado del artículo, como podría ser la introducción.

Haremos lo mismo para los apartados restantes. Debe tenerse en cuenta que el nombre a utilizar en el enlace (primer paso) y posteriormente en el apartado (segundo paso) debe ser único.

Si lo repetimos en otro apartado, el enlace no conducirá al tema apropiado y acudirá al área en donde tenemos el nombre correcto.

Al poner cualquier código en la entrada, conviene hacerlo en la pestaña de 'Edición de HTML' y no en la de 'Redactar'.



En el ejemplo se presenta un artículo 'falso'. El truco ha sido utilizado para crear, por ejemplo, numerosos artículos acerca de los periquitos.

Este tutorial fue escrito por Jaime en el Balcón de Jaime, ¡Visitalo !

Gracias por tu visita al Blogger Magazine, las últimas novedades de los mejores maestros bloggers.

Read More