19 abril 2011

Introduciendo la plantilla para Blogger simposium


Hola, ¿cómo están?; hoy he terminado otra plantilla y aquí la tienen lista para ser usada en su blog ;).

Ideal para blogs personales, es estilo grungre, aunque el iphone que usé le da un toque de sofisticación, ¿no lo creen?;  espero que les guste.

Características
  • Plantilla de 2 columnas
  • Sidebar fijo, con fondo de iphone (no en IE6 aunque se puede implementar un hack facilmente)
  • Iconos sociales en la columna lateral 
  • Menú con fuentes y colores personalizable que son los títulos de las páginas estáticas
  • Buscador de google integrado en la cabecera, por lo que no tendrás que editarlo para que funcione, excepto por las preferencias de búsqueda que trae consigo el widget
  • Resumen automático en las entradas
  • Fecha tipo calendario
  • Cajas de comentarios personalizados
Es necesario configurar la fecha de la pestaña azul para que se muestre correctamente  y agregar el código en la columna lateral, para que se muestren los iconos sociales, agregando los respectivos enlaces, pero es rápido y fácil.

Configuración de la Fecha
Tienes que ir a Configuración►Formato y en la opción que dice: "Formato de cabecera de fecha" seleccionar la penúltima opción (una antes de la ultima) . 

Agregar íconos en la columna lateral
Deberás ir a Diseño ►elementos de la página y agregar el siguiente código en la columna lateral, eligiendo la opción Html/JavaScript, pero antes, puedes pegar el código en una nota de tu computadora, para agregar los enlaces correspondientes de tu feed, la página de twitter y facebook, repectivamente donde está los gatitos "#", es fácil solo sigue las lineas  y colores que puse, para saber cual corresponde a cada uno.

<ul id="marcadores"><li><a class="rss" href="#"  title="Suscribirse"></a></li><li><a class="twitter" href="#" title="Seguir en Twitter"></a></li><li><a class="Facebook" href="#" title="Seguir en Facebook"></a></li><li><a class="Blogger" href="http://blogger.com/home" title="Ingresar a Blogger"></a></li></ul> 
Pueden cambiar todas las fuentes y colores a su gusto, desde el  diseñador de plantillas yendo a Avanzado,  cambiar los colores del buscador y de la pestaña de la fecha yendo a la Edición de HTML de la plantilla.

Siéntete libre de comentar o preguntar cualquier duda, o sugerencia  :D.

Disfrútenla, y hasta la próxima.


...o si prefieres copiar y pegar el código en la edición de HTML de tu plantilla (recuerda que tienes que borrar el que tienes, y pegar este nuevo, luego, seleccionar la opción de Conservar widgets, para no perder los widgets que tengas en tu blog) aquí lo tienen:

<?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 expr:dir='data:blog.languageDirection' 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[/*

Blogger Template Style
Base: Mínima
Name: simposium
Date: Abril 2011
Adaptación y Diseño: compartidísimo
URL:http://compartidisimo.blogspot.com
 */

/* Variable definitions
   ====================

<Variable name="menuTextColor" description="Menu Color texto"
type="color" default="#ffffff" value="#1f272e">
<Variable name="menuHoverTextColor" description="Menu color texto Hover"
type="color" default="#9D1961" value="#d81d75">
<Variable name="menuTextFont" description="Menu tipo de fuente"
type="font"default="normal normal 77% Verdana, sans-serif" value="normal normal 19px Lobster">

   <Variable name="textcolor" description="Text Color"
             type="color" default="#ccc" value="#333333">
   <Variable name="linkcolor" description="Link Color"
             type="color" default="#9ad" value="#d81d75">
   <Variable name="pagetitlecolor" description="Blog Title Color"
             type="color" default="#ccc" value="#d014c6">
   <Variable name="descriptioncolor" description="Blog Description Color"
             type="color" default="#777" value="#aca6ab">
   <Variable name="titlecolor" description="Post Title Color"
             type="color" default="#ad9" value="#0c3a72">
   <Variable name="sidebarcolor" description="Sidebar Title Color"
             type="color" default="#777" value="#41290c">
   <Variable name="sidebartextcolor" description="Sidebar Text Color"
             type="color" default="#999" value="#4e2a05">
   <Variable name="visitedlinkcolor" description="Visited Link Color"
             type="color" default="#a7a" value="#d014c6">
   <Variable name="bodyfont" description="Text Font"
             type="font" default="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal normal 100% Verdana, Geneva, sans-serif">
   <Variable name="headerfont" description="Sidebar Title Font"
             type="font"
             default="normal bold 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal bold 78% Cardo">
   <Variable name="pagetitlefont" description="Blog Title Font"
             type="font"
             default="normal bold 200% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal normal 30px Syncopate">
   <Variable name="descriptionfont" description="Blog Description Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif" value="italic normal 14px Verdana, Geneva, sans-serif">
   <Variable name="postfooterfont" description="Post Footer Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 16px Schoolbell">
*/

#navbar-iframe {
        height: 0px;
        visibility: hidden;
        display: none;
}

body {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT7vcgLrVkcUE1wSsNxZRXBgf2CrflMp4NcjzvLKahKA8fMmJln3fSiuupz50FWS9SKI1U0sriI_9zz-4pfCVKRJHMu3wYM8xTWJ3xVdlShBuTuPqCAa-UyICBvQFex9eRXr4XEXC1gyP4/s1600/woodpattern.jpg) repeat top left;
margin:0 auto;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: left;
}
#wrap3{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgns_fuxadqXVWW74pE-1HYDN0n1Q2vjaoaev3duHoEv-FIOFFCBhqYUuHkmvjIPhJD493CuqmD1BrrMepjEQC_jKmjv2xD3g4jDeqijqGzQPvOUdDI6zAwGGmvfXiYES0l_o3DgpPL3K9N/s1600/bodyaft.jpg) no-repeat top left;
margin:1px 0 0 0;
padding:0;
width:100%;
position: relative;
height: 576px;
}

a:link {
color:$linkcolor;
text-decoration:none;
  }
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
  }

a:hover {
  color:$hovercolor;
  text-decoration:none;
}
  
/* Header o cabecera */
#header-wrapper {
margin:0 auto;
padding:0;
width: 980px;
height:250px;
position:relative;
background: none;
}

#header {
margin:0 auto;
text-align:left;
color:$pagetitlecolor;
padding:0;
width:900px;
height:160px;
position:relative;
top:0;
left:0;
}
#header h1 {
position: relative;
left: 20px;
top:40px;
margin: 0;
padding: 0 0 0 5px;
font: $pagetitlefont;
display: block;
max-width: 650px;
line-height:.8em;
text-shadow: -2px 1px 0px #56c3e7;
}

#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }

#header a:hover {
  color:$pagetitlecolor;
  }

#header .description {
position:relative;
top:30px;
padding:0px 0 15px 27px;
max-width:650px;
text-transform:none;
letter-spacing:.2em;
line-height: 1.0em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin:0;
}

a img {
  border-width:0;
  }


/* Date o Fecha  */

#fecha {
display: block;
position: relative;
width:50px;
height:50px;
float:left;
margin: 0;
padding: 3px 0px 8px 0px;
background:#56c3e7 ;
border-top: 1px solid #48a4c2;
border-left: 1px solid #48a4c2;
}

.fecha_mes {
display: block;
font-size: 12px;
font-weight:bold;
padding:5px 0 0 11px;
color:#1a1001;
text-transform: uppercase;
text-shadow: 1px 1px 1px #ffffff;
}

.fecha_anio {
display: block;
padding:0 0 0 0;
font-size: 11px;

}

.fecha_dia {
display: block;
font-size: 19px;
font-weight:bold;
padding:3px 0 0 10px;
color:#1a1001;
text-shadow: 1px 1px 1px #fff;
}
.fecha_anio{display:none;}

/* Outer-Wrapper o Envoltura principal*/
.clear {
  clear: both;
}
#outer-wrapper {
position:relative;
top:0; left:0;
margin:0 0 0 14px;
width: 980px;
padding:0px;
font: $bodyfont;
clear:both;
}
#content-wrapper {
position:relative;
width:990px;
margin:0 auto;
padding:0;
background:none;
text-align: left;
}

#center{
margin:0;
}

#main {
width: 660px;
margin: 0;
background:none;
float: right;
overflow: hidden;
display:inline;
word-wrap: break-word;
}
#sidebar-wrapper {
position:fixed;
top:108px;
left:20px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6HW5IIh_iOrPIQH1A9V8eLRz5VxRm9UdLWp3iW1fbr7mLznGrLG9vd8bBJ7lsoPscGVcg9C6ozkhKasVySGLRFnk__blDZMyYH8FCeZ1OSDKnCug0DqxYO4pi_fEU5CnUf-wI1UCJ32CS/s1600/iphonenp.png) no-repeat;
margin:0;
padding:0;
width:300px;
height:549px;
float: left;
line-height:1.2em;
overflow: hidden;
display:inline;
word-wrap: break-word;
}
/* Headings */
h2 {
margin:1.5em 0 .75em;
line-height: 1.4em;
text-transform:none;
letter-spacing:.2em;
color:$sidebarcolor;
}
.comment-link {
  margin-left:.6em;
}

/* Menu  */
#PageList1 h2{display:none;
}
.menu{
width:540px;
position:relative;
top:-28px;
left:0px;
display: inline-block;
float: right;
margin:0;
padding:20px 0 0 0;
height:40px;
white-space: nowrap;
 }
.menu ul{
margin:0;
padding:0;
list-style-type: none;
}
.menu li{
float:left;
margin:0;
padding:0;
}
.menu li a{
padding:10px 12px 6px 10px;
margin: 0 12px 0 10px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi39UWRZAfd43L0a19nCMC1mIZVnnD5RCLcipbO2UPJslE27KvxLAfGDdr8jyRYuAlZPtjg_RL9pf1lKEQMGHc1aR7j6HcLV8Syd1F4MNdsAsdfjsf8KNUEj2CFxMAWteb7i-pEHTGJ0tXQ/s400/menu.gif) no-repeat;
display: inline-block;
height:25px;
color: $menuTextColor;
font: $menuTextFont;
text-align: center;
text-decoration: none;
text-shadow:1px 1px 1px #fff;
}
.menu li a{
float: none;
}
.menu li a:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi37maBa99RXErWKu2tGlbIC5zBKWt7y4j8IpCtkTCmH5qfIfGpcapoXEdXOULQlloXdAM1Dl_FTvSTF56H43uJ1S6pl8zUiIgH2szLJ3kUUfTIq-AP45kwdAz9-IFNjnpB0-ZJdyddIurU/s400/menusel.png) no-repeat;
color: $menuHoverTextColor;
}
.menu li.selected a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi37maBa99RXErWKu2tGlbIC5zBKWt7y4j8IpCtkTCmH5qfIfGpcapoXEdXOULQlloXdAM1Dl_FTvSTF56H43uJ1S6pl8zUiIgH2szLJ3kUUfTIq-AP45kwdAz9-IFNjnpB0-ZJdyddIurU/s400/menusel.png) no-repeat;
margin: 0;
padding: 12px 3px 6px 3px;
font-weight: normal;
text-shadow: 1px 1px 1px #fff;
}
#crosscol-wrapper {
margin:0 auto;
width:460px;
float: right;
}
/* Contenedor y estilos del buscador */
#search-conte{
width: 190px;
height: 70px;
position: absolute;
top:220px;
right:0px;
margin:0;
float: right;
background: none;
display: block;
opacity:0.4; filter:alpha(opacity=40)
}
.search-c h2 {
display: none;}

input.gsc-search-button {
color: #000000;
border: 1px solid #16b5e9;
background: #16bff7;
margin: 0;
padding:0 3px 0 2px;
height: 26px;
text-shadow: 1px 1px 1px #ffffff
}

input.gsc-input {
color: #271a02;
background: #c8bf31;
border: 1px solid #9a9212 !important;
padding: 4px
}
.gsc-branding-text, .gsc-branding-img-noclear {
display:none;
}

/* Posts o Estilos de las entradas */
.post {
padding:10px 7px 14px 9px;
margin: 0 0 30px 51px;
border-top:1px solid #e9dfcf;
letter-spacing:.0em;
line-height:.8em;
font-size:17px;
background:#FFFFFF;
webkit-box-shadow:3px 2px 7px #000000;
-moz-box-shadow:3px 2px 7px #000000;
box-shadow:3px 2px 7px #000000;
}
.post h3 {
margin: -10px 0 0 -9px;
padding: 9px 0 20px 18px;
font-size:120%;
font-weight:normal;
text-shadow: 1px 1px 1px  #cccccc;
color:$titlecolor;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb3cntaoQYC-myGy2Nrax5I13mOzhxQ9Kn4wQGUv770NMB6yAnjLoS4FGnN9JpcN4Kmp_0ixc84pCn4oNnBLKKp9pylXVrGslyfxK7-c3qiMjBh2CaFkCFPFRu55tKfachAd59DOvFJk1v/s1600/3p.gif) no-repeat top left;
line-height:1.6em;
display: block;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
  color:$textcolor;
}
.post-body {
line-height:1.4em;
}
.post-body ul li {
list-style-type: square;
}
.post-body blockquote {
  line-height:1.3em;
}
.post-footer {
margin:10px 0 0 0;
padding:10px 0 0 0;
color:$sidebarcolor;
text-transform:none;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
padding:5px 6px 15px 0;
/*background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisPXcO-23gsQkq0npGswtcXOZdu4-PyQW8oqWQddP6sWNckvfuLNn_gS_XKT-9pX30y7mzqnxoLXTP9XuVwDnlMtImhM83zWAOW94k5d7Wl7MFgx8586YTa-Oo-G4ammZEQA0_Xc4wHj0L/s1600/ttac.gif) no-repeat top left;*/
}

.post img, table.tr-caption-container {
padding:0px;
}

.post-body img{
margin: 5px auto 0;
padding: 3px;
background: #f9f4ea;
padding: 4px;
}
.tr-caption-container img {
  border: none;
  padding: 0;
}
.post blockquote {
 margin: 1em 20px;
padding:8px 5px 8px 5px;
border-left:4px #CEF6F5 solid;
border-right:1px #CEF6F5 solid;
border-top:1px #CEF6F5 solid;
border-bottom:1px #CEF6F5 solid;
background:#f8f8f8;
overflow:auto;
}
.post blockquote p {
  margin: .75em 0;
}

/* Comments o Comentarios */
#comments h4 {
margin: 1em 3em;
line-height:1.0em;
color:#166091;
text-shadow: 1px 1px 1px #000000;
font-size:18px;
}

#comments-block {
margin:0 0 0 10px;
line-height:1.0em;
background:transparent;
color:#20150a;
padding: 1em;
}
#comments-block .comment-body { /* caja de comentarios*/
margin:0 0 1.2em;
background-color: #39a8f3;
background-image: -moz-linear-gradient(top, #39a8f3, #ffffff);
background-image: -ms-linear-gradient(top, #39a8f3, #ffffff);
background-image: -o-linear-gradient(top, #39a8f3, #ffffff);
background-image: -webkit-gradient(linear, left top, left bottom, from(#39a8f3), to(#ffffff));
background-image: -webkit-linear-gradient(top, #39a8f3, #ffffff);
background-image: linear-gradient(top, #39a8f3, #ffffff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#39a8f3', EndColorStr='#ffffff');
color:inherit;
padding:5px 8px 5px 8px;
line-height:1.1em;
font-size:13px;
-webkit-border-bottom-right-radius: 12px;
-moz-border-radius-bottomright: 12px;
border-bottom-right-radius:  12px;
}
.comment-author { /* sección nombre del comentarista*/
background-color: #39a8f3;
margin:.5em 0 0;
padding:6px;
font-weight:bold;
color:#e6f1f8;
text-shadow: 1px 1px 1px #80c9fa;
font-size:15px;
}
.comment-footer {
margin:0;
margin:-10px 0 10px 0;
font-size:10px;
}
#comments-block .comment-footer  a{
color:#b6dcf6;
line-height:1.2em;
}
#comments-block .comment-body p {
margin:0;
padding: 5px 5px 8px 5px;
font-size:14px;
line-height:1.2em;
overflow: auto;
}
#comments-block a{
color:#2a0a0a;
text-decoration:none
}
#comments-block a:hover{
color:#ee9d3f;
}
#comments-block a:visited{
color:#2a0a0a;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.avatar-image-container{
border:4px solid #ffffff;
margin:-5px 0 0 0;
}
.avatar-image-container.avatar-stock {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFSUodvmgbD9y6WXHpgYjqBHHDivPPGUSF9OnX1B4_0zeeFGV8tmQdQJTD9LJ8nfRT4yo6AYoU-ZCvC7z3H1jYeUO_FnezyjU1D7ymShDd4X1hqpdjdklYD_DtfS9grJfYV6FHHbrwrATv/s1600/icono-persona-c.png) no-repeat;}

#comment-editor{
margin:0px;

}
.comment-form{
background: #fff;
margin:5px 0 0 40px;
padding:15px;
}


#blog-pager-newer-link {
float: right;
margin-right:70px;
}

#blog-pager-older-link {
float: left;
margin-left:70px;
 }

#blog-pager {
text-align: center;
 }

.feed-links {
clear: both;
line-height: 2.5em;
}

.feed-links {
display:none;
}



/* Sidebar */
.sidebar {
width:252px;
height:349px;
margin:113px 0 0 27px;
padding:0 0 0 0px;
line-height:1.2em;
color:$sidebarcolor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */    
overflow: auto;     /* fix for long non-text content breaking IE sidebar float */
}

.sidebar ul {
margin:0;
padding:0 0 0 20px;
}

.sidebar ul li{
font-size: 17px;
}

.sidebar li {
 margin:-8px 0 0 0;
 padding-left:12px;
 }
.sidebar li a{}


.sidebar .widget {
margin:0 0 10px 0;
padding:0 5px 0 10px;
}

.sidebar h2 {
font-weight:normal;
letter-spacing: 0.1em;
padding:4px 15px 7px 4px;
font-size:18px;
text-shadow:1px 1px 1px #000;
line-height:200%;
background:none;
color:#64a6f8;
}

/* Estilos Etiquetas */

#Label1 ul{
margin: -10px 0 0 0;
}

#Label1 ul li{
margin: 0;
padding:0 0 7px 0;
font-size: 17px;
color: #084591;
}


#Label1 li a{
color: #5e646b;
}

#Label1 ul li:hover {
color: #f26917
}

#Label1 li a:hover {
color:#084591;
margin-left: 4px
}

/*#Label1 li:hover {
background: #000;}*/

main .widget{
font-weight:bold;
}

/* Profile o perfil */
.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 0px;
border: 4px solid #FFFFFF;;
}

.profile-data {
margin:0;
text-transform:none;
letter-spacing:.1em;
font: $postfooterfont;
color: $sidebarcolor;
font-weight: bold;
line-height: 1.6em;
}

.profile-datablock {
margin:.5em 0 .5em;
}

.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}

.profile-link {
font: $postfooterfont;
text-transform: none;
letter-spacing: .1em;
}

.status-msg-wrap{
display:none;
}

.comentacontador a {
float:right;
margin: -15px 0 0 0;
font-size: 22px;
color: #252525;
text-decoration:none;
padding:0px 3px;
}
.comentacontador a:hover {
color: #100808 !important;
}
.avatar-image-container.avatar-stock {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLzSha-m6XGBaT67MULtcZvs2WrZ1jzOy4OG6MLpFNA2xV7sQX41imrWNYymdp8X5AXwYB2imPA8UaTa8WWFT7CAoPaWrIFZpYCVJbujxVRxDGhiJ3dFBHvxo8nO68yReKnRWZ-KlH00Y/s1600/anonimo-compartidisimo.png) no-repeat;}

/* Footer o pie */

#footer-wrapper{
background:none;
width:100%;
height:141px;
margin:0 auto;

}
#footer {
background:none;
clear:both;
margin:0;
padding-top:15px;
line-height: 1.6em;
text-transform:none;
}



/* Estilos leer mas */
a.readmore{}

a.readmore:hover {
font-weight: bold;
}

/* Entradas populares sidebar o Popular posts*/

#PopularPosts1 ul{
margin: 0 0 0 -10px;
color:#2c9be8;
}
#PopularPosts1 ul li{
list-style-type: none;
}


#PopularPosts1 ul li a{
color: #f710d4;
}
/* Marcadores Sociales o Social bookmarks*/

ul#marcadores{
list-style-type: none;
margin: 20px auto 0;
padding: 10px 0 0 0;
width: 200px;
height: 44px;
}
ul#marcadores li {
padding: 0;
float: left;
}
a.rss, a.twitter, a.Facebook, a.Blogger {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1sVj_LgPXEFcNmwEDEqAQMfDVrznEYImdUGzxNOEX4zRqTLtfvIvKXXSW6CqRAOTAY20PGkjaVOc7DGXERUqDkq8StQAmDDvGatjdLWATPpmPFIUWxuI-_Ngqxr2STkfUCZ0owPDxhsj3/s400/marcsocilaes.png) no-repeat 0 0;
margin: 0;
padding: 0;
display: block;
width: 48px;
height: 44px;
}

a.rss{
background-position: 0 0;

}
a.twitter{
display:block;
background-position: -48px 0;
}
a.Facebook {
background-position: -96px 0;
}
a.Blogger {
background-position: -144px 0;
}
a.rss:hover{
background-position: 0 -44px;
}
a.twitter:hover{
background-position: -48px -44px;

}
a.Facebook:hover {
background-position: -96px -44px;
}
a.Blogger:hover {
background-position: -144px -44px;
}


]]></b:skin>



<!-- ESTILOS Y SCRIPT RESUMEN DE ENTRADAS -->
<style type='text/css'>
.contemini {
overflow:hidden;
width:200px;
height:180px;
margin:10px 6px 10px 0;
padding: 0;
border: none;
display:block;
float:left;
}
.miniaturas {
width:200px;
height:180px;
background: no-repeat scroll 10% 20% #ffffff;
}
</style>


<script type='text/javascript'>
//<![CDATA[

function createSummaryAndThumb(pID,enlacetitulo){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = sumario_noimg;

if(img.length>=1) {
imgtag = '<div class="contemini"><a href="' + enlacetitulo + '"><div class="miniaturas" style="background-image:url(' + img[0].src + ')"></a></div></div>';
summ = sumario_img;
}

var summary = removeHtmlTag(div.innerHTML,summ,imgtag,enlacetitulo);
div.innerHTML = summary;
}

function removeHtmlTag(strx,chop,imagen,enlace){
var original=strx;
if(strx.indexOf("<")!=-1) {
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
if(strx.length<=chop) {
return original;
}
else {
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
var devolver = imagen + '<div>' + strx + '... <a class="readmore" href="' + enlace+ '">Leer más ►</a></div>';
return devolver;
}
}

sumario_noimg = 400;
sumario_img = 250;
//]]>
</script>



<!-- Script Fecha Calendario -->

<script type='text/javascript'>
//<![CDATA[
var ultimaFecha;
function remplaza_fecha(d){
if (d == "") {
    d = ultimaFecha;
 }
var da = d.split(' ');
dia = "<strong class='fecha_dia'>"+da[0]+"</strong>";
mes = "<strong class='fecha_mes'>"+da[1].slice(0,3)+"</strong>";

anio = "<strong class='fecha_anio'>"+da[2]+"</strong>";
document.write(dia+mes+anio);
 ultimaFecha = d;
}
//]]>
</script>


  </head>

  <body>


<div id='wrap3'>  <div id='outer-wrapper'><div id='wrap2'>
    <!-- skip links for text browsers -->
    <span id='skiplinks' style='display:none;'>
      <a href='#main'>skip to main </a> |
      <a href='#sidebar'>skip to sidebar</a>
    </span>


    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='simposium (cabecera)' type='Header'/>
</b:section>
 <b:section class='menu' id='menu' showaddelement='no'>
<b:widget id='PageList1' locked='true' title='Páginas' type='PageList'/>
</b:section>
<div id='search-conte'><b:section class='search-c' id='search-c' showaddelement='no'>
<b:widget id='CustomSearch1' locked='true' title='Buscar' type='CustomSearch'/>
</b:section></div>
   </div>
 <div style='clear:both'/>
 <div id='content-wrapper'>
<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
</div>
      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'/>
<b:widget id='PopularPosts1' locked='false' title='Entradas populares' type='PopularPosts'/>
</b:section>
</div>

      <!-- spacer for skins that want sidebar and main to be the same height-->
      <div class='clear'>&#160;</div>
    </div> <!-- end content-wrapper -->
 <div style='clear:both'/>
</div>

 <!--  ATENTION DISTRIBUTORS AND USERS: YOU ARE ALLOWED TO DISTRIBUTE THIS TEMPLATE, BUT YOU CAN'T ADD ANY LINK ON THE FOOTER.PLEASE, DO NOT REMOVE THE FOOTER CREDIT LINK. ATENCION DISTRIBUIDORES Y USUARIOS: ESTA PLANTILLA SE PUEDE REDISTRIBUIR, PERO, POR FAVOR RESPETA LOS CREDITOS, GRACIAS POR TU APOYO.
  -->  
<div id='footer-wrapper'><span style='float:right; font-size:11px; color:#ffffff; margin:0px; padding: 5px 0 0 10px;'><a expr:href='data:blog.homepageUrl'><data:blog.title/></a> Copyright &#169; 2011 | Designed by:
<a href='http://compartidisimo.blogspot.com/' target='_blank'>compartidisimo</a></span></div>
 <!-- end outer-wrapper -->
  </div></div>
</body>
</html>

              
Créditos
iphone: teehan+lax
íconos sociales: Aquaticus
lapices: fuzzimo
pattern de madera: crimson designs

ACTUALIZACION: Abril/21/2011, cambié el fondo de la plantilla usando la madera como pattern que se repite, para que esta sea vista totalmente independientemente de la resolución de pantalla del monitor y eliminé la posición fixed de este.

Aviso: ¡Todos los comentarios publicados desde el 2013 se han perdido!. Ésto debido a que Google ha eliminado el sistema de comentarios de Google+. Lamentamos enormemente este hecho, pues se ha perdido toda la participación y/o retroalimentación en las entradas desde dicho año.