martes, 13 de noviembre de 2007

Sexta Plantilla para Blogger: Música

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

<style type='text/css'>
#chromemenu{
width: 96%;
font-weight: bold;
font-size: 95%;
}


#chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: &quot;.&quot;;
display: block;
height: 1px;
clear: both;
visibility: hidden;
}

#chromemenu ul{
border: 3px double #CD853F;
width: 103%;
background-color: #ADD8E6; center
center repeat-x;
padding: 5px 0;
margin: 0;
text-align: left; /*set value to &quot;right&quot; for example to align menu to the left of page*/
}

#chromemenu ul li{
display: inline;
}

#chromemenu ul li a{
color: #EE9A49;
padding: 5px;
margin: 10;
text-decoration: none;
border-right: 3px double #CD853F;
}


#chromemenu ul li a:hover{
background-color: #87CEEB; center
center repeat-x;
}

</style>
<style>
<!--

.styling{
background-color:#fff;
color:#BEBEBE;
font: 20px MS Sans Serif;
padding: 4px;
border-top: 3px Ridge #CD853F;
border-bottom: 1px Ridge #CD853F;
}

-->
</style>
<style type='text/css'>
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
</style>

<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------

Blogger Template Style
Name: Minima
Designer:Yolanda
URL: http://cabalasvirtuales.blogspot.com/
Date: 2007 Musica/6
Updated by: Blogger Team
----------------------------------------------- */

/* Variable definitions

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

<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#5588aa">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#666" value="#666666">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#999" value="#999999">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#c60" value="#cc6600">
<Variable name="bordercolor" description="Border Color"
type="color" default="#ccc" value="#cccccc">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#999" value="#999999">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#666" value="#666666">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#999999">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, 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 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
*/

/* Use this with templates/template-twocol.html */

body {
margin: 0;
padding: 0;
background: #fff url(http://4.bp.blogspot.com/_11C4h7_3E8U/RyoIGUXO28I/AAAAAAAAH1I/RJBcoMZY_d0/s1600/fondo%2Bespiral.gif) repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #666666;
}

a:link {
color:#cc6600;
text-decoration:none;
}

a:visited {
color:#cc6600;
text-decoration:none;
}

a:hover {
color:#237EEC;
text-decoration:underline;
}

a img {
border-width:0;
}

/* Header-Cabecera

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

*/

#header-wrapper {
width:1000px;
margin:0 auto 0px 0px;
border:0px solid #000;
}

#header {
margin: 0px;
border: 0px solid #000
color:#ffffff;
}

#header h1 {
margin:30px 0px 0px 60px;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: normal bold 220% Arial, sans-serif;
}

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

#header a:hover {
color:#ffffff;
}

#header .description {
float: right;
margin:-25px 100px 0px 0px;
max-width:500px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: normal normal 85% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
color: #ffffff;
}

#header img {
margin-left: auto;
margin-right: auto;
}

/* Outer-Wrapper

----------------------------------------------- */
#outer-wrapper {
width: 1000px;
margin:0 auto;
padding:0px;
text-align:left;
font: normal normal 100% Georgia, Serif;
}

#main-wrapper {
width: 445px;
padding:20px 0 0 0;
margin-left:30px;
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: 200px;
margin-right:30px;
padding:20px 0 0 0;
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 */
}

#sidebarl-wrapper {
width: 200px;
margin-right:20px;
padding:20px 0 0 0;
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:normal normal 86% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:#237EEC;
}

/* Posts- Entradas
-----------------------------------------------

*/

h2.date-header {
margin:1.5em 0 .5em;
}


.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #cccccc;
padding-bottom:1.5em;
}

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:#237EEC;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#1E90FF;
font-weight:normal;
}


.post h3 strong, .post h3 a:hover {
color:#333333;
}

.post p {
margin:0 0 .75em;
line-height:1.6em;
}

.post-footer {
margin: .75em 0;
color:#237EEC;
text-transform:uppercase;
letter-spacing:.1em;
font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
line-height: 1.4em;
}

.comment-link {
margin-left:.6em;
}

.post img {
padding:4px;
border:0px solid #cccccc;
}

.post blockquote {
background: url(http://1.bp.blogspot.com/_11C4h7_3E8U/Rqc2v8N8lkI/AAAAAAAAEZk/G4TNo_ITd0I/s400/comillasdos.gif) no-repeat 0 5px;
color: #666;
padding-left: 40px;
font-style: italic;
margin-bottom: 1px;
display:block;
padding-top:7px;
}

.post blockquote p {
display: block;
}

/* Comments
----------------------------------------------- */

#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: #237EEC;
}

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}

#comments-block .comment-author {
margin:.5em 0;
}

#comments-block .comment-body {
margin:.25em 0 0;
}

#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}

#comments-block .comment-body p {
margin:0 0 .75em;
}

.deleted-comment {
font-style:italic;
color:gray;
}

#blog-pager-newer-link {
float: left;
}

#blog-pager-older-link {
float: right;
}

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

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

/* Sidebar -Laterales
----------------------------------------------- */
.sidebar {
border-left: 1px solid #F2F2F2;
color: #cc6600;
line-height: 1.5em;
}

.sidebar h2 {
margin: 0 0 10px 0;
padding: 5px 10px;
background: url(http://1.bp.blogspot.com/_11C4h7_3E8U/RznWgehoAoI/AAAAAAAAIhE/4xrcOCdUe04/s1600-h/linea+sidebar.gif) repeat-x;
border: 1px solid #F2F2F2;
font-size: 12px;
}

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

.sidebar li {
background:
url(http://3.bp.blogspot.com/_11C4h7_3E8U/RtHYcsnB6dI/AAAAAAAAFhM/Yhmpl-bRqvw/s400/etqutas.png) no-repeat 0px 6px;

margin:0;
padding:0 0 .25em 35px;
text-indent:-15px;
line-height:1.5em;
border-bottom:1px solid #cccccc;
}

.sidebar .widget, .main .widget {
border-bottom:1px dotted #cccccc;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .Blog {
border-bottom-width: 0;
}

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

.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
color: #237EEC;
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: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
text-transform: uppercase;
letter-spacing: .1em;
}

/* Footer
----------------------------------------------- */
#footer {
width:1000px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
background: #D56E22
}


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

body#layout #header {
margin-left: 0px;
margin-right: 0px;
}

]]></b:skin>
</head>

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

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
&lt;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='4' showaddelement='yes'>
<b:widget id='Image1' locked='false' title='AQUI TAMBIEN EL TITULO O TEXTO' type='Image'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

<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='NewsBar1' locked='false' title='' type='NewsBar'/>
</b:section>
</div>

<div id='sidebarl-wrapper'>
<b:section class='sidebar' id='sidebarl' preferred='yes'>
<b:widget id='NewsBar2' locked='false' title='' type='NewsBar'/>
</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 id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
<div>

<!-- Está plantilla ha sido diseñada y modificada para compartir gratis, es por ello que solo te pido que no quites mi link para poder seguir diseñandolas -->

<p class='links'> &#169; URL DE TU BLOG | Diseño de <a href='http://plantillasytemplatesbloggercaseras.blogspot.com/'>Música/6</a>
| Para <a href='http://www.blogger.com'>Blogger</a> por

<a href='http://cabalasvirtuales.blogspot.com/'>Cábalas Virtuales</a></p>

</div>

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

<div style='text-align: center;'><a href='#'><img alt='ir arriba' src='http://4.bp.blogspot.com/_11C4h7_3E8U/RvwPEqqnIRI/AAAAAAAAGnI/xoub0v2TuDY/s400/arriba.gif'/></a></div>

</body>
</html>

Imagén del Header o Cabecera y Código Menú

Pinchar sobre la imagén para ampliar, y
guardar la imagen como
en vuestro pc, abrirla en el editor de Point que todos tenemos en Windows y poner título o lo que se quiera en la imagén, volver a guardar y bajar en editor de imagén en la cabecera, en la plantilla de nuestro blog.



Esté código es la segunda parte del primero que ya está incorporado dentro de la plantilla para que se pueda hacer el Menú con los links de la cabecera, solo copiar y pegar en el Sidebar:


Menú: Blog de Cesar

<div id="chromemenu">
<ul>
<li><a href="http://TU BLOG.blogspot.com/">INICIO</a></li>
<li><a href="AQUI LA URL">titulo 2</a></li>
<li><a href="AQUI LA URL">titulo 3</a></li>
<li><a href="AQUI LA URL">titulo 4</a></li>
<li><a href="AQUI LA URL">titulo 5</a></li>
<li><a href="AQUI LA URL">titulo 6</a></li>
<li><a href="AQUI LA URL">titulo 7</a></li>
</ul>
</div>
 
ir arriba