Gifs animados: Arboles de Navidad

Son 16 imágenes animadas de Arboles Navideños.

Botón derecho del mouse, Guardar imagen como...




























Fuente: loseasi.blogspot.com
--> Leer Más...

Como Insertar Imagen de Navidad con texto desplazándose por el Blog o Web

Para insertar una imagen de navidad y se desplace por toda su web ya que quedara bien para decorar su Blog o web, ahora que se acercan las fiestas navideñas es una buena opción, para agregar la imagen se recomienda seguir los siguientes pasos:
  • Ir a Diseño, 
  • Edición de HTML, 
  • buscar <body> y justo abajo.
<script src='http://img50.xooimage.com/files/0/8/e/papa-noel-2306a2b.js' type='text/javascript'></script>

<span style="position:absolute;left:0;top:0;color:red;font-size:12px;font-family:Arial;font-weight:normal;font-style:normal;text-align:center;text-decoration:none;z-index:9999999999999" id="supertext"><img src="http://1.bp.blogspot.com/_WvACVGW1iPE/TPcegFOUyrI/AAAAAAAABcQ/RPTg-8kDaqc/s1600/papa-noel.gif"/><br/>¡¡¡ FELIZ NAVIDAD !!!</span>
Personalizar el estilo CSS a su gusto. todo lo que esta de color rojo (tamaño y color del texto)

Cambiar la url magen por una propia.

Cambiar el texto.

Se puede dejar solo la imagen o solo el texto.

Dejar solo el texto.

Eliminar:
<img src="http://1.bp.blogspot.com/_WvACVGW1iPE/TPcegFOUyrI/AAAAAAAABcQ/RPTg-8kDaqc/s1600/papa-noel.gif"/><br/>
Dejar solo la imagen.

Eliminar:
<br/>¡¡¡ FELIZ NAVIDAD !!!
El ejemplo es para la navidad pero se puede utilizar en distintas ocasiones o para la decoración del blog.

Fuente: loseasi.blogspot.com
--> Leer Más...

Maravilloso menú Pretty Simple

Este bonito menú trabaja con jQuery y es creación de Codrops está adaptado a menor tamaño que el original para poder mostrarlo en esta entrada pero las explicaciones nos darán como resultado un menú de 800px de ancho y 300px de alto que son las medidas de las imágenes.
Ver demo original del autor en Codrops

Los estilos los añadiremos situándonos en plantilla edición de HTML justo después de la etiqueta ]]></b:skin>
<style type='text/css'>
.rotator{
background-color:#111;
width:800px;
height:300px;
margin:0px auto;
position:relative;
font-family:&#39;Myriad Pro&#39;,Arial,Helvetica,sans-serif;
color:#fff;
text-transform:uppercase;
letter-spacing:-1px;
border:3px solid #f0f0f0;
overflow:hidden;
-moz-box-shadow:0px 0px 10px #222;
-webkit-box-shadow:0px 0px 10px #222;
box-shadow:0px 0px 10px #222;
}
.rotator ul{
list-style:none;
position:absolute;
right:0px;
top:0px;
margin-top:6px;
z-index:999999;
}
.rotator ul li{
display:block;
float:left;
clear:both;
width:260px;
}
.rotator ul li a{
width:230px;
float:right;
clear:both;
padding-left:10px;
text-decoration:none;
display:block;
height:52px;
line-height:52px;
background-color:#222;
margin:1px -20px 1px 0px;
opacity:0.7;
color:#f0f0f0;
font-size:20px;
border:2px solid #000;
border-right:none;
outline:none;
text-shadow:-1px 1px 1px #000;
-moz-border-radius:10px 0px 0px 20px;
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-left-radius:20px;
border-top-left-radius:10px;
border-bottom-left-radius:20px;
}
.rotator ul li a:hover{
text-shadow:0px 0px 2px #fff;
}
.rotator .heading{
position:absolute;
top:0px;
left:0px;
width:500px;
}
.rotator .heading h1{
line-height:52px;
text-shadow:-1px 1px 1px #555;
font-weight:normal;
font-size:46px;
padding:20px;
}
.rotator .description{
width:500px;
height:80px;
position:absolute;
bottom:0px;
left:0px;
padding:20px;
background-color:#222;
-moz-border-radius:0px 10px 0px 0px;
-webkit-border-top-right-radius:10px;
border-top-right-radius:10px;
opacity:0.7;
border-top:2px solid #000;
border-right:2px solid #000;
}
.rotator .description p{
text-shadow:-1px 1px 1px #000;
text-transform:none;
letter-spacing:normal;
line-height:26px;
}
a.more{
color:orange;
text-decoration:none;
text-transform:uppercase;
font-size:10px;
}
a.more:hover{
color:#fff;
}
</style>
En el mismo sitio y a continuación añadiremos el contenido del siguiente archivo

Si ya estamos utilizando jQuery para algún otro efecto omitimos el siguiente paso, de utilizarlo por primera vez añadiremos también lo siguiente:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
Cada presentación contiene un bloque y es la parte que debemos modificar, que serán el título de la pestaña del menú, el título del contenido, la descripción, la url de la imagen y el enlace con el texto "Sigue..." es algo así:

<li><a href="rot4">Título-pestaña-1</a><div style="display:none;">

<div class="info_image">url-imagen-1</div>

<div class="info_heading">

Texto-contenido-1</div>

<div class="info_description">

Aquí texto descripción1

<a href="#" class="more">Sigue...</a></div>
</div>
</li>

Y el código completo para el menú que añadiremos en un gadget de HTML sería el siguiente:
<div class="rotator">
<ul id="rotmenu">
<li><a href="rot1">Título pestaña-1</a>
<div style="display:none;">
<div class="info_image">url-imagen-1</div>
<div class="info_heading">
Texto-contenido-1</div>
<div class="info_description">
Aquí texto descripción 1
<a href="#" class="more">Sigue...</a>
</div>
</div>
</li>
<li><a href="rot2">Título-pestaña-2</a><div style="display:none;">
<div class="info_image">url-imagen-2</div>
<div class="info_heading">
Texto-contenido-2</div>
<div class="info_description">
Aquí texto descripción 2
<a href="#" class="more">Sigue...</a></div>
</div>
</li>
<li><a href="rot3">Título-pestaña-3</a><div style="display:none;">
<div class="info_image">url-imagen-3</div>
<div class="info_heading">
Texto-contenido-3</div>
<div class="info_description">
Aquí texto descripción 3
<a href="#" class="more">Sigue...</a></div>
</div>
</li>
<li><a href="rot4">Título-pestaña-4</a><div style="display:none;">
<div class="info_image">url-imagen-4</div>
<div class="info_heading">
Texto-contenido-4</div>
<div class="info_description">
Aquí texto descripción 4
<a href="#" class="more">Sigue...</a></div>
</div>
</li>
<li><a href="rot5">Título-pestaña-5</a><div style="display:none;">
<div class="info_image">url-imagen-5</div>
<div class="info_heading">
Título-contenido-5</div>
<div class="info_description">
Aquí texto descripción 5
<a href="#" class="more">Sigue...</a></div>
</div>
</li>
</ul>
<div id="rot1">
<img src="url-imagen-1" width="800" height="300" class="bg" alt=""/>
<div class="heading">
<h1>
</h1>
</div>
<div class="description">
<p>
</p>
</div>
</div>
</div>
Título pestaña-1, 2, 3, 4, 5 escribimos el título del contenido.

url-imagen-1, 2, 3, 4, 5 pegamos la url de la imagen tal y como la copiamos sin añadir la etiqueta de imagen.
Texto-contenido-1, 2, 3, 4, 5 Escribimos la descripción que se mostrará después del título.

Sigue... lo podemos sustituir por cualquier otro texto.

Hay una parte que dice:

<a href="#" class="more">Sigue...</a>
esa parte la podemos utilizar como enlace, si por ejemplo deseamos enlazar una entrada o una página estática copiamos la url que deseamos enlazar y la pegamos sustituyendo la almohadilla. De esa forma al marcar sobre "Leer más... nos llevará al sitio que enlazamos.

Fuente: gemablog
--> Leer Más...

Mostrar la Lista de Blogs en movimiento

Es algo que me han preguntado en varias ocasiones y que siempre respondía de forma personal a cada uno. Estos últimos días he vuelto a recibir más consultas sobre esto mismo, hacer que el gadget Lista de Blogs se muestre en movimiento.

Es un efecto no muy complicado de conseguir, utilizando la etiqueta "marquee".
Antes de continuar con la explicación, podéis ver un ejemplo en este blog de pruebas, es el gadget que lleva por título "Mi lista de blogs".

[1] Antes de nada tendremos que añadir el gadget "Lista de blogs" y configurarlo tal como vemos en la imagen para añadir el código necesario, una vez conseguido el efecto del movimiento podremos editar el gadget de nuevo si así lo queremos.

[2] Una vez añadido y configurado el gadget de esta manera, vamos a Diseño - Edición HTML y marcamos la opción de "Expandir las plantillas de artilugios".
Tendremos que localizar el código del gadget y añadir el código necesarios tal como veis destacado en color:

<b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<center><marquee direction='up' height='300' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='5' bgcolor = '#faf0e6' style='border: #cdaf95 2px solid;padding-left: 10px;' width='260'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>
<div class='blog-icon'>
<b:if cond='data:showIcon == &quot;true&quot;'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if>
</div>
<div class='blog-content'>
<div class='blog-title'>
<a expr:href='data:item.blogUrl' target='_blank'>
<data:item.blogTitle/></a>
</div>
<div class='item-content'>
<b:if cond='data:showItemThumbnail == &quot;true&quot;'>
<b:if cond='data:item.itemThumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:item.blogUrl' target='_blank'>
<img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
</a>
</div>
</b:if>
</b:if>
<b:if cond='data:showItemTitle == &quot;true&quot;'>
<span class='item-title'>
<b:if cond='data:item.itemUrl != &quot;&quot;'>
<a expr:href='data:item.itemUrl' target='_blank'>
<data:item.itemTitle/></a>
<b:else/>
<data:item.itemTitle/>
</b:if>
</span>
</b:if>
<b:if cond='data:showItemSnippet == &quot;true&quot;'>
<b:if cond='data:showItemTitle == &quot;true&quot;'>
-
</b:if>
<span class='item-snippet'>
<data:item.itemSnippet/>
</span>
</b:if>
<b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
<div class='item-time'>
<data:item.timePeriodSinceLastUpdate/>
</div>
</b:if>
</div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>

<b:if cond='data:numItemsToShow != 0'>
<b:if cond='data:totalItems &gt; data:numItemsToShow'>
<div class='show-option'>
<span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
<a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
</span>
<span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
<a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
</span>
</div>
</b:if>
</b:if>
</marquee></center>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>
Modificaciones:
height='300' Es el alto del gadget, a mayor valor, más altura y viceversa.

width='260' Es el ancho del gadget, a mayor valor, más anchura y viceversa.

bgcolor = '#faf0e6' Color de fondo del gadget. Si no queremos usarlo eliminamos ese código (bgcolor = '#faf0e6'). Para cambiar el color, sustituimos el código del color (#faf0e6) por el escogido.

border: #cdaf95 2px solid; El borde del gadget. Si no queremos borde, ponemos su valor (2px) en 0, si lo queremos más o menos ancho, aumentamos o disminuimos ese valor. Para cambiar su color, colocamos en #cdaf95, el código del color escogido.

scrollamount='5' Velocidad de desplazamiento, aumentamos o disminuimos el valor (5) para variar la velocidad.

direction='up' Dirección del desplazamiento, en este caso hacia arriba, si ponemos down en lugar de up, el desplazamiento será hacia abajo.

--> Leer Más...

Botón para traducción del blog en 52 idiomas

TranslateThis es un botón Javascript que se puede agregar y dar la opción para traducción del blog en 52 idiomas.

Solamente hay que copiar y pegar el siguiente código Javascript en donde quieran mostrar el botón:
<!-- Begin TranslateThis Button -->
<div id="translate-this"><a href="http://translateth.is/" class="translate-this-button">Translate</a></div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script>
<script type="text/javascript">
TranslateThis();
</script>
<!-- End TranslateThis Button -->
El botón también nos permite personalizarlo.

Se puede cambiar el texto, imagen, que parte del blog no traducir, idiomas a mostrar, etc..
Ver detalles:

Ejemplos:
Imagen: btnImg : 'URL de la imagen',
btnHeight : Altura de la imagen,
btnWidth : Ancho de la imagen,
panelText : 'Traducción en:',
moreText : '36 Idiomas más »',
busyText : 'Traduciendo la página...',
cancelText : 'Cancelar',
doneText : 'Esta página traducida por el',
undoText : 'Cerrar »',
cookie : false,

Se agrega en la función JavaScript "TranslateThis"
<script type="text/javascript">
TranslateThis({
btnImg : 'http://2.bp.blogspot.com/_WvACVGW1iPE/THfM_9C9dbI/AAAAAAAABSc/gsbrD14os4w/s320/translate.jpg',
btnHeight : 38,
btnWidth : 38,
panelText : 'Traducción en:',
moreText : '36 Idiomas más »',
busyText : 'Traduciendo la página...',
cancelText : 'Cancelar',
doneText : 'Esta página traducida por el',
undoText : 'Cerrar »',
cookie : false,
});
</script>
El código final quedaría así:
<!-- Begin TranslateThis Button -->
<div id="translate-this"><a href="http://translateth.is/" class="translate-this-button">Translate</a></div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script>

<script type="text/javascript">
TranslateThis({
btnImg : 'http://2.bp.blogspot.com/_WvACVGW1iPE/THfM_9C9dbI/AAAAAAAABSc/gsbrD14os4w/s320/translate.jpg',
btnHeight : 38,
btnWidth : 38,
panelText : 'Traducción en:',
moreText : '36 Idiomas más »',
busyText : 'Traduciendo la página...',
cancelText : 'Cancelar',
doneText : 'Esta página traducida por el',
undoText : 'Cerrar »',
cookie : false,
});
</script>
<!-- End TranslateThis Button -->
Fuente: loseasi
--> Leer Más...

Efecto en la galería de fotos de tu Plantilla

Esta opción se adecua para los blogs de fotografía, por lo que haremos que la plantilla parezca una galería de imágenes incluyendo ventanas modales.

El procedimiento es mucho más sencillo ya que no requiere de ningún script para hacer resúmenes, sólo condicionaremos la forma que se mostrarán en la portada y nos valdremos de Shadowbox para las ventanas modales aunque eso es opcional.

El primer paso es entrar a Diseño | Edición de HTML y pegar antes de </head> lo siguiente:
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
#sidebar-wrapper {
/* Con esto ocultamos la sidebar de la portada */
display: none;
visibility: hidden;
}
#main-wrapper {
width: 830px;
/* Ancho del blog en la portada */
}
.post {
border: 10px solid #424242;
/* Color y tamaño del borde */
float: left;
height: 175px;
/* Alto de cada contenedor */
width: 175px;
/* Ancho de cada contenedor */
margin: 6px;
/* Distancia entre cada contenedor */
padding: 0;
overflow: hidden;
}
.post-body {
padding:0;
margin:0;
}
.post h3 {
padding: 0;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
color: #BDBDBD;
/* Color del título de las fotos */
background: #424242;
/* Color de fondo del título */
margin: -5px -5px 0 -5px;
text-align: center;
}
.post img {
height: 175px;
/* Alto de la foto en miniatura */
width: 175px;
/* Ancho de la foto en miniatura */
float: left !important;
border: 0;
padding:0;
margin:0;
}
h2.date-header {
/* Con esto ocultamos la fecha */
display: none;
visibility: hidden;
}
#blog-pager {
clear: both;
}
#sidebar-wrapper {
/* Con esto ocultamos la sidebar de la portada */
display: none;
visibility: hidden;
}
#main-wrapper {
width: 830px;
/* Ancho del blog en la portada */
}
</style>
</b:if>
</b:if>
Con ese simple paso ya tenemos las entradas en columnas tipo revista, ahora viene la personalización que es la parte más importante.

En la primera parte ocultamos la sidebar de la portada con el fin de que tenga más espacio para mostrar más imágenes y para que se vea realmente como una galería.

El segundo bloque que dice /* Ancho del blog en la portada */ es la suma del ancho del #main-wrapper más el ancho del #sidebar-wrapper, por ejemplo, si el #main-wrapper tiene 600px de ancho y el #sidebar-wrapper tiene 220px de ancho entonces la medida que pondremos será de 880px

El nombre de estos contenedores está basado en las plantillas clásicas de Blogger, así que en las nuevas y otras modificadas el nombre será distinto, ya será cuestión de que cada quien identifique el nombre y ancho de estos contenedores.

Ya que hemos establecido el ancho del blog entonces procederemos a ajustar el ancho y alto de los contenedores de las fotos así como el ancho y alto de las fotos miniatura. Eso se hace donde se indica en color verde, ahí tomaremos en cuenta que entre más pequeñas sean las miniaturas más columnas de fotos cabrán en el blog.

También configura el número de entradas a mostrar en la página principal de modo que nunca vaya a quedar vació un espacio, por ejemplo, si ajustaste el tamaño para mostrar columnas de tres entradas entonces deberás configurar el blog para que muestra 6, 9, 12 o 15 entradas en la página principal; si fueran columnas de dos entonces tendrás que mostrar ya sea, 4, 6, 8 o 10 entradas.

Para hacerlo ve a Configuración | Formato | Mostrar un máximo de y ahí elige el número de entradas que se mostrarán.

Un dato que hay que tomar muy en cuenta es que si agregas texto a la entrada éste deberá estar debajo de la imagen, de lo contrario el texto se mostrará encima de la miniatura y se verá mal.

Por último y a modo opcional vamos a agregar Shadowbox para que las fotos de la galería tanto en la entrada individual como en la portada se vean dentro de una ventana modal.
Para ello descarga este archivo, descomprímelo y sube los archivos a un hosting.

Luego entra de nuevo en
Diseño | Edición de HTML y antes de </head> esto:
<link href='URL del archivo css' rel='stylesheet' type='text/css'/>
<script src='
URL del archivo js' type='text/javascript'/>
<script type='text/javascript'>
Shadowbox.init({
overlayColor: &quot;#000&quot;,
overlayOpacity: &quot;0.6&quot;,
});
</script>
Sustituye lo que está en color rojo por las URLs de los archivos que se indican y que subiste previamente.

Lo último es lo más simple, sólo creamos una entrada y cargamos la foto, en la pestaña Edición de HTML (no en la de Redactar) veremos el código de la imagen, será algo como esto:
<a rel="shadowbox" title="Título de la imagen" href="http://3.bp.blogspot.com/_dsEG33PDaHw/THf2fvKHVfI/AAAAAAAAAU8/
o1827ZGOWEM/s1600/11.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="285" src="http://3.bp.blogspot.com/_dsEG33PDaHw/THf2fvKHVfI/AAAAAAAAAU8/
o1827ZGOWEM/s400/11.jpg" width="400" /></a>
Lo único que hacemos es agregar lo que está en color rojo y ya, con eso la imagen se abrirá en una ventana modal. Agrega donde se indica el título de la fotografía, ese título aparecerá arriba de la imagen una vez que se muestre.

Si deseas que la foto sea parte de una galería de imágenes entonces lo que deberás agregar será esto:
rel="shadowbox[galeria1]"
Cambia el nombre galeria1 por el nombre de la galería que quieras, así todas las fotos que tengan el mismo nombre de esa galería se mostrarán con flechas dentro de la ventana modal.

Como has podido ver, crear una plantilla en forma de galería no es difícil, el resultado puede ser tan espectacular como tu creatividad te lo permita.

Puedes ver un ejemplo funcionando en este blog de pruebas y haz click en cualquier imagen.

Fuente: CiudadBlogger
--> Leer Más...

Publicaciones recientes

 

  © 2009 Crea tu Blog

True Contemplation Blogger Template by M Shodiq Mustika