Manual de Bloggers 2015

Aplicaciones de Google
LIC. CARLOS LAURENTE CHAHUAYO

____________________________________________________________________________________________
____
Bienvenido a este manual que tiene como propósito ilustrar los pasos a seguir para
crear un blog usando el servicio de Blogger, pero no solo veremos cómo crearlo, también
estudiaremos como configurar algunas de las opciones que ofrece Blogger para tener un blog
más funcional. Otro punto que tocaremos será el incrustar presentaciones en línea, así como
video, para enriquecer nuestro blog y hacerlo más atractivo. También veremos cómo colocar
archivos de diferentes tipos (pdf, doc, ppt, xls, etc.) haciéndolos disponibles para quienes
deseen descárgalos esto lo haremos a través del servicio Box. Para terminar, estudiaremos
cómo instalar un contador de visitas a nuestro blog para saber qué tan popular es en Internet
e implementaremos el servicio de Google Analytics para analizar el comportamiento de
nuestros visitantes.
Lic. Carlos Laurente Chahuayo

____________________________________________________________________________________________
____
ANTES DE COMENZAR.
El diagrama que se muestra abajo, ilustra la idea general que se abordara en este manual, este
diagrama se ha divido en columnas para su mejor comprensión, lo vamos a comentar de derecha
a izquierda para irlo explicando. En la columna llamada Blogs solo se muestra el resultado de
todo el trabajo que se ilustra en el manual, este producto es el blog, en la columna Blogger se
muestra que blogger es la plataforma de administración del o de los blogs, es decir que es a
través de blogger podremos construir y alimentar no solo un blog si no varios de ellos. En la
columna titulada Servicios se muestran los servicios externos a Blogger que pueden ser añadidos
a nuestro blog en este manual ilustraremos cinco de ellos que son presentaciones en línea, video
en línea, descarga de archivos diversos, contadores de visitas y análisis de las visitas. Todos estos
servicios se pueden agregar a nuestro blog a través de proveedores que compartirán su servicio
con Blogger enriqueciendo mucho más nuestro blog. En la columna proveedores vemos varias
de las herramientas que nos proveerán los diferentes servicios que mencionamos
anteriormente. Cabe mencionar que no todas estas herramientas se van a comentar en este
manual.
____________________________________________________________________________________________
____
CAPITULO I
DEFINICIÓN, CREANDO, EDITANDO Y ADMINISTRANDO NUESTRO BLOG.
1. ¿QUÉ ES BLOGGER?:
Blogger es un servicio creado por Pyra Labs y posteriormente adquirida por Google para
crear y publicar una bitácora (blog) en línea. El usuario no tiene que escribir ningún código
o instalar programas de servidor o de scripting. Blogger acepta para el alojamiento de las
bitácoras su propio servidor (Blogspot). Es una excelente herramienta para que el profesor
comparta contenido: recursos online (en línea, en internet), presentaciones, reflexiones…
También es una excelente herramienta para que el alumno tenga su bitácora personal o
cuaderno digital en el que publique sus creaciones, recursos que refuerzan su aprendizaje…
2. ¿QUÉ HAY QUE HACER PARA TENER UNA CUENTA BLOGGER?:
Para tenar el acceso a Blogger es imprescindible tener una cuenta en GMAIL, ya que está
cuenta le permitirá el acceso a las diferentes aplicaciones del GOOGLE, en tal sentido se le
sugiere crear una cuenta en GMAIL.
3. ¿CÓMO ACCEDER A BLOGGERS?:
La dirección Web de acceso al Bloggers es: https://www.blogger.com/
Desarrolle los siguientes procedimientos:
a) Ingrese a un navegador
b) Digitar en la barra de búsqueda la palabra BLOGGERS y el resultado requerido es:

____________________________________________________________________________________________
____
c) Ingrese al sitio Web del Bloggers mediante una cuenta de Gmail (ingreso sus datos de
acceso)
4. ¿CÓMO CREAR UN BLOGS?:
Una vez ingresado a nuestra cuenta, se nos muestra la siguiente ventana, en ella
procedemos a crear los blogs.
____________________________________________________________________________________________
____
5. En esta ventana hacer un clic BIM sobre el botón Nuevo blog
d) En la ventana siguiente ingrese el título del Blogs ejemplo MATEMATICA VIII
e) Seguidamente ingrese la dirección del blogs en creación

____________________________________________________________________________________________
____
Nota: Si la dirección ingresar no está disponible cambie por uno que si esté disponible.
f) Proceda a seleccionar una plantilla para su blog
g) Para finalizar hacer un clic BIM en el botón Crear Blog
6. CREACIÓN DE ENTRADAS:
Una vez creado el blog, en la siguiente ventana procederemos a crear las entradas, estas
deben tener un contenido como Texto, imágenes, videos, etc.
a) En la siguiente ventana hacer un clic BIM en el botón Entrada Nueva

____________________________________________________________________________________________
____
b) En la siguiente ventana procesa a ingresar el Título y contenido de la Entrada
Nota: No olvide utilizar la barra de herramientas para dar formato al texto

Ejemplo:
____________________________________________________________________________________________
____
c) Una vez ingresado toda la información necesaria a la entrada hacer un clic BIM en el
botón Actualizar
d) Como vez tenemos una entrada creada con el título BIENVENIDOS.
e) Puede proceder a crear otras entradas.
7. VISTA PREVIA DEL BLOGS:
a) Para ver cómo va quedando nuestro blog, hacer un clic BIM en el botón Ver blog
____________________________________________________________________________________________
____
b) Como resultado tendremos
8. EDITAR UNA ENTRADA:
a) En la siguiente ventana visualizamos las entradas

____________________________________________________________________________________________
____
b) Tenemos una entrada llamada BIENVENIDOS, al ubicar sobre ella el cursor nos muestra
las opciones:
Relojes para el Blog
Empecemos por lo más fácil.

Existen muchas páginas que nos ofrecen relojes para colocarlos en
nuestro blog y no es tan difícil de agregarlos. Empecemos:
1. Visitar www.clocklink.com en donde encontraran diferentes
formatos de relojes: tipo aguja, análogos, entre otros. Tiene una
muy buena galería.
2. Al ingresar a ClockLink debemos ir a Want a Clock on Your
Website? o sino, nos vamos a Gallery, en donde también
encontraremos relojes.
____________________________________________________________________________________________
____
3. Una vez ingresado por Want a Clock on Your Website, o por Gallery,
podremos elegir cualquier reloj que queramos, sea análogos
digitales o si queremos de tipo de deportes, animales, entre otros.
4. Elegí Logo & Custom en donde hay buenos diseños y escogí el reloj
en donde sale un perrito. Debajo de la imagen dice View HTML Tag
(Ver etiqueta HTML), le dan un clic y nos aparecerá un código.
5. Al darle clic en View HTML Tag sale una ventana en donde dice que
si aceptan los términos, etc; le dan Accept.
6. Al darle Accept, nos sale una imagen en donde encontraremos
Color, TimeZome en donde escogerás tu zona horaria (se cambia el
timezone), Size (Tamaño), el código HTML (ese código lo pegaremos
en nuestro Blog en donde queramos), luego mas abajo dice: If the
above does not work, please try the following code (Si lo de
arriba no trabaja, por favor intenta con el siguiente código).
¿Qué les pareció fácil o muy difícil?

____________________________________________________________________________________________
____
Tagboard para el Blog: Cbox
Un tagboard es parecido a un chat que permite que la gente deje

rápidamente mensajes en el blog o sitio web. Simplemente son listas
de mensajes cortos.
1. Ingresar a Cbox.
2. Te inscribes (Sign Up) y el primer paso es llenar un formulario en
donde te pide nombre de usuario, e-mail, la dirección del blog/sitio
web, entre otras cosas. Muy fácil de llenar.
3. Cuando te has registrado en Cbox, ellos te envían un e-mail con

todos tus datos y a la vez te dan un link (enlace) para poder
empezar a crear tu tagboard.
Ejemplo: http://cbox.ws/admin.php (clic en esa dirección).
4. Al ingresar a Cbox te saldrá un código para pegarlo en el blog.
Simplemente copiar y pegar.
5. En este tagboard puedes modificar muchas cosas, como por
ejemplo: Como quieres que se muestre los mensajes desde nuevo
a viejos (Oldest at top) o viceversa (Newest at top), el ancho y el
alto, el número de mensajes que deseas que se muestre, cambiar
el color del tagboard, la letra, el borde y hasta puedes bloquear a
esos usuarios que dejan insultos (Bloqueas su dirección IP), entre
otras cosas.
____________________________________________________________________________________________
____
Chat para el Blog: Gabbly

Gabbly es un servicio de chat que te permite chatear sobre cualquier
página web.
1. Entrar a Gabbly.
2. Luego seleccionar Embed, en donde tendrás que llenar un
formulario con respecto al chat. Desde ahí, podrás indicar el tamaño
(ancho y alto), luego colocar la dirección de tu blog, para que así,
puedas obtener el código que se va a pegar en el blog.
3. Cuando pegas una dirección web en el chat y al hacerle clic en el

link (enlace), serás llevado a dicha página con la ventana del chat
Gabbly. Además, puedes silenciar a la gente haciendo clic en su
nombre en la lista de la ventana derecha y también se puede
encender o apagar el pequeño sonido que hace este chat.
Ahora, simplemente nos queda probarlo.
Insertar elementos en la SideBar del Blog

SideBar.- Barra lateral del blog en donde por lo general se coloca el
BlogRoll, el LinkBlog y detalles sobre el blog en general.
____________________________________________________________________________________________
____
Blogroll.- Es una colección de enlaces de weblogs (blog o bitácora)

para encontrar más weblogs. Los autores de weblogs pueden definir
diferentes criterios para incluir otros weblogs en sus blogroll.
Habitualmente, el listado de otros weblogs se compone webs que los
propios autores visitan con asiduidad.
1. LinkBlog.- Enlaces a artículos específicos, ubicados en la barra
lateral del blog.
2. En la plantilla tendremos que buscar el siguiente texto: Begin
#sidebar.
Ejemplo:

<div id="sidebar"><div id="sidebar2">

<$BlogMemberProfile$>

<mainorarchivepage>
Continúa más código
</div>

3. Entre  y  podemos
pegar nuestro tagboard, reloj, calendario, chat, entre otras cosas.
Cambiar el título del blog por una imagen
Para alojar una imagen puedes usar Imageshack. En cambio, si quieres

que sea en blogger debes crear una nueva entrada o post. Desde ahí,
subes una imagen al editor y después te vas a Edición de HTML, para
copiar la ruta de la imagen.
1. Lo siguiente que debes hacer es ir a Plantilla. Luego deberán buscar
lo siguiente:
<div id="header">
<h1 id="blog-title">
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<$BlogTitle$>
<ItemPage></a></ItemPage>
</h1>
</div>
____________________________________________________________________________________________
____
2. Una vez ubicado el código, tendrás que borrar <$BlogTitle$> para

luego agregar el siguiente código: <img
src="http://urldelaimagen.jpg" /> y a su vez reemplazar la URL
de la imagen que has subido en ImageShack o en Blogger.
Nota: Probablemente algunas plantillas no tienen el mismo código que

les he puesto, pero tienen algo parecido. Sin embargo, incluyen
<$BlogTitle$>.
Existe otra manera de modificar, el cual tendrías que localizar lo

siguiente en la plantilla:
/* Header
----------------------------------------------- */
#header {
background:#be4 url("http://www.blogblog.com/no565/topleft.gif") no-repeat left
bottom;
padding:0 0 0 160px;
margin:0 0 10px;
color:#fff;
width:100%;
width/* */:/**/auto;
width:auto;
}
#blog-title {
background:url("http://www.blogblog.com/no565/bg_header.gif") no-repeat left top;
margin:0;
padding:40px 0 0;
font:bold 275%/97px Helvetica,Arial,Verdana,Sans-serif;
text-transform:lowercase;
}
#blog-title a {
color:#fff;
text-decoration:none;
}
.postpage #blog-title {
padding-top:0;
background-position:0 -40px;
}
Simplemente tendrías que sustituir las dos URL´s en background por

la URL de tu imagen. Esta modificación hará que la imagen aparezca
____________________________________________________________________________________________
____
como fondo en la cabecera. Sin embargo el título y la descripción del

blog seguirán manteniéndose, siempre y cuando no lo hayas borrado
<$BlogTitle$>.
Insertar elementos en la nueva versión de Blogger
En la nueva versión de Blogger, es más sencillo colocar en la Sidebar

(Barra lateral del blog) un chat, un reloj, entre otras cosas.
1. Ir a plantilla, luego a Elementos de la página y en Añadir un

elemento de página seleccionan HTML/Javascript. Ahí tendrán
que agregar un título y luego pegar en el contenido el código del
accesorio, que puede ser un reloj, un tagboard, un calendario, un
chat, un reproductor, imágenes, etc.
2. Cuando vas agregar un calendario, un reloj, entre otras cosas y le

agregas un título, pues ese título te sale todo en minúscula. Ahora
bien, podrías hacer lo siguiente para que te salga todo en mayúscula
o mayúscula con minúscula.
Tendrás que hacer lo siguiente:
- Ir a plantilla, luego a Edición de HTML (no necesitas expandir
plantilla de artilugios) y ubicas lo siguiente:
/* Sidebar
----------------------------------------------- */
.sidebar h2 {
margin:1em 0 .25em;
line-height: 1.4em;
font: $sidebarHeaderFont;
color: $sidebarHeaderColor;
text-transform:lowercase;
}
Donde dice: text-transform:lowercase; le puedes cambiar el

lowercase por alguno de estos atributos:
a) capitalize: Convierte en mayúsculas el primer carácter de cada
____________________________________________________________________________________________
____
palabra.
Ejemplo:
text-transform: capitalize;
archivo del blog, se transforma en: Archivo Del Blog
b) uppercase: Convierte a mayúsculas todas las letras del texto.

Ejemplo:
text-transform: uppercase;
archive del blogtesting, se transforma en: ARCHIVO DEL BLOG
c) lowercase: Convierte a minúsculas todas las letras del texto.

Ejemplo:
text-transform: lowercase;
ArChivo DEL BLog se transforma en: archive del blog
d) none: No realiza cambios en el texto.

Ejemplo:
text-transform: none;
ArChivo DEL BLog se transforma en: ArChivo DEL Blog
En conclusión, la propiedad text-transform permite que el texto se

transforme en mayúsculas o minúsculas.
**Esto también lo puedes aplicar para el titulo del blog (ubicas

#header h1), para la descripción (Description), para los comentarios
(Comments y ubicas comment-author) y para las publicaciones
ubicas Posts, desde ahí puedes cambiar en date-header (Fecha) o en
post-footer (Publicado por).
Cambiar el título del blog por una imagen en la nueva

versión de Blogger
Para alojar una imagen puedes usar Imageshack o Photobucket. En
cambio, si quieres que sea en blogger debes crear una nueva entrada
o post. Desde ahí, subes una imagen al editor y después te vas a
Edición de HTML, para copiar la ruta de la imagen.
1. Lo siguiente que debes hacer es ir a Plantilla (Template), luego a

____________________________________________________________________________________________
____
Edición de HTML y clic en Expandir plantillas de artilugios y buscas

lo siguiente:
<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>
2. Una vez ubicado el código, tendrás que borrar <data:title/> para

luego agregar el siguiente código: <img src="http://Aquí-la-
dirección-de-tu-imagen" /> y a su vez reemplazar la URL de la
imagen que has subido en ImageShack, Photobucket o en Blogger.
Así que lo único que tienes que hacer es sustituir los dos
códigos(<data:title/>). Esta modificación hará que la imagen
aparezca en el título.
Ejemplo:
<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'>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<img src="http://spiderman3.jpg" />
____________________________________________________________________________________________
____
<b:else/>
<a expr:href='data:blog.homepageUrl'><img
src="http://spiderman3.jpg" /></a>
</b:if>
</h1>
</div>
Nota:
- Cuando borras los dos códigos (<data:title/>) prácticamente se
borra el título del blog.
- En cuanto lo que es ancho y alto tendrías que calcular tu imagen al
subirlo en un hosting, para que te quede perfecto. En todo caso si te
es muy difícil, puedes hacer lo siguiente:
En <img src="http://Aquí-la-dirección-de-tu-imagen" /> agrégale
width y height.
Ejemplo:
<img src="http://spiderman3.jpg" width="100" height="250" />
- Probablemente algunas plantillas no tienen el mismo código que les
he puesto, pero tienen algo parecido. Sin embargo, incluyen
<data:title/>.
**Por ejemplo he subido una imagen en Photobucket y he pegado lo
siguiente:
<img
src="http://i151.photobucket.com/albums/s137/andrewmusic1/Ayud
aparaelblog.jpg" border="0" alt="Photo Sharing and Video Hosting at
Photobucket" />
Y he añadido al último esto: /
Cambiar la Plantilla (Template) del Blog (1)
Para los que buscan un cambio de imagen en

____________________________________________________________________________________________
____
su blog, en Finalsense puedes encontrar estupendas plantillas para la

versión antigua de Blogger y también para la nueva versión de Blogger
1. Elige la nueva plantilla que deseas usar (Get it now).

2. Copia el código que se te brinda para la plantilla que escogiste.
3. Ir al blog. Tienes que ir a Plantilla (Template), después a Edición
de HTML (no necesitas Expandir plantillas de artilugios) y
automáticamente te muestra el código de la plantilla que usas
actualmente.
4. Selecciona todo el código y bórralo. Ahora pega el código que ya
tenías copiado (la nueva plantilla).
5. Guarda los cambios. Reconstruye tu blog y listo.
Nota: Para hacer este cambio, te recomiendo que guardes primero el

código de la plantilla que estas utilizando. Guárdalo en bloc de notas.
Cambiar la Sidebar del lado izquierdo al derecho o

viceversa
#main-wrapper.- Define la columna principal.

#sidebar-wrapper.- Define la Sidebar.
Para colocar la Sidebar del lado izquierdo al derecho, tienes que
buscar el siguiente código en la plantilla.
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in
IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar
float */
}
#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in
____________________________________________________________________________________________
____
IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar
float */
}
Tienes que cambiar la parte que dice: float.- Permite ajustar el texto,
left o right.
Por ejemplo, en #sidebar-wrapper cambias el float, en este caso lo

modificas por left (izquierdo) y en #main-wrapper, cambias el float
por right (derecho).
En el caso del lado derecho al izquierdo haces lo mismo.
Nota: Todas las plantillas contienen este código, algunas han puesto
#main-wrap1, div#main o #main y han obviado la siguiente palabra,
al igual que #sidebar-wrap, div#sidebar o #sidebar.
Agregar un buscador - caja de búsqueda en el blog
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>
Agregar iconos de navegación al blog
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/>
<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'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle'
id='blog-pager-newer-link'>
<img
src='http://i151.photobucket.com/albums/s137/andrewmusic1/left.gi
f'/></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
2.gif" />
<img
____________________________________________________________________________________________
____
-2.gif" />
<img
2.gif" />
<img
3.gif" />
<img
-3.gif" />
<img
3.gif" />
Via: Hoctro's Place
Agregar su URL en motores de búsqueda
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
¿Cómo poner etiquetas en Blogger?

Para poner Etiquetas, Secciones o Categorías en la Sidebar (Barra
lateral) tendrás que hacer lo siguiente:
1. Ir a diseño de la plantilla. Después clic en Añadir un elemento de

página, seleccionar Etiquetas, luego le pones un título y lo clasificas
por orden alfabético o por frecuencia de uso.
2. Para que aparezca en los posts. Clic en Editar Entradas del blog,
luego marcar la casilla correspondiente y poner en el cuadro de texto:
Categorías o Secciones, entre otros.
3. Asignar etiquetas. Cuando escribes una entrada, tienes un espacio
en la parte inferior del formulario denominado Etiquetas de esta
entrada. Ahí tendrás que introducir las etiquetas que quieras,
separándolas por comas. También puedes hacer clic en el vínculo
Mostrar todo para ver una lista de las etiquetas que hayas utilizado
previamente y para añadir una, simplemente haz clic en ella.
4. Etiquetar. En Editar entradas, seleccionamos los posts que

queramos que compartan etiquetas.
____________________________________________________________________________________________
____
¿Cómo poner una imagen de fondo en el blog?
1. Ir a diseño de la plantilla. Después clic en Edición de HTML (no

Expandir plantillas de artilugios) y buscas lo siguiente:
body {
background:$bgcolor;
...
}
2. Tendrás que agregar después de background:$bgcolor lo

siguiente (lo que está de color azul):
body {
background:$bgcolor url(http://Aquí la direción de la imagen) fixed
no-repeat top left;
...
}
Explicación:
- El valor no-repeat, la imagen no se repite. Además podemos
cambiarlo por otros valores como repeat-x, repetirá la imagen
horizontalmente mientras que el valor repeat-y, repetirá la imagen
verticalmente y si se especifica repeat, la imagen se repetirá
horizontal y verticalmente.
- El valor fixed, la imagen se desplazará con el contenido o será fija.
- El valor top left, la posición de la imagen.
Nota: La imagen debe ser grande, tipo wallpaper, el cual tienen un

ancho de 1024 pixeles (px) y un alto de 685 px aproximadamente.
____________________________________________________________________________________________
____
Cambiar la Plantilla (Template) del Blog
Si deseas hacer un cambio de imagen en tu

blog, en TemplatePanic puedes encontrar plantillas para la versión
antigua y nueva de Blogger y también para WordPress.
1. Para usar estas plantillas tienes que guardar en la computadora un

archivo zip.
2. Luego el archivo que haz guardado en la PC, lo descomprimes.
3. Ir al blog. Tienes que ir a diseño de plantilla, después a Edición de
HTML y clic en Examinar, buscas la plantilla y clic en Subir.
4. Clic en vista previa y luego guardas los cambios. Reconstruye tu
blog y listo.
Nota: Para hacer este cambio, te recomiendo que guardes primero el
código de la plantilla que estas utilizando.
Imágenes aleatorias en la cabecera
Consiste en una imagen distinta cada vez que entramos al blog.
» Ir a diseño de la plantilla. Después clic en Edición de HTML (no

Expandir plantillas de artilugios) y agregas el siguiente código después
de <body>.
<script type="text/javascript">
var banner= new Array()
banner[0]="http://aqui-la-dirección-de-la-imagen"
var random=Math.round(4*Math.random());
document.write("<style>");
____________________________________________________________________________________________
____
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat
left TOP;');
document.write(" }");
document.write("</style>");
</script>
- En banner [0], [1], [2], [3], [4] tendrás que agregar la dirección de
tu imagen, el cual debe tener un ancho de 660px (pixeles) y un alto de
130px aproximadamente. En todo caso, buscas en la plantilla que estas
utilizando, el ancho de la cabecera (header).
Por otro lado, si deseas que más imágenes cambien le agregas más
líneas o en caso contrario le quitas.
- En donde dice: left (izquierdo), le puedes cambiar por center (centro)
o right (derecho).
- Prácticamente esto resulta mucho mas fácil con las plantillas Minima,
Denim, Scribe y Tic Tac. Con las demás también, pero se tiene que
hacer ciertas modificaciones en la cabecera.
- Para que veas el resultado en tu blog presiona F5 de tu teclado y
veras que aparecen distintas imágenes en la cabecera.
- Finalmente, si deseas que te ayude mas con las plantillas que se tiene
que hacer ciertas modificaciones, me dejas un comentario
mencionándome que plantilla usas.
¿Cómo cambiar la cabecera por una imagen?
Cabecera de página.-Visualiza el título y la descripción de tu blog.
En Blogger existe una opción para insertar una imagen en la cabecera

de forma fácil y rápida. Así que ahora podemos dejar de lado aquellos
trucos que utilizábamos.
» Ir a diseño de la Plantilla, después clic en editar Cabecera (header)
____________________________________________________________________________________________
____
y nos aparecerá lo siguiente:
Clic en la imagen para agrandarla
Si deseamos que nuestra imagen tenga un título y una descripción

debemos seleccionar la primera casilla, en caso contrario que
queramos solamente la imagen la segunda casilla.
** Al subir nuestra imagen la guardamos y volvemos hacer clic en
editar Cabecera, para que nos aparezcan las opciones.
Probablemente si el título y la descripción lo queremos en el centro,

entonces hacemos lo siguiente:
» Ir a Plantilla, después a Edición de HTML (no Expandir plantillas de
artilugios). Ahora buscamos lo siguiente:
#header y #header .description
Tanto al primero como al segundo le agregamos después:
text-align:center;
* Si en tu plantilla existe esto, lo modificas a tu gusto.
- La imagen que vas a colocar en la cabecera tiene que tener un ancho
de 710px (píxeles) y un alto de 120 px. Estos valores son simplemente
un aproximado. En todo caso puedes fijarte en donde dice #header,
ahí te indica un ancho (width).
¿Cómo poner un texto en movimiento en la barra de

estado y título?
La barra de título, está en la parte superior y nos indica la página
web en la que el navegador está situado.
La barra de estado, nos aparece en los exploradores por lo general
abajo y suele mostrar información sobre la página.
Para agregar el siguiente código tienes dos formas de agregarlo:
- Ir a diseño de la plantilla, clic en Añadir un elemento de página y
seleccionas HTML/Javascript.
- Ir a diseño de la plantilla, luego Edición de HTML y lo agregas antes
de </head>
____________________________________________________________________________________________
____
Para la barra de título

<script type="text/JavaScript">
var repeat=1 //enter 0 to not repeat scrolling after 1 run, othersise,
enter 1
var title=document.title
var leng=title.length
var start=1
function titlemove() {
titl=title.substring(start, leng) + title.substring(0, start)
document.title=titl
start++
if (start==leng+1) {
start=0
if (repeat==0)
return
}
setTimeout("titlemove()",140)
}
if (document.title)
titlemove()
</script>
** setTimeout("titlemove()",140), esta línea se refiere al movimiento

del texto, si deseas le cambias el valor de 140 por otro valor.
Probablemente el texto lo veas muy junto o no se aprecie bien,
entonces en Opciones, Básico y en el Título le agregas guiones o
puntos. Pero acuérdate que cambiaria el titulo de tu blog, es decir
estaría con puntos o guiones.
Para la barra de estado
<script language="JavaScript">
var MessageText = "Bienvenidos a Ayuda para el Blog..."
var DisplayLength = 50
var pos = 1 - DisplayLength;
____________________________________________________________________________________________
____
function ScrollInStatusBar(){
var scroll = "";
pos++;
if (pos == MessageText.length) pos = 1 - DisplayLength;
if (pos<0)
{
for (var i=1; i<=Math.abs(pos); i++)
scroll = scroll + "";
scroll = scroll + MessageText.substring(0, DisplayLength - i + 1);
}
else
scroll = scroll + MessageText.substring(pos, pos + DisplayLength);
window.status = scroll;
setTimeout("ScrollInStatusBar()",100);
}
ScrollInStatusBar()
</script>
- En var MessageText, escribes tu mensaje.

- var DisplayLength, viene a ser la longitud de tu mensaje.
- setTimeout("ScrollInStatusBar()",100), esta línea se refiere al
movimiento del texto, si deseas le cambias el valor de 100 por otro
valor.
____________________________________________________________________________________________
____
Menú desplegable, un simple botón (2)
Este menú desplegable consiste en hacer clic al botón y se muestra

una lista de opciones.
1. Ir a diseño de la plantilla. Después clic en 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 casi al
final (antes de ]]></b:skin>)
.texthidden {
display:inline
}
.shown {
display:block
}
2. Entre ]]></b:skin> y </head> agregar lo siguiente:

<script src='http://andrewhonors.googlepages.com/fecha.js'
type='text/javascript'/>
- Guardar cambios.
3. Ir a Elementos de la página, clic en Añadir un elemento de página y
seleccionar HTML/Javascript. Ahí tendrán que agregar el siguiente
código:
<a href="javascript:void(0);"
onclick="expandcollapse('musica')"><img border="0"
src="http://dirección-de-la-imagen-del-botón"/></a><br/>
<ul id="musica" class="texthidden">
<li><a href="http://www.radioblogclub.com/"
target="_blank">Radio Blog</a></li>
<li><a href="http://www.goear.com/index.php"
target="_blank">Goear</a></li></ul>
<a href="javascript:void(0);"
onclick="expandcollapse('video')"><img border="0"
src="http://dirección-de-la-imagen-del-botón"/></a><br/>
<ul id="video" class="texthidden">
<li><a href="http://www.youtube.com/"
target="_blank">Youtube</a></li>
____________________________________________________________________________________________
____
<li><a href="http://www.veoh.com/"
target="_blank">Veoh</a></li></ul>
**Como punto de partida hemos hecho un menú de música en el que

aparece una lista: Radio Blog y Goear. Además, hay un menú de video
en el que aparece: You Tube y Veoh
- En esta parte de código puedes repetirla cuantas veces quieras,
ustedes tendrán que armarlo a su gusto.
- Solo tendrán que agregar el botón, la dirección de la página con su
respectivo nombre.
- Además, puedes añadir una imagen justo antes del texto que aparece
la lista.
Explicación:
- Si por ejemplo, a parte de música deseamos poner video entonces al
crear otro botón, en expandcollapse('musica') cambiamos en donde
dice música por video. Además, el id=”música” lo modificamos por
video.
- En <img border="0" src="http://direccion-de-la-imagen"/>, viene
hacer la imagen del botón.
- En donde dice Radio Blog, Goear, You Tube, vienen a ser una lista.
- En <a href="http://www.radioblogclub.com/" target="_blank">,
viene hacer el enlace de la página enlazada.
Ejemplo:
____________________________________________________________________________________________
____
Etiquetas (categorías o secciones) en forma de un

menú de pestañas o solapas
En algunos sitios web encontramos un menú de pestañas en forma

horizontal para una navegación mucho mejor. Probablemente para
algunos es de bastante utilidad por su fácil y rápida navegación por la
página.
Para empezar a poner nuestro menú de pestañas en el blog tenemos

que etiquetar todos nuestros post.
1. Ir a diseño de la plantilla, luego a Edición de HTML y clic en Expandir
plantillas de artilugios y buscas lo siguiente:
<b:section class="header" id="header" maxwidgets="1"
showaddelement="no">
* Cambia los valores de mawidgets="2" y showaddelement="yes".
2. Después buscas el widget con el id Label1 y con el title Etiquetas.
Esto lo encuentras donde dice:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
____________________________________________________________________________________________
____
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>

<b:if cond='data:title'>
<h2><data:title><h2>
<b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><?xml:namespace prefix = data
/></data:label.name></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
3. Una vez ubicado, tienes que reemplazar todo el código anterior por
lo siguiente:
<b:widget id='Label1' locked='false' title='' type='Label'>
<div id='tabsE'>
<ul>
<li><a
expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a
expr:href='data:label.url'><span><data:label.name/></span></a>
</li></b:loop>
</ul>
____________________________________________________________________________________________
____


</div>
</b:includable>
</b:widget>
4. Seguimos en la Plantilla. El siguiente código lo deje para el último,

porque se refiere estilo del menú, el cual se podrá realizar cambios,
utilizando tu criterio.
El código lo tendrás que pegar entre <b:skin><![CDATA[ y
]]></b:skin>. Preferible que lo pegues casi al final (antes de
]]></b:skin>), porque puede ser que en algún momento, no quieras
esto y se te va hacer mas fácil poder ubicarlo para borrarlo.
/*- Menu Tabs E--------------------------- */

#tabsE {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabsE ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsE li {
display:inline;
margin:0;
padding:0;
}
#tabsE a {
float:left;
background:url("http://i151.photobucket.com/albums/s137/andrewm
usic1/tableftE.gif") no-repeat left top;
margin:0;
____________________________________________________________________________________________
____
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
float:left;
display:block;
background:url("http://i151.photobucket.com/albums/s137/andrewm
usic1/tabrightE.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsE a span {float:none;}
/* End IE5-Mac hack */
#tabsE a:hover span {
color:#FFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:100% -42px;
}
En donde dice:
#tabsE ul {
margin:0;
padding:10px 10px 0 50px;
el número 50 se refiere al posicionamiento, es decir moverlo hacia la
izquierda, por ejemplo cambialo a 0 y mira lo que pasa.
Luego mas abajo dice: padding:5px 15px 4px 6px;
el número 5 se refiere al espacio, por ejemplo cambailo a 0 y mira lo
que pasa.
Nota: Te voy a proporcionar algunos estilos de menú que he subido a
Photobucket para que lo utilices en tu blog. Pero al utilizar algún estilo,
tendrás que hacer una simple modificación.
____________________________________________________________________________________________
____
Tabs A Color de las Tabs: Blancas

Tabs B Color de las Tabs: Grises
Tabs C Color de las Tabs: Verdes
Tabs D Color de las Tabs: Rosas
Tabs E Color de las Tabs: Rojas
Tabs F Color de las Tabs: Celeste
Tabs G Color de las Tabs: Azules
Tabs H Color de las Tabs: Negras
Tabs I Color de las Tabs: Naranjas
Tabs J Color de las Tabs: Cristal
Tabs K Color de las Tabs: Café
Por ejemplo, si utilizas el estilo A, entonces te vas al paso 2 y en <div

id='tabsF'> le cambias el id por el estilo que haz escogido. En este caso
hemos escogido el estilo A entonces seria, <div id='tabsA'>
5. Finalmente cuando vas a guardar los cambios te saldrá

probablemente un mensaje:
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.
• Label1
Confirmar y guardar
Simplemente guardas y confirmas.
Nota: Para que resulte todo esto debes irte a Elementos de la página
y arrastrar Etiquetas poniendolo debajo de la cabecera.
¿Cómo incluir una Radio Online en el Blog?

Si deseas que tu radio favorita suene en tu blog, lo podrás hacer
utilizando un simple código que a continuación te proporcionare:
____________________________________________________________________________________________
____
1. Necesitamos obtener la URL de la radio,

es decir su dirección por donde transmite su
señal. Generalmente se puede obtener desde
el mismo reproductor que la emisora tiene en
su página web, entonces tendrás que escuchar
la radio, para luego poner el mouse sobre el
reproductor, después presionar el botón
derecho, el cual se abrirá una ventana y clic en
Propiedades, es ahí en donde veras la URL por
la cual transmite su música.
2. Pegar el siguiente código en donde quieras, sea en la Sidebar o en
la Columna principal:
<EMBED type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/windows/windowsmedia/en/
Download/default.asp?tcode=9#location2" src="http://URL-de-la-
Radio-Online" name="MC1" height=45 width=280 AutoStart=False
ShowStatusBar=True ShowGotoBar=Talse TransparentAtStart=true
bbclient=0></EMBED>
* En donde dice la URL de la radio online, pones la dirección de la

emisora.
* Para que funcione debes cambiar: AutoStart=False por
AutoStart=True.
Nota: Por ejemplo, puedes poner el mouse sobre el reproductor, luego
seguir los pasos anteriormente mencionados y verás que la dirección
por donde se transmite la radio que estás escuchando es:
http://216.246.4.18/asxfiles-live/ny60winlive7001.asx
Estas escuchando Kiss Radio (España)
¿Como incluir una barra "Cargando Página"?
Permite insertar una barra en el centro de la página que especifica que

el sitio está cargando su contenido. Una vez finalizado, se elimina la
____________________________________________________________________________________________
____
barra y muestra la página completa.

1. Ir a Plantilla, luego a Edición de HTML y antes de </head> pegar el
siguiente código:
<script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga(){
document.getElementById("imgLOAD").style.display="none";
}
</script>
2. Después ir a Elementos de página y pegar el siguiente código:

<div id='imgLOAD' style="TEXT-ALIGN: center">
<b>Cargando</b>
<IMG
src="http://i151.photobucket.com/albums/s137/andrewmusic1/loadi
ng.gif">
</div>
* Después lo arrastramos en donde mejor nos parezca.
Nota:
Esto también lo podemos poner dentro del código de la plantilla.
Existen páginas que te ofrecen diferentes tipos de barras Cargando

Página:
Napyfab
Load Info
Activity Indicators

Manual de Bloggers 2015

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual de Bloggers 2015

Uploaded by

Copyright:

Available Formats

Aplicaciones de Google

LIC. CARLOS LAURENTE CHAHUAYO

Lic. Carlos Laurente Chahuayo

DEFINICIÓN, CREANDO, EDITANDO Y ADMINISTRANDO NUESTRO BLOG.

2. ¿QUÉ HAY QUE HACER PARA TENER UNA CUENTA BLOGGER?:

3. ¿CÓMO ACCEDER A BLOGGERS?:

La dirección Web de acceso al Bloggers es: https://www.blogger.com/

Desarrolle los siguientes procedimientos:

b) Digitar en la barra de búsqueda la palabra BLOGGERS y el resultado requerido es:

4. ¿CÓMO CREAR UN BLOGS?:

d) En la ventana siguiente ingrese el título del Blogs ejemplo MATEMATICA VIII

e) Seguidamente ingrese la dirección del blogs en creación

f) Proceda a seleccionar una plantilla para su blog

g) Para finalizar hacer un clic BIM en el botón Crear Blog

a) En la siguiente ventana hacer un clic BIM en el botón Entrada Nueva

b) En la siguiente ventana procesa a ingresar el Título y contenido de la Entrada

Nota: No olvide utilizar la barra de herramientas para dar formato al texto

d) Como vez tenemos una entrada creada con el título BIENVENIDOS.

e) Puede proceder a crear otras entradas.

7. VISTA PREVIA DEL BLOGS:

b) Como resultado tendremos

8. EDITAR UNA ENTRADA:

a) En la siguiente ventana visualizamos las entradas

Relojes para el Blog

Empecemos por lo más fácil.

¿Qué les pareció fácil o muy difícil?

Tagboard para el Blog: Cbox

Un tagboard es parecido a un chat que permite que la gente deje

3. Cuando te has registrado en Cbox, ellos te envían un e-mail con

Chat para el Blog: Gabbly

3. Cuando pegas una dirección web en el chat y al hacerle clic en el

Ahora, simplemente nos queda probarlo.

Insertar elementos en la SideBar del Blog

Blogroll.- Es una colección de enlaces de weblogs (blog o bitácora)

Cambiar el título del blog por una imagen

Para alojar una imagen puedes usar Imageshack. En cambio, si quieres

2. Una vez ubicado el código, tendrás que borrar <$BlogTitle$> para

Nota: Probablemente algunas plantillas no tienen el mismo código que

Existe otra manera de modificar, el cual tendrías que localizar lo

Simplemente tendrías que sustituir las dos URL´s en background por

como fondo en la cabecera. Sin embargo el título y la descripción del

Insertar elementos en la nueva versión de Blogger

En la nueva versión de Blogger, es más sencillo colocar en la Sidebar

1. Ir a plantilla, luego a Elementos de la página y en Añadir un

2. Cuando vas agregar un calendario, un reloj, entre otras cosas y le

Donde dice: text-transform:lowercase; le puedes cambiar el

b) uppercase: Convierte a mayúsculas todas las letras del texto.

c) lowercase: Convierte a minúsculas todas las letras del texto.

d) none: No realiza cambios en el texto.

En conclusión, la propiedad text-transform permite que el texto se

**Esto también lo puedes aplicar para el titulo del blog (ubicas

Cambiar el título del blog por una imagen en la nueva

1. Lo siguiente que debes hacer es ir a Plantilla (Template), luego a

Edición de HTML y clic en Expandir plantillas de artilugios y buscas

2. Una vez ubicado el código, tendrás que borrar <data:title/> para

Cambiar la Plantilla (Template) del Blog (1)

Para los que buscan un cambio de imagen en

su blog, en Finalsense puedes encontrar estupendas plantillas para la

1. Elige la nueva plantilla que deseas usar (Get it now).

Nota: Para hacer este cambio, te recomiendo que guardes primero el

Cambiar la Sidebar del lado izquierdo al derecho o

#main-wrapper.- Define la columna principal.

Por ejemplo, en #sidebar-wrapper cambias el float, en este caso lo

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

/- Menu Tabs E--------------------------- /