jueves, 21 de octubre de 2010

Crónica de una noche genial - Premios 20Blogs 2010

Esta es una entrada escrita cuando aún se sienten los nervios a flor de piel, son muchas emociones en poco espacio de tiempo y no dejan tiempo a reaccionar.
Cuando llegué a la sala Orange de Madrid me encontraba fuera de lugar, intentaba asociar a cada uno con su blog pero es difícil reconocernos por la imagen del perfil más aún si esa imagen no es la propia fotografía.

Hay que reconocer que el ambiente era propicio para entablar conversación pero una es más corta de lo que parece así que dejé que las cosas surgieran solas.
Comenzó la noche con vídeos sobre el 10º aniversario de 20Minutos y algo muy curioso la elaboración de Eneko la famosa estatuilla del autor con el mismo nombre que se le entrega a los ganadores de cada edición, tampoco faltó el vídeo del año pasado caras conocidas derrochando alegría y emoción. 20Minutos cuenta así la gala de los premios 20Blogs minuto a minuto.

El Mago Karim que es todo un personaje consiguió que las risas sonaran en la sala y entre ocurrencias y sus hábiles manos con juegos malabares de cartas la noche se fue relajando.

Comenzó la entrega de premios, es obvio que no esperaba encontrar allí a los 5.011 participantes pero se notaron ausencias de personas que me habría gustado mucho conocer pero, por diversas circunstancia no estaban allí.

22 galardones uno por categoría, otro para el blog más votado y el más esperado de la noche para el blog del año escogido por el jurado El horno de María la afortunada autora es Mayte Hortelano que estaba tan asombrada como feliz y no era para menos.

Creo que en el mismo orden que aparece en el listado oficial fueron nombrando a los ganadores de cada categoría, cuando me llamaron para recoger el premio a la categoría Ciencia Tecnología e Internet casi que no llego al escenario pero una vez allí... Vale, una vez allí estaba mucho más nerviosa.
En corto espacio de tiempo subo de nuevo a recoger el premio por votación popular más nervios, bromas por aquí y por allá el mago Karim me ofrece el micro para decir unas palabras y quiere ayudarme sujetando las estatuillas pero decide que mejor me ayuda con el cheque, me hizo reír y dije unas palabras de agradecimiento en las que seguramente no estuve acertada y más felicitaciones por parte de la organización y asistentes.

Los responsables de la organización tenían que hacer su trabajo y enviar lo antes posible entrevistas 1 - 2 fotografías y vídeo a la redacción, unas cuantas respuestas fueron suficientes, todos muy amables y serviciales, todo el mundo estaba contento daba igual si eras participante como si no.

Había barra libre y unos canapés deliciosos que dada la hora venían de maravilla, en el transcurso de la noche los que no se conocían se fueron presentando, no voy a citar nombres por si me olvido de alguien pero fue muy agradable ponerle cara a muchos bloggers.
A los que tomaron la iniciativa de acercarse a saludarme muchas gracias porque hoy puedo ver las fotos y al mismo tiempo recordar los abrazos. ¿Somos tímidos en persona eh? pensaba que era yo sola.

Nos regalaron a todos los premiados unos altavoces de la marca Philips para el iPod y a la salida un adaptador USB para conexión wifi con 15 euros de consumo gratuito, también se sorteó un viaje, la verdad que quedé gratamente sorprendida porque todo estaba muy bien organizado.

Lo que más me gustó fue la atención dispensada por la organización, no faltó nadie por acercarse a saludar y presentarse una maravilla la verdad.
El premio ¿qué puedo decir? fantástico, genial, oportuno, y todo gracias a esos 190 votos otorgados por vosotros, unos votos que no hay agradecimiento en el mundo para pagar.

Muchos ya están pensando en la edición del año que viene y animo a todo el mundo a presentarse porque la experiencia comienza desde el mismo momento que nos inscribimos donde tenemos la oportunidad de conocer maravillosas personas y blogs interesantes si a eso añadimos que podemos conocerlas personalmente en una noche estupenda el motivo es más que justificado.

No me canso de dar las gracias a todos los que me votaron y a los que sin poder dar su voto porque no participaban me estuvieron apoyando durante todo el concurso.

También quiero dar las gracias a José María Martín autor del blog 20minutos.es y responsable de participación, redes y comunidad de 20minutos.es por la atención y trato exquisito en todo momento.
A la organización en general y a todos los que hacen posible que cada año ese concurso siga celebrándose.
Gracias Oloman paisano, por darme ese sutil empujón para que participara, te debo un café y una charla pero esta vez de verdad sin excusa que valga.

Hay otra persona que tiene papel en esta película es alguien a quien admiro mucho no sólo porque es maestro de los maestros sino por su calidad humana, porque se entrega sin límites tratando de ayudar o como él dice de compartir.
Mi agradecimiento a JMiur de Vagabundia porque su blog es mi escuela particular y su persona un ejemplo a seguir.
Gracias por compartir tanto y de forma desinteresada.

Otras dos personas a las que tengo que dar gracias a diario con y sin concurso, son los causantes de esta entrada, los que sin saberlo me motivan para que siga manteniendo este blog. Ellos me escuchan siempre, a veces sonríen y cruzan miradas de complicidad como diciendo "Hoy toca ballita bloguera" pues si, hay batallita para rato y en el fondo os gusta que lo sé yo.
Gracias por estar siempre ahí en tiempos buenos y regulares, por hacer lo difícil sencillo. Por esos mil quinientos kilómetros para que pudiera asistir a la entrega de premios y vivir algo que me hacía mucha ilusión pero, para no forzar las cosas hacía como que no...
Por cuidar al fierecilla en mi ausencia y sentir la misma alegría que estaba sintiendo yo.
Gracias por darle emoción a mi vida, por estar y ser mis dos amores.

Y como lo prometido es deuda ahí va la camiseta que me regaló mi particular club de fans al hacerse oficial los resultados. Lo mejor fue la sorpresa, todos con camiseta y botella de cava en las manos haciendo la ola. Estáis locos pero os adoro.


No había sido un sueño.

miércoles, 20 de octubre de 2010

Fantasmas en el blog


Para quienes les gusta disfrazar su blog en Halloween, o para quienes les gusta tener adornos macabros en el blog, este script les ayudará a darle ese aspecto de terror con unos fantasmas volando por todo el blog.
Puedes ver el ejemplo en este blog poseído de pruebas.

Ponerlo en el blog es sumamente sencillo, sólo basta entrar en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript y ahí pegar este código:
<script language="JavaScript">
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){

//Configuracion

var numberOfGhosts = 10; /* Numero de fantasmas */
var ghostSpeed = 0.9; /* Velocidad */
var inTheFace = 5;
var setTimeOutSpeed = 50; /* Velocidad a la que desaparecen */

//Fin de la configuracion

var h,y,cy,cx,sy,sx,ref,field,oy1,oy2,ox1,ox2,iy1,iy2,ix1,ix2;
var d = document;
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var pi1 = 180/3.14;
var pi2 = 3.14/180;
var y = [];
var x = [];
var strs = [];
var gro = [];
var dim = [];
var dfc = [];
var vel = [];
var dir = [];
var acc = [];
var dtor = [];
var xy2 = [];
var idx = document.getElementsByTagName('div').length;
var zip = [];
var pix = "px";

for (i = 0; i < numberOfGhosts; i++){
document.write('<div id="ghosts'+(idx+i)+'"'
+' style="position:absolute;top:0px;left:0px;'
+'width:40px;height:40px;background-color:transparent;'
+'font-size:0px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiELw0a78t3yNhPEnPeeF5FqbjJIYI3e1YTxgNJCSLtRXHm-90DrNZn7cjJ8Mh7dnROSn7s2wlJAbuSSEi1Xu-5Fmj_OVY3xqCPGKXpMRD3j2GUcjWbGwQvvHeQGMhohJv_kfCW8lCRy9w/s1600/ghost.gif" class="ghost" width="70"/></div>');
}

if (domWw) ref = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
ref = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
ref = d.body;
}
}

function win(){
var mozBar = ((domWw) &&
ref.innerWidth != d.documentElement.offsetWidth)?20:0;
h = (domWw)?ref.innerHeight:ref.clientHeight;
w = (domWw)?ref.innerWidth - mozBar:ref.clientWidth;
cy = Math.floor(h/2);
cx = Math.floor(w/2);

oy1 = (75 * h / 100);
oy2 = (oy1 / 2);
ox1 = (75 * w / 100);
ox2 = (ox1 / 2);

iy1 = (18 * h / 100);
iy2 = (iy1 / 2);
ix1 = (18 * w / 100);
ix2 = (ix1 / 2);

field = (h > w)?h:w;
}

function rst(s){
var cyx;
sy = (domSy)?ref.pageYOffset:ref.scrollTop;
sx = (domSy)?ref.pageXOffset:ref.scrollLeft;
acc[s] = 0;
dim[s] = 1;
xy2[s] = 0;
cyx = Math.round(Math.random() * 2);
if (cyx == 0){
y[s] = (cy - iy2) + Math.floor(Math.random() * iy1);
x[s] = (cx - ix2) + Math.floor(Math.random() * ix1);
}
else{
y[s] = (cy - oy2) + Math.floor(Math.random() * oy1);
x[s] = (cx - ox2) + Math.floor(Math.random() * ox1);
}
dy = y[s] - cy;
dx = x[s] - cx;
dir[s] = Math.atan2(dy,dx) * pi1;
dfc[s] = Math.sqrt(dy*dy + dx*dx) ;
zip[s] = 10 * (dfc[s] + inTheFace) / 100;
vel[s] = ghostSpeed * dfc[s] / 100;
dtor[s] = (field - dfc[s]);
if (dtor[s] < 1) dtor[s] = 1;
gro[s] = 0.003 * dtor[s] / 100;
}

function animate(){
for (i = 0; i < numberOfGhosts; i++){
y[i] += vel[i] * Math.sin(dir[i] * pi2);
x[i] += vel[i] * Math.cos(dir[i] * pi2);
acc[i] = (vel[i] / (dfc[i] + (vel[i] * zip[i])) * vel[i]);
vel[i] += (acc[i]);
dim[i] += gro[i] + acc[i] / zip[i];
xy2[i] = dim[i] / 2;
if (y[i] < 0 + xy2[i] ||
x[i] < 0 + xy2[i] ||
y[i] > h - xy2[i] ||
x[i] > w - xy2[i]){
rst(i);
}
strs[i].top = (y[i] - xy2[i]) + sy + pix;
strs[i].left = (x[i] - xy2[i]) + sx + pix;
strs[i].width = (strs[i].height = (Math.round(dim[i])) + pix);
}
setTimeout(animate,setTimeOutSpeed);
}

function init(){
win();
for (i = 0; i < numberOfGhosts; i++){
strs[i] = document.getElementById("ghosts"+(idx+i)).style;
rst(i);
}
animate();
}

if (window.addEventListener){
window.addEventListener("resize",win,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",win);
window.attachEvent("onload",init);
}
})();
}//End.

</script>

<style>
.ghost {
filter:alpha(opacity=30);
-moz-opacity: 0.3;
opacity: 0.3;
-khtml-opacity: 0.3;
}
html {
overflow-x:hidden;
}
</style>

Con eso ya tendrán los fantasmas merodeando el blog. Se pueden modificar algunos valores de velocidad al gusto, esos se modifican en las anotaciones que he puesto en color verde.

NOTA: En las plantillas del diseñador de Blogger no funciona muy bien. Raro ¿no?

Paginación en blogger

Aviso!!! Este código lee solo hasta las ultimas 500 entradas.

Nuevo código mejorado: Numerar páginas en Blogger.


Ir a Diseño, Edición de HTML y justo arriba de ]]></b:skin>

Poner el siguiente código CSS:

/* Contenedor */

.showpageArea a {
text-decoration:underline;
background: #ffffff;
padding: 10px 10px 10px 10px;
font-size:11px;
font-weight:bold;
}

/* Rectangulos */

.showpageNum a {
text-decoration:none;
border: 1px solid #9aafe5;
margin:0 1px;
padding:3px 4px;
}

/* Rectangulos al pasar el ratón */

.showpageNum a:hover {
border: 1px solid #9aafe5;
background-color:#33CCFF;
color:#fff
}

/* Página activa */

.showpagePoint {
color:#fff;
text-decoration:none;
border: 1px solid #2e6ab1;
background: #2e6ab1;
margin:0 1px;
padding:3px 4px;
font-size:11px;
font-weight:bold;
}

/* Texto total de páginas */

.showpageOf {
text-decoration:none;
padding:3px 4px;
margin: 0 1px 0 0;
}

/* Anterior y Siguientes */

.showpage a {
text-decoration:none;
border: 1px solid #9aafe5;
padding:3px 4px;
}

/* Anterior y Siguientes al pasar el ratón */

.showpage a:hover {
text-decoration:none;
color: #33CCFF;
}

Les puse de que se trata cada uno para que entiendan y personalizen, cambiando los colores.


Despues van al final del blog y justo arriba de </body>

Poner el siguiente código:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=3;
var upPageWord =&#39;&#171; Anterior&#39;;
var downPageWord =&#39;Siguiente &#187;&#39;;
</script>
<script type='text/javascript'>
//<![CDATA[
function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea" style="padding:10px 10px 10px 10px;"><span style="COLOR: #2e6ab1;" class="showpageOf"> Total: ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}
//]]>
</script></b:if></b:if>

Adaptamos los siguientes datos:

var pageCount=5; : Números de entradas mostradas por página. ( IMPORTANTE!! tiene que ser la misma configurada en el blog la que muestra la cantidad de entradas por página )

var displayPageNum=3; : Números de cuadraditos que se mostrán por delante y detrás de la página activa.


var upPageWord ="'« Anterior'; : Texto del botón de las páginas anteriores.
var downPageWord ='Siguiente »'; : Texto del botón de las páginas siguientes.

martes, 19 de octubre de 2010

Crear footer fijo para agregar cualquier contenido





Ya había leído sobre los hacks para hacer funcionar elementos fijos en IE6  (IE6 no reconoce ningún elemento en posición fija a excepción del background en el body), pero no me había dado el tiempo para probarlo. Decidí probar este, que recomienda CSS portal para posicionar en posición fija (fixed) el footer (pie dela página),  pensando en que pudiera ser útil para agregar cualquier contenido como íconos sociales, un buscador personalizado, o el de google, enlaces, o cualquier otro contenido relevante y que valga la pena tenerlo en esa posición.



Quede satisfecha, pues la verdad es que si funciona muy bien, aunque no tengo Internet explorer 6, lo probé con un emulador de IE6 (que imita el comportamiento de IE6), solo hay que hacer unos pequeños cambios estructurales en la plantilla, para que se vea realmente como una barra completa al 100% del ancho del monitor, pensando por supuesto, que busquemos ese resultado.



Basicamente lo que vamos a crear, es una especie de Barra del tipo Navbar de blogger o como algunas que circulan por ahí que funcionan como un widget, donde colocaremos íconos sociales y un buscador personalizado.





D E M O S T R A C I O N



Ventajas:


  • Una vez creada la barra (footer fijo), podrás colocar el contenido que tu quieras, agregando los elementos desde el diseño de tu plantilla, tal y como lo haces con las etiquetas, archivo, etc.



  •  Puedes colocar cualquier tipo de fondo para tu barra, agregando una imagen como por ejemplo: madera, papel, metal, o cualquier otra que combine con el diseño de tu plantilla



  • Puedes personalizar los íconos sociales, hay muuchos disponibles por la red, y que pueden ser usados grátis



  • Puedes editar el contenido la barra (footer fijo) sin necesidad de ingresar al código de tu plantilla, lo que en definitiva es más práctico, fácil y rápido


Sin más rollos, veamos como lograrlo:



Ah! lo olvidaba, antes de empezar, necesitas guardar una copia de seguridad de la plantilla que usas, haciendo click en descargar plantilla, estando en el código HTML de tu plantilla.



Paso 1. Vé a Diseño► Edición de HTML, pulsa las teclas CTRL F y busca #footer-wrapper, asegúrate de que no tenga ninguna imagen que forme parte de la estructura del diseño, también revisa la parte del #footer , buscando si hay imágenes.



Si no hay imágenes, pasa al paso 2.



Si hay imágenes en tu plantilla, cambia #footer-Wrapper por #lower-wrapper.



Luego busca (pulsando  CTRL F) <div id='footer-wrapper'> y cambialo por <div id='lower-wrapper'> depués de ese código, asegurate de que no haya esto:

<b:section class='footer' id='footer'>, si lo hay, pero no lo necesitas, por que no agregas en esa parte ningún widget, borralo, eliminando también el cierre que es </b:section>, si lo usas, cámbialo por este: <b:section class='lower-wrapper' id='lower-wrapper'>



Pon vista previa revisando que todo luzca normal, si es así, Guarda los cambios.





Paso 2. Si no tienes imágenes en la plantilla, sustituye el código (completo) de las sección del footer, por el siguiente código:


/* Footer

----------------------------------------------- */

#footer-wrapper{

width:100%;

height:45px;

}

#footer {

clear:both;

margin:0 auto;

padding:0;

letter-spacing:.1em;

text-align: left;

position:fixed;

left:0;

bottom:0;

height:45px;

width:100%;

background:#000;

border-top:1px solid #191616;

-moz-box-shadow: 1px 2px 11px #000;    

-webkit-box-shadow: 1px 2px 11px #000;

}

#footer a{

color:#221e1e;

text-shadow: 1px 0px 1px #141400;

}

#footer a:hover{

color:#636363;

text-shadow: 1px 0px 1px #280404;

}

* html #footer {

position:absolute;

top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');

}

.redes{

width:200px;

float:left;

margin-top:6px;

padding-left:280px;

height:40px;

}

a.rss, a.twitter, a.facebook {

opacity:0.4;

filter:alpha(opacity=40);

width:35px;

height:34px;

display:inline-block;

margin-left: 2px;

}



a.rss:hover, a.facebook:hover, a.twitter:hover { opacity:1;

filter:alpha(opacity=100);

}

#contenedor-buscador{

float:right;

width:220px;

padding:4px 240px 0px 0px;

height:40px;

}

.searchbox{

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9lY2CcuuKwBoortXtPDx3APitKXtm2lqlcZeFwgWrWfrK01v0UtMzrC43iqjB4KTPE0IA6sF_yDCwrdX4w-hO8UK8R_m0cLVELVhyphenhyphenBh6x-K-7nGOoSXIHj6oL6pgZCQ10TxFN1GhcBTU/s1600/buscador.png) no-repeat;

border:none;

color:#333;

font-family:"arial", serif;

font-size:17px;

font-style:italic;

padding:7px;

width:190px;

height:20px;

}



En la mayoría de las plantillas aparece un comentario, que te dice que código sigue a continuación, y para el footer, aparece algo como esto:



/* Footer

----------------------------------------------- */



Con el código que vas a sustituir, se declaran los estilos de el footer-wrapper, el footer, los íconos sociales, y el buscador.



Hasta ahí, si checas en vista previa y si usas un navegador que no sea IE6, ya verás una barra negra al fondo que abarcara todo el espacio de la pantalla de tu monitor .



Si tenías imágenes y ya realizaste los cambios de foter-wrapper a lower-wrapper, también agrega todo ese código, teniendo cuidado de no repetir estilos para el #footer, si los tienes escritos en tu plantilla, cambialos por #lower-wrapper, antes de pegar el código anterior.



Paso 3. Ahora necesitamos mover la sección del footer-wrapper hacia abajo, con el fin de sacarla de la envoltura del outer-wrapper, con el fin de que se vea correctamente en IE6, si no, dependiendo de la estructura del diseño, la barra se verá hacia un lado (no ocupara el 100% del espacio del monitor).



Para lograrlo, si no tenias imágenes, estando en el código de tu plantilla, localiza:



<div id='footer-wrapper'>

  <b:section class='footer' id='footer'>

   </b:section>


    </div>



Nota:En la plantilla Mínima siempre existe la sección para colocar widgets, resaltada de rojo, si no la tienes, agrégala, tiene que quedar igual que el código anterior.



Luego, coloca ese código antes de la etiqueta </body>.







Paso 4. Checa en vista previa, la barra se verá igual, solo el cambió ocurrirá en IE6, después guarda los cambios.



Perfecto!, ahora, ya tienes, una sección disponible en el diseño de tu plantilla, para agregar contenido y luce así:







Paso 5. Ahora agregarás el contenido (íconos sociales, buscador), en la sección de el footer fijo que hemos creado, eligiendo la opción de HTML o javascript, para ello, pegarás este código:




<div id="contenedor-buscador"><form action='URL_DE_TU_BLOG/search'  method='get'>

 <input type="text" class="searchbox" name="q" value="Buscar" onfocus="if (this.value == &quot;Buscar&quot;) this.value = &quot;&quot;;" value="Buscar" name="as_q" onblur="if (this.value == &quot;&quot;) this.value = &quot;Buscar&quot;;" />

</form></div>

<div class="redes">

<a class="rss" href="http://feeds.feedburner.com/tu-feedburner-ID" target="_blank"><img  alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn_gEXvwOXwfOUKCpE4KQBS8N1g-i6faAA0jkF2Ep2WYFCtlCKFHfcy3nY5ERxI69ukskNwwuBRqKuFe55rXKS4rQ2SrMOvY5grMWEYZFcu0LEdx7fo3yErEAZ2CWTJUCl2bNzhXrLD6w/s1600/rss-negro.png" /></a>

<a class="twitter" href="http://www.twitter.com/tu ID de Usuario/" target="_blank"><img alt=""   src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_YDcMF9G141pzwV31A4HftuOh7w-Oamt_jthC6ET8-OWaWsTOPel8Qtj3KmxSe48lCBfJkvQmZeu1b2cABYq2dUyNp7s0fuEti6UKpcG3yx7f3mhW0jYRdX4ZLkJYnt6sclE3UnW5rdg/s1600/twitter-negro.png" /></a>

<a class="facebook" href="http://www.facebook.com/share.php?" target="_blank"><img alt=""   src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJWaki6oLakbCK6p5qFo_kRQUwD5H8le8Wuh03R-IYRQkYSlOTy2ZP3IcVfc3pl6BW9dVXEJ9ZJSx9kSLaPIaV9fuUiuv_BKotJFXmMicu2xaraeZElvU2KDW2Z9jLZyIrwFfe6Cb3W-U/s1600/facebook-negro.png" /></a>

</div>



Deberás sustituir todo lo de naranja (los enlaces) por tus enlaces propios respectivamente. Ahí el código, dice que debes poner.





Muy bien, ya tienes una barra fija con íconos sociales y un buscador y que además funciona en IE6.



Para mostrar que se puede hacer sin ningún problema en plantillas de prediseñadas, lo hice usando la plantilla de Cuentos de Noche tres columnas, ahí puedes verlo funcionar, además agregué un enlace, e hice algunos cambios en los estilos.



Si quieres agregar enlaces deberás usar el siguiente código, y colocarlo siempre al final de el código anterior:



<span style="float:left; padding:10px 0px 0px 0px;">

<a href="#">texto del enlace</a></span>



Deberás cambiar el gatito # por la dirección del enlace, y texto de el enlace por el texto que quieres que se muestre.



Nota: importante, si vas a agreagar cualquier otro contenido, deberás tomar en cuenta la altura de el footer, ya que si el contenido es mayor que altura de este, el contenido no se verá completo en todos los navegadores, por lo tanto, deberás cambiar el valor de la altura según sea necesario. La altura que hemos usado es de 45 pixeles. (height:45px;).


lunes, 18 de octubre de 2010

Cenefas,bordes y fondos con aire retro

The Inspiration Gallery es una de esas páginas que se guardan y por mucho tiempo que pase la seguimos conservando. Quizás muchos no vean nada de especial pero a mí me encanta lo retro y esta página tiene mucho de eso.
En  "borders" y "wallpaper" podemos ver diseños que nos recuerdan mucho las cenefas de hace años, aquel papel pintado que nuestras abuelas tenían en el salón.
La de usos que le daban a una misma tela que de cortinas pasaba a ser un cubrecamas y más tarde cojines para el sofá. Eso era reciclar y lo demás es tontería.



Por cierto, para decorar un footer quedaría de lujo.

El mensaje del formulario de comentarios

En nuestro formulario de comentarios podemos colocar un mensaje ya sea para agradecer que nos dejen un comentario o para dar algún tipo de información (por ejemplo, que para comentar en nuestro blog se debe tener el perfil habilitado).

Click en la imagen para ampliar


Para escribir este mensaje accedemos a Configuración - Comentarios y casi en medio de la página veremos un recuadro llamado Mensaje del formulario de comentarios. Ahí escribimos nuestro mensaje y damos click a guardar.



Si deseas personalizar el fomulario de comentarios mira esta entrada : Formulario de comentarios con diseño.

Cursores de Halloween

Esta es una colección de cursores de Halloween para el blog con los cuales podemos empezar a decorar el blog para esta fecha siniestra y divertida.
Para poner cualquiera de estos cursores en tu blog entra en Diseño | Edición de HTML y antes de </body> pega el código del cursor que más te guste.


<style type='text/css'>body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-1/hol50.cur), progress;}</style>


<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-3/hol219.cur), progress;}</style>


<style type='text/css'>body, a, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-11/gam1062.cur), progress;}</style>


<style type='text/css'>body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-4/hol335.cur), progress;}</style>


<style type='text/css'>body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-4/hol337.cur), progress;}</style>


<style type='text/css'>body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-3/hol222.cur), progress;}</style>


<style type='text/css'>body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-3/hol217.cur), progress;}</style>


<style type='text/css'>body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-3/hol221.cur), progress;}</style>


<style type='text/css'>body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-3/hol210.cur), progress;}</style>