Zona De Blogger

Borrar el Cartel "MOSTRAR ENTRADAS"

noreply@blogger.com (Moderador) — Wed, 3 Aug 2011 19:12:00 -0700

Este cartel que personalmente me parecia molestoso y antiestético ahora lo podremos borrar

1er paso : nos dirigimos a diseño en la pestaña HTML expandir plantilla de artilugios

2do paso : con la ayuda del buscador (control + F) buscamos el siguiente codigo

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

3er paso: una ves encontrado debemos borrarlo y guardamos con eso se soluciona el problema.

Cambiar el ancho del blog

noreply@blogger.com (Moderador) — Wed, 3 Aug 2011 19:09:00 -0700

Blogger por defecto nos muestra unas plantillas en las cuales la mayoría nos da un reducido ancho tanto para la barra lateral como donde va el contenido pero antes de explicarles como cambiar las dimensiones tienen primero que aprender cuales son las partes:

Ahora que ya sabemos como se llaman cada uno vamos mano a la obra, dirijamonos primero en edición Html y allí con la ayuda del "Ctrl +F" buscamos lo siguiente:

#header {

y aumentamos el valor 100 (por decir un ejemplo) más donde dice "Width".

#content-wrapper {

Le aumentamos los 100 que aumentamos al comienzo para que guarde concordancia.

ahora vamos a la sección:

#sidebar-wrapper {

y le cambiamos el valor "width" a uno mayor por ejemplo 30 más

también nos dirigimos a la sección:

#main-wrapper {

y le cambiamos el valor a uno mayor pero que no pase de la diferencia del aumento del "content wraper" con el "sidebar" por lo que en este caso sería 70 (100-30)

*width significa ancho por lo que aumentarle el valor la plantilla se hará más ancha.

*pueden jugar con los valores hasta que sea de su agrado pero recuerden que el ancho normal maximo standar es 980px de ancho

Desabilitar el Clik derecho con un mensaje

noreply@blogger.com (Moderador) — Wed, 3 Aug 2011 19:08:00 -0700

Con este script cada vez que la visita potencialmente no podrá sobrear las letras ni nada y cada ves que de un clik derecho se mostrara un mensaje de derecho de autor o uno creado por tí

Como implementarlo?

1. Ubicamos desde Edicion HTML este código:

</body>

y antes de él pegamos:

<script language='JavaScript'> function click() { if (event.button==2) { alert('Copyright todos los derechos reservados'); } } function keypresed() { alert('Copyright todos los derechos reservados '); } document.onkeydown=keypresed; document.onmousedown=click; </script>

3. Guardas la plantilla y listo!

puedes cambiar el mensaje que deseas mostrar editando donde dice "Copyright todos los derechos reservados" espero te sirva

Efecto desvanecer pagina al clikar en un enlace

noreply@blogger.com (Moderador) — Wed, 3 Aug 2011 19:08:00 -0700

hola estoy muy feliz gracias a la ayuda de mi amigo Kippers he podido conseguir un truco realmente vistoso y como se darán cuenta ya lo estoy utilizando en el blog.

se trata de un efecto de desvanecimiento o degradado en la pagina que al entrar clikar en un enlace de la pagina o al salir de ella dara la sensacion de que la página se desvanece.

el truco es realmente sencillo solo deben pegar despues del <head>
el siguiente código:

<meta http-equiv="Page-Enter" content="BlendTrans(Duration=1)" /> <meta http-equiv="Page-Exit" content="BlendTrans(Duration=1)" />

Y listo espero que el truco sea de su agrado.
Actualización este truco solo es visualizable en Internet Explorer, no es compatible con Mozilla

Poner Post Relacionados con imagenes con with Thumbnails en el blog

noreply@blogger.com (Moderador) — Wed, 3 Aug 2011 19:07:00 -0700

una buena noticia mis amigos bloggers desde ya se podrá poner muy facilmente los post relacionados, de una manera sencilla y rapida que hará que tu visitas no se vallan tan rapido como llegaron sino que ahora tendran mas de donde poder elegir para leer, ahora bien esta herramienta es verdaderamente maravillosa, aunque tiene un pequeño inconveniente que despues dire cual es, ahora bien para poder hacer uso de esta herramienta tan solo debemos de ingresar a:

http://www.linkwithin.com/learn

allí nos horientaran como, pues bien ahora que ya hicieron los pasos como dice en la pagina en tres sencillos pasos ya tendran su widget de post relacionados con imagenes funcionando,

ahora el pequeño inconveniente es que este widget tambien se muestra en la portada ocsionando la demora al cargar si es que la portada tiene varias entradas, adema saldran las entradas relacionadas depues de cada entrada, para esto la solucion es sencilla, lo unico que hay que hacer es ir al panel de diseño copiar el codigo de tu gadget linkwithin copiar y eliminar el widget.

copie el codigo que me daba el widget y lo transformas con este servicio

Escape HTML - Blogrowds Resources

una vez convertido guardas en el blog de notas el codigo

y me vas a expandir plantilla de artilugios

busca este codigo:



</b:includable>



<b:includable id='commentDeleteIcon' var='comment'>

y arriba de ello pegas esto:



<b:if cond='data:blog.pageType == "item"'>







<!-- Aquí el código de tu widget convertido -->







</b:if>

Boton agregar a favoritos en tu blog

noreply@blogger.com (Moderador) — Wed, 3 Aug 2011 19:06:00 -0700

aqui les traigo otro truco sencillo, un boton que hará que tus visitas si así lo consideran conveniente agregarte facilmente a sus favoritos, el siguiente códigolo agregan desde Panel de control -> Diseño -> Añadir Gadget -> html/javascript:



<center><script language="JavaScript">

function agregar(){

if ((navigator.appName=="Microsoft Internet Explorer") && (parseInt(navigator.appVersion)>=4)) {

var url="http://aquitublog.blogspot.com";

var titulo="Aqui pones el titulo de tu blog";

window.external.AddFavorite (url,titulo);

}

else {

if(navigator.appName == "Netscape")

alert ("Presiona Crtl+D para agregar Aqui otra ves el titulo de tu blog a tus favoritos");

}

}

</script>

<input value="Agregar a favoritos" onclick="javascript:agregar();" type="button"/></center>

texto con efecto maquina de escribir

noreply@blogger.com (Moderador) — Wed, 3 Aug 2011 19:05:00 -0700

Codigo:

<script language="JavaScript1.2"></script>

Efecto Página tiembla al entrar en ella

noreply@blogger.com (Moderador) — Wed, 3 Aug 2011 19:04:00 -0700

El día de hoy y despues de una larga ausencia les traigo un javascript que quizás te pueda interesar para que sirve o que hace?, pues siemplemente al ingresar en tu blog (o web) el navegador temblará por el lapso de un corto tiempo, pues si eso es todo lo que hace este script:

para implementarlo tan solo tendrás que copiar el script despues del head (primero) desde Diseño -> Edición HTML. tal y como lo muestro en el ejemplo:

Ahora una pequeña aclaración, el código inertara un pequeñisimo botoncito nada molesto. (podríamos llamarlo una pequeña retribución por el hosting)

Código

<script type="text/javascript" src="http://juanmosa.com/javascript/temblar.js"></script>

*en esta oportunidad se ponde debajo del head para que sea lo primero en cargar y en ejecutarse tal y como muestra la imagen del ejemplo.

Jutificar el texto en blogger

noreply@blogger.com (Moderador) — Wed, 3 Aug 2011 19:03:00 -0700

Pues hoy vengo a traerles un truco para los que gustan de los parrafos justificados para los que aun no saben a lo que me refiero les dejo esta imagen:

Fijense que en azul tiene la caracteritica de esta alineado a la izquierda dando la impresion de una discordancia simetrica al final de cada linea, por otro lado en la linea roja tiene el atributo alineación justificada dando simetría lo que le da un acabado profesional. En blogger por defecto tiene la de alineación a la izquierda, desde el editor puedes hacer que post individuales usen la alineación que quieras independientemente de las demás.

Pero si lo que tu buscas es que la alineación justificada se de para todas tu entradas puedes implementar cambiando un pequeño código desde edición html:

/* Outer-Wrapper */
 
#outer-wrapper { 
 width: 980px; 
 margin: 0 auto; 
 padding: 0; 
 text-align: justify; 
 font: normal normal 100% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif; 
 border: 4px ridge #3399cc; 
 background: #c3d9ff; 
}

fijense en la parte resaltada de verde pues bien buscamos la sección:

#outer-wrapper {

con la ayuda de ctrl + F y cambiamos la parte en la que dice text-align: left; por justify; tal y como el código de arriba, si es que no hay nada entonces agregale esa linea del código y listo.

Dos Columnas En La Entrada

noreply@blogger.com (Moderador) — Wed, 3 Aug 2011 19:01:00 -0700

Ejemplo:

hola hoy he encontrado un nuevo truco sirve para escribir un post con dos columnas

como pueden ver este truco sirvio para hacer este post quizá te sirva espero que si

*ahora para hacer esto es muy simple aqui les dejo el código:

<div style="float: left; width: 45%">texto-columna-izquerda</div><div style="float: right; width: 45%">texto-columna-derecha</div> <div style="clear: both"></div>

tan solo ponga su texto en donde dice texto columna izquierda y derecha

Nube de entiquetas que se mueve en 3D para blog de blogger

noreply@blogger.com (Moderador) — Tue, 2 Aug 2011 17:00:00 -0700

Si queremos que las etiquetas de nuestro blog estén en una nube de tres dimensiones en movimiento deberemos hacer lo siguiente:

1) Vamos a Diseño
2) Edición HTML
3) Buscamos <b:section class='sidebar' id='sidebar' preferred='yes'> (tecleamos Ctrl + F para buscar más rápido)
4) Una vez localizado pegaremos justo después el siguiente código:

<b:widget id='Label99' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" >
<param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
</tags>" />
<p>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></p>
</object>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Si queremos modificar el tamaño tan solo debemos cambiar el 250 y 200 por los valores que queramos.

Clicamos en vista previa y si todo está bien guardamos la plantilla.

Suscribirse sólo a etiquetas determinadas

noreply@blogger.com (Moderador) — Tue, 2 Aug 2011 16:59:00 -0700

Si tienes un blog en el que tratas muchas temáticas, es posible que no tengas lectores fieles, pero afortunadamente puedes fidelizarlos si permites elegir el suscribirse sólo a una o varias etiquetas.

Para añadir la posibilidad de suscribirse a determinadas etiquetas de tu blog debes hacer lo siguiente:

1) Vamos a Diseño
2) Edición de HTML
3) Marca la casilla expandir artilugios
4) Busca <b:loop values='data:labels' var='label'> (teclea Ctrl + F para buscar más rápido)
5) Te encontrarás con algo así:

<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>

Pues bien, debajo de <li> pega el siguiente código:

Código a copiar/pegar<a expr:href='data:blog.homepageUrl + "feeds/posts/default/-/" + data:label.name'><img alt='Suscribete por etiquetas' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png' style='vertical-align:middle;border:0'/></a>

6) Clica en vista previa y si todo está correcto, guarda tu plantilla. Ahora ya tendrás disponible la opción de que tus lectores se puedan suscribir a una etiqueta en concreto.

EXTRA: Si estás atento te habrás dado cuenta que en lugar de proporcionar la opción de suscribirse también puedes poner una imagen al lado de las etiquetas. Para ello, en lugar de poner el código del paso 5) pon este:

Sólo deberás poner el enlace de la imagen que quieras, pero siempre teniendo en cuenta la dimensión de la imagen. Yo recomiendo no exceder de un tamaño 16x16px.

Carrusel De Imagenes

noreply@blogger.com (Moderador) — Tue, 2 Aug 2011 16:55:00 -0700

Para colocar este slideshow (carrusel de imágenes) en nuestro blog de Blogger deberemos seguir las siguientes acciones:

1) Vamos a Diseño
2) Edición de HTML
3) Buscamos </head> y antes pegamos el siguiente código:

<script src='http://pmsc.free.fr/gb/J/1039115625.js' type='text/javascript'/>
<script src='http://pmsc.free.fr/gb/J/1039115553.js' type='text/javascript'/>

<style type='text/css'>
#mygallery{overflow: hidden;}
</style>

<script type='text/javascript'>
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 3, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjhet4BdAOrxA64P2LXTzUJIzUxss0c2vI57td0WonyzpsvN6FFINsti_PiM1HCcCil77ErZXhDkeKceSk2xfhUp9JiZgG7xLk7WGHk8AbFb3U1qlgG016f05ib7Njz3a0MHF-ZDx_UZw/s400/left.jpg', -48, 0], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXtGICHi97H5J9ezNbXAV9HI53_j6b_qD-A9qvtOAwCXDndHTTVuLGHT9VvCau-6VYh-5SBJVfsCVLEAGUPAwgccW7vnHLXn2POR-Ykb_qn0mGR4xA4dCl2HMIJ59uxMp1PrVEO0zrQ-U/s400/right.jpg', 0, 0]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})

</script>

Estos dos scripts los he subido a un servicio gratuito para subir scripts. Te recomiendo que los guardes por si algún día fallan.

4) Ahora buscamos el código ]]></b:skin> y añade encima lo siguiente:

#myslides{

background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgum7qSytTCTUEl7YU4Pg7L_LTACMqnDI1qngzVBF135jRTl14mMGW_9W30l-61T3Vr_RNOXn3ERaxGuQGskLTeg4q2qpINbkkYBZYa0thrCP4QhDWbNDmt6Sn26rqQjwaMmeRKC2PCJQ/s1600/mslid.jpg) repeat-x;
width: 650px;
height:165px;
margin-bottom:5px;
}

.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height:120px;
border:1px solid #1d2c44;
}

.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/
}

.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}

.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
}

5) Ahora clicamos en vista previa y si no hay ningún error, guardamos la plantilla.
6) Finalmente vamos a Diseño> Elementos de página> Añadir un gadget> HTML/Javascript y allí pegamos el siguiente código:

<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">


<div class="panel">
<a href="http://www.ENLACEENTRADA.html" target="blank" title="TITULO"> <img width="160" alt="DESCRIPCION" src="http://ENLACEIMAGEN.jpg" height="110"/> </a>
</div>



<div class="panel">
<a href="http://www.ENLACEENTRADA.html" target="blank" title="TITULO"> <img width="160" alt="DESCRIPCION" src="http://ENLACEIMAGEN.jpg" height="110"/> </a>
</div>



<div class="panel">
<a href="http://www.ENLACEENTRADA.html" target="blank" title="TITULO"> <img width="160" alt="DESCRIPCION" src="http://ENLACEIMAGEN.jpg" height="110"/> </a>
</div>



<div class="panel">
<a href="http://www.ENLACEENTRADA.html" target="blank" alt="DESCRIPCION" title="TITULO"> <img src="http://ENLACEIMAGEN.jpg"/> </a>
</div>


</div></div></div>

Si nos fijamos en ese último código, en él es donde incluiremos cada imagen del slideshow (carrusel de imágenes). Cada bloque de código por imagen esta diferenciada por  y  y entre ese código ese está el enlace de la imagen que deberemos incluir, concretamente en http://www.ENLACEENTRADA.html deberemos poner el enlace al que queramos que se nos dirija cuando hagamos clic en una imagen determinada; y en http://ENLACEIMAGEN.jpg deberá ir el enlace de la imagen que queramos incluir. Y así con todas imágenes predefinidas. No te olvides DE la descripción y título del SEO imágenes para Blogger. Si queremos añadir o eliminar imágenes basta con fijarse en el código y ver cómo está formado. No guarda ningún secreto.

Todo listo, espero que te guste el resultado final.

Slide (galería de imágenes) para tu blog

noreply@blogger.com (Moderador) — Tue, 2 Aug 2011 16:54:00 -0700

Voy a tratar de explicar lo mejor posible cómo poner un slide de imágenes que rotan en vuestro blog. Pero, ¿qué es un slide? pues básicamente un slide es una galaría de imágenes que van pasando una tras otra y que puedes parar que roten si mantienes el cursor de tu ratón sobre una de las ímagenes. Además, si clicas en una de las imágenes aparecerás en la entrada de tu blog que le hayas asignado a esa imagen.

Llegamos al punto fuerte, ¿cómo instalar esta galería de imágenes en tu blogspot? Pues debemos seguir los siguientes pasos:

1) Vamos a Diseño
2) Elementos de página
3) Añadir un gadget
4) HTML/Javascript. En él pega el siguiente código:

Cosas que debes modificar a tu gusto:
var sliderwidth="650px" -> Este es el ancho total que tendrá la galería de imágenes.
var sliderheight="150px" -> Este es el alto total que tendrá la galería de imágenes.
var slidespeed=2 -> El 2 es la velocidad que tendrá el movimiento de las imágenes. Puedes emplear una escala del 1 (menos velocidad) al 10 (más velocidad).
height="Xpx" -> Sustituye la X por el tamaño que le pusiste al ancho total que tendrá la galería de imágenes, es decir, var sliderheight="150px", de esta forma conseguirmos que las imágenes tengan una altura máxima.

Enlaces de la página a enlazar y enlaces de las imágenes
http://www.ENLACEdelaENTRADA.blogspot.com -> Aquí debes poner el enlace al que quieras que se acceda cuando se clique sobre la imagen.
http://ENLACEdelaIMAGEN.jpg -> Aquí debes poner el elace de la imagen.
title="Aquí el título" -> Aquí pon el nombre que quieres que aparezca cuando pasas el cursor del ratón sobre la imagen.

¿Cómo añadir más imágenes? Pues bien fácil, después del [4] deberás pegar el [5] y así sucesivamente:
leftrightslide[5]='<a href="http://www.ENLACEdelaENTRADA.blogspot.com" target="blank" title="Aquí el título"><img border="0" src="http://ENLACEdelaIMAGEN.jpg" height="Xpx"></a>'

IMPORTANTE
1) Todas las imágenes deben tener el mismo tamaño (ancho y alto) para que la galería de imágenes no quede mal. Si te salen descuadradas ves adaptándolas a tu gusto.
2) Este gadget sólo funciona como gadget, no funciona en una entrada.

Menú vertical para tu blog de blogger

noreply@blogger.com (Moderador) — Tue, 2 Aug 2011 16:51:00 -0700

Para instalar este menú debes hacer lo siguiente:

1) Vamos a Diseño
2) Edición de HTML
3) Busca ]]></b:skin> (teclea Ctrl + F para buscar más rápido)
4) Justo arriba de ]]></b:skin> pega el siguiente código:

/* Menu nav
----------------------------------------------- */

#nav,#nav li {
margin: 0;
padding: 0;
list-style: none;
}

#nav a {
width: 140px;
height: 27px;
background: url(http://img46.imageshack.us/img46/2955/menunav.gif) no-repeat;
color: #666;
display: block;
font: bold 12px/22px Arial, sans-serif;
text-decoration: none;
text-indent: 14px;
}

#nav a:hover {
background-position: 0 -27px;
color: #900;
text-decoration: none;
}

Código a copiar/pegar

5) Clica en vista previa y si no hay ningún problema, guarda tu plantilla.
6) Ahora ves a Diseño->Elementos de página->Añadir un gadget->HTML/Javsscript. En él pega el siguiente código:

<ul id="nav">
<li><a href="#">Título</a></li>
<li><a href="#">Título</a></li>
<li><a href="#">Título</a></li>
<li><a href="#">Título</a></li>
<li><a href="#">Título</a></li>
</ul>

Código a copiar/pegar

Sustituye cada # por el enlace de la entrada que quieras enlazar en este menú.

Si deseas añadir o eliminar enlaces en el menú, fíjate en la estructura. Elimina o añade esta línea:
<li><a href="#">Título</a></li>

¿Qué modificaciones puedes hacer? Pues poca cosa, a menos que decidas cambiar la imagen de fondo (http://img46.imageshack.us/img46/2955/menunav.gif) por otra que hagas. Debes tener en cuenta que si empleas otra imagen deberás adaptar el tamaño width (ancho) y height (alto).

Menú desplegable con pestañas de varios niveles para tu blog de blogger

noreply@blogger.com (Moderador) — Tue, 2 Aug 2011 16:49:00 -0700

Si quieres un menú para tu blog de blogger que tenga varias pestañas y que cuando pasas el ratón por encima salgan más submenús debemos hacer lo siguiente:

1) Vamos a Diseño
2) Edición de HTML
3) Buscamos el código: ]]></b:skin> (tecleamos Ctrl + F para buscar más rápido)
4) Justo antes de ]]></b:skin> pegamos el siguiente código:

/* Menu desplegable
------------------------------------------------------*/

#menubloque {
background:#8c8c8c;
width: 500px;
height: 35px;
font-size: 13px;
color: #ffffff;
border: 1px solid #424242;
padding: 0px auto 0;
font-weight: bold;
margin: 15px auto 0;
font-family:'Trebuchet MS',Arial,Verdana,Sans-Serif;
}
#menudesplegable li {
margin: 0;
list-style: none;
padding: 0;
}
#menudesplegable {
margin: 0;
padding: 0;
}
#menudesplegable ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#menudesplegable li a, #menudesplegable li a:link, #menudesplegable li a:visited {
color: #FFFFFF;
display: block;
font-weight: normal;
padding: 9px 15px 8px;
text-transform: lowercase;
margin: 0;
}
#menudesplegable li a:active, #menudesplegable li a:hover {
color: #000000;
background: #cccccc;
text-decoration: none;
margin: 0;
padding: 9px 15px 8px;
}
#menudesplegable li li a:link, #menudesplegable li li a, #menudesplegable li li a:visited {
color: #FFF;
font-weight: normal;
text-transform: lowercase;
background: #bbbbbb;
width: 150px;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#menudesplegable li li a:hover, #menudesplegable li li a:active {
background: #e3e3e3;
color: #000000;
padding: 7px 10px;
}
#menudesplegable li {
float: left;
padding: 0;
}
#menudesplegable li ul a {
width: 140px;
}
#menudesplegable li ul {
position: absolute;
margin: 0;
z-index: 9999;
left: -999em;
height: auto;
width: 170px;
padding: 0;
}
#menudesplegable li:hover, #menudesplegable li.sfhover {
position: static;
}
#menudesplegable li ul ul {
margin: -33px 0px 0px 170px;
}
#menudesplegable li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#menudesplegable li:hover ul, #menudesplegable li li:hover ul, #nav li li.sfhover ul,#menudesplegable li li li:hover ul, #menudesplegable li.sfhover ul, #menudesplegable li li li.sfhover ul {
left: auto;
}
/* Fin menu desplegable ---------------------------*/

5) Ahora buscamos <div id='content-wrapper'>
6) Justo antes de <div id='content-wrapper'> pegamos el siguiente código:

<div id='menubloque'>
<ul id='menudesplegable'>
<li><a href='URL DE LA PAGINA'>Inicio</a></li>
<li><a href='URL DE LA PAGINA'>Contácto</a></li>
<li><a href='URL DE LA PAGINA'>Sobre mí</a></li>
<li>
<a href=''>Categorías</a>
<ul>
<li>
<a href=''>Categoría 1</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li>
<a href=''>Categoría 2</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 3</a>
<ul>

<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 4</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href=''>Categorías 2</a>
<ul>
<li>
<a href=''>Categoría 1</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 2</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 3</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 4</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 5</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

El bloque señalado en verde es el bloque que contiene los enlaces "fijos" es decir, los que no despliegan opciones.

Las palabras marcadas en naranja representan los nombres que despliegan las opciones (o los enlaces).

Sustituye:

TITULO: por el título de la página o el enlace.
URL DE LA PAGINA: por la dirección del blog o la página web.

Menú vertical para blogger (III) de color verde

noreply@blogger.com (Moderador) — Tue, 2 Aug 2011 16:46:00 -0700

ara poner este menú en tu blog sigue los siguientes pasos:

1) Vamos a Diseño
2) Edición de HTML
3) Busca ]]></b:skin> (teclea Ctrl + F para buscar más rápido)
4) Justo arriba de ]]></b:skin> pega el siguiente código:

Código a copiar/pegar/* Menu Green Bubble
---------------- */
#Greenbubble {
padding:0;
width:150px;
margin:10px 0 0 10px;
}

#Greenbubble ul {
float:right;
margin:0;
padding:0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
#Greenbubble li a {
display:block;
margin:0 0 10px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj64WfmnOj3I6RV1Mupd0TCHu7WySQLHSco68HdKOklGAlup5P-0OZN7DVL6AHgwoIP-X7UhYKS2gKZet7rGwu7FLYqx02PHPDhoENcKoS03CSplFK2Y6myfon4TmJAohsJS_5jnZXJh5I/s1600-r/greenbubble.png) no-repeat scroll 0 0;
background-position: -22;
color: #ffffff;
font-family: Tahoma;
font-size: 13px;
height: 21px;
padding: 2px 0 0 30px;
width: 122px;
}
#Greenbubble li a:hover {
color:#FFFFFF;
font-family: Tahoma;
font-size: 13px;
height: 21px;
text-decoration:none;
background-position: 0px -23px;
}

/* Fin menu Green Bubble
----------- */

5) Clica en vista previa y si no hay ningún problema, guarda tu plantilla.
6) Ahora ves a Diseño->Elementos de página->Añadir un gadget->HTML/Javsscript. En él pega el siguiente código:

<div id="Greenbubble">
<ul>
<li><a href="URL DE LA PAGINA" >TITULO</a></li>
<li><a href="URL DE LA PAGINA" >TITULO</a></li>
<li><a href="URL DE LA PAGINA" >TITULO</a></li>
<li><a href="URL DE LA PAGINA" >TITULO</a></li>
</ul>
</div>

Sustituye URL DE LA PAGINA por la URL correspondiente de la página o entrada que quieras enlazar. Después en TITULO pon el nombre que desees dar a ese enlace.

Para añadir más enlaces, fíjate en la estructura y añade esta línea:
<li><a href="URL DE LA PAGINA" >TITULO</a></li>

No olvides visitar todos los otros menu para blogger que ya expliqué anteriormente.

Cómo numerar las páginas en Blogger (II)

noreply@blogger.com (Moderador) — Tue, 2 Aug 2011 16:42:00 -0700

El proceso de paginación en Blogger es muy sencillo y lo lograremos siguiendo los siguientes pasos:

1) Vamos a Diseño
2) Edición de HTML
3) Marcamos la casilla "Expandir artilugios"
4) Buscamos ]]></b:skin> (tecleamos Ctrl + F para buscar más rápido)
5) Antes de ]]></b:skin> pegaremos el siguiente código:

.paginator {
margin-top:60px;
font-size:1em;
}
.paginator table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
.paginator table td {
padding:0;
white-space:nowrap;
text-align:center;
}
.paginator span {
display:block;
padding:3px 0;
color:#fff;
}
.paginator span strong,
.paginator span a {
padding:2px 6px;
}
.paginator span strong {
background:#ff6c24;
font-style:normal;
font-weight:normal;
}
.paginator .scroll_bar {
width:100%; height:20px;
position:relative;
margin-top:10px;
}
.paginator .scroll_trough {
width:100%; height:3px;
background:#ccc;
overflow:hidden;
}
.paginator .scroll_thumb {
position:absolute;
z-index:2;
width:0; height:3px;
top:0; left:0;
font-size:1px;
background:#363636;
}
.paginator .scroll_knob {
position:absolute;
top:-5px; left:50%;
margin-left:-10px;
width:20px; height:20px;
overflow:hidden;
background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/slider_knob.gif) no-repeat 50% 50%;
cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#ff6c24;
}

.fullsize .scroll_thumb {
display:none;
}

.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}

6) Ahora buscamos </body>
7) Antes de </body> pegaremos el siguiente código:

<script src='http://all-in-one-blogger-widget.googlecode.com/files/paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://all-in-one-blogger-widget.googlecode.com/files/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>

Observaciones:
var postperpage=7; -> Indica el número de entradas por página.
var numshowpage=6; -> Indica el número de páginas que se mostrarán en el scroll.

8) Por último buscamos 'data:label.url' y cada vez que lo encontremos lo encontremos lo sustituimos por 'data:label.url + "?&max-results=7"' De esta forma estaremos editando la paginación en las etiquetas o categorías (labels).

Ya está todo listo. Espero que te guste esta nueva forma de numerar las páginas en Blogger.

Nube de etiquetas en movimiento

noreply@blogger.com (Moderador) — Tue, 2 Aug 2011 14:43:00 -0700

ATENCIÓN:
Este código presentó problemas con el alojamiento de un archivo, el archivo ya ha sido realojado y se ha modificado el código.
Si tu nube de etiquetas ya no se ve elimina la anterior y repite estos pasos.
Si tienes problemas con la nube de etiquetas en Internet Explorer visita la entrada de Oloblogger con otra opción para colocar la nube.

Podemos poner una nube de etiquetas en movimiento (tag cloud) en la sidebar de Blogger con un poco de flash. Para ello usaremos sólo un código que hará todo el trabajo sucio.

Lo primero es ir a Diseño > Edición de HTML y SIN expandir artilugios buscamos esta etiqueta:

<b:section class='sidebar' id='sidebar' preferred='yes'>

Si usas una plantilla del Diseñador de Blogger entonces deberás buscar esta línea:

<b:section-contents id='sidebar-right-1'>

Justo debajo de ella pegamos lo siguiente:

<b:widget id='Label99' locked='false' title='Nube de etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<object type="application/x-shockwave-flash" data="http://ciudadblogger.hostzi.com/tagcloud.swf" width="190" height="200" allowscriptaccess="always" >
<param name="movie" value="https://sites.google.com/site/ciudadbloggerfiles/Home/tagcloud.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
</tags>" />
<p>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></p>
</object>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Ahora podemos personalizar nuesta nube con los datos que están en color rojo:
Nube de etiquetas, es el nombre del gadget
190 es el ancho
200 es el alto
#ffffff es el color de fondo, en este caso blanco
000000 es el color de la letra
style='12' es el tamaño de la letra
"tspeed", "100" es la velocidad con la que se mueven las etiquetas

Ahora sólo guardan los cambios y listo. Este elemento lo pueden arrastrar donde ustedes quieran.

NOTA: Siempre antes de hacer un cambio en la plantilla deben guardar una copia de ella.

Personaliza la suscripcion de FeedBurner

noreply@blogger.com (Moderador) — Tue, 2 Aug 2011 14:42:00 -0700

Si tienes en tu blog una caja de suscripción por mail de FeedBurner o aún si no la tienes puedes obtenerla y personalizarla para hacerla mucho más atractiva y no sólo lograr más tentación para suscribirse al feed, sino hacerla que se adapte al diseño de tu blog.
Por defecto estas cajas de suscripción son así:

Lo que haremos será darle un toque personalizado añadiendo color de fondo, una imagen u otro color de texto.

Primero consigue tu código de esta herramienta en FeedBurner, ingresa a tu cuenta y luego en la pestaña Publicize elige Suscripciones por Email del menú de la izquierda.
Ahora escoge tu idioma y copia el código.

Ese es el código básico, ahora vamos a hacerle unas modificaciones usando como ejemplo el código de mi feed.
Si quieres cambiarle el color de fondo tanto de toda la caja como al área de texto entonces agrega estas líneas:

<form action="http://feedburner.google.com/fb/a/mailverify" style="border:6px solid #ccc;padding:3px;text-align:center; background-color:pink" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=CiudadBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Ingresa tu correo</p><p><input style="width:140px; background-color: #ffffff;" name="email" type="text"/></p><input value="CiudadBlogger" name="uri" type="hidden"/><input value="es_ES" name="loc" type="hidden"/><input style="background-color:grey;" value="¡Suscríbete ya!" type="submit"/><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

La primera parte en color rojo es la que dará un color de fondo, en este caso rosa, pero puedes cambiarlo por otro color; la segunda parte en rojo es lo que le da el color al botón, en este caso es un gris oscuro.
Se verá así:

En este ejemplo igual he cambiado el borde, por defecto dice: border:1px yo lo he cambiado por border:6px
También he quitado el letrero que dice: Delivered by FeedBurner, si también quieres quitarlo entonces elimina la parte en color verde.

Igual puedes usar una imágen de fondo y cambiar el color de la letra para que se vea algo así:

<form action="http://feedburner.google.com/fb/a/mailverify" style="border:6px solid #ccc;padding:3px;text-align:center; background: url('http://dl.getdropbox.com/u/647003/bg-colors.JPG');" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=CiudadBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p><span style="color: rgb(255, 255, 255); font-weight: bold;">Ingresa tu correo</span></p><p><input style="width:140px; background-color: rgb(238, 194, 178)" name="email" type="text"/></p><input value="CiudadBlogger" name="uri" type="hidden"/><input value="es_ES" name="loc" type="hidden"/><input style="background-color:yellow;" value="¡Suscríbete ya!" type="submit"/></form>

En este caso la primera parte en color rojo es la que agrega la imagen, tú puedes usar la imagen que quieras, sólo cambia la URL por otra.
La segunda parte en rojo le dará un color rosa a la caja de texto; y la última parte es el color del botón, en este caso amarillo.
Y por último la parte en azul es la que cambia el color del texto, yo he puesto en estilo negrita y color blanco para que resalte de la imagen. En cualquiera de los casos puedes modificar los colores por los que gustes.
Incluso puedes cambiar el "Ingresa tu correo" y el "Suscríbete" por lo que tú quieras.

Recuerda que este código es un extracto del mío, así que no lo copies tal como está, consigue el tuyo como expliqué en los primeros dos pasos y luego agrega las líneas de cambios que creas necesarios, de lo contrario tus lectores se suscribirían a mi feed...lo cual no me molestaría.

Agregar opción de imprimir post

noreply@blogger.com (Moderador) — Tue, 2 Aug 2011 14:31:00 -0700

Es posible que el contenido que publiques sea de mucha utilidad para tus lectores, es por ello que ahora agregaremos la opción de imprimir la página para hacerles la vida más fácil a los lectores y darle un toque de profesionalismo al blog.

Para ello entra en Diseño | Edición de HTML, marca la casilla Expandir plantillas de artilugios, busca la etiqueta <data:post.body/> y justo debajo de ella pega el siguiente código:

<br/><a href="javascript:print()">Imprimir artículo</a>

Donde dice Imprimir artículo lo puedes cambiar por sólo Imprimir o por lo que quieras.

¿Lo quieres más llamativo? Entonces puedes cambiar el texto por una imagen, para ello usa este código:

<br/><a href='javascript:window.print()'><img border='0' src='URL de la imagen'/></a>

Ahora sólo cambia donde dice URL de la imagen por la dirección donde tienes alojado el ícono que vas a usar.

Entradas con imagen de fondo

noreply@blogger.com (Moderador) — Tue, 2 Aug 2011 14:29:00 -0700

Podemos darle un estilo muy personalizado a nuestras entradas con una imagen de fondo como esta que estoy publicando. Para tener este efecto en el texto de nuestras entradas sólo usamos el siguiente código dentro del post:

<table bordercolor="#000000" cellspacing="5" cellpadding="5" width="100%" background="http://URL de la imagen de fondo" border="0"><tbody><tr><td><p>Aquí va el texto de la entrada. Si desean agregar una imagen encima de la imagen de fondo sólo agregan la siguiente etiqueta y dentro de ella la URL de la imagen. <img style="float:right; margin:5px 5px 5px 5px;cursor:pointer; cursor:hand;width: 200px; height: 183px;" src="http://URL de la segunda imagen" border="0" alt="" /> y aquí continua el texto de la entrada.</p></td></tr></tbody></table>

Ahí pueden ver dónde deben escribir el texto de la entrada, y en caso de que deseen usar una foto encima de la imagen de fondo sólo agregan la etiqueta correspondiente como se explica en el código. Si no desean una imagen encima entonces eliminan esa etiqueta.

En bordercolor pueden modificar el ancho del borde de la imagen, sino desean que tenga el borde lo dejan en cero como está.
El margen entre la imagen y el texto lo pueden modificar en cellspacing y cellpadding.
La posición de la segunda foto pueden cambiarla en float; cambian right si la desean a la derecha; left, a la izquierda o center si la quieren centrada.
El tamaño de la segunda imagen lo modifican con width (ancho) y height (alto).

Les recomiendo que usen una imagen de fondo que no dificulte la lectura de la entrada. De igual modo elijan una imagen que sea del tamaño adecuado al tamaño del post, ya que una foto muy chica se repetirá muchas veces hasta ocupar el espacio.
Que se diviertan personalizando sus posts.

Gadget de entradas al azar

noreply@blogger.com (Moderador) — Tue, 2 Aug 2011 14:29:00 -0700

Enlace de entradas al azar

Entra en Diseño > Elementos de la página > Añadir gadget > HTML/Javascript y pega esto:

<script type='text/javascript'>
function showLucky(root){
var feed = root.feed;
var entries = feed.entry || [];
var entry = feed.entry[0];
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == "alternate") {
window.location = entry.link[j].href;
}
}
}
function fetchLuck(luck){
script = document.createElement('script');
script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
}
function readLucky(root){
var feed = root.feed;
var total = parseInt(feed.openSearch$totalResults.$t,10);
var luckyNumber = Math.floor(Math.random()*total);
luckyNumber++;
fetchLuck(luckyNumber);
}
function feelingLucky(){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky';
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
<a href="#random" onclick="feelingLucky()" title="Entrada al azar"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVZWmUdCW88hnsASlC0SfewJguLacAkrGaFvBSH0wpjGVHiEm5cGSmH_L9P_KqDE7psixa-J7NV3xy0so2pHW3q0R2fzfnniICHJa3vwQatTvESsINSnNv6owuqOFCupLoxkum700CQXL2/s1600/2edma7d.png" valign="middle" border="0" /> Ver una entrada al azar</a>

Lista de entradas al azar

Entra en Diseño > Elementos de la página > Añadir gadget > HTML/Javascript y pega lo siguiente:

<div id="random-posts">
<script type="text/javascript">
function getRandomPosts(json) {
var maxEntries = 5;
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
indexPosts.sort(function() {return 0.5 - Math.random()});
if (maxEntries > numPosts) {
maxEntries = numPosts;
}
var container = document.getElementById('random-posts');
var ul = document.createElement('ul');
for (i = 0; i < maxEntries; ++i) {
var entry = json.feed.entry[indexPosts[i]];
var li = document.createElement('li');
var a = document.createElement('a');
a.title = entry.title.$t;
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == 'alternate') {
a.href = entry.link[j].href;
break;
}
}
a.appendChild(document.createTextNode(entry.title.$t));
li.appendChild(a);
ul.appendChild(li);
}
container.appendChild(ul);
}
</script>
<script src="http://nombre-de-mi-blog.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=getRandomPosts&max-results=999" type="text/javascript"></script>
</div>

El resultado será este:

Cambia el nombre de tu blog donde se indica. El número en color rojo es el número de entradas que se mostrarán en la lista, puedes modificarlo por otro número si lo deseas.

Menú vertical con subpestañas hecho sólo con CSS

noreply@blogger.com (Moderador) — Tue, 2 Aug 2011 13:15:00 -0700

Este es un menú vertical con subpestañas hecho sólo con CSS, no tiene nada de Javascript o de alguna librería, así que para aquellos que prefieren las cosas simples esta es una buena opción para organizar las etiquetas del blog o cualquier enlace.

Colocarlo es bastante sencillo, sólo entra en Diseño | Edición de HTML y antes de
]]></b:skin> pega los estilos siguientes:

/* Menú vertical con subpestañas
----------------------------------------------- */
#menuvertical {
text-align: center;
width:100%;
}
#menuvertical ul { list-style-type: none; padding:0;}
#menuvertical ul li.nivel1 {
width: 162px; /* Ancho de las pestañas */
}
#menuvertical ul li.primera {
border-top: solid 1px #FFF; /* Borde superior de la primera pestaña */
}
#menuvertical ul li {padding:0;}
#menuvertical ul li a {
display: block;
text-decoration: none;
color: #fff; /* Color del texto */
background-color: #045FB4; /* Color de fondo */
border: solid 1px #fff; /* Borde de las pestañas */
border-top: none;
padding: 8px;
position: relative;
}
#menuvertical ul li:hover {
position: relative;
color: #000; /* Color del texto al pasar el mouse */
}
#menuvertical ul li a:hover, #menuvertical ul li:hover a.nivel1 {
background-color: #6E6E6E; /* Color de fondo al pasar el mouse */
color: #000;
position: relative;
}
#menuvertical ul li a.nivel1 {
display: block!important;
display: none;
position: relative;
}
#menuvertical ul li ul {
display: none;
}
#menuvertical ul li a:hover ul, #menuvertical ul li:hover ul {
display: block;
position: absolute;
left: 161px;
top:-1px!important;
top:-31px;
}
#menuvertical ul li ul li a {
width: 160px;
background-color: #045FB4; /* Color de fondo subpestañas */
color: #fff; /* Color del texto subpestañas */
}
#menuvertical ul li ul li a:hover {
position: relative;
background-color: #6E6E6E; /* Color de fondo al pasar el mouse subpestañas */
color: #000; /* Color del texto al pasar el mouse subpestañas */
}

Ahora entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega lo siguiente:

<div id="menuvertical">
<ul>

<li class="nivel1 primera"><a href="#" class="nivel1">Pestaña 1</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 1.1</a></li>
<li><a href="URL del enlace">Pestaña 1.2</a></li>
</ul>
</li>

<li class="nivel1"><a href="#" class="nivel1">Pestaña 2</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 2.1</a></li>
<li><a href="URL del enlace">Pestaña 2.2</a></li>
<li><a href="URL del enlace">Pestaña 2.3</a></li>
<li><a href="URL del enlace">Pestaña 2.4</a></li>
<li><a href="URL del enlace">Pestaña 2.5</a></li>
</ul>
</li>

<li class="nivel1"><a href="#" class="nivel1">Pestaña 3</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 3.1</a></li>
<li><a href="URL del enlace">Pestaña 3.2</a></li>
<li><a href="URL del enlace">Pestaña 3.3</a></li>
</ul>
</li>

<li class="nivel1"><a href="#" class="nivel1">Pestaña 4</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 4.1</a></li>
<li><a href="URL del enlace">Pestaña 4.2</a></li>
<li><a href="URL del enlace">Pestaña 4.3</a></li>
<li><a href="URL del enlace">Pestaña 4.4</a></li>
</ul>
</li>

<li class="nivel1"><a href="#" class="nivel1">Pestaña 5</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 5.1</a></li>
<li><a href="URL del enlace">Pestaña 5.2</a></li>
</ul>
</li>

</ul>
</div>

Agrega la URL de los enlaces donde se indica y listo. Si quieres agregar otra pestaña SIN subpestañas entonces añade antes de </ul> una línea como esta:

<li class="nivel1"><a href="URL del enlace" class="nivel1">Pestaña 6</a></li>

Si quieres agregar una pestaña CON subpestañas entonces añade igual antes de </ul> lo siguiente:

<li class="nivel1"><a href="#" class="nivel1">Pestaña 6</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 6.1</a></li>
<li><a href="URL del enlace">Pestaña 6.2</a></li>
<li><a href="URL del enlace">Pestaña 6.3</a></li>
<li><a href="URL del enlace">Pestaña 6.4</a></li>
</ul>
</li>

No es un menú fuera de lo normal pero sí es bastante útil para organizar los enlaces del blog.

Tiempo de Vida de tu Blog

noreply@blogger.com (Moderador) — Tue, 2 Aug 2011 13:09:00 -0700

Hola de nuevo, si quieres mostrar a tus visitantes cuantos dias tiene tu blog de existencia, lo que tienes que hacer es lo siguiente:

Nos dirigimos a :
Plantilla--Elementos de la pagina

Damos click en "Añadir nuevo elemento de pagina", escojemos la opcion de HTML/JavaScript

Copiamos y pegamos lo siguiente:

<script>
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
function countup(yr,m,d){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy
var paststring=montharray[m-1]+" "+d+", "+yr
var difference=(Math.round((Date.parse(todaystring)-Date.parse(paststring))/(24*60*60*1000))*1)
difference+=" días"
document.write("Hace "+difference+" que este Blog esta en linea!")
}
//NOTA: Cambia en la linea de abajo, el dia desde el que quieres contar el tiempo
countup(2006,09,30)
</script>

Hoy es <script></script>

Listo, cambias lo marcado con rojo, guardas los cambios y listo.
Nota: Parte de este código ha sido tomado de Noticias-Blogs y ha sido modificado para su correcto funcionamiento.