**No dudes en dejar comentarios o alguna sugerencia** El Blog de J.Guti.: noviembre 2007

Generadores

viernes, 30 de noviembre de 2007

Publicado por Guti en 9:34 3 comentarios  

Pulsar para oir post hablado

Efecto de agua

Una página interesante que hace el efecto de olas de agua en las imagenes
Photo Sharing
Add this effect to your own photos

Publicado por Guti en 9:26 0 comentarios  

Pulsar para oir post hablado

Editor de Imagenes

jueves, 29 de noviembre de 2007

Para editar imagenes on line, añadir texto a las imagenes sin tener que utilizar photoshop, este editor encontrado en la web cumple perfectamente para pequeños retoques.http://http://www.splashup.com/. Les muestro imagenes de la página:

Una vez en la página se pulsa en la pantalla grande donde dice JUMP RIGHT IN, seguidamente se abre el archivo bien sea desde nuestro PC, de Picassa o Flickr.

Publicado por Guti en 22:33 0 comentarios  

Pulsar para oir post hablado

Roundpic

martes, 27 de noviembre de 2007

Roundpic es una herramienta que posibilita las opciones de redondear las esquinas de cualquier imagen y también
cambiar el tamaño de las mismas y el color de fondo.Las podemos subir desde nuestro PC o poniendo la URL de la imagen.Les muestro detalle de la página



Publicado por Guti en 20:09 0 comentarios  

Pulsar para oir post hablado

Imagen que cambia

Según publica hoy el estupemdo blog de Gema@blog, este ejemplo de aplicación "Rollover", que cambia las imagenes al pasar el cursor.
Primeramente nos situamos en la plantilla edición HTML, y justo antes de -/head-, añadimos este código:
<script language="JavaScript" type="text/javascript">

imagenOn = new Image(300,300);

imagenOn.src = "images/avatar2.gif";

</script>

damos aceptar guardando los cambios y a continuación añadimos esto otro en el sitio que queramos ponerlo, bien sea una emtrada o en el sidebar;
<a href= "#" onclick="returnfalse;" onmouseover="document.ejemplo.src='url-imagen';" onmouseout="document.ejemplo.src='url-imagen';">

<IMG name="ejemplo" src="url-imagen-1ª" alt = "ejemplo de rollover"width="300" height="300" border= "0">

</a>

solamente sustituimos donde pone -url.imagen-, por la imagen nuestra: Ejemplo

ejemplo de rollover

Publicado por Guti en 15:40 0 comentarios  

Pulsar para oir post hablado

Buscador

lunes, 26 de noviembre de 2007

Para poder poner un buscador interno en nuestro blog basta añadir este corto y sencillo código a nuestra página en la sección añadir un elemento de página -HTML-Javascript-, situándolo en la parte que queramos ponerlo.Aceptamos y listo.

[+/-]Buscador


    Texto:

    <form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/><input id="search-btn" value="Buscar" type="submit"/></form>

    Texto:
    Observaciones:
    Si queremos añadirle una imagen de -lupa-, cambiaremos la parte desde la que dice:
    <input id="search-btn" value="Buscar" type="submit"/></form>

    Texto:

    por esta otra...:

    <input border="0" alt="Buscar" src="http://img234.
    imageshack.us/img234/5551/magnifyingglassec3.gif" type="image"/>

    </form>


Publicado por Guti en 19:45 0 comentarios  

Pulsar para oir post hablado

Seguir leyendo

domingo, 25 de noviembre de 2007

Para poder mostrar los textos en las entradas o post y que no se lea el texto completo, sino que una parte permanezca oculto y que se vea cuando nosotros queramos, o lo que es lo mismo el "siga leyendo...", empezaremos por seguir los siguientes pasos:


Siga leyendo




Contenido:
primeramente buscaremos -/head-, y seguidamente pondremos este código:
<script src='http://forevergema.googlepages.com/functiontoggleIt.js' type='text/javascript'/>


El segundo paso será buscar este código en la plantilla. Previamente habremos expandido artilugios:
<b:includable id='post' var='post'>

<div class='post uncustomized-post-template'

<a expr:name='data:post.id'/>

<b:if cond='data:post.title'>

<h3 class='post-title'>

<b:if cond='data:post.url'>

<a expr:href='data:post.url'><data:post.title/></a>

<b:else/>

<data:post.title/>

</b:if>

</h3>

</b:if>

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

<div class='post-body'>

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

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>


Cómo tercer paso esto último los sustituiremos por este otro código:


Código Seguir leyendo:



Código:
<b:includable id='post' var='post'>

<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>

<a expr:name='data:post.id'/>

<b:if cond='data:post.title'>

<h3 class='post-title'>

<b:if cond='data:post.url'>

<a expr:href='data:post.url'><data:post.title/></a>

<b:else/>

<data:post.title/>

</b:if>

</h3>

</b:if>



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



<div class='post-body'>



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



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



<b:else/>

<style>#fullpost {display:none;}</style>

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

<span id='showlink'>

<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>SIGA LEYENDO</a></p>

</span>

<span id='hidelink' style='display:none'>

<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>CERRAR NOTA</a></p>

</span>

<script type='text/javascript'>

checkFull("post-" + "<data:post.id/>");

</script>

</b:if>



<div style='clear: both;'/> <!-- clear for photos floats -->

</div>



Aceptamos los cambios y solamente falta aplicar en cada entrada esto otro:
texto

<span id="fullpost">

texto

</span>



Observaciones:



Contenido
Esta última parte se podrá para más comodidad dejarlo fijo en plantilla simplemente yendo a -opciones-formato, y pegarlo en plantilla HTML.
texto

<span id="fullpost">

texto

</span>





Publicado por Guti en 10:09 0 comentarios  

Pulsar para oir post hablado

Mostrar contenidos



Abrir - Cerrar

    Con esta aplicación podemos tener una tabla para mostrar los contenidos que deseemos, como por ejemplo un mapa del blog o cualquier otra cosa que se nos ocurra.
    Primeramente pondremos lo siguiente antes de la etiqueta -/head-:

    <link href='http://webjcp.googlepages.com/tabcontenido.css' rel='stylesheet' type='text/css'/>

    <script src='http://webjcp.googlepages.com/tabcontenido.js' type='text/javascript'></script>

    Contenido


    seguidamente vamos a añadir un elemento de página -HTML-Javascript-, y pondremos el siguiente código:


    [+/-]Abrir código



      <ul id="maintab" class="shadetabs">

      <li><a href="#" rel="tcontent1">Contenido 1</a></li>

      <li><a href="#" rel="tcontent2">Contenido 2</a></li>

      <li><a href="#" rel="tcontent3">Contenido 3</a></li>

      <li class="selected"><a href="#" rel="tcontent4">Contenido 4</a></li>

      <li><a href="#" rel="tcontent5">Contenido 5</a></li>

      <li><a href="#" rel="tcontent6">Contenido 6</a></li>

      </ul>

      <div class="tabcontenidostyle">

      <div id="tcontent1" class="tabcontent">

      <br/>

      Aca va el contenido 1

      </div>

      <div id="tcontent2" class="tabcontent">

      <br/>

      Aca va el contenido 2

      </div>

      <div id="tcontent3" class="tabcontent">

      <br/>

      Aca va el contenido 3

      </div>

      <div id="tcontent4" class="tabcontent">

      <br/>

      Aca va el contenido 4

      </div>

      <div id="tcontent5" class="tabcontent">

      <br/>

      Aca va el contenido 5

      </div>

      <div id="tcontent6" class="tabcontent">

      <br/>

      Aca va el contenido 6

      </div>

      </div>



      <script type="text/javascript">

      initializetabcontent("maintab")

      </script>



      Configuración:
      <li><a href="#" rel="tcontent1">Contenido 1</a></li>

      Aca lo único que le tenes que cambiar el el titulo



      <li class="selected"><a href="#" rel="tcontent4">Contenido 4</a></li>

      Aca verás que aparece algo nuevo "class="selected" es el contenido que se muestra cuando entran a tu blog.



      <div id="tcontent1" class="tabcontent">

      <br/>

      Aca va el contenido 1
      Codigo










Publicado por Guti en 0:45 0 comentarios  

Pulsar para oir post hablado

Imagenes en post

viernes, 23 de noviembre de 2007




[+/-]Imagenes en los post de entrada


    Texto:

    Texto:
    Para poner imagenes en distintos lugares de los post, aplicaremos lo siguiente:

    Texto:
    Post:



    Para la fecha:



    .date-header {

    padding-left: 20px;

    padding-top: 5px;

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxa4qzRrAFCv02PPpNxHKkPc6uldcHfLBQWsb-aN8dCD69vc03ifUJT8bKTJabbDg6xqqif9aAduCK19pBfwEA7yBLhL9nZc3s0j3cqRQdxoxWjqni3t_5e012jZ4Wj6iwTord_ViBRa4/s1600/time.png) center left no-repeat;

    }



    Para las etiquetas:



    .post-labels {

    padding-left: 20px;

    padding-top: 5px;

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO2DzXCndSW4BXNK_edmYmkE8hstbZv8UhJxhppxRB1Z5VbewPUwKsBxZeccnu8o_KNsfQadcXQWvZ9Ig3EIwQMvReaMlnNXLI1vWy64pShSsrJSFhkgA-CS6eareuRM5iCWKHMgoAddU/s1600/etiqueta_naranja.gif) center left no-repeat;

    }



    Para el autor:



    .post-author {

    padding-left: 20px;

    padding-top: 5px;

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeHNT5sgvrbvD0iehi2negAFw6um6bLZACCwVENmE94a_gkkJo4KRFknitw6ymuwaiX3KbyPD95zv6tTeKQLpHp642ZkwDdLs83lWiRoBzXdpSKpt0g-3DYtrkA6p5XmkPTb-kR7iA_A8/s1600/autor.gif) center left no-repeat;

    }



    Para el titulo del post:



    .post-title {

    padding-left: 20px;

    padding-top: 5px;

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpaRWWdDLAiLsrzTduJzj7SxWxsU-zx2Ibrxsf3ju86D0NS5Ox8UNBaWQ7HgbpK8I_wYylElm1AnLLm6aDbqJFU22lwXHbzBfQZ-r6xQMhnoFovs6LIseRbY3JxJciLUOsadDo0XxC7LA/s1600/icono-documento.gif) center left no-repeat;

    }



    Para la fecha de los comentarios:



    .comment-timestamp {

    padding-left: 20px;

    padding-top: 5px;

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj65-9Nrev0rKaEWoqlWWzfJBf51AuvYwc0IZ-bAr6nCCW3spZ9A4G-ojENaDiL6wwb0amO3sQtu3OSNn2KbnfdIj3Vxq-wr5tHpvELAWFOr_O_NRBa4r8zEYxUcJ00pYbaE7Q0_wQXIOk/s1600/icono-calendario.gif) center left no-repeat;

    }



    Para los comentarios:



    .comment-link {

    padding-left: 20px;

    padding-top: 5px;

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2HqHC1bLnqYCy3CmgPekgE8JQ6MpzwCIzFwldIoU_c3KLrbYAhKuTQv-lnYDaZARLvYqxMtj-8mFGgmyoiF8pbew6wNgTqX_3hAlagAZ2gn78rSwHIHc7oxU-5VE1ahq2Ghsx0u2PwDc/s1600/icono-comentarios.gif) center left no-repeat;

    }



    Sidebar:



    Para los links:



    #LinkList1 ul, #LinkList2 ul {

    list-style-type:none;

    }



    #LinkList1 li, #LinkList2 li {

    padding-left: 20px;

    padding-top: 5px;

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-S4lpZ8g4y-mquACs4AnQpt5cOPEz81QmN4rz2N8RUeF4wK3blD16ylaYaLcchvCMNqLz9SscbWUVkPDNxXH1UW65jKn8lHqgdtbeqGrLKKk062JI_cRNROnL7rkgp8dBwKQBWxIlW48/s1600/icono-links.gif) center left no-repeat;

    }



    Para los blacklinks:



    #backlinks-container h4 {

    padding-left: 20px;

    padding-top: 5px;

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqJNrNDZMYuwr4UhK5hqfRuF_LE1K91MHyH4sdLRKouPnpm_fvNQpSPm25Tn_d432EFaomY6BeK8o_5o4nbcJTB7OFtiSzKktbjPUpUuNGcKh7SH6TojEYmWIAu0BdkbSpXpUFneMxiE0/s1600/icono-backlinks.gif) center left no-repeat;

    }



    Para las etiquetas:



    #Label1 ul, #Label2 ul {

    list-style-type:none;

    }



    #Label1 li, #Label2 li {

    padding-left: 20px;

    padding-top: 5px;

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNPmn6g_ydn6j_-LSCQrRfXaKaTiSuvDz6psyGu5a4G4Ln2BNMGUuz1Vrdxp_pknr8A-ni75dgpI8BxxUWz-EUrDsUTlGdK8sYEX3LOD94LhdWS1rw8YnIGnSm7n0Jk5Ekt1ltJTCPc3k/s1600/icono-etiqueta-azul.gif) center left no-repeat;

    }



    Footer:



    Para el feed:



    .feed-links {

    padding-left: 20px;

    padding-top: 5px;

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMBrFIR57wd-_ltXWKkCaWY1gp5utDMDldsXJnPJzF7lxqVmVXlewaQd3ipFzQRNSVbDBrxhgqo99UcdblvBligmb3IqL-4uV9wPWDTI7l-70J6kIxFrFNQggLVZgjBrYkvVyNRQ3vuno/s1600/icono-feed.gif) center left no-repeat;

    }



    Listo :) .






Publicado por Guti en 21:11 1 comentarios  

Pulsar para oir post hablado

Barras de separación

martes, 20 de noviembre de 2007


[+/-]Barras de separación



    Código:
    Para añadir lineas de separación verticales dentro del blog, añadiremos lo siguiente:

    Añadimos en #main-wrapper { el valor

    border-left: solid #000000 1px; para conseguir una barra a la izquierda de la sidebar.

    border-right: solid #000000 1px; para conseguir una barra a la derecha de la sidebar.

    border-right:1px dashed #ffffff; la barra se verá punteada.



    Si queremos incluir las entradas dentro de una caja,es decir, barra derecha-barra izquierda-barra arriba-barra abajo, añadimos en #main-wrapper { el valor border: solid #000000 1px;

    Para verla punteada: border: dashed #000000 1px;

    Si queremos que las esquinas de la caja se vean redondeadas, añadimos:



    -moz-border-radius: 15px;

    -webkit-border-radius: 15px;



    Lo mismo puede hacerse en la sidebar, añadiendo esos valores en #sidebar-wrapper {

    Observaciones:

    *Si os parece que el texto de las entradas queda demasiado pegado al borde que acabamos de colocar, añadís el valor padding, por ejemplo asi: padding: 0 10px 0 10px; según se varie el valor de los pixeles (px) variará la distancia del texto al borde.








Publicado por Guti en 20:24 5 comentarios  

Pulsar para oir post hablado

Trucos Blog

lunes, 12 de noviembre de 2007


[+/-]Mensajes de Alerta


    Con este truco podemos conseguir resaltar algo que no queramos que pase desapercibidopo.
    Para eso insertaremos el siguiente código antes - ]]></b:skin>-.

    /* alerta */



    .alert {

    background: #fff6bf url(http://img527.imageshack.us/img527/3821/exclamationfs0.png) 15px center no-repeat;

    text-align: left;

    padding: 5px 20px 5px 45px;

    border-top: 2px solid #ffd324;

    border-bottom: 2px solid #ffd324;

    }


    Después de aceptar y guardar podemos empezar a usarlo en cada entrada que queramos aplicarlo poniendo esto en cada entrada:
    <p class="alert">ACA VA EL MENSAJE</p>






[+/-]Cartel de Mensajes


    Para ello inserta el, siguiente código entre las etiquetas -head-/head-:
    Código:

    <style type='text/css'>



    .commentbox{

    background-color: #ececec;

    width: 450px;

    padding: 10px;

    }



    .commentfooter{

    background: url(http://img.godlike.cl/images/fle.gif) 20px 0 no-repeat; /*20px 0 equals horizontal and vertical position of arrow. Adjust as desired (ie: 20px -5px).*/

    padding-left: 58px;

    padding-top: 1px;

    margin-bottom: 2em;

    font-size: 90%;

    color: #4A4A4A;

    }



    </style>






    Después de aceptar y guardar vas a elementois de página y en la sección de -HTML-Javascript-, insertas este código donde quieras situarlo:
    <div class="commentfooter">

    <div style=" "><span >

    ACA VA LA FIRMA</span></div></div>




[+/-]Traducir post al inglés



    Texto:


    Para que aparezca la bandera de traducción al inglés vamos a plantilla edición HTML y después del siguiente código :<p class='post-footer-line post-footer-line-3'>

    pondremos este otro código justo a continuación:

    <a expr:href='"http://world.altavista.com/babelfish/trurl_pagecontent?url=" + data:post.url + "&amp;lp=es_en"' title='Spanish to English'><img src='http://1.bp.blogspot.com/_XGtsagQTuUQ/RZk8DP2JNiI/AAAAAAAAADk/eRxHS5s1f10/s320/english.jpg' alt='Eng' /> English</a>

    Ejemplo:Eng English



Publicado por Guti en 9:57 0 comentarios  

Pulsar para oir post hablado

Accesorios

domingo, 11 de noviembre de 2007



Drop Caps




Contenido:
Es la primera letra de un párrafo más grande que el resto del texto, al estilo de los periódicos.Puede ser interesante para dar un aspecto diferente a los textos, que lo habitualmente visto hasta ahora. A continuación les detallo el correspondiente código para implantar en su plantilla.
Código:
Ir a plantilla edición HTML (no expandir artilugios) y agregas el siguiente código entre -<b:skin><![CDATA[ y ]]></b:skin>. , preferiblemente al final

.dropcaps {

float:left;

color: $headerBgColor;

font-size:100px;

line-height:80px;

padding-top:1px;

padding-right:5px;

}


Si no funciona con la parte de :$headerBgColor,lo cambias por $titlecolor .
Después sólo tienes que añadir en cada entrada el código:
<span class="dropcaps">D</span>


o para más comodidad dejarlo fijo en Opciones, Formato y pagarlo para que salga automaticamente en todas las entradas que creemos. Aceptamos y listo.En vista previa no es visible.



Leer más



Una manera de insertar la forma de ver en las entradas parte del texto escrito y que el resto del texto se vea cuando nosotros queramos, con el fin de que en textos largos no nos ocupe demasiado en cada entrada, de los muchos sistemas que hay, es que les muestro a continuación, que no resulta demasiado complicado de insertar.
Primeramente buscaremos en nuestra plantilla Edición HTML/Expandir plantilla de Artilugios las etiquetas:</b:skin> y </head>


y entre ellas pegamos el siguiente código:


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

<style type='text/css'>

.fullpost {display:inline;}

.summarypost {display:none;}

</style>

<b:else/>

<style type='text/css'>

.fullpost {display:none;}

.summarypost {display:inline;}

</style>

</b:if>



----------
Luego en cada post que deseemos que salga el "Leer más", aplicaremos este otro código
en cada entrada, donde detallaremos el texto que queremos que aparezca a simple vista y el que deseamos ocultar.
(Aquí escribimos el principio de la entrada )



<span class="summarypost">

<a href="link-de-la-entrada">Seguir Leyendo... </a>

</span>



<span class="fullpost">

( Aquí escribimos la parte de entrada que veremos extendida )

</span>



---------
Esta última parte también la podremos aplicar de forma permanente añadiando en Opciones/Formato/Plantilla de Entrada, para no tener que estar añadiéndolo en cada post, con lo cual resulta más cómodo.
Luego en la parte de "Seguir Leyendo", también se puede sus tituir por esto para que salga en su lugar una imagen:<img src="aquí-la-url-de-la-imagen" /></a>



Favicones




Contenido:
Para aplicar "favicones" (imagenes diminutas), a nuestro blog en los apartados de
Comentarios, Etiquetas, Autor o Secciones, basta añadir el siguiente código en la
parte del blog antes de :]]></b:skin>
A continuación añadiremos el código dependiendo de la parte donde queramos situarlo, según se indica:
"Imagen en Categoría o Etiquetas"



.post-labels

{ padding-left:20px;

padding-top:5px;

background: url(url_de_la_imagen) center left no-repeat; }



"Imagen en Comentarios"



.comment-link

{

padding-left:20px;

padding-top:5px;

background: url(url_de_la_imagen) center left no-repeat; }



"Imagen en (Publicado por) o Autor del blog"



.post-author

{

padding-left:20px;

padding-top:5px;

background: url(url_de_la_imagen) center left no-repeat; }








Publicado por Guti en 21:51 0 comentarios  

Pulsar para oir post hablado

Menús

Este ménu desplegable consiste en hacer clic en sobre un botón y se despliegan una lista de links, además se pueden ir añadiendo módulos -javascript-, tamtos cómo uno quiera, sólo con ir cambiando de nombre de el -id-, por ejemplo si ponemos en uno -video-, pues en otro -música-, y así sucesivamente.
A continuación les muestro el correspondiente código para añadir a su plantilla.



Menú desplegable




Contenido:




Código



Contenido:
Este código lo pegaremos justo antes de --]]></b:skin>)
--

.texthidden {

display:inline

}



.shown {

display:block

}


Y este otro justo antes de -/head-:
<script src='http://andrewhonors.googlepages.com/fecha.js' type='text/javascript'/>




Luego ir a añadir elementos de página y en el elemento de -HTML-Javascript-, pondremos este otro código; aceptaremos y ya está listo para disfrutar de él.
Código:
<a href="javascript:void(0);" onclick="expandcollapse('musica')"><img border="0" src="http://dirección-de-la-imagen-del-botón"/></a><br/>



<ul id="musica" class="texthidden">

<li><a href="http://www.radioblogclub.com/" target="_blank">Radio Blog</a></li>

<li><a href="http://www.goear.com/index.php" target="_blank">Goear</a></li></ul>





<a href="javascript:void(0);" onclick="expandcollapse('video')"><img border="0" src="http://dirección-de-la-imagen-del-botón"/></a><br/>



<ul id="video" class="texthidden">

<li><a href="http://www.youtube.com/" target="_blank">Youtube</a></li>

<li><a href="http://www.veoh.com/" target="_blank">Veoh</a></li></ul>



TITULOS




Contenido:




Publicado por Guti en 11:23 0 comentarios  

Pulsar para oir post hablado

Trucos Blog

sábado, 10 de noviembre de 2007

Podemos poner los Post escritos a doble columna, estilo periódico y quedan superchulos, y además le dá un aire de elegancia al blog. A continuación les muestro el código, que tendrán que añadir a un elemento de página -HTML-Javascript-
Abrir



Post Doble Columna




Contenido:
<table><td style="width:40%;margin-top:0px;padding:15px;"><p style="text-align:justify;">AQUÃ&#65533; EL TEXTO DE LA PRIMERA<br />COLUMNA DEL POST</p> <td style="width:40%;margin-top:0px;padding:15px;"><p style="text-align:justify;">AQUÃ&#65533; EL TEXTO DE LA SEGUNDA COLUMNA DEL POST</p> </table>








Publicado por Guti en 16:26 0 comentarios  

Pulsar para oir post hablado

Plantilla Smashing


Contenido:Otra bonita plantilla sacada de la página de Ricardo Santos, es la de Smashing, algo similar a la de Blogi Illacrino, pero en otros tonos. Abajo el código


Abrir - Cerrar


    Contenido:Otra bonita plantilla sacada de la página de Ricardo Santos, es la de Smashing, algo similar a la de Blogi Illacrino, pero en otros tonos. Abajo el código:








    [+/-]Abrir código

      Codigo:<?xml version="1.0" encoding="UTF-8" ?>

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

      <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

      <head>

      <b:include data='blog' name='all-head-content'/>

      <title><data:blog.pageTitle/></title>

      <b:skin><![CDATA[/*



      /* **************************

      Name: Blogy Smashing

      Blogger by: serturista.com

      Support: http://Blogandweb.com

      Designer: http://www.designdisease.com/

      Date: Sep 07

      Icons:

      *****************************



      *//* Definición de variables

      ====================

      <Variable name="enlacecolor" description="Color de los enlaces (links)"

      type="color" default="#218dd1" value="#218dd1">

      <Variable name="colorenlaceencima" description="Color del link al pasar el mouse"

      type="color" default="#cc0000" value="#cc0000">

      <Variable name="colortituloblog" description="Color del título del blog"

      type="color" default="#ff3300" value="#ff3300">

      <Variable name="descripcioncolor" description="Color de la descripción del blog"

      type="color" default="#8f8f8f" value="#8f8f8f">

      <Variable name="colortituloentrada" description="Color del título de las entradas"

      type="color" default="#218dd1" value="#218dd1">

      <Variable name="colortituloslateral1" description="Color titulo - barra lateral izq"

      type="color" default="#666666" value="#666666">

      <Variable name="colortituloslateral2" description="Color titulo - barra lateral der"

      type="color" default="#FFFFFF" value="#FFFFFF">

      <Variable name="colortextolateral1" description="Color texto - barra lateral izq"

      type="color" default="#993333" value="#993333">

      <Variable name="colortextolateral2" description="Color texto - barra lateral der"

      type="color" default="#fff" value="#ffffff">

      */



      #outer-wrapper {

      width: 980px; margin: 0 auto; padding: 0px; position: relative;

      }



      #navbar-iframe {

      height:0px;

      visibility:hidden;

      display:none

      }



      /*-- (Generales) --*/



      body { background: #fff url(http://img481.imageshack.us/img481/341/bkgbodyuv2.gif) repeat center; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; padding: 20px; margin: 0px; color:#35383d;}



      html { padding: 0; margin: 0;}



      a:link { text-decoration: none; color : $enlacecolor; border: 0px; -moz-outline-style: none;}

      a:active { text-decoration: underline; color : #218dd1; border: 0px; -moz-outline-style: none;}

      a:visited { text-decoration: none; color : #218dd1; border: 0px; -moz-outline-style: none;}

      a:hover { text-decoration: underline; color : $colorenlaceencima; border: 0px; -moz-outline-style: none;}

      a:focus { outline: none;-moz-outline-style: none;}



      h1, h2, h3, h4 { font-family: Arial, Helvetica, sans-serif;}



      img { padding: 0px; margin: 0px; border: none; text-align: center;}

      hr { border-left:0px solid #abb0b5; border-right:0px solid #abb0b5; border-top:1px dotted #abb0b5; border-bottom:0px solid #abb0b5; height : 1px; }



      form { padding: 0px; margin: 0px;}

      input { font-family: 'Verdana'; color: #282b31; font-size: 11px;}

      textarea { font-family: 'Verdana'; color: #282b31; font-size: 11px;}

      select { font-family: 'Verdana'; color: #282b31; font-size: 11px;}



      /*-- (Cabecera) --*/



      /**/ * html #header-wrapper { height: 80px;} /* */



      #header-wrapper {

      background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQStLVxkijGsTc5yzCORLe77NOldT4WwTlXRx2ZRzGbqx4MBjC19B0yB_tLAPO3tWmYVn9wJkVPLsjnwgFgbyMaU16_MvQWkK1hlYNTpneaeMOnL1e5H9bN0TDrJiK8C6_1-deA7AJ0vU/s1600/HeaderBkg.gif) no-repeat left top; width: 535px; position: relative; clear: left; padding: 0px 0px 0px 30px; min-height:80px; margin-left: 15px;

      }



      #header-wrapper h1 {

      font-size: 26px; line-height: 26px; letter-spacing: -2px; padding: 27px 5px 0px 0px; margin: 0px; font-weight: bold; color:$colortituloblog;

      }



      #header-wrapper h1 a {

      color:$colortituloblog; text-decoration: none;

      }



      #header-wrapper h1 a:visited {

      color:$colortituloblog; text-decoration: none;

      }



      #header-wrapper h1 a:hover { color:$colortituloblog; text-decoration: none; }



      #header-wrapper p {

      color:$descripcioncolor; font-size: 15px; line-height: 15px; font-weight: bold; letter-spacing: -1px; font-family: 'Arial'; padding: 0px; margin: 0px 0px 0px 0px;

      }



      #header-wrapper a {

      }



      .Search { position: absolute; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheYLdmafnftxP3kbIH-KtRmuH__qp9yCWc4qhL5WNjBpUFSZJf2tQVUbId_z8S5D2y3lb_mBsU7kynxz9y9xwYe8-CB_3damGOYwglsC_hNcyG_MOYq7uZ8xwl6KorJbCuWY-hpERwCJU/s1600/Search.gif) no-repeat left top; top: 20px; right: -220px; width: 220px; height: 63px;}

      .Search form { padding: 28px 10px 10px 10px; margin: 0px;}

      .Search input { border: none; color: #fff; font-size: 11px;}

      .Search input.search { width: 21px; height: 21px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpXVtz3L26Cx4f07zBNMzWy59YeNLVO7A8o3TWWaA0fd4PLIhECC700R_5pPBpOSue_oOFY3wJaCdJ3PchFKJcZTPdmiIEaZuw0vdtBZaxwLpMqPJFYf9kIycVpedP_LjLKP9yTPoXsZU/s1600/SearchButton.gif) no-repeat;}

      .Search input.keyword { background: none; border: none; padding: 5px 0px 5px 5px; width: 175px; border: none; } /**/ * html #buttonsearch { margin: -22px 0px 0px 175px; } /* */

      #buttonsearch { padding: 0px; margin: -21px 0px 0px 175px; top: 0px; background: none; }



      .Syn { position: absolute; top: 45px; right: -400px; width: 170px;}

      .Syn ul { margin: 0px; padding: 0px;}

      .Syn li { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT5oehpR494wH9PTIQ-_-HFVDrzp5eiehgkMfsZl9uVh6UNLMBh-O-lzqi9PLOxH6fXEu6Jhx8t0CWAK0AWz470cYBb-NA9bNQetLTXMgdkrZFhyphenhyphenniNuf7UiTwfYHhOAsiJieJmgu61x8/s1600/SynIco.gif) no-repeat left center; margin: 0px; padding: 0px 0px 1px 15px; list-style-type: none; font-size: 10px; color:#25252b;}

      .Syn li a { color:#25252b; font-size: 10px; text-decoration: underline; }

      .Syn li a:visited { color:#25252b; font-size: 10px; text-decoration: underline; }

      .Syn li a:hover { color:#25252b; font-size: 10px; text-decoration: underline; }



      /*-- (Menú) --*/



      .Menu { padding: 15px 0px 30px 0px; float: left; width: 505px; background: url(http://img443.imageshack.us/img443/6376/dottedfh0.gif) repeat-x top;}

      .Menu em { display: none}

      .Menu ul { list-style: none; margin: 0px; padding: 0px;}

      .Menu ul li ul { display: none;}

      .Menu li { padding: 0px; margin: 0px; display: inline; font-size: 10px; line-height: 11px; font-weight: bold;}

      .Menu a { padding: 0px 0px 0px 3px; margin-right: 2px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqDGfvlsquZd4vIPIZols3fbJaSUG31V1_YKN2qB3EqY7eJmztxBSNH7yXEeDR3iEZ2tz85o4pRNY50VYE7ube0miq-SYz9hE8BR0qFASVutfqUbrlfqreUm0SHsgHdAwq4GDIGPMMkmk/s1600/MLeft.png) no-repeat left top; float: left;}

      .Menu a span { padding: 4px 9px 5px 6px; display: block; background: url(http://img206.imageshack.us/img206/4899/mrightto0.png) no-repeat right top; float: right; }

      .Menu a span { float: none; color: #3b98d2;}

      .Menu a:hover span { color: #3b98d2;}

      .Menu a:hover { background-position: 0% -20px; color:#ffffff; text-decoration: none;}

      .Menu a:hover span { background-position: 100% -20px; color:#ffffff;}

      .Menu .on { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqDGfvlsquZd4vIPIZols3fbJaSUG31V1_YKN2qB3EqY7eJmztxBSNH7yXEeDR3iEZ2tz85o4pRNY50VYE7ube0miq-SYz9hE8BR0qFASVutfqUbrlfqreUm0SHsgHdAwq4GDIGPMMkmk/s1600/MLeft.png) no-repeat left bottom; color:#ffffff; }

      .Menu .on span { background: url(http://img206.imageshack.us/img206/4899/mrightto0.png) no-repeat right bottom; color:#ffffff; }



      /*-- (Contenedor) --*/



      #content-wrapper {

      background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy5fJQ_NI7WMpjWdDrRErQOQdQ9Hvv0d47ulSTRXFAw2_V7bYtglgWbqLVWnQiC-SNts3Kmu0-jnh8lfyGzYWEkcTl8sjgfW3ubxlpDI81hana04X3HDEi7JXPb_zGkHromdpfZLVu7pI/s1600/BGC.gif) repeat-y center; width: 980px; float: left; position: relative; padding: 0px;

      }



      /*-- (Principal) --*/



      #main-wrapper { background: url(http://img206.imageshack.us/img206/1682/scxd8.gif) no-repeat left top; width: 505px; float: left; padding: 0px 30px 15px 45px;}

      #main-wrapper h2 { font-weight: normal;}



      .post {

      padding: 0px; position: relative; clear: left;

      }



      .status-msg-wrap {

      padding-top:30px !important;

      }



      .status-msg-bg {

      background-color: #fff !important;

      }



      .status-msg-border {

      border:none !important;

      }



      .PostHead { position: relative; clear: left; width: 405px; padding-right: 100px;}

      .PostHead h1 { font-size: 19px; line-height: 19px; letter-spacing: -1px; font-weight: normal; padding: 0px 0px 1px 0px; margin: 0px; color:$colortituloentrada;}

      .PostHead h1 a { color: $colortituloentrada; text-decoration: none;}

      .PostHead h1 a:visited { color: $colortituloentrada; text-decoration: none;}

      .PostHead h1 a:hover { color:#cc0000; text-decoration: none;}

      .PostHead ul { padding: 0px; margin: 0px;}

      .PostHead li { list-style-type: none; display: inline; }

      .PostHead li a { color:#8a98a2; text-decoration: underline;}

      .PostHead li a:visited { color:#8a98a2; text-decoration: underline;}

      .PostHead li a:hover { color:#8a98a2; text-decoration: underline;}



      .post-author { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj67ki6pHGCzLjA2eLUlEGzzfBEoKQBwrj8sHjYHzx6f0qp7sSBLgzcNXZAlzRhB7WSfjVMSqLHFRaFx-LF9tOOR2oYtIlMnZNSk4IJfTRa06_gvTH4XQiL9zmbg8mO15eB8jHmPng7RLg/s1600/PostAuthor.png) no-repeat left center; padding: 1px 5px 1px 12px; margin: 0px; font-size: 10px; color:#8a98a2; font-weight: bold;}

      .post-labels { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBJMELEQTqzzlwRqy-Y0obETPuTWHviqVg3SiHMKJecWBYO4JewqLPnHsB8ocaJyRALof2GPInvOLfebq3I0ZDNZUOTQ6cajS8iDVCfitQmXtAkgBrjF8dmoegS7oMtDyVOzJS6X57LQo/s1600/PostCateg.png) no-repeat left center; padding: 1px 5px 1px 13px; margin: 0px; font-size: 10px; color:#8a98a2; font-weight: bold;}



      .post-title {

      }



      /**/ * html .date-header { right: 30px;} /**/

      .date-header { position: absolute; top: 5px; right: 0px; color:#8a98a2;}



      .post-body { padding: 5px 0px 5px 0px; font-size: 12px; line-height: 17px; background: url(http://img206.imageshack.us/img206/9377/dottediv8.gif) repeat-x bottom; color:#444640; }

      .post-body p { color:#444640; font-size: 12px; line-height: 17px;}

      .post-body p strong {}

      .post-body img {}

      .post-body ul { padding: 10px 0px; margin: 0px; }

      .post-body li { padding: 2px 0px 2px 15px; list-style-type: none; background: url(http://img102.imageshack.us/img102/2571/postcontentliicozd8.png) no-repeat left top; font-size: 11px; line-height: 15px; color:#4c4c4c; }

      .post-body blockquote { padding: 2px 10px; background: #e9f8ff; margin: 0px; color:#336699; }

      .post-body blockquote p { font-size: 11px; padding: 5px 0px; margin: 5px 0px; line-height: 15px;}

      .post-body blockquote li { padding: 2px 0px 2px 15px; list-style-type: none; background: url(http://img206.imageshack.us/img206/4954/postcontentblockliicorn4.png) no-repeat left top; font-size: 11px; line-height: 15px; color:#336699; }

      .post-body blockquote a { color:#0080ca; }

      .post-body blockquote a:visited { color:#0080ca; }

      .post-body blockquote a:hover { color:#003399; }

      .post-body a { text-decoration: underline;}



      .comment-link {

      background: url(http://img514.imageshack.us/img514/6863/postcommw8.png) no-repeat left center;

      color:#336699;

      display:inline;

      font-size:10px;

      font-weight:bold;

      list-style-type:none;

      margin:0px 10px 0px 0px;

      padding:2px 0px 5px 15px;

      }



      .post-footer { padding-top: 10px;}

      .post-footer ul { padding: 0px; margin: 0px;}

      .post-footer li { padding: 2px 0px 5px 15px; margin: 0px 10px 0px 0px; list-style-type: none; display: inline; color:#336699; font-size: 10px; font-weight: bold; }

      .post-footer a { text-decoration: underline; color:#ff3300;}

      .post-footer a:visited { text-decoration: underline; color:#ff3300;}

      .post-footer a:hover { text-decoration: underline; color:#990000;}



      #blog-pager a { padding: 2px 5px 2px 3px; background: #fff; border-right: solid 1px #ccc; font-size: 10px;}

      #blog-pager a:visited { padding: 2px 5px 2px 3px; border-right: solid 1px #ccc; font-size: 10px;}

      #blog-pager a:hover { padding: 2px 5px 2px 3px; border-right: solid 1px #ccc; text-decoration: none; font-size: 10px;}



      .blog-feeds {

      background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMBrFIR57wd-_ltXWKkCaWY1gp5utDMDldsXJnPJzF7lxqVmVXlewaQd3ipFzQRNSVbDBrxhgqo99UcdblvBligmb3IqL-4uV9wPWDTI7l-70J6kIxFrFNQggLVZgjBrYkvVyNRQ3vuno/s1600/icono-feed.gif) no-repeat scroll left bottom;

      padding-left:20px;

      padding-top:15px;

      }



      /*-- (Lateral) --*/



      #sidebar-wrapper {

      background: url(http://img165.imageshack.us/img165/7848/srvl1.gif) no-repeat right top; width: 400px; float: right;

      }

      #sidebar-wrapper h2 {font-size: 14px; letter-spacing: normal; font-weight: bold;

      }





      #sidebar1 .clear, #sidebar2 .clear {

      height: 5px; width: 5px; position: absolute; top: 0px; right: 0px;

      }

      #sidebar1 ul{



      }

      #sidebar1 {

      width: 215px; float: left; padding: 5px 5px 5px 0px; color:#fff;

      }

      #sidebar1 h2 {

      color:$colortituloslateral1;

      font-size:14px;

      letter-spacing:-1px;

      margin:0px;

      padding:5px 0px;

      text-transform:uppercase;

      }



      #sidebar1 p { color:#fff; font-size: 11px;}



      #sidebar1 .widget { position: relative; margin-bottom: 5px; padding: 10px 10px 10px 10px; color:#333; font-size: 11px;}

      #sidebar1 .widget ul { margin: 0px; padding: 0px;}

      #sidebar1 .widget ul li { margin: 0px; padding: 0px; list-style-type: none; font-size: 11px; line-height:16px;}

      #sidebar1 .widget ul li a { background: url(http://img301.imageshack.us/img301/1473/categlidr5.png) no-repeat left top; padding: 1px 0px 2px 10px; font-size: 11px; line-height:16px;}

      #sidebar1 .widget ul li a:visited { background: url(http://img301.imageshack.us/img301/1473/categlidr5.png) no-repeat left top; line-height:16px; }

      #sidebar1 .widget ul li a:hover { background: #ffffff url(http://img301.imageshack.us/img301/1473/categlidr5.png) no-repeat left top; line-height:16px; text-decoration: none;}

      #sidebar1 .widget ul ul li { margin: 0px; padding: 0px 0px 0px 10px; list-style-type: none; font-size: 10px; border-bottom: solid 1px #e1f3fa;}

      #sidebar1 .widget ul ul li a { margin: 0px; padding: 0px; list-style-type: none; font-size: 10px; background: none;}

      #sidebar1 .widget ul ul li a:visited { margin: 0px; padding: 0px; list-style-type: none; font-size: 10px; background: none;}

      #sidebar1 .widget ul ul li a:hover { margin: 0px; padding: 0px; list-style-type: none; font-size: 10px; background: none;}

      #sidebar1 .widget p { color:#333; font-size: 11px;}



      #sidebar1 #Label1 .clear { background: url(http://img205.imageshack.us/img205/412/bluetopix2.gif) no-repeat;}

      #sidebar1 #Label1 { background: #e1f3fa url(http://img205.imageshack.us/img205/472/bluebottomue0.gif) no-repeat right bottom; border-left: solid 10px #c7e5f1;}

      #sidebar1 #Label1 ul { border-top: solid 1px #c7e5f1;}

      #sidebar1 #Label1 ul li { border-bottom: solid 1px #c7e5f1;}

      #sidebar1 #Label1 ul li a { color:#336699;}

      #sidebar1 #Label1 ul li a:visited { color:#336699; }

      #sidebar1 #Label1 ul li a:hover { color:#003366;}

      #sidebar1 #Label1 ul ul li { border-bottom: solid 1px #e1f3fa;}



      #sidebar1 #LinkList1 .clear, #sidebar1 #LinkList2 .clear {

      background: url(http://img212.imageshack.us/img212/969/yellowtopfa7.gif) no-repeat;

      }

      #sidebar1 #LinkList1, #sidebar1 #LinkList2 {

      background: #faf4e1 url(http://img212.imageshack.us/img212/6682/yellowbottomak3.gif) no-repeat right bottom; border-left: solid 10px #ebe3c8;

      }

      #sidebar1 #LinkList1 ul, #sidebar1 #LinkList2 ul { border-top: solid 1px #ebe3c8;}

      #sidebar1 #LinkList1 ul li, #sidebar1 #LinkList2 ul li { border-bottom: solid 1px #ebe3c8;}

      #sidebar1 #LinkList1 ul li a, #sidebar1 #LinkList2 ul li a { color:#cc6600;}

      #sidebar1 #LinkList1 ul li a:visited, #sidebar1 #LinkList2 ul li a:visited { color:#cc6600;}

      #sidebar1 #LinkList1 ul li a:hover, #sidebar1 #LinkList2 ul li a:hover { color:color:#993300;}



      #sidebar-2 { height: 5px; width: 5px; position: absolute; top: 0px; right: 0px;}

      /**/ *html #sidebar-2 { right: 5px;} /**/



      #sidebar1 .Feed, #sidebar1 .BlogArchive, #sidebar1 .HTML, #sidebar1 .BloggerButton, #sidebar1 .NewsBar, #sidebar1 .VideoBar, #sidebar1 .AdSense, #sidebar1 .Profile, #sidebar1 .Text {

      background: #f2e2d5 url(http://img208.imageshack.us/img208/1705/pinkbottomfq0.gif) no-repeat right bottom; border-left: solid 10px #e4cab5;

      }



      #sidebar1 .Feed .clear, #sidebar1 .BlogArchive .clear, #sidebar1 .HTML .clear, #sidebar1 .BloggerButton .clear, #sidebar1 .NewsBar .clear, #sidebar1 .VideoBar .clear, #sidebar1 .AdSense .clear, #sidebar1 .Profile .clear, #sidebar1 .Text .clear {

      background: url(http://img218.imageshack.us/img218/3722/pinktopjv8.gif) no-repeat;

      }



      #sidebar1 .Feed ul, #sidebar1 .BlogArchive ul, #sidebar1 .HTML ul, #sidebar1 .BloggerButton ul, #sidebar1 .NewsBar ul, #sidebar1 .VideoBar ul, #sidebar1 .AdSense ul, #sidebar1 .Profile ul, #sidebar1 .Text ul{

      border-top: solid 1px #e4cab5;

      }



      #sidebar1 .Feed ul li, #sidebar1 .BlogArchive ul li, #sidebar1 .HTML ul li, #sidebar1 .BloggerButton ul li, #sidebar1 .NewsBar ul li, #sidebar1 .VideoBar ul li, #sidebar1 .AdSense ul li, #sidebar1 .Profile ul li, #sidebar1 .Text ul li {

      border-bottom: solid 1px #e4cab5;

      }



      #sidebar1 .Feed ul li a, #sidebar1 .BlogArchive ul li a, #sidebar1 .HTML ul li a, #sidebar1 .BloggerButton ul li a, #sidebar1 .NewsBar ul li a, #sidebar1 .VideoBar ul li a, #sidebar1 .AdSense ul li a, #sidebar1 .Profile ul li a, #sidebar1 .Text ul li a {

      color:$colortextolateral1;

      }



      #sidebar2 { position: relative; width: 160px; float: right; padding: 10px; color:#fff; font-size: 11px; }

      #sidebar2 h3 { background: url(http://img208.imageshack.us/img208/1596/srrh3hz9.gif) repeat-x left bottom; color:#ffffff; padding: 0px 0px 5px 0px; margin: 0px 0px 5px 0px; letter-spacing: -1px; }

      #sidebar2 h2 { background: url(http://img208.imageshack.us/img208/7308/srrh3ka3.gif) repeat-x left bottom; color:$colortituloslateral2; padding: 0px 0px 5px 0px; margin: 0px 0px 5px 0px; letter-spacing: -1px; }

      #sidebar2 ul { padding: 0px; margin: 0px;}

      #sidebar2 li { padding: 0px 0px 0px 6px; margin: 0px; list-style-type: none; background: url(http://img218.imageshack.us/img218/4167/srricohb3.png) no-repeat left top; color:#e4e4e4; font-size: 10px;}

      #sidebar2 li a { color:$colortextolateral2;}

      #sidebar2 li a:visited { color:$colortextolateral2; }

      #sidebar2 li a:hover { color:$colortextolateral2;}

      #sidebar2 p { color:$colortextolateral2; font-size: 11px;}



      /*-- (Pie de página) --*/



      #footer-wrapper {

      background: #fff url(http://img256.imageshack.us/img256/9702/footergq3.gif) no-repeat left bottom; width: 505px; position: relative; clear: left; padding: 15px 30px 15px 30px; margin: 0px 0px 0px 15px;

      }



      .FL { position: absolute; top: -8px; left: -15px; height: 8px; width: 8px; background: url(http://img207.imageshack.us/img207/1572/fllp0.gif) no-repeat left top; }

      .FR { position: absolute; top: -8px; right: -400px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOsMjEAJMGYpeSWC6VO889tjYEN7e8Du2PTpyAiKDpkeUwrtCFeJltQiudM3Aw_mRKymm2Juwlm89kwtBJebNcRForKCWajoMXrxfyozk4m1LMstJVYHQ2Dp1SFeDzkVrSvRDp5yacsAQ/s1600/FR.gif) no-repeat left top; height: 8px; width: 188px; }



      #footer-wrapper .links {

      font-size: 10px; color:#8a8a93; padding: 0px; margin: 0px;

      }



      #footer-wrapper .links a { color:#8a8a93; text-decoration: underline;}

      #footer-wrapper .links a:visited { color:#8a8a93; text-decoration: underline;}

      #footer-wrapper .links a:hover { color:#8a8a93; text-decoration: underline;}



      /*-- (Comentarios) --*/



      #comments h4 {

      color:#CC0000;

      font-size:14px;

      font-weight:bold;

      letter-spacing:-1px;

      margin:0px 0px 5px;

      padding:5px 0px;

      }



      #comments dl {



      }



      .comment-author {

      color:#333333;

      display:block;

      font-size:11px;

      font-weight:bold;

      letter-spacing:-1px;

      line-height:14px;

      margin:0px;

      padding:0px;

      }



      .comment-body {

      color:#484C4F;

      font-size:11px;

      line-height:15px;

      margin:0px;

      padding:5px 0px;

      }



      .comment-footer {

      border:0px none;

      margin:0px;

      font-size:11px;

      line-height:15px;

      }



      .comment-timestamp, .comment-timestamp a, .comment-timestamp a:hover {

      color:#7E7E7E!important;

      }



      .comment-footer a, .comment-footer a:hover{

      color:#CC0000;

      }



      ]]></b:skin>

      <link href='http://plantillasblogyweb2.googlepages.com/estilos-generales.css' rel='stylesheet' type='text/css'/>

      <link href='http://plantillasblogyweb2.googlepages.com/blogy-smashing.css' rel='stylesheet' type='text/css'/> </head>



      <body>

      <div id='outer-wrapper'><div id='wrap2'>



      <!-- links para navegadores de texto -->

      <span id='skiplinks' style='display:none;'>

      <a href='#main'>ir a principal </a> |

      <a href='#sidebar'>Ir a lateral</a>

      </span>



      <!-- (Cabecera) -->

      <div id='header-wrapper'>

      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

      <b:widget id='Header1' locked='true' title='Blogy Smashing (cabecera)' type='Header'>

      <b:includable id='main'>



      <b:if cond='data:useImage'>

      <b:if cond='data:imagePlacement == "REPLACE"'>

      <!--Show just the image, no text-->

      <div id='header-inner'>

      <a expr:href='data:blog.homepageUrl' style='display: block'>

      <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

      </a>

      </div>

      <b:else/>

      <!--Show image as background to text-->

      <div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-repeat: no-repeat; " + "width: " + data:width + "px; " + "height: " + data:height + "px;"' id='header-inner'>

      <div class='titlewrapper' style='background: transparent'>

      <h1 class='title' style='background: transparent; border-width: 0px'>

      <b:if cond='data:blog.url == data:blog.homepageUrl'>

      <data:title/>

      <b:else/>

      <a expr:href='data:blog.homepageUrl'><data:title/></a>

      </b:if>

      </h1>

      </div>

      <div class='descriptionwrapper'>

      <p class='description'><span><data:description/></span></p>

      </div>

      </div>

      </b:if>

      <b:else/>

      <!--No header image -->

      <div id='header-inner'>

      <div class='titlewrapper'>

      <h1 class='title'>

      <b:if cond='data:blog.url == data:blog.homepageUrl'>

      <data:title/>

      <b:else/>

      <a expr:href='data:blog.homepageUrl'><data:title/></a>

      </b:if>

      </h1>

      </div>

      <div class='descriptionwrapper'>

      <p class='description'><span><data:description/></span></p>

      </div>

      </div>

      </b:if>

      </b:includable>

      </b:widget>

      </b:section>



      <div class='Search'>

      <form action='/search' method='get'>

      <input class='keyword' name='q' type='text'/>

      <div id='buttonsearch'><input alt='Search' class='search' name='submit' src='http://img205.imageshack.us/img205/3139/buttontransparentca4.png' title='Search' type='image'/>

      </div>

      </form>

      </div>



      <div class='Syn'>

      <ul>

      <li><a href='http://tublog.blogspot.com/feeds/posts/default'>Entradas</a> (RSS)</li>

      <li><a href='http://tublog.blogspot.com/feeds/comments/default'>Comentarios</a> (RSS)</li>

      </ul>

      </div>



      </div>



      <!-- (Contenedor) -->

      <div id='content-wrapper'>



      <!-- (Principal) -->

      <div id='main-wrapper'>



      <div class='Menu'>

      <ul>

      <li><a class='on' href='#'><span>Inicio</span></a></li>

      <li class='page_item'><a href='#' title='Fotos'><span>Fotos</span></a></li>

      <li class='page_item'><a href='http://blogandweb.com' title='Soporte'><span>Soporte</span></a></li>

      </ul>

      </div>



      <b:section class='main' id='main' showaddelement='no'>

      <b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'>

      <b:includable id='nextprev'>

      <div class='blog-pager' id='blog-pager'>

      <b:if cond='data:newerPageUrl'>

      <span id='blog-pager-newer-link'>

      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>

      </span>

      </b:if>



      <b:if cond='data:olderPageUrl'>

      <span id='blog-pager-older-link'>

      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>

      </span>

      </b:if>



      <b:if cond='data:blog.homepageUrl != data:blog.url'>

      <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

      <b:else/>

      <b:if cond='data:newerPageUrl'>

      <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

      </b:if>

      </b:if>



      </div>

      <div class='clear'/>

      </b:includable>

      <b:includable id='backlinks' var='post'>

      <a name='links'/><h4><data:post.backlinksLabel/></h4>

      <b:if cond='data:post.numBacklinks != 0'>

      <dl class='comments-block' id='comments-block'>

      <b:loop values='data:post.backlinks' var='backlink'>

      <div class='collapsed-backlink backlink-control'>

      <dt class='comment-title'>

      <span class='backlink-toggle-zippy'>&#160;</span>

      <a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>

      <b:include data='backlink' name='backlinkDeleteIcon'/>

      </dt>

      <dd class='comment-body collapseable'>

      <data:backlink.snippet/>

      </dd>

      <dd class='comment-footer collapseable'>

      <span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span>

      <span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span>

      </dd>

      </div>

      </b:loop>

      </dl>

      </b:if>

      <p class='comment-footer'>

      <a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + "_backlinks-create-link"' target='_blank'><data:post.createLinkLabel/></a>

      </p>

      </b:includable>

      <b:includable id='post' var='post'>

      <div class='post hentry uncustomized-post-template'><div class='PostHead'>

      <a expr:name='data:post.id'/>

      <b:if cond='data:post.title'>

      <h1 class='post-title entry-title'>

      <b:if cond='data:post.link'>

      <a expr:href='data:post.link'><data:post.title/></a>

      <b:else/>

      <b:if cond='data:post.url'>

      <a expr:href='data:post.url'><data:post.title/></a>

      <b:else/>

      <data:post.title/>

      </b:if>

      </b:if>

      </h1>

      </b:if>



      <span class='post-author vcard'>

      <b:if cond='data:top.showAuthor'>

      <data:top.authorLabel/>

      <span class='fn'><data:post.author/></span>

      </b:if>



      <b:if cond='data:top.showTimestamp'>

      <data:top.timestampLabel/>

      <b:if cond='data:post.url'>

      <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>

      </b:if>

      </b:if>

      </span>



      <span class='post-labels'>

      <b:if cond='data:post.labels'>

      <data:postLabelsLabel/>

      <b:loop values='data:post.labels' var='label'>

      <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>

      </b:loop>

      </b:if>

      </span>



      <b:if cond='data:post.dateHeader'>

      <small class='date-header'><data:post.dateHeader/></small>

      </b:if>



      </div>



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



      <div class='post-body entry-content'>

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

      <div style='clear: both;'/> <!-- clear for photos floats -->

      </div>

      <div class='post-footer'>

      <p class='post-footer-line post-footer-line-1'>



      <span class='post-comment-link'>

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



      <b:if cond='data:post.allowComments'>

      <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>

      </b:if>

      </b:if>

      </span>



      <!-- backlinks -->

      <span class='post-backlinks post-comment-link'>

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

      <b:if cond='data:post.showBacklinks'>

      <a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>

      </b:if>

      </b:if>

      </span>



      <span class='post-icons'>

      <!-- email post links -->

      <b:if cond='data:post.emailPostUrl'>

      <span class='item-action'>

      <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>

      <span class='email-post-icon'>&#160;</span>

      </a>

      </span>

      </b:if>



      <!-- quickedit pencil -->

      <b:include data='post' name='postQuickEdit'/>

      </span>

      </p>



      <p class='post-footer-line post-footer-line-2'>

      </p>



      <p class='post-footer-line post-footer-line-3'/>

      </div>

      </div>

      </b:includable>

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

      <span expr:class='"item-control " + data:comment.adminClass'>

      <a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>

      <span class='delete-comment-icon'>&#160;</span>

      </a>

      </span>

      </b:includable>

      <b:includable id='status-message'>

      <b:if cond='data:navMessage'>

      <div class='status-msg-wrap'>

      <div class='status-msg-body'>

      <data:navMessage/>

      </div>

      <div class='status-msg-border'>

      <div class='status-msg-bg'>

      <div class='status-msg-hidden'><data:navMessage/></div>

      </div>

      </div>

      </div>

      <div style='clear: both;'/>

      </b:if>

      </b:includable>

      <b:includable id='feedLinks'>

      <b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->

      <b:if cond='data:feedLinks'>

      <div class='blog-feeds'>

      <b:include data='feedLinks' name='feedLinksBody'/>

      </div>

      </b:if>



      <b:else/> <!--Post feed links -->

      <div class='post-feeds'>

      <b:loop values='data:posts' var='post'>

      <b:if cond='data:post.allowComments'>

      <b:if cond='data:post.feedLinks'>

      <b:include data='post.feedLinks' name='feedLinksBody'/>

      </b:if>

      </b:if>

      </b:loop>

      </div>

      </b:if>

      </b:includable>

      <b:includable id='backlinkDeleteIcon' var='backlink'>

      <span expr:class='"item-control " + data:backlink.adminClass'>

      <a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>

      <span class='delete-comment-icon'>&#160;</span>

      </a>

      </span>

      </b:includable>

      <b:includable id='feedLinksBody' var='links'>

      <div class='feed-links'>

      <data:feedLinksMsg/>

      <b:loop values='data:links' var='f'>

      <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>

      </b:loop>

      </div>

      </b:includable>

      <b:includable id='postQuickEdit' var='post'>

      <b:if cond='data:post.editUrl'>

      <span expr:class='"item-control " + data:post.adminClass'>

      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>

      <span class='quick-edit-icon'>&#160;</span>

      </a>

      </span>

      </b:if>

      </b:includable>

      <b:includable id='comments' var='post'>

      <div class='comments' id='comments'>

      <a name='comments'/>

      <b:if cond='data:post.allowComments'>

      <h4>

      <b:if cond='data:post.numComments == 1'>

      1 <data:commentLabel/>:

      <b:else/>

      <data:post.numComments/> <data:commentLabelPlural/>:

      </b:if>

      </h4>



      <dl id='comments-block'>

      <b:loop values='data:post.comments' var='comment'>

      <dt class='comment-author' expr:id='"comment-" + data:comment.id'>

      <a expr:name='"comment-" + data:comment.id'/>

      <b:if cond='data:comment.authorUrl'>

      <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

      <b:else/>

      <data:comment.author/>

      </b:if>

      <data:commentPostedByMsg/>

      </dt>

      <dd class='comment-body'>

      <b:if cond='data:comment.isDeleted'>

      <span class='deleted-comment'><data:comment.body/></span>

      <b:else/>

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

      </b:if>

      </dd>

      <dd class='comment-footer'>

      <span class='comment-timestamp'>

      <a expr:href='"#comment-" + data:comment.id' title='comment permalink'>

      <data:comment.timestamp/>

      </a>

      <b:include data='comment' name='commentDeleteIcon'/>

      </span>

      </dd>

      </b:loop>

      </dl>



      <p class='comment-footer'>

      <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

      </p>

      </b:if>



      <div id='backlinks-container'>

      <div expr:id='data:widget.instanceId + "_backlinks-container"'>

      <b:if cond='data:post.showBacklinks'>

      <b:include data='post' name='backlinks'/>

      </b:if>

      </div>

      </div>

      </div>

      </b:includable>

      <b:includable id='main' var='top'>

      <!-- posts -->

      <div class='blog-posts hfeed'>



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



      <data:adStart/>

      <b:loop values='data:posts' var='post'>



      <b:include data='post' name='post'/>

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

      <b:include data='post' name='comments'/>

      </b:if>

      <b:if cond='data:post.includeAd'>

      <data:adEnd/>

      <data:adCode/>

      <data:adStart/>

      </b:if>

      </b:loop>

      <data:adEnd/>

      </div>



      <!-- navigation -->

      <b:include name='nextprev'/>



      <!-- feed links -->

      <b:include name='feedLinks'/>

      </b:includable>

      </b:widget>

      </b:section>

      </div>



      <!-- (Lateral) -->

      <div id='sidebar-wrapper'>

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

      <b:widget id='Label1' 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'>

      <ul>

      <b:loop values='data:labels' var='label'>

      <li>

      <b:if cond='data:blog.url == data:label.url'>

      <data:label.name/>

      <b:else/>

      <a expr:href='data:label.url'><data:label.name/></a>

      </b:if>

      (<data:label.count/>)

      </li>

      </b:loop>

      </ul>



      <b:include name='quickedit'/>

      </div>

      </b:includable>

      </b:widget>

      <b:widget id='LinkList1' locked='false' title='Links' type='LinkList'>

      <b:includable id='main'>



      <b:if cond='data:title'><h2><data:title/></h2></b:if>

      <div class='widget-content'>

      <ul>

      <b:loop values='data:links' var='link'>

      <li><a expr:href='data:link.target'><data:link.name/></a></li>

      </b:loop>

      </ul>

      <b:include name='quickedit'/>

      </div>

      </b:includable>

      </b:widget>

      <b:widget id='Feed1' locked='false' title='Ser Turista' type='Feed'>

      <b:includable id='main'>

      <h2><data:title/></h2>

      <div class='widget-content'>

      <ul expr:id='data:widget.instanceId + "_feedItemListDisplay"'>

      <b:loop values='data:feedData.items' var='i'>

      <li>

      <span class='item-title'>

      <a expr:href='data:i.alternate.href'>

      <data:i.title/>

      </a>

      </span>

      <b:if cond='data:showItemDate'>

      <b:if cond='data:i.str_published != ""'>

      <span class='item-date'>

      &#160;-&#160;<data:i.str_published/>

      </span>

      </b:if>

      </b:if>

      <b:if cond='data:showItemAuthor'>

      <b:if cond='data:i.author != ""'>

      <span class='item-author'>

      &#160;-&#160;<data:i.author/>

      </span>

      </b:if>

      </b:if>

      </li>

      </b:loop>

      </ul>

      <b:include name='quickedit'/>

      </div>

      </b:includable>

      </b:widget>

      </b:section>



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

      <b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'>

      <b:includable id='main'>

      <b:if cond='data:title'>

      <h2><data:title/></h2>

      </b:if>

      <div class='widget-content'>

      <div id='ArchiveList'>

      <div expr:id='data:widget.instanceId + "_ArchiveList"'>

      <b:if cond='data:style == "HIERARCHY"'>

      <b:include data='data' name='interval'/>

      </b:if>

      <b:if cond='data:style == "FLAT"'>

      <b:include data='data' name='flat'/>

      </b:if>

      <b:if cond='data:style == "MENU"'>

      <b:include data='data' name='menu'/>

      </b:if>

      </div>

      </div>

      <b:include name='quickedit'/>

      </div>

      </b:includable>

      <b:includable id='flat' var='data'>

      <ul>

      <b:loop values='data:data' var='i'>

      <li class='archivedate'>

      <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)

      </li>

      </b:loop>

      </ul>

      </b:includable>

      <b:includable id='menu' var='data'>

      <select expr:id='data:widget.instanceId + "_ArchiveMenu"'>

      <option value=''><data:title/></option>

      <b:loop values='data:data' var='i'>

      <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>

      </b:loop>

      </select>

      </b:includable>

      <b:includable id='interval' var='intervalData'>

      <b:loop values='data:intervalData' var='i'>

      <ul>

      <li expr:class='"archivedate " + data:i.expclass'>

      <b:include data='i' name='toggle'/>

      <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>

      (<span class='post-count'><data:i.post-count/></span>)

      <b:if cond='data:i.data'>

      <b:include data='i.data' name='interval'/>

      </b:if>

      <b:if cond='data:i.posts'>

      <b:include data='i.posts' name='posts'/>

      </b:if>

      </li>

      </ul>

      </b:loop>

      </b:includable>

      <b:includable id='toggle' var='interval'>

      <b:if cond='data:interval.toggleId'>

      <b:if cond='data:interval.expclass == "expanded"'>

      <a class='toggle' expr:href='data:widget.actionUrl + "&amp;action=toggle" + "&amp;dir=close&amp;toggle=" + data:interval.toggleId + "&amp;toggleopen=" + data:toggleopen'>

      <span class='zippy toggle-open'>&#9660; </span>

      </a>

      <b:else/>

      <a class='toggle' expr:href='data:widget.actionUrl + "&amp;action=toggle" + "&amp;dir=open&amp;toggle=" + data:interval.toggleId + "&amp;toggleopen=" + data:toggleopen'>

      <span class='zippy'>&#9658; </span>

      </a>

      </b:if>

      </b:if>

      </b:includable>

      <b:includable id='posts' var='posts'>

      <ul class='posts'>

      <b:loop values='data:posts' var='i'>

      <li><a expr:href='data:i.url'><data:i.title/></a></li>

      </b:loop>

      </ul>

      </b:includable>

      </b:widget>

      </b:section>

      </div>



      <!-- Limpiar flotación-->

      <div class='clear'/>



      </div> <!-- fin de capa content-wrapper -->



      <!-- (Pie de página) -->

      <div id='footer-wrapper'>



      <div class='FL'/>

      <div class='FR'/>



      <!-- Este es un incentivo al trabajo en diseñar y adaptar esta plantilla, llega a ti de forma muy fácil y sin costo, tampoco cuesta nada dejes los link, gracias y que te sea útil! -->

      <p class='links'><a href='http://www.smashingmagazine.com/'>Smashing Magazine</a> | Diseño de <a href='http://designdisease.com/'>Design Disease</a>

      | A <a href='http://www.blogger.com'>Blogger</a> por

      <a href='http://serturista.com/'>Ser turista</a></p>

      </div>



      </div></div> <!-- fin de capa outer-wrapper -->

      </body>

      </html>












Publicado por Guti en 9:54 0 comentarios  

Pulsar para oir post hablado

Plantilla Podsolnuh

viernes, 9 de noviembre de 2007


[+]






Les muestro una bonita plantilla de 3 columnas, solamente copien el código en la parte superior con clic en el signo + y añandanlo a su página


[+]






Publicado por Guti en 15:43 1 comentarios  

Pulsar para oir post hablado
 
Comentarios