Añadir Efecto Esquina Plegable en el Blog de Blogger

Seguramente abras visto en alguna página web este efecto que veremos hoy día, el script se llama How To Page Peel Effect está basado en javascript, imágenes, flash, y lo podemos utilizar en nuestro blog de forma gratuita gracias a hongkiat. Puedes verlo funcionando en mi blog de pruebas.


Cuando apliques este efecto a tu sitio verás un pliegue tipo pegatina en la esquina superior derecha de tu blog, y al pasar el mouse por encima este pliegue te muestra la información que hay detrás, esto las páginas web lo utilizan para promocionar sus productos, pero nosotros lo podemos utilizar en nuestro blog para dar a conocer otro blog que tengamos, blog de un amigo, o lo que tú quieras.

Ahora veremos cómo ponerlo en tu blog de blogger, primero tienes que tener la librería jQuery, es posible que ya la tengas si has aplicado otro efecto utilizando esta librería, pero si no la tienes copia y pega el siguiente código justo antes de </head>


<script src='http://dl.dropbox.com/u/3373498/PazosBlogger/jQuery1.3.2.min.js' type='text/javascript'/>


Ahora tienes que copiar el siguiente código que te dejo en está otra página y pegalo en el Bloc de notas,WordPad, o Dreamweaver para configurar algunos parametros que te muestro a continuación.


Configuración:


var jaaspeel = new Object();
jaaspeel.ad_url = escape('http://www.pazosblogger.com');
jaaspeel.small_path = 'http://dl.dropbox.com/u/3373498/PazosBlogger/small.swf';
jaaspeel.small_image = escape('URL-de-tu-imagen-PEQUEÑA');
jaaspeel.small_width = '150';
jaaspeel.small_height = '150';
jaaspeel.small_params = 'ico=' + jaaspeel.small_image;
jaaspeel.big_path = 'http://dl.dropbox.com/u/3373498/PazosBlogger/large.swf';
jaaspeel.big_image = escape('URL-de-tu-imagen-GRANDE');
jaaspeel.big_width = '600';
jaaspeel.big_height = '600';
jaaspeel.big_params = 'big=' + jaaspeel.big_image + '&amp;ad_url=' + jaaspeel.ad_url;


Cambia lo que está en color rojo por la dirección web a la que quieres que dirija cuando hagan clik.

Lo que está en color azul tienes que poner tus imágenes una pequeña de 100 x 100 pixeles y la grande de 500 x 500 pixeles.

El pliegue antes de pasar el mouse por encima lo puedes cambiar al tamaño que tú quieras, en el código te lo dejo en color celeste está en 150 tienes que cambiar tanto el ancho como el alto.


Por último el tamaño del pliegue cuando pase el mouse por encima es de 600 se los dejo en color naranja también tienen que cambiar el ancho y alto.

Una vez has configurado todo lo guardas y lo subes a tu propio servidor de archivos, para los que no saben donde subir sus script lean este artículo, tu servidor de archivos te dará la dirección del script y tienes que pegarla en el siguiente código que te dejo abajo, luego lo pegas justo antes de </body>:


<script src='URL-de-tu-script' type='text/javascript'/>


Si todo ha ido bien verás el efecto en acción en tu blog, y si tiene algún problema hásmelo saber por medio del formulario de comentarios.


Descargar Script + Archivos swf


Fuente: www.pazosblogger.com
--> Leer Más...

jQuery: ampliar una imagen con efecto elegante en blogger o pagina web

Con jQuery podemos ampliar una imagen con un bonito efecto. Anteriormente hemos visto 2 clase de efecto para ampliar imagen, les dejo los links por si les interesa, Imagen que se agranda al pasar el mouse por encima y Poner una lupa a todas las imágenes del blog al pasar el mouse por encima con CSS y jQuery.


El efecto que realizaremos hoy día es con un script de DynamicDrive, y es que este se puede traducir en un elegante efecto Zoom que podemos agregar a las imágenes de nuestro blog, este script te permite mostrar las imágenes ampliada en el centro de la pantalla del usuario, y con un solo click volverla a su tamaño original. Pueden verlo funcionando en mi blog de pruebas

Al pasar el cursor por encima de una imagen, te mostrará una pequeña lupa con un signo + en señal de que la imagen se puede ampliar, este bonito efecto lo he probado y funciona bien en las ultimas versiones de los siguientes navegadores: IE, Opera, Firefox, Google Chrome, etcétera.

Para ponerlo en tu blog de blogger, tienes que tener la librería jQuery v1.3.2 en tu plantilla es posible que ya la tengas, si la tienes salta este paso, de lo contrario copia y pega el siguiente código antes de la etiqueta </head>

<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/jQuery1.3.2.min.js' type='text/javascript'/>

Ya tenemos la librería, ahora toca añadir el script justo después del código que acabamos de pegar justo ante s de </head>

<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/jquery.lupa.zoom.js' type='text/javascript'/>

Ahora, puedes crear una entrada o si quieres poner la imagen en tu sidebar ve a  Diseño > Añadir gadget > elije > HTML/Javascript > y pega uno de los siguientes código para llamar el efecto, también lo puedes poner en una entrada:

<img src="URL-de-tu-imagen" class="magnify" style="width:200px; height:150px" />
<img src="URL-de-tu-imagen" class="magnify" border="0" />

El primer código lo puedes utilizar para cuando una imagen es demasiado grande, y quieres darle tu mismo las dimensiones necesarias para que entre bien en tu sidebar o en una entrada, widgt: es el ancho y height: el alto. El efecto zoom se aplicará con relación a las dimensiones de la imagen.

El segundo código, es para que una imagen se muestre en su tamaño normal, por ejemplo se puede utilizar para imágenes pequeñas, donde también se aplicará el efecto zoom de acuerdo a las demenciones base de la imagen.

Configuración Avanzada
Si te bajas el script puedes hacer algunas configuraciones. En la parte superior del código hay 3 variable que puedes configurar, para ello localiza esta parte del código en el script:

dsettings: {
magnifyby: 3, //factor de incremento por defecto de la imagen ampliada
duration: 500, //Duración predeterminada de la animación, en milisegundos
mgopacity: 0.2 //la opacificación de la imagen original, cuando la imagen ampliada la recubre
},
cursorcss: 'url(magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image

Como pueden ver se los dejo en color rojo las 3 variables que se pueden configurar y la parte que está en azul pueden poner la URL de su propia imagen ya sea una lupa o lo que ustedes quieran. Que fácil es usar jQuery para ampliar una imagen


Fuente: www.pazosblogger.com
--> Leer Más...

Botones Animados con Efecto Corredizo - Redes Sociales

Para ofrecer suscripción a los visitantes de nuestro blog, lo primero que se nos ocurre es poner un botón con enlace. Una buena alternativa para llamar más la atención la encontré en el blog de David Walsh donde muestra un botón animado utilizando la librería MooTools.


En IE y Opera los botones se muestran cuadrados pero en Firefox y Google Chrome se ve perfectamente, además, el efecto funciona bien en los 4 navegadores. Pueden verlo en mi blog de pruebas.


Para los que no saben que es MooTools, pues se lo digo en pocas palabras, es una librería que nos permite realizar muchos efectos, en otras palabras es algo parecido a jQuery.


Para poner este tipo de botones en tu blog de blogger, primero tienes que tener la librería MooTools v1.2.4 si no la tienes en tu plantilla ve a Diseño > Edición de HTML > con la ayuda del buscador de tu navegador (Ctrl + F) busca la etiqueta </head> y justo antes pega el siguiente código:


<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/mootools-1.2.4.js' type='text/javascript'/>


Ahora añadiremos el script que le dará vida al efecto, pegamos el siguiente código después del código que acabamos de pegar anteriormente antes de </head>


<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/botonesanimados.js' type='text/javascript'/>


Llego la hora de añadir el código CSS que le dará estilo al botón, con la ayuda del buscador de tu navegador (Ctrl + F) busca la etiqueta ]]></b:skin> y justo antes pega el siguiente código:


.button_wrap{ position:relative; width:225px; height:36px; overflow:hidden; font-weight:bold; font-size:11px; margin:10px;
}
.button_aRight{ width:70px; height:36px; -moz-border-radius:20px; -webkit-border-radius:20px; background-color:#093d6f; color:#fff; top:0px; left:0px; position:absolute; line-height:36px; text-align:right;
}
.button_aRight span{ /* display:none; */ visibility:hidden; padding-right:20px; color:#fff;
}
.button_bRight{ width:64px; height:30px; background-color:#fff; -moz-border-radius:20px; -webkit-border-radius:20px; color:#000; position:absolute; top:3px; left:3px; text-transform:uppercase; line-height:30px; text-align:center; cursor:pointer;
}
.button_bRight span{ color:#008ddd;
}
.button_c{ background-color:#008ddd; color:#fff; text-transform:uppercase;
}
.button_c span{ color:#093d6f;
}


Por último ve a Diseño > Añadir gadget > elije > HTML/Javascript y pega el siguiente código:


<div class="button_wrap">
<a class="button_aRight" id="button_aRight"><span>Sigueme en twiteer</span></a>
<a href="URL-de-tu-enlace" target="_blank" class="button_bRight slidebttn" id="button_bRight">Twitter <span></span></a>
</div>


Pueden poner tantos botones como quieras, en este caso he puesto el código sólo para un botón, pero si es que quieres poner más botones solo tienes que copiar las veces que quieras el último código.


Para cambiar lo que está en color azul del botón, cambia el código de color que está en rojo en el código css, por el código del color que más te guste, les dejo un completo generador de colores.


Lo que está en color amarillo es el texto que se mostrará cuando el botón se despliegue.


Cambia lo que está en color azul por la dirección de tu enlace.


Lo que está en color celeste tienes que poner el nombre del enlace, ese texto será el que se mostrará cuando el botón este sin desplegarse.


Fuente: www.pazosblogger.com

--> Leer Más...

Poner un Scroller con Artículos Nuevos en la Sidebar del Blog

David Walsh nos enseña a crear un scroller simple utilizando la librería MooTools, este scroller lo podemos utilizar para poner post nuevos o relevantes. Este scroller tiene un aspecto muy simple, con una animación muy elegante, algo que lo convierte en una herramienta eficaz a la hora llamar la atención de los usuarios del blog, al mostrar una noticia importante. Pueden verlo en mi blog de pruebas.


Para ponerlo en el blog, pero primero tenemos que tener la librería MooTools 1.2.4 en tu plantilla, si ya la tienes en tu plantilla salta este paso, de lo contrario ve a Diseño > Edición de HTML y con la ayuda de (Ctrl + F) busca la etiqueta </head> y justo antes pega el siguiente código:


<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/mootools-1.2.4.js' type='text/javascript'/>


Ya tenemos la librería MooTools en nuestra plantilla, ahora tenemos que añadir el script que le dará vida al efecto, para ello copia el siguiente código y págalo justo después del código que acabas de pegar antes de </head>


<script type='text/javascript'>
window.addEvent(&#39;domready&#39;,function() {
/* settings */
var list = $(&#39;news-feed&#39;).getFirst(&#39;ul&#39;);
var items = list.getElements(&#39;li&#39;);
var showDuration = 3000;
var scrollDuration = 500;
var index = 0;
var height = items[0].getSize().y;
/* action func */
var move = function() {
list.set(&#39;tween&#39;,{
duration: scrollDuration,
onComplete: function() {
if(index == items.length - 1) {
index = 0 - 1;
list.scrollTo(0,0);
}
}
}).tween(&#39;top&#39;,0 - (++index * height));
};
/* go! */
window.addEvent(&#39;load&#39;,function() {
move.periodical(showDuration);
});
});
</script>


Ahora, añadiremos el código CSS, pega antes de la etiqueta ]]></b:skin> el siguiente código:


#news-feed { height:200px; width:300px; overflow:hidden; position:relative; border:1px solid #ccc; background:#eee; }
#news-feed ul { position:absolute; top:0; left:0; list-style-type:none; padding:0; margin:0; }
#news-feed ul li { height:180px; font-size:12px; margin:0; padding:10px; overflow:hidden;
}


Por último ve a Diseño > Añadir gadget > elije > HTML/Javascript y pega el siguiente código HTML para llamar al efecto y al estilo css:


<div id="news-feed">
<ul>
<li><strong style="font-size:14px;">Título1</strong><br />Aquí el contenido de tu artículo...<a href="#">Leer Más</a></li>
<li><strong style="font-size:14px;">Título2 </strong><br />Aquí el contenido de tu artículo...<a href="#">Leer Más</a></li>
<!-- Más artículos.... -->
</ul>
</div>


Cambia la # por la url de tu artículo.

Para cambiar el tamaño del Scroller cambia en el código css el alto height:200px;  y el ancho width:300px;. Si el título de los artículos te sale desalineado puedes ver este post donde explico como alinear códigos.

Fuente: www.pazosblogger.com
--> Leer Más...

Poner Indice en Blogger con Efecto Acordeón jQuery y CSS 3


Anterior mente veíamos cómo poner un mapa del sitio o índice en blogger, donde el script nos muestra una lista de todas las entradas divididas por categoría, pero el script ha sido modificado nuevamente por el genio abu-farhan donde ahora lleva un bonito efecto...


acordeón que al hacer click sobre una categoría se despliegan todas las entradas y luego las oculta, pueden verlo funcionando en mi blog de pruebas.


Código para blog en Español
<link href="http://dl.dropbox.com/u/3373498/PazosBlogger/acc-toc.2.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://dl.dropbox.com/u/3373498/PazosBlogger/daftarisiv2-pack.2.js">
</script>
<script src="http://www.url/de/tu/blog/blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://dl.dropbox.com/u/3373498/PazosBlogger/accordion-pack.2.js" type="text/javascript">
</script>


Código para blog en Inglés
<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://www.url/de/tu/blog.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>


Cambia lo que está en color rojo por los datos de tu blog, publicas la entrada y listo. Si el código para blog en español no funciona en tu blog, intenta con el código para blog en inglés.

Fuente:Abu-Farhan - www.pazosblogger.com
--> Leer Más...

Menú desplegable jQuery: Slide menú horizontal con jQuery y efecto deslizante

Hace tiempo que no publico menú en Pazos Blogger, pues hoy día les traigo este menú desplegable jQuery con CSS3 creado por tympanus, Pueden ver una demo en mi blog de pruebas.

El menú cuenta con un cuadro de diapositiva y una imagen en miniatura que aparece al pasar el mouse por encima de cada elemento del menú, también incluye un recuadro en el submenú con enlaces para algunos de los elementos del menú. Los submenú se deslizarán hacia la derecho o izquierda con un bonito efecto deslizante.

Iportante: Antes de instalar este menú, en una plantilla del diseñador de plantillas de blogger, primero tenemos que hacer unos cambios en la plantilla, lee este tutorial.

Para utilizarlo en tu blog ve a
Diseño > Edición de HTML > con la ayuda de (Ctrl + F) busca la etiqueta </head> y justo antes gega el siguiente código que contienes el script jQuery y la librería jQuery:


<script src='http://pazos-blogger.googlecode.com/files/libreria.jquery.min.1.4.2.js' type='text/javascript'/>
<script src='http://pazos-blogger.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>


Ahora toca añadir el código CSS para darle estilo al menú, para ello copia y pega el siguiente código justo antes de la etiqueta ]]></b:skin> :


/* Slide Menú desplegable con jQuery y CSS 3
----------------------------------------------- */
ul.sdt_menu{
margin:0;
padding:0;
list-style: none;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:14px;
width:1020px;
}
ul.sdt_menu a{
text-decoration:none;
outline:none;
}
ul.sdt_menu li{
float:left;
width:170px;
height:85px;
position:relative;
cursor:pointer;
}
ul.sdt_menu li > a{
position:absolute;
top:0px;
left:0px;
width:170px;
height:85px;
z-index:12;
background:transparent url(http://lh6.ggpht.com/_NLOc3R4Yqfs/TN7g7VT6viI/AAAAAAAAB6I/ASvXrGS3N-c/overlay.png) no-repeat bottom right;
-moz-box-shadow:0px 0px 2px #000 inset;
-webkit-box-shadow:0px 0px 2px #000 inset;
box-shadow:0px 0px 2px #000 inset;
}
ul.sdt_menu li a img{
border:none;
position:absolute;
width:0px;
height:0px;
bottom:0px;
left:85px;
z-index:100;
-moz-box-shadow:0px 0px 4px #000;
-webkit-box-shadow:0px 0px 4px #000;
box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_wrap{
position:absolute;
top:25px;
left:0px;
width:170px;
height:60px;
z-index:15;
}
ul.sdt_menu li span.sdt_active{
position:absolute;
background:#111;
top:85px;
width:170px;
height:0px;
left:0px;
z-index:14;
-moz-box-shadow:0px 0px 4px #000 inset;
-webkit-box-shadow:0px 0px 4px #000 inset;
box-shadow:0px 0px 4px #000 inset;
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
margin-left:15px;
text-transform:uppercase;
text-shadow:1px 1px 1px #000;
}
ul.sdt_menu li span span.sdt_link{
color:#fff;
font-size:24px;
float:left;
clear:both;
}
ul.sdt_menu li span span.sdt_descr{
color:#0B75AF;
float:left;
clear:both;
width:155px; /*For dumbass IE7*/
font-size:10px;
letter-spacing:1px;
}
ul.sdt_menu li div.sdt_box{
display:block;
position:absolute;
width:170px;
overflow:hidden;
height:170px;
top:85px;
left:0px;
display:none;
background:#000;
}
ul.sdt_menu li div.sdt_box a{
float:left;
clear:both;
line-height:30px;
color:#0B75AF;
}
ul.sdt_menu li div.sdt_box a:first-child{
margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
color:#fff;
}


Ahora busca la etiqueta </body> que está casi al final de la plantilla y pega justo antes el siguiente código:


<script type="text/javascript">
$(function() {
/**
* for each menu element, on mouseenter,
* we enlarge the image, and show both sdt_active span and
* sdt_wrap span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right
*/
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'170px',
'height':'170px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'170px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '170px';
if($elem.parent().children().length == $elem.index()+1)
left = '-170px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');


$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
});
$('#relatedPosts').toggle(
function(){
$('#rp_list').animate({'bottom':'10px'},500);
},
function(){
$('#rp_list').animate({'bottom':'-50px'},500);
}
);
$('#rp_list a').tipsy({gravity: 's'});
});
</script>


Por último nos vamos a Diseño nos situamos debajo de la cabecera de nuestro blog y hacemos clic en Añadir gadget > elegimos HTML/JavaScript y pegamos el siguiente código:


<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="#">
<img src="URL/DE/TU/IMAGEN/1" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Acerca de</span>
<span class="sdt_descr">Pazos Blogger</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="URL/DE/TU/IMAGEN/2" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Portafolio</span>
<span class="sdt_descr">My Trabajo</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Blog</a>
<a href="#">Trucos blogger</a>
<a href="#">Tutoriales</a>
</div>
</li>
<li>
<a href="#">
<img src="URL/DE/TU/IMAGEN/3" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Inspiración</span>
<span class="sdt_descr">Cuando las ideas nacen</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="URL/DE/TU/IMAGEN/4" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Trucos</span>
<span class="sdt_descr">Trucos Blogger</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="URL/DE/TU/IMAGEN/5" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Blog</span>
<span class="sdt_descr">Photoshop</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="URL/DE/TU/IMAGEN/6" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Poyectos</span>
<span class="sdt_descr">Me gusta el código</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Bolsa de trabajo</a>
<a href="#"> Tarjeta de compra</a>
<a href="#">Mapas interactivos</a>
</div>
</li>
</ul>


Ahora le podemos cambiar los títulos a los elementos del menú y submenú, donde pone # la reemplazamos por nuestro enlace.


Nota: El tamaño de las imágenes tienes que ser de 170x170 px.


Como pueden ver es uno de los menú desplegable con jQuery más bonitos que hay.


Descargar Script y CSS


Fuente: www.pazosblogger.com
--> Leer Más...

Como cambiar el favicon del blog desde Blogger in Draft

Como ya hace unas semanas, Blogger in Draft dio a conocer la forma más fácil de colocar el favicon en Blogger desde Elementos de la página, ya que hace tiempo en un post había mencionado como colocar el favicon desde Edición de HTML en la plantilla.

Pero bien, para cambiarlo tienes que acceder desde Blogger in Draft, luego te vas a Diseño > Elementos de la página y le das clic a la opción de “Editar” sobre el elemento o gadget llamado Favicon.


Luego hay que seleccionar el archivo del favicon que tendrá que ser en formato .ICO y que no sea mayor a 10kb, una vez cargado le damos en guardar y listo.

El favicon lo podrás visualizar para todos los navegadores incluyendo IE9. Si no sabes cómo convertir una imagen a formato .ICO checa este excelente convertidor online llamado Favicon.cc

Fuente: www.v-junker.com
--> Leer Más...

Como mostrar la fecha en todas las entradas

Cuando escribimos más de una entrada el mismo día Blogger por defecto nos muestra la fecha sólo en la última entrada, el resto de ellas queda sin fecha.

Para "corregir" esto podemos aplicar un sencillo script:

Sólo basta con entrar en Diseño | Edición de HTML marcar la casilla Expandir plantillas de artilugios y buscar este código:


<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>


Lo eliminamos y en su lugar ponemos este otro:


<b:if cond='data:post.dateHeader'>
<script>var mismaFecha = '<data:post.dateHeader/>';</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(mismaFecha);</script>
</h2>
</b:if>


Guardamos los cambios y listo. Tendrás la fecha en todas las entradas.

Ojo, si tu problema es que no ves la fecha en ninguna entrada entonces necesitas activarla entrando en Diseño | Elementos de la página, click en Editar sobre el elemento Entradas del blog y ahí marcar la casilla de la fecha.


Fuente: www.trucosblogs.com
--> Leer Más...

Publicaciones recientes

 

  © 2009 Crea tu Blog

True Contemplation Blogger Template by M Shodiq Mustika