Plantilla Sencilla Rosa

 

29 noviembre 2007

Descripcion de la Plantilla

Plantilla Sencilla, es una nueva forma de ver un blog, digamos que todo está minimizado, no ocupa casi sitio y las dos partes del sidebar con el cuerpo están al mismo nivel siempre. Todo va incluido en la plantilla,menos la imagén del Header o cabecera, está va como veis debajo del título, teneis que ir jugando con las imágenes porque no todas son idóneas por las medidas.
Para cambiar los fondos por tus imágenes, busca las URLS que están dentro de la plantilla, las vas situando en copia y pega en la barra de navegación de tu pc, y te saldra a que zona perteneces del blog. Luego bajas la tuya la alojas en tu hosting, y pones la url justo en esa parte, y poco a poco las vas cambiando. Mejor que lo hagas o que copies mis imágenes en tu hosting y pongas tu propia url por si algún día borro esa imagén sin darme cuenta, aunque de momento no lo haga.
En Firefox los bordes son redondeados, y en IE cuadrados. También en Firefox la barra que sube y baja se ve normal, y e IE se ve rosa.
Solo hay que poner en el sidebar el código del buscador.

Codigo Plantilla Sencilla

<?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'/>

<!-- Optimización del título en Blogger -->

<title>Blog nuevo poner lo que se quiera</title>

<!-- Termina título optimizado -->

<link href='URL FAVICON' rel='shortcut icon' type='image/x-icon'/>

<link href='URL FAVICON' rel='icon' type='image/png'/>

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

-----------------------------------------------

Template para Blogger

Nombre del Template: Plantilla Sencilla

Design: Cabalas Virtuales

Origen: http://cabalasvirtuales.blogspot.com/

Fecha: Noviembre 2007



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

/* Variable definitions

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

<Variable name="bgcolor" description="Page Background Color"

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

<Variable name="textcolor" description="Text Color"

type="color" default="#F5F3BA" value="#000000">

<Variable name="linkcolor" description="Link Color"

type="color" default="#FE4312" value="#806f7a">

<Variable name="visitedlinkcolor" description="Visited Link Color"

type="color" default="#FE1607" value="#2b2529">

<Variable name="pagetitlecolor" description="Blog Title Color"

type="color" default="#C4CCD6" value="#806f7a">

<Variable name="titlecolor" description="Post Title Color"

type="color" default="#FEB527" value="#E895CC">

<Variable name="descriptioncolor" description="Blog Description Color"

type="color" default="#FF7220" value="#d5b9cb">

<Variable name="bordercolor" description="Border Color"

type="color" default="#5B9DC0" value="#ffffff">

<Variable name="sidebarcolor" description="Sidebar Title Color"

type="color" default="#342524" value="#ffd1f0">

<Variable name="sidebarwidg" description="Sidebar Widget Color"

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

<Variable name="sidebartitle" description="Sidebar Widget Title Color"

type="color" default="#B8D7EB" value="#805c73">

<Variable name="sidebartextcolor" description="Sidebar Text Color"

type="color" default="#FE892C" value="#806f7a">

<Variable name="bodyfont" description="Text Font"

type="font" default="normal normal 100% 'Arial',Trebuchet,Verdana,Sans-serif" value="normal normal 105% Courier, monospace">

<Variable name="headerfont" description="Sidebar Title Font"

type="font" default="normal normal 210% 'Trebuchet MS', Arial, Sans-serif;" value="normal bold 106% Courier, monospace">

<Variable name="pagetitlefont" description="Blog Title Font"

type="font"

default="normal normal 200% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal bold 129% Courier, monospace">

<Variable name="descriptionfont" description="Blog Description Font"

type="font"

default="normal normal 78% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif" value="normal normal 78% Courier, monospace">

<Variable name="postfooterfont" description=" Footer Font"

type="font"

default="normal normal 75% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 75% Courier, monospace">

<Variable name="linkfont" description="Link Font"

type="font" default="normal normal 150% 'Arial',Trebuchet,Verdana,Sans-serif" value="normal bold 72% Courier, monospace">

<Variable name="visitedlinkfont" description="Visited Link Font"

type="font" default="normal normal 130% 'Arial',Trebuchet,Verdana,Sans-serif" value="normal bold 99% Courier, monospace">



*/

body {

background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgox-bkHEXG97-Q90oFS4giEMfwGvXV0TdDJOUOXKx1_x_myeHpwGD9gaOXWsStcFR-H1B4SpMAlMMGjvDodT2XQ5NyUKYgZZ-oLLdsy5XA1bodMGCzr1vgK5XNwpOI6h0YFrQPYQpu5O0/s400/fondocorazonestrasparentes.gif") left repeat bottom fixed;

color:$textcolor;

font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;

font-size/* */:/**/small;

font-size: /**/small;

text-align: center;

}

a:link {

color:$linkcolor;

font: $linkfont;

text-decoration:none;

}

a:visited {

color:$visitedlinkcolor;

font: $visitedlinkfont;

text-decoration:none;

}

a:hover {

color:$titlecolor;

text-decoration:underline;

}

a img {

border-width:0;

}

#header-wrapper {

width:450px;

height:0px;

padding:0px 0px 0px 0px;

margin:0px 0px 0px 0px;

float: left;

text-align: center;

}



#header {

margin:0px 0px 10px 10px;

height:50px;

background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi19oqQVAkGif6wAG0R6jJh1WcyVu0YbGza_A29Oc83pSZ0opOP5HR72uiJZrAELvwsdz6hth9RPMfWBYQTuWCCvRNSQdNFJW539RSjLr7hzp_Ud6Tsdcvlu_ATA2MRSQ2gJc68yIsDKSY/s400/fondounarayarosa.gif") repeat center;

text-align: center;

color: $pagetitlecolor;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;



}



#header h1 {

margin:0px 0px 0;

padding:0px;

text-transform:uppercase;

letter-spacing:1.2em;

font: $pagetitlefont;

color:$pagetitlecolor;

text-align: center;

}



#header a {

padding:0px;

color:$pagetitlecolor;

text-decoration:none;

text-align: right;

line-height:1.2em;

}



#header a:hover {

color:$pagetitlecolor;

}



#header .description {

margin:0 10px 0px;

padding-left:10px;

max-width:440px;

text-transform:uppercase;

letter-spacing:.2em;

line-height: 1.2em;

font: $descriptionfont;

color: $descriptioncolor;

}

#headertitle-wrapper {

width:400px;

margin:0px 0px 10px 10px;

padding:10px;



float:left;

text-align:center;

color:$pagetitlecolor;

}



/* Outer-Wrapper

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

#outer-wrapper {

width:900px;

margin:0 auto;

padding:0px;

text-align: left;

font: $bodyfont;

background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKzI9gVqghoo-NKPoKQ-Q4fR2i_qsgs58W61keJ7CyKdRy9zISQcmS_ki4QKNgFEUr5b3gsZCEtVtL1QSUqItC5KrWDB9QX-_73hobeOb01ulE4yncDPVEYprmv7W011fQ-XgKVTjq2hU/s400/fondoflor.png") repeat;

border:px solid #E1C1C1;

}

#content-wrapper {

width:820px;

margin:22px;

padding:12px;

text-align: left;

font: $bodyfont;

background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRnJJ746QTivzOOt9B_xaDA8NkYBPmSa_VH4N1_AChljDSNSojDVc6N_fVCz5U0KGDp833dTVVd0_gAelUCHU1BX2Uxl-jOWFsutcSsZ3Vqi36KkJGSIqBWFejQhAPKCpNGH21l9GMlJs/s400/fondorosacuaderno.gif') repeat;

border:px none $bordercolor;

}

#main-wrapper {



width: 440px;

border: 2px none $bordercolor;

margin:10px 0px 0px 10px;

float:left;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

#sidebar-wrapper {

width: 180px;

margin-right:0px;

border: 2px none $bordercolor;

float: left;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

#newsidebar-wrapper {



width:180px;

border: 2px none $bordercolor;

margin-left: auto;

float: right;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}



/* Headings

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



h2 {

margin:1.5em 0 .75em;

font:$headerfont;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.2em;

color:$sidebarcolor;

}





/* Posts

-----------------------------------------------

*/

.date-header {

margin: 5px;

text-align: left;

font: $postfooterfont;

color:$textcolor;

}



.post {

background: #ffffff url('URL PARA PONER IMAGEN TRASPARENTE DENTRO POST') right no-repeat;

margin:0x;

padding: 5px 5px 0px 5px;

font: $bodyfont;

color: $textcolor;

border: 2px solid #E1C1C1;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

}

.post h3 {

margin:.25em 0 0;

padding:0 0 4px;

font-size:140%;

font-weight:normal;

line-height:1.4em;

color:$titlecolor;

}



.post h3 a, .post h3 a:visited, .post h3 strong {

background-color: $sidebartitle;

display: block;

text-decoration:none;

color:$titlecolor;

font: $visitedlinkfont;

font-weight:bold;

padding: 6px;

border:2px solid #ffffff;

}



.post h3 strong, .post h3 a:hover {

background-color: #E1C1C1 url('URL POST') left no-repeat;

color: $textcolor;

padding: 6px;

}



.post p {

margin:10 0 .75em;

line-height:1.1em;

}



.post-footer {

background: url('http://1.bp.blogspot.com/_JgMd6Elx09E/R2bSAgq6BlI/AAAAAAAABXk/F9MjkpaqtSQ/s400/fondorosadegradado.gif') repeat;

margin: px;

color: $titlecolor;

padding:1px;

text-transform:uppercase;

letter-spacing:.1em;

font: $postfooterfont;

line-height: 1.1em;

border-top:1px none $bordercolor;

border-bottom:1px none $bordercolor;

}

.post-footer .post-author,

.post-footer .post-timestamp,

.post-footer .post-footer-line-2 {

font-style:normal;

font-size: 9pt;

}

.post blockquote {

margin:10px;

padding:3px 0;

border-width:2px 0;

}

.post blockquote p {

margin: .5em 0;

}

.comment-link {

margin-left:0em;

}

.post img {

padding:4px;

border:1px none $bordercolor;

}

.post blockquote {

margin:1em 20px;

}

.post blockquote p {

margin:.75em 0;

}



/* Comments

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

#comments {

margin:2em 0 0;

padding-top:1em;

}

#comments h4 {

padding-left: 5px;

margin:1em 0;

font-weight: bold;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.2em;

color: $sidebarcolor;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

}



#comments-block {

padding-left: 5px;

margin:1em 0 1.5em;

line-height:1.3em;

}

#comments-block .comment-author {

padding-left: 5px;

margin:.5em 0;

}

#comments-block .comment-body {

padding-left: 5px;

margin:.25em 0 0;

}

#comments-block .comment-footer {

padding-left: 5px;

margin:-.25em 0 2em;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.1em;

}

#comments-block .comment-body p {

padding-left: 5px;

margin:0 0 .75em;

}

.deleted-comment {

padding-left: 5px;

font-style:italic;

color:gray;

}



.feed-links {

padding-left: 5px;

clear: both;

line-height: 2.5em;

}



#blog-pager-newer-link {

padding: 5px;

float: left;

}



#blog-pager-older-link {

padding: 5px;

float: right;

}



#blog-pager {

text-align: center;

}





/* Sidebar Content

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

.sidebar {

color: $sidebartextcolor;

line-height: 1.3em;

margin: 0;

}



.sidebar h2 {

margin: 3px 0 .5em;

padding: 2px 10px;

background: $sidebartitle;

color: $titlecolor;

border: 2px solid #ffffff;

text-align:center;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

}



.sidebar ul {

list-style:none;

margin:0 0 0;

padding:0 0 0;

}

.sidebar li {

margin:0;

padding:0 0 .25em 15px;

text-indent:-15px;

line-height:1.2em;

}



.sidebar .widget{

height:200px;

overflow:auto;

scrollbar-face-color: $bordercolor;

scrollbar-highlight-color: transparent;

scrollbar-shadow-color: $bgcolor;

scrollbar-3dlight-color: transparent;

scrollbar-arrow-color: $sidebarcolor;

scrollbar-track-color: transparent;

scrollbar-darkshadow-color: transparent;

background: $bgcolor;





margin:0 0 10px 0;

padding:5px;

background: $sidebarwidg;

border: 2px solid #E1C1C1;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

}



.main .widget{

margin:0px 0px 0px 0px;

background: ;

border: 1px none $bordercolor;

}



.main .Blog {

height:500px;

overflow:auto;

scrollbar-face-color: $bordercolor;

scrollbar-highlight-color: transparent;

scrollbar-shadow-color: $bgcolor;

scrollbar-3dlight-color: transparent;

scrollbar-arrow-color: $sidebarcolor;

scrollbar-track-color: transparent;

scrollbar-darkshadow-color: transparent;







border-bottom-width: 0;

}



/* Profile

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

.profile-img {

float: left;

margin: 0 5px 5px 0;

padding: 4px;

border: 1px solid $bordercolor;

}



.profile-data {

margin:0;

text-align: left;

text-transform: uppercase;

letter-spacing:.1em;

font: $bodyfont;

color: $sidebarcolor;

font-weight: bold;

line-height: 1.2em;

}



.profile-datablock {

margin:.5em 0 .5em;

}



.profile-textblock {

margin: 0.5em 0;

line-height: 1.2em;

text-align: left;

}



.profile-link {

font: $bodyfont;

text-color: $titlecolor;

text-align: center;

text-transform: uppercase;

letter-spacing: .1em;

}



/* Footer

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

#footer {



width:auto;

clear:both;

margin:0 auto;

padding-top:15px;

line-height: 1.6em;

text-transform:uppercase;

letter-spacing:.1em;

text-align: center;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

}





.widecolumn .post {

margin: 0;

}



.narrowcolumn .postmetadata {

padding-top: 0px;

}



.widecolumn .postmetadata {

margin: 0px 0;

}



h2 {

margin-top: 5px;

margin-right: 0px;

margin-bottom: 0px;

margin-left: 0px;

}

h3 {

padding: 0px;

margin-top: 10px;

margin-right: 0px;

margin-bottom: 0px;

margin-left: 0px;

}



h3.comments {

padding: 0;

margin: 10px auto 10px ;

}



/** Page structure tweaks for layout editor wireframe */

body#layout #header {

margin-left: 0px;

margin-right: 0px;

}



.even {

background-color: #0A001B;

}

.odd {

background-color: #0A001B;

}



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

#navcontainer

{

padding: 0;

background: #E1C1C1;

height: 20px;

}

------------------------Menu--------

#navlist

{

margin: 0px;

padding: 0px 0px;

display: block;

}



#navlist li

{

list-style: none;

float: left;

}



#navcontainer a, #navlist li.extend

{

margin: 0px;

display: block;

border-top: 1px solid #333;

padding: 1px 6px;

text-decoration: none;

background: #EFDEDE;

font: normal 12px verdana, serif;

color: #000;

}



#navcontainer a:hover, #navcontainer a#current

{

padding: 1px 5px;

background: #FAFAFA;

border-right: 1px solid #333;

border-left: 1px solid #333;

border-top: 1px solid #FAFAFA;

border-bottom: 1px solid #333;

color: #000;

}



#navcontainer a#current

{

background: #F6F6F6;

border-top: 1px solid #F6F6F6;

font-weight: bold;

}



#navcontainer li#active

{

border-right: 2px solid #828282;

border-bottom: 2px solid #828282;

}



/* Buscador

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

.searchBox{

width:140px;

background: #fff;

border: 2px solid #236c95;

}



]]></b:skin>



</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='content-wrapper'>



<div id='navcontainer'>

<ul id='navlist'>

<li id='active'><a href='URL ENLACE' id='current'>INICIO</a></li>

<li><a href='URL ENLACE'>TITULO</a></li>

<li><a href='URL ENLACE'>TITULO</a></li>

<li><a href='URL ENLACE'>TITULO</a></li>

<li><a href='URL ENLACE'>TITULO</a></li>

</ul>

</div> <div id='sidebar-wrapper'>

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

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

<b:widget id='Slideshow1' locked='false' title='Diapositivas' type='Slideshow'/>

</b:section>

</div>



<div id='newsidebar-wrapper'>

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

<b:widget id='HTML2' locked='false' title='Buscador Interior' type='HTML'/>

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'/>

<b:widget id='NewsBar1' locked='false' title='Noticias' type='NewsBar'/>

</b:section>

</div>



<div id='headertitle-wrapper'>

<b:section class='headertitle' id='headertitle' maxwidgets='2' showaddelement='yes'>

<b:widget id='Header1' locked='false' title='Plantilla Sencilla Chica (cabecera)' type='Header'/>

<b:widget id='HTML1' locked='false' title='' type='HTML'/>

</b:section>

</div>



<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'/>

</div>

<!-- spacer for skins that want sidebar and main to be the same height-->

<div class='clear'>&#160;</div>





<div id='main-wrapper'>

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

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

</b:section>

</div>



<div id='footer-wrapper'>

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

</div>



</div> <!-- end content-wrapper -->



</div></div>



<!-- end outer-wrapper -->

<div align=''>&#169; 2007 <a href='http://cabalasvirtuales.blogspot.com/' target='_blank'>Cabalas Virtuales</a> Para <a href='http://plantillasytemplatesbloggercaseras.blogspot.com/' target='_blank'>Plantillas Blogger</a> </div>

</body>

</html>

Codigo Buscador

Poner esté código en Plantilla- Añadir Elementos-Html, en la parte que se desee del sidebar.

<center><form action="http://search.blogger.com/" name="b-search">
<input id="b-query" placeholder="" class="searchBox" name="as_q" size="15"type="text"/>
<input value="UTF-8" name="ie" type="hidden"/>
<input value="blg" name="ui" type="hidden"/>
<input value="NOMBRE DE VUESTRO BLOG SIN HTTP.blogspot.com" name="bl_url"
type="hidden"/>
<input border="0" alt="Buscar" src="LA URL DE VUESTRA IMAGEN" title="BUSCA EN ELTITULO VUESTRO BLOG" type="image"/>
</form></center>

© 2007 Cabalas Virtuales Para Plantillas Blogger