Archivo de la categoría: PROGRAMACION BLOG

Blog_ como añadir elementos al header

Para blogs en blogger.

Con este sencillo truco podran cambiar los elementos dentro de la estructura de su blog.
En la imagen anterior pueden ver la estructura de un blog sencillo, donde podemos identificar las divisiones del blog: cabecera(header), principal(main, donde van las entradas del blog), barra lateral(sidebar) y el pie de pagina(footer).

Todas estas divisiones estan hechas mediante capas con la etiqueta <div> y podemos cambiar su configuracion para poder agregar elementos a cada capa, moverlos libremente y colocar la opcion de agregar mas elementos.

Para hacerlo debemos ir a el panel de blogger\diseño\edicion de HTML

Ahi debemos buscar la capa que queremos modificar.
por ejemplo:
vamos a añadir elementos al header.

Buscamos:

<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’ 1′ showaddelement=’no’>
</b:section>
</div>

y vamos a cambiar los valores para las modificaciones deseadas

maxwidgets=’1′
cambiamos el numero maximo de widgets(componentes, por ejemplo el titulo del blog es un widget). podemos cambiar los valores, por ejemplo: maxwidgets=’3′ podremos poner maximo 3 widgets en esa capa.

showaddelement=’no’
podemos cambiar el valor a ‘yes’ si queremos que aparezca la opcion de agregar elemento.

guardamos los cambios y listo, ya podran agregar elementos al header. Tambien es aplicable al footer, al sidebar o a cualquier otra capa dentro del diseño principal.

Para poder mover los elementos entre capas u organizarlos dentro de la misma

<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’3′ showaddelement=’yes’> <b:widget id=’Header1′ locked=’true’ title=’Miqueli_Lisse (cabecera)’ type=’Header’/> </b:section> </div>

en el ejemplo cambiamos:
locked=’true’ a ‘false’

este es el resultado:

Colocar Mp3 en blog

Para lograr eso, he descargado 3 minireproductores en flash que nos permiten insertar la URL del archivo mp3 y estos flash son bastante livianos (5kb)

el codigo que deben pegar en sus post o paginas o como widgets es:

<object type=”application/x-shockwave-flash”
data=”URLPLAYER.SWF?mp3=URLMP3.MP3
width=”ancho” height=”20″>
<param name=”movie”
value=”URLPLAYER.SWF?mp3=URLMP3.MP3“>
</object>

y el player lo pueden descargar de esta direccion:
http://www.estvideo.com/dew/media/dewplayer.swf

Ahora deben colocar el player y el mp3 en algun sitio que les permita hostear archivos. Yo ocupo este:
http://www.fileden.com/
en su version gratuita te permite subir hasta 1Gb, tener tasa de transferencia de 5 Gb/mes, max 50Mb por archivo y descarga a 100 Kb/s (optimo para escuchar mp3s)

Coloquen la direccion de su player y del archivo mp3 reemplazando en el codigo las letras en negritas correspondientes y listo.

————————————————-
A los colaboradores les dare el codigo o si quieren pasenme el mp3 a subir y les regreso el codigo ya hecho.

Blog_Eliminar “mostrando entradas”

Cuando creamos un vinculo que muestre determinada etiqueta, en blogger nos aparece “mostrando entradas…”

Para eliminarlo debemos:

  • Ir a diseño de la plantilla. Después clic en Edición de HTML y clic en Expandir plantillas de artilugios.
  • Buscas lo siguiente:

<!– posts –>
<div class=”blog-posts”>

<b:include data=”top” name=”status-message”>

<data:adstart>

  • Eliminas esto: <b:include data=”top” name=”status-message”>

Sencillo no? ^^,

Blog_Suscripcion a noticias


La suscripcion a las noticias, actualizaciones, comentarios de tu blog es muy util para los visitantes y una herramienta importante para el blog mismo.

¿Que es RSS? (Rich Site Summary) Un archivo RSS es un documento RDF o XML que se actualiza de forma regular y que contiene metadatos sobre una fuente de noticias determinada y su contenido. Se compone de:

  • Channel, que representa la fuente de las noticias.
  • Title, titulo del canal.
  • Link, vínculo del canal.
  • Description, descripción del canal.

El formato permite distribuir contenido sin necesidad de un navegador, utilizando un software diseñado para leer estos contenidos RSS, actualmente los navegadores tambien se han sumado.

Esta imagen y las siglas RSS se han vuelto iconos que al verlos dentro de una pagina nos indican que es posible suscribirse a ella.

¿Como empezar? Puedes suscribir tu blog a un sevicio como FEEDBURNER (www.feedburner.com), deberas registrate, una vez registrado sigue estos pasos:

  1. Introduce la url de tu blog (ejemplo: http://nombre_de_mi_blog.blogspot.com)
  2. Si utilizas blogger, te apareceran las opciones atom y rss, selecciona RSS
  3. Coloca un titulo y una direccion para tu feed (anota la direccion)
  4. Activa el feed

¿Como integrarlo al blog?

  1. Abre tu panel de control (blogger), da click en Configuracion
  2. En la opcion Feed del sitio: Permitir feeds del blog= completo, Publicar URL redireccionada del feed=(direccion del feed, ejemplo:http://feeds.feedburner.com/mackuil), guarda la configuracion.
  3. Deberas crear un boton o vinculo para que los visitantes se suscriban.

¿Como crear los botones y/o vinculos de suscripcion?

  1. Elije una imagen o texto para ponerle el vinculo y colocala dentro del blog.
  2. Añade este vinculo ala imagen o texto:
  • http://feeds.feedburner.com/nombre_del feed?format=xml Para suscribirse a las entradas

Ejemplos html para añadir elemento

  • Vinculo de texto:

<a href=’http://feeds.feedburner.com/Mackuil?format=xml‘>Suscribirse a Entradas</a>

Suscribirse a Entradas

En rojo tenemos la direccion del feed, en azul tenemos el texto que sera el vinculo.

  • Vinculo en imagen:

<a href=”http://feeds.feedburner.com/Mackuil?format=xml“>
<img src=”
http://darklandmx.iespana.es/mackuil/feedmack.png” witdh=”50″ height=”50″/></a>

En rojo tenemos la direccion del feed, en azul la url de la imagen.

¿A que tipo de contenido pueden suscribirse mis lectores? Una vez añadido y configurado el servicio, puedes poner vinculos para suscribirte a:

  • Nuevas entradas(del blog)
  • Noticias
  • Comentarios
  • Etiquetas de entradas
  • Actualizaciones via e-mail

http://nombre_del_blog.blogspot.com/feeds/posts/default/-/nombre_de_etiqueta Para suscribirse a nuevas entradas con la etiqueta designada

http://nombre_del_blog.blogspot.com/feeds/comments/default Para suscribirse a los comentarios

Blog_Entradas Ampliables (leer mas…)

Este me lo pidio el colaborador Isra, pues ahi va ^^,

Este es un metodo para colocar un resumen de la entrada y poderla ampliar en el mismo blog. Muy util si publicas entradas largas, asi tendras una mejor visualizacion de tus contenidos.

Y el ejemplo trabaja en este blog.

Agregar entradas ampliables

  • Agregar el siguiente script en tu codigo html, entre las etiquetas <head> y </head>:

<script src=’http://darklandmx.iespana.es/mackuil/mackuil_entradas_ampliables.js’ type=’text/javascript’/>

  • Luego buscas el siguiente codigo:

<div class=’post-header-line-1’/>

<div class=’post-body’>

<p><data:post.body/></p>

<div style=’clear: both;’/> <!– clear for photos floats –>
</div>

  • Después tendrás que borrar la siguiente linea: <div class=’post-body’> y reemplazarla por el siguiente código:


    <div class=’post-body’ expr:id='”post-” + data:post.id’>
    <b:if cond=’data:blog.pageType == “item”‘>

  • Una vez que has pegado el código anterior, ahora pegas lo siguiente después de <p><data:post.body/></p>

    <b:else/>
    <style>#fullpost {display:none;}</style>
    <p><data:post.body/></p>
    <span id=’showlink’>
    <p><a expr:onclick='”javascript:showFull(\”post-” + data:post.id + “\”);”‘ href=’javascript:void(0);’>Leer mas…</a></p>
    </span>
    <span id=’hidelink’ style=’display:none’>
    <p><a expr:onclick='”javascript:hideFull(\”post-” + data:post.id + “\”);”‘ href=’javascript:void(0);’>Solo resumen</a></p>
    </span>
    <script type=’text/javascript’>checkFull(“post-” + “<data:post.id/>“)</script>
    </b:if>

  • En negritas aparece el famoso Leer mas y el solo resumen, puedes cambiar las palabras a tu gusto.Guarda los cambios
  • Ahora para que funcione deberas agregar este codigo en todas tus entradas:

Aquí escribes el contenido(resumen)
<span id=”fullpost”>
Aquí escribes el resto del contenido que no se vera(lo que resta del post)
</span>

Pd
Espero no haber cometido errores en la transcripcion, lo probare en la nueva plantilla.
El script al cual hacen referencia puede ser cargado en otro servidor, incluso en la misma pagina, pero es algo largo.

Blog_Imagen volver arriba

Para colocar una imagen que te lleve al inicio del blog(como la que utilizo en este blog ^^,) deberan copiar el codigo en su plantilla:

<!– inicio boton ariba –>
<a href=’#’>
<img alt=’ir arriba’ border=’0′ src=’url de la imagen‘ style=’position:fixed; bottom:0; right:0;’/>
</a>
<!– fin boton ariba –>

la primera y ultima linea son comentarios que no seran visualizados, la segunda linea da incio al link que nos llevara al principio de la pagina, el tercero es para la fuente(source) de la imagen, borde y posicion(pueden ser cambiados por otros valores):
-alt: es lo que nos mostrara cuando alternativamente a la imagen
-border: el borde la imagen, puede ser 0, 1, 3, etc
-position: fixed para mantenerla fija, absolute para ponerla en la posicion dentro de la pagina
-bottom y right para colocarla en dterminada squina, puedes poner top y left.
-bottom:0; la posicion con respecto al fondo, puede ser bottom:50px; paa ponerla 50 pixeles arriba del fondo

Blog_Buscador interno

A continuacion el codigo para insertar un buscador interno en tu blog:

<div class=”widget-content”>
<form id=”searchthis” action=”/search” style=”display: inline;” method=”get”>
<input id=”search-box” maxlength=”255″ name=”q” size=”13″ type=”text”>
<input id=”search-btn” value=”Buscar en el blog” type=”submit”>
</form></div>

Aqui esta para que lo prueben ^^,