Después de un buen rato en el quirófano, haciendo una cirugía reconstructiva a las imágenes de la plantilla Cuentos de Noche, finalmente logré darle la estructura que quería, para transformarla en una plantilla de tres columnas, cosa que ya me habían solicitado en repetidas ocasiones, y después de pensarla no dos, si no tres veces, me aventé a hacerlo, pensando en que esta plantilla ha sido muy querida por muchos, y que la recibirían con gusto.
Demostración Descargar Download English version
Descargar plantilla sin el resumen en las entradas
Para quienes prefieren copiar y pegar el código en la plantilla, lo pueden copiar a continuación:
<?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><link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*<html>
-----------------------------------------------
Name:Cuentos de Noche
Adaptado por:Compartidisimo
Url: http://compartidisimo.blogspot.com
base: Darren Delaye
url:www.DarrenDelaye.com
Date: Septiembre 2010
-----------------------------------------------
*/
/* Variable definitions
====================
<Variable name="bgColor" description="Page Background Color"
type="color" default="#efefef" value="#ffffff">
<Variable name="textColor" description="Text Color"
type="color" default="#333333" value="#000033">
<Variable name="linkColor" description="Link Color"
type="color" default="#336699" value="#b47b10">
<Variable name="headerBgColor" description="Page Header Background Color"
type="color" default="#336699" value="#ffffff">
<Variable name="headerTextColor" description="Page Header Text Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="headerCornersColor" description="Page Header Corners Color"
type="color" default="#528bc5" value="#ffffff">
<Variable name="mainBgColor" description="Main Background Color"
type="color" default="#ffffff" value="#e6e6e6">
<Variable name="borderColor" description="Border Color"
type="color" default="#cccccc" value="#cccccc">
<Variable name="dateHeaderColor" description="Date Header Color"
type="color" default="#999999" value="#999999">
<Variable name="sidebarTitleBgColor" description="Sidebar Title Background Color"
type="color" default="#ffd595" value="#ffffff">
<Variable name="sidebarTitleTextColor" description="Sidebar Title Text Color"
type="color" default="#333333" value="#6f3c1b">
<Variable name="bodyFont" description="Text Font"
type="font" default="normal normal 100% Verdana, Arial, Sans-serif;" value="normal normal 110% Trebuchet, Trebuchet MS, Arial, sans-serif">
<Variable name="headerFont" description="Page Header Font"
type="font" default="normal normal 210% Verdana, Arial, Sans-serif;" value="normal bold 184% Trebuchet, Trebuchet MS, Arial, sans-serif">
<Variable name="startSide" description="Start side in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="End side in blog language"
type="automatic" default="right" value="right">
*/
#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}
body {
background:#000;
background-repeat:no-repeat;
margin:0 auto 0;
padding: 0px;
font: x-small Verdana, Arial;
text-align: center;
color: $textColor;
font-size/* */:/**/small;
font-size: /**/small;
}
a:link {
color: $linkColor;
text-decoration:none;
}
a:visited {
color: $linkColor;
text-decoration:none;
}
a:hover{
text-decoration:none;}
a img {
border-width: 0;
}
#outer-wrapper {
font: $bodyFont;
width:970px;
margin:0 auto;
background:#000;
}
h2.date-header {
display:none
}
/* Header */
#header-wrapper {
margin:0 auto;
width:970px;
padding:0px;
background:#000;
text-align: $startSide;
height:500px;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEaZzpgd_iiwpIy7or-KPw6D_cpIH2p4Vwhg1D3k0-DQuW5oWlMNRXadhd_Xnm-hmHWJvmCsBJwefAYq2y2g24Av0qFY6PNVaApeRraqubxijOuuHoTZRIf6u1BY4Zx3o1aHE3CHngAA0/s1600/CuentosN3C.png) no-repeat bottom center;
}
#header {
width:960px;
height:470px;
margin: 0 auto;
color: $headerTextColor;
padding:0px;
font: $headerFont;
background-repeat:no-repeat;
}
h1.title {
margin: 0 14px .1em;
padding-left:160px;
padding-top:42px;
color:#ffffff;
line-height: 1.2em;
font-size: 140%;
max-width:400px;
font-family:"tangerine", serif, arial;
text-Shadow: #FAF9DC 1px 0px 4px;
}
h1.title a, h1.title a:visited {
color: $headerTextColor;
text-decoration: none;
}
#header .description {
display: block;
margin: 0 14px;
padding: 5px 0 0 190px;
line-height: 1.4em;
font-size: 55%;
color:#ffffff;
max-width:420px;
}
#header-inner{
padding:20px 0px 0px 215px;
}
.rss{
position:relative;
float: right;
top:-255px;
right:150px;
background:none;
}
.rss a{
display:block;
width:40px;
height:30px;
background:transparent;
}
/* Contenido */
.clear {
clear: both;
}
#content-wrapper {
margin:0 auto;
width:960px;
padding:0;
text-align: $startSide;
clear:both;
}
#main-wrapper {
margin-left:0px;
margin-top:-10px;
padding-left:0px;
padding-right:0px;
text-align:left;
width: 405px;
float:left;
background:none;
display: inline; /* fix for doubling margin in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
/*columna derecha*/
#ads-wrapper {
float:right;
margin-right:65px;
width: 195px;
background:none;
padding:0px;
margin-top:-10px;
display:inline;
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}
#ads{
font-size: 100%;
color:#0c0c24;
padding: 0px; }
#ads-wraper h2 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsRRlSXvxDvxTBXPN1h0sHI_qbbNn0BdgH35fPonbt96mry8ltJmrJn16ZaJ2w6RiUTfpUYYvFYJHO6aXj76tJDH64aGXnNShJsb6gIu47ji_WJdGnDzqyeYB5_dPdAqw_-qRa7Bc7QAI/s320/h2hoverIE.PNG) no-repeat;
margin:8px 1px 0px -2px;
padding-left:18px;
height:40px;
font: 'Trebuchet MS';
line-height:1.9em;
font-size:19px;
text-align:left;
color:#0c0c24;
}
#ads-wraper .widget {
margin: 0;
text-align:left;
padding: 0px 0px 5px 8px;
}
#ads-wraper a {
color: #28180A;
text-decoration: none;
}
#ads-wraper a:hover {
color: #78510b;
}
#ads-wraper ul {
margin: 0;
padding:5px 10px 0px 0px;
list-style: none;
}
#ads-wraper li {
margin: 0;
padding-top:0;
padding-$endSide: 0;
padding-bottom: .5em;
padding-$startSide: 5px;
text-indent: 0px;
line-height: .9em;
}
#ads-wraper {
color:$textColor;
line-height:1.3em;
}
#ads-wraper ul li {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCse9NeKgDtk1xh0qO4MWgHULPzZ-O9d-ZMlYyMwFjarD6BQkFbKdODDj8a4-5pz_Dhcax7VSaPFHA_VgunsPz_XoMmotPefMw-_5IfgVyFza72d51iAEUBKEO7Ekvcr0ptIjAs-PRaxs/s320/diamantcdNie.PNG) no-repeat left;
margin:5px 1px 0px 12px;
padding: 0px 0px 0px 17px;}
/* Columna Izquierda */
#ads-wrapper2 {
float:left;
width: 230px;
background:none;
padding:0px;
margin-top:-12px;
margin-right:30px;
display:inline;
overflow: hidden;
}
#ads{
font-size: 100%;
color:#0c0c24;
padding: 0px; }
#ads-wraper2 h2 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoSpLwF1x1YwohOWTWKr5RdKtZdaHWavTKMfqXMDHYdH9S6eOUZjgbQ0rNSPwP_kSN57oLYlaA90qBFlLZd-SFG-_G93ewThlw31vfy0q8I2MHpiDMDSldqDjeYDZ7aHo9eqHGvhOHTL4/s1600/h2.gif) no-repeat;
margin:8px 1px 0px -2px;
padding-left:18px;
height:40px;
font: 'Trebuchet MS';
line-height:1.9em;
font-size:19px;
text-align:left;
color:#0c0c24;
}
#ads-wraper2 .widget {
margin: 0;
text-align:left;
padding: 0px 0px 5px 4px;
}
#ads-wraper2 a {
color: #28180A;
text-decoration: none;
}
#ads-wraper2 a:hover {
color: #78510b;
}
#ads-wraper2 ul {
margin: 0;
padding:5px 10px 0px 0px;
list-style: none;
}
#ads-wraper2 li {
margin: 0;
padding-top:0;
padding-$endSide: 0;
padding-bottom: .5em;
padding-$startSide: 5px;
text-indent: 0px;
line-height: .9em;
}
#ads-wraper2 {
color:$textColor;
line-height:1.3em;
}
#ads-wraper2 ul li {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCse9NeKgDtk1xh0qO4MWgHULPzZ-O9d-ZMlYyMwFjarD6BQkFbKdODDj8a4-5pz_Dhcax7VSaPFHA_VgunsPz_XoMmotPefMw-_5IfgVyFza72d51iAEUBKEO7Ekvcr0ptIjAs-PRaxs/s320/diamantcdNie.PNG) no-repeat left;
margin:5px 1px 0px 3px;
padding: 0px 0px 0px 17px;}
#center {
width:970px;
margin:0 auto;
padding:0px;
background:#000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo8EA7MtxERfUnijLgbFmsgKiOJygom4KLiHlJ8cgI2xctdvaWs-Z2ivM1b28djGZMVKyE0fI7rfrRLHeg0k_38pzXX04eFFK8bkxRw-kKp0O2XT-j2uvFVyizHbk63qEWFIc1DDT-zFs/s1600/centroy.png) repeat-y top left;
}
/* Headings */
h2, h3 {
margin: 0;
}
.post-footer-line post-footer-line-2{
line-height: .9em;
}
/* Posts */
.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}
.post {
margin-left:0px;
padding-left:10px;
margin-top:0px;
padding-bottom:3px;
font-size:15px;
line-height: 1.3em;
}
.post-title {
margin: 10px 5px 0px 10px;
padding-top: 15px;
padding-bottom: 5px;
padding-left: 44px;
font-size:170%;
font-weight: bold;
line-height: .8em;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjatkz6wHY35tLrfkdvgsbO2UmzDfVzYwmc_JWwagJNjA2lLuLD8rn5SfoYRmZsuyt73Q0-QMzzzU2eT0vJJvSi_pTq6pqYYuvJtlkKP6wn8yzoCOSodKK7A3HdALgE3IH2IImpKzXihwE/s320/titulopostie.PNG) no-repeat left center;
}
.post-title a, .post-title a:visited, .post-title strong {
text-decoration: none;
font-size:19px;
text-transformation:capitalize;
color:#78510b;
font-weight: bold;
}
.post a:hover{
color:#0c0c24;
text-transform:Capitalize;
}
.post-footer {
margin:10px 0px 0px 14px;
color: $textColor;
font-size: 87%;
}
.post-footer .span {
margin-$endSide: .3em;
}
.post img {
padding: 4px;
}
.post blockquote {
margin: 1em 20px;
border: 1px dashed #2c2c2c;
padding:5px 5px 5px 5px;
}
.post blockquote p {
margin: .75em 0;
}
#coment-link{
padding: 0px 30px 0px 20px;}
.post-footer-line-1{
text-transform:capitalize;}
/* Comments */
#comments h4 {
margin: 1em 0;
color: $dateHeaderColor;
}
#comments h4 strong {
font-size: 110%;
}
#comments-block {
margin: 1em 0 1.5em;
line-height: 1.3em;
}
#comments-block dt {
margin: .5em 0;
}
#comments-block dd {
margin: .25em 0 0;
}
#comments-block dd.comment-footer {
margin: -.25em 0 2em;
line-height: 1.4em;
font-size: 78%;
}
#comments-block dd p {
margin: 0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.feed-links {
clear: both;
line-height: 2.5em;
display:none;
}
#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}
/* Profile */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $borderColor;
}
.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font-weight: bold;
line-height: 1.6em;
font-size: 78%;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}
/* Footer */
.clear {
clear: both;
}
#footer-wrapper {
margin:0 auto;
width:970px;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVE3p792-2CdMtOnjDou8BOseBSzZoPFV13I3re7S6NwhxINAUYCFYc1zswiZMHeHJ823AYP3vGAbFBVPsasD2h6MdKAY8z3O60A0xqCaZoJIIBlgPV9Ukapl58ErIGrlqGfp_WBGKIAQ/s1600/fCn3.png) no-repeat top center;
font-size: 77%;
clear: both;
height:230px;
}
#footer-wrapper a {
color: #7a5739;
text-decoration: none;
}
#footer-wrapper a:hover{
color: #369;
text-decoration: none;
}
.feed-links {clear: both;
line-height: 2.5em;
display:none;
}
.cloud-label-widget-content {
text-align:center;
font-weight: bold;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_FwAEFNN7HpAzpk0gslqFG6dYzvr1XMtD5qwLQwS-e8f7PBMjcacoVTUC5iAKMX-9n1a543MNnJL91e-01umPH9bXftuRVdgN5WYdNr9YjLQyqMlOUp5XeMcWC2f7-ebf-bxQNWDZ-80/s800/fondon.png) top left repeat-y;
}
.cloud-label-widget-content span {
padding: 0 0 0 5px;
}
]]></b:skin>
<b:if cond='data:blog.pageType != "item"'>
<style>
.post-body img {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0ZMXZnPE8Jcs-BmRq7gDg0eRpQlLeGsQJX52BqpfQrN8h2rHUylPkwrT5Ur40VVmRCCXSxieog175uILrwaiPYjEgxzjPjQUzZVIqCyGc363wC1xhB7nh4FWQYIGLVcyhNCFliFOIftk/s800/marcoo.png) no-repeat top left;
padding:11px 8px 7px 9px;
}
</style>
</b:if>
<script src='http://www.google.com/jsapi'/><script>google.load("prototype", "1.6.1.0");window.JSON = { parse: function (st) { return st.evalJSON(); }, stringify: function(obj) { return Object.toJSON(obj); }};google.load("scriptaculous", "1.8.3");</script>
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 400;
summary_img = 400;
img_thumb_height = 120;
img_thumb_width = 133;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
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("");
}
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);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
</head>
<body>
<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='Cuentos de Noche V2 (cabecera)' type='Header'/>
</b:section><div class='rss'><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='RSS'/>
</div>
</div>
<div id='center'>
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<div id='ads-wrapper2'>
<b:section class='ads-wraper2' id='ads-wraper2' preferred='yes'>
<b:widget id='PageList1' locked='false' title='Páginas' type='PageList'/>
<b:widget id='Label2' locked='false' title='Nube de Etiquetas' type='Label'/>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='false' title='Entradas del blog' type='Blog'/>
</b:section>
</div>
<div id='ads-wrapper'>
<b:section class='ads-wraper' id='ads-wraper' preferred='yes'>
<b:widget id='Label1' locked='false' title='Categorias' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
</b:section>
</div>
</div>
<div class='clear'> </div>
<!-- Atention You Can't to add any link on this section please be respectful Thank you. No se puede agregar o borrar nada por favor respeta los creditos de esta plantilla, recuerda que es gratuita gracias-->
<div id='footer-wrapper'>
<span style='float:right; margin: -20px 75px 0 0;'><p>
Designed by:<a href='http://compartidisimo.blogspot.com/' target='_blank'>Compartidísimo</a><br/>Images by: <a href='http://scrappingmar.blogspot.com/' target='_blank'>Scrappingmar©
</a></p></span>
</div>
<div style='clear: both;'/>
</div>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->
<!-- end outer-wrapper -->
</body>
</html>
La pensé y la pensé, por que no tenía guardadas las imágenes en capas para usarlas en photoshop, pues como recordarán, perdí todas las imágenes de mi compu hace ya algunos meses, lo que suponía un mayor esfuerzo y trabajo.
Afortunadamente cuento con más experiencia por lo que pude hacerlo mas rápido y sin contratiempos considerando la compatibilidad en todos los navegadores, obteniendo los resultados que quería y bueno, finalmente la tengo lista, para compartirla con ustedes, :D espero que les guste.
Características:
- Plantilla de 3 columnas
- Resumen automático en las entradas
- Fondo (marco) en la imagen principal de tus entradas
- Efecto deslizante en el archivo
- Fondo con nubes para el wadget de la nube de etiquetas
Se aceptan críticas y sugerencias :D
Probada en: Intermet Explorer incluyendo IE6, Fierefox y Google Chrome.
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}