Drop Caps al estilo revista para el blog -47-

Drop Caps.- Es la primera letra de un párrafo que aparece más grande que las demás.

1. Ir a Plantilla, después a Edición de HTML (no Expandir plantillas de artilugios) y agregas el siguiente código entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues al final, porque puede ser que en algún momento, no quieras esto y se te va hacer mas fácil poder ubicarlo para borrarlo.

.dropcaps {
float:left;
color: $headerBgColor;
font-size:100px;
line-height:80px;
padding-top:1px;
padding-right:5px;
}

En algunas plantillas no tienen definido $headerBgColor, así que lo cambias por $titlecolor o sino puedes ponerle el código del color que quieras. Además le puedes cambiar el tamaño de la letra en: font-size.

2. Para que funcione esto necesitas un código más, que lo vas a pegar en:
- Ir a Opciones. Después a Formato y en Plantilla de entrada lo pegas.
- Cuando vas a publicar algo, prácticamente en todas las entradas te saldrá este código, sin necesidad de estar escribiéndolo en cada entrada. No olvidar guardar los cambios. El código es el siguiente:
<span class="dropcaps">D</span>
Ejemplo:

Dolores O’Riordan, vocalista del grupo irlandés, The Cranberries presenta su tema ‘Ordinary Day’, primer sencillo promocional de su primer disco en solitario titulado “Are You Listening?”, que saldrá a la venta el 7 de mayo en Estados Unidos y al día siguiente en Europa.
- El resultado es una letra mayúscula que se alarga 5 líneas.

Nota:
En vista previa no se visualiza.

Via: Mandarin Design

¿Cómo puedo modificar el número de entradas que se muestran en mi blog? -46-

posts=entradas

1. Ir a Configuración. Después a Formato.
2. Ajustar el número según considere:No olvidar Guardar valores.

Cambiar la cabecera por una imagen (Plantillas Denim) -45-

Cabecera de página.- Visualiza el título y la descripción de tu blog.

Para insertar una imagen en la cabecera necesitaremos agregar algunos códigos y a su vez hacer algunas modificaciones en el blog. Esto prácticamente resulta para la plantillas Denim (Stretch Denim, Washed Denim, Stretch Denim Light).
Te recomiendo que no te arriesgues hacer esto con las otras plantillas porque las modificaciones no van hacer iguales para las demás. Quizás esto te puede servir simplemente para guiarte.

En la cabecera de las plantillas Denim eliminaremos un borde y el título para luego agregar la imagen:
1. Ir a Plantilla, después a Edición de HTML y clic en Expandir plantillas de artilugios. Entonces, ahora buscamos lo siguiente:

/* Header
----------------------------------------------- */

#header {
width: 760px;
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}

h1.title {
padding-top: 38px;
margin: 0 14px .1em;
line-height: 1.2em;
font-size: 100%;
}

2. Se tiene que cambiar el valor del border de header, entonces el nuevo valor será: border:0 (sin px). Después en el mismo header agregamos lo siguiente:
background: url(http://Aquí-la-direccion-de-tu-imagen) no-repeat;
Entonces el resultado seria así:

#header {
width: 760px;
margin: 0 auto;
background-color: $headerBgColor;
background: url(http://i151.photobucket.com/andrewmusic1/Ayudaparaelblog.jpg) no-repeat;
border: 0 solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}

3. En h1.title ocultamos el título, así que tendrás que agregar lo siguiente (lo que esta en azul):

h1.title {
padding-top: 38px;
margin: 0 14px .1em;
line-height: 1.2em;
font-size: 100%;
visibility:hidden;
}

- La imagen que vas a colocar en la cabecera tiene que tener un ancho de 760 px y un alto de 120 px. Estos valores son simplemente un aproximado.
- Otra alternativa para este tipo de plantillas es utilizar: Cambiar el titulo por una imagen.
El resultado seria así:

En este ejemplo el titulo y la descripción del blog son imágenes.

Cambiar el título por una imagen
Cambiar la descripción por una imagen

Cambiar la cabecera por una imagen (Plantillas Minima) -44-

Cabecera de página.- Visualiza el título y la descripción de tu blog.

Para insertar una imagen en la cabecera necesitaremos agregar algunos códigos y a su vez hacer algunas modificaciones en el blog. Esto prácticamente resulta para las plantillas Minima (Dark, Blue, Ochre, Lefty).
Te recomiendo que no te arriesgues hacer esto con las otras plantillas porque las modificaciones no van hacer iguales para las demás. Quizás esto, te puede servir simplemente para guiarte.

En la cabecera de las plantillas Minima tienen un borde, así que lo eliminaremos y luego agregamos la imagen:
1. Ir a Plantilla, después a Edición de HTML y clic en Expandir plantillas de artilugios. Entonces, ahora buscamos el siguiente código:

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Aquí tenemos que cambiar el valor del border de header-wrapper y header. Entonces el nuevo valor para los dos será: border:0 (sin px).

2. Luego buscas el div con el id header-wrapper.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='PruebaBlog (cabecera)' type='Header'>
<b:includable id='main'>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

3. Una vez ubicado <div id='header-wrapper'>, tienes que reemplazar todo el código anterior por lo siguiente (lo que esta en azul agregas):

<div id='header-wrapper'>
<div id='header'>
<a href="http://aquí-la-dirección-de-tu-blog">
<img src="http://aquí-la-dirección-de-tu-imagen" /></a>
</div>
</div>

* Al reemplazar todo esto, te saldrá un mensaje diciendo:
Están a punto de suprimirse los artilugios
Por favor, confirma que los siguientes artilugios deben borrarse. Se borrará toda la información de configuración de los artilugios.

• Header1

Le das un clic en: Confirmar y Guardar

- La imagen que vas a colocar en la cabecera tiene que tener un ancho de 660 px y un alto de 110 px. Estos valores son simplemente un aproximado.
- Si deseas agregarle un ancho y un alto a tu imagen tendrás que hacer lo siguiente:

<img src="http://aquí-tu-imagen" width="500" height="100" />

**Por ejemplo he subido una imagen en Photobucket y he pegado lo siguiente:

<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/Ayudaparaelblog.jpg" border="0" alt="Photo Sharing and Video Hosting at Photobucket" />

Y he añadido al último esto: /

Cambiar el título por una imagen
Cambiar la descripción por una imagen

Generador de Iconos de E-mail -43-

Existen páginas web en donde podemos generar iconos de correo electrónico para colocarlos en el blog, foros, etc. Lo único que tienes que hacer, es lo siguiente:

1. Ingresar a E-Mail Icon Generador.
2. Introducir la dirección de tu correo.
3. Clic en Generate y aparecerá tu icono.
4. Finalmente, copias la primera línea roja para pegarlo en tu blog o sino lo guardas en tu PC para luego subirlo en un hosting de imágenes o fotos.
En caso de que copies la línea roja tendrás que hacer lo siguiente:
<img src="Aquí-pegas-la-primera-línea-roja" />
Aquí unos ejemplos del resultado de esta herramienta:

Otras páginas:
correoIconos.com
Safe Mail
NeedAsig
mailonpix.com
hidetext
chxo
- Generador de Icono para Gmail
- Otro Generador de Icono para Gmail

Ocultar la barra de navegación de Blogger (1) -42-

Probablemente a muchos usuarios les molesta la barra de navegación de Blogger porque desean que su blog tenga una mejor apariencia.
Por ejemplo en mi plantilla no esta la barra, pero agregue el logotipo de Blogger porque me parece muy importante el darle crédito a los de Blogger por permitirnos tener un espacio gratuito en la web.

Así que para ocultar esta barra tendrás que hacer lo siguiente:
- Ir a Plantilla, después a Edición de HTML (no necesitas Expandir plantillas de artilugios) y agregas el siguiente código entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues al final, porque puede ser que en algún momento, no quieras esto y se te va hacer mas fácil poder ubicarlo para borrarlo.

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

]]></b:skin>

</head>

¿Puedo hacer que mis comentarios aparezcan en una ventana emergente? -41-

ventana emergente=mini-ventana

Sí, encontrarás esta opción en Configuración, Comentarios:Después no olvides Guardar valores.

¿Qué es un Pop-up?

Agregar su URL en motores de búsqueda -40-

Motor de búsqueda.- Es un sistema informático que indexa archivos almacenados en servidores web. Un ejemplo son los buscadores de Internet cuando se pide información sobre algún tema.

Si quieres aparecer en Google, MSN o en Altavista solamente tienes que agregar dos cosas: la URL de tu sitio web o blog y alguna descripción de la página. Una vez hecho esto, simplemente nos queda esperar a que estemos en los buscadores.

1. Agregar URL a Google:
http://www.google.es/addurl/?continue=/addurl

2. Agregar URL a MSN:
search.msn.com/docs/submit.aspx?FORM=WSDD2

3. Agregar URL a Altavista (Yahoo):
Aquí optas por Envío básico:
http://www.altavista.com/addurl/default

Agregar iconos de navegación al blog -39-

Iconos de navegación.- Son imágenes enlace que incluimos en las páginas y que suelen tener la apariencia de botones o flechas, cuya función es ayudar al visitante a navegar por nuestra página.
Ejemplo:


1. Para agregar los iconos de navegación tendrás que ir a Plantilla (Template), luego a Edición de HTML y clic en Expandir plantillas de artilugios. Luego buscas el includable con el id nextprev.

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>

2. Una vez ubicado <b:includable id='nextprev'>, tienes que reemplazar todo el código anterior por lo siguiente:

<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='http://i151.photobucket.com/albums/s137/andrewmusic1/left.gif'/></a>
</b:if>

<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>
<img src='http://i151.photobucket.com/albums/s137/andrewmusic1/right.gif'/></a>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src='http://i151.photobucket.com/albums/s137/andrewmusic1/home.gif'/></a>
</div>
<div class='clear'/>
</b:includable>

3. Por otro lado, si tu quieres cambiarlo por algún texto, tienes que reemplazar:
- <img src='http://...left.gif'/> (Entradas antiguas) por tu texto.
- <img src='http://...right.gif'/> (Entradas más recientes) por tu texto.
- <img src='http://...home.gif'/> (Página principal) por el texto que deseas.

Nota: Te voy a proporcionar algunos iconos que he subido a Photobucket para que los pegues en tu blog, pero si no te gustan, entonces tendrás que utilizar un buscador y escribir iconos de navegación

<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/right-1.gif" />


<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/home-1.gif" />


<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/left-1.gif" />


<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/right-2.gif" />


<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/home-2.gif" />


<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/left-2.gif" />


<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/right-3.gif" />


<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/home-3.gif" />


<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/left-3.gif" />

Via: Hoctro's Place

Agregar un buscador - caja de búsqueda en el blog -38-

Buscador.- En informática un buscador es una herramienta que permite al usuario encontrar un documento que contenga una determinada palabra o frase.

En esta oportunidad te proporcionare 3 buscadores para que lo pongas en tu blog.

Búsqueda de blogs en Blogger
Este buscador lo pegas en la Sidebar o en donde tu quieras, pero lo único que tienes que agregar es la dirección del blog (cambiar lo que esta en azul).

<form name="b-search" action="http://search.blogger.com/">
<input type="text" id="b-query" name="as_q" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="hidden" name="ui" value="blg" />
<input type="hidden" name="bl_url" value="ayudaparaelblog.blogspot.com" />
<input type="submit" value="Buscar" alt="Search This Blog" id="b-searchbtn" title="Search this blog with Google Blog Search" onclick="document.forms['b-search'].bl_url.value='ayudaparaelblog.blogspot.com'" /></form>

Via: Gem@ BLOG

Búsqueda de blogs en Google
Realiza búsquedas dentro del blog y además busca en la web.
Este buscador lo pegas en la Sidebar o en donde tu quieras, pero lo único que tienes que agregar es la dirección del blog (cambiar lo que esta en azul)

<FORM method=GET action="http://www.google.com/search">
<input type=hidden name=ie value=UTF-8>
<input type=hidden name=oe value=UTF-8>
<INPUT TYPE=text name=q size=15 maxlength=255 value="">
<INPUT type=submit name=btnG VALUE="Buscar">
<font size=-1>
<input type=hidden name=domains value="http://ayudaparaelblog.blogspot.com"><br><input type=radio name=sitesearch value=""> en Web <input type=radio name=sitesearch value="http://ayudaparaelblog.blogspot.com" checked> en Blog <br></FORM>

Sobre el aspecto puedes cambiar algunas cosas:
- El texto del botón es Buscar (VALUE=Buscar) puedes cambiarlo por algo diferente, como ok, ver, etc.
- El tamaño de la caja se cambia en donde dice size=15.
Via: Google

Búsqueda dentro del blog
Realiza búsquedas dentro del mismo blog.
Este buscador lo pegas en la Sidebar o en donde tu quieras.

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/> <input id="search-btn" value="Buscar" type="submit"/></form>

Insertar elementos en la Sidebar (Blogger nuevo)
Insertar elementos en la Sidebar (Blogger antiguo)

MajikWidget -37-

MajikWidget es un servicio para webblogs, el cual ofrecer pequeños widgets o mini-aplicaciones para que los autores los usen en sus blogs o sitios web y que funcionan de forma remota. En la colección de widgets hay encuestas, un sistema de ranking, entre otras cosas. Funciona sin que sea necesario nada más que copiar y pegar un código en las anotaciones donde quieras usarlas. Son sencillos pero a la vez útiles, bonitos y potentes, que muchas veces no van incluidos en las herramientas convencionales para crear blogs.
Para usar los servicios de MajikWidget, primero se tiene registrarse y añadir un código Javascript y luego puedes obtenerlos gratis o comprando cada uno de los widgets que se quieran usar. Los nuevos usuarios tienen 25 «créditos» gratis para probarlo, y luego se pueden comprar en paquetes de 500 créditos por 25 dólares.