Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje28-02-2010, 03:07 (UTC)    
Título del mensaje: [Tutorial Css] Crear Un Buen Diseño Css
Responder citando
Hola! es mi primer tema asi que, si esta en mal lugar este tema por favor muevanlo...

Ahora el tema como crear una buena plantilla css:

1.) Poner el diseó Css Desing: Editar Diseño => CSS-Desing - General - No Tan Popular

2.) Ingresar a WwW.DoTemplate.Com y hacer clic en "Free Templates", elegir un tema y modificarlo

3.) Al Descarlo Seleccionar El Del Blog

4.) Ahora Al Terminar La descargar abrir el archivo "style.css" con el bloc de notas.

5.) Les Aparecerá el siguiente código:
Código:

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

Copyright 2010 - Thierry Ruiz - www.dotemplate.com - All rights reserved.

THIS TEMPLATE IS FREE AS LONG AS YOU KEEP THE LINK TO WWW.DOTEMPLATE.COM IN THE FOOTER
TO REMOVE THE LINK, PLEASE MAKE A 10 DOLLARS DONATION at www.dotemplate.com/#donate

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




html {
   background: #303030;
   margin:0 0 0 -1px;
   padding:0;   
   overflow-Y: scroll;
}


body {
   padding:0;
   margin :0;
   display:table;
   width:100%;   
}


 
 
body {
   color:#404040;
   font-family: 'Trebuchet MS', sans-serif ;
   font-size: 13px;
   font-style: normal ;
   font-weight: normal ;
   text-transform: normal;
}


p {
   letter-spacing: normal ;
   line-height: 1.7em ;
}

h1 {
   color:#000000;
   font-size:22px ;
   margin:25px 0 10px 0;
   clear:both;
}


h2 {
   color:#000000;
   font-size:20px ;
   margin:20px 0 10px 0;
   clear:both;
}


h3 {
   color:#000000;
   font-size:18px;
   margin:20px 0 5px 0;
   clear:both;
}



a:link, a:visited {
   color:#1860a8 ;
   text-decoration:none;
}


a:hover {
   color:#00c3ff;
   text-decoration:underline;
}




 
 

#wrapper {
   background: transparent url( images/page-vbg.jpg ) repeat-y scroll 50% 0px ;
   margin:0 auto ;
   width:100%;
}

 
 
body {
   background-color:#303030;
   background-image:url( images/body-bg.jpg ) ;
   background-position:center top ;
   background-repeat:repeat-x;
}


#navbar {display:none}
 




#bg {
   margin:0 auto;
   padding:0;
   background:transparent ;
   background-image: url( images/hat.jpg ) ;
    background-repeat:no-repeat;   
   background-position: center top ;
}



 
 
#header {
   margin: 0 auto;
   min-height:0px;
   height: 0px;
   width: 880px;
}


#page {
   background: transparent url( images/page-bg.jpg ) no-repeat center top;
}



 
 

#container {
   margin:0 auto;
   width:880px;
}


#banner {
   margin: 0 auto;
   height:230px;
   width:100%;
}


 
 





#nav1 {
   height:30px;
   margin:0 auto ;
   width:860px;   
   text-align:center;
}


#nav1 ul {
   display:table;
   margin:0 auto;
   padding:0;
   list-style-type:none;
   position:relative;
   height:30px;
   text-transform:uppercase;
   font-size:11px;
   font-family:Arial,sans-serif;
}


#nav1 ul li {
   display:block;
   float:left;
   margin:0;
   padding:0;
   background:transparent url("images/hmenu.jpg") repeat-x top left;

}


#nav1 ul li a {
   display:block;
   float:left;
   color:#eeeeee;
   text-decoration:none;
   padding:0px 50px ;
   line-height:30px;
   font-weight:bold;
}


#nav1 ul li a:hover, #nav1 li#current a {
   color:#ffffff;
   background:transparent url("images/hmenu-sel.jpg") repeat-x top left;
}




#content {
   width:860px;
   margin:0 auto ;
   text-align:left;
   min-height:800px;
}


#content p {
   text-align:justify;
}






#footerWrapper {
   margin:0 auto;
   height:170px;
   padding:0;
   background:transparent url( images/footerWrapper-bg.jpg ) no-repeat scroll center top ;
}


#footer {
   margin:0 auto;
   padding:0;
   width:880px;
   height:90px;
}


 
 
#footer {
   color:#FFFFFF;
   text-align:center;
}

#footer a:link, #footer a:visited {
   color:#0b00ed;
}


#footer a:hover{
   color:#00d6fc;
   text-decoration:none;
}


 
 








#right {
   width:200px;
   padding:10px 20px 20px 20px;
   float:left;
}


#center {
   width:580px;   
   padding:10px 20px 20px 20px ;
   float:left;
}

 
#content p {
   margin-top:10px;
   text-align:justify;
}


 
 
 
 
#sidebar .widget {
   margin-top:20px;
    padding: 0 10px 10px 10px;
    border:1px solid #d8d8f0;
}





.clear {
   clear: both;
   display: block;
   overflow: hidden;
   visibility: hidden;
   width: 0;
   height: 0;
}

Donde Sale images/NOMBRE DE IMAGNEN.JPG, Y salen entre parentesis pero ai debe ser modificado asi: ("URL DE IMAGEN") entre comillas porque algunos no vienen entre comillas (ponerle a todos entre comillas), claramente ahi que subir imagenes, ejemplo:
De:
Código:
#footerWrapper {
   margin:0 auto;
   height:170px;
   padding:0;
   background:transparent url( images/footerWrapper-bg.jpg ) no-repeat scroll center top ;
}

A:
Código:
#footerWrapper {
   margin:0 auto;
   height:170px;
   padding:0;
   background:transparent url("URL_IMAGEN") no-repeat scroll center top ;
}

Copiar todo eso en CSS-Code sin Style Tags

6.) Abrir el archivo "blogger.xml" con el bloc de notas, les aparecerá un código. El Mio Es:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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[
   

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

Copyright 2010 - Thierry Ruiz - www.dotemplate.com - All rights reserved.

THIS TEMPLATE IS FREE AS LONG AS YOU KEEP THE LINK TO WWW.DOTEMPLATE.COM IN THE FOOTER
TO REMOVE THE LINK, PLEASE MAKE A 10 DOLLARS DONATION at www.dotemplate.com/#donate

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




html {
   background: #303030;
   margin:0 0 0 -1px;
   padding:0;   
   overflow-Y: scroll;
}


body {
   padding:0;
   margin :0;
   display:table;
   width:100%;   
}


 
 
body {
   color:#404040;
   font-family: 'Trebuchet MS', sans-serif ;
   font-size: 13px;
   font-style: normal ;
   font-weight: normal ;
   text-transform: normal;
}


p {
   letter-spacing: normal ;
   line-height: 1.7em ;
}

h1 {
   color:#000000;
   font-size:22px ;
   margin:25px 0 10px 0;
   clear:both;
}


h2 {
   color:#000000;
   font-size:20px ;
   margin:20px 0 10px 0;
   clear:both;
}


h3 {
   color:#000000;
   font-size:18px;
   margin:20px 0 5px 0;
   clear:both;
}



a:link, a:visited {
   color:#1860a8 ;
   text-decoration:none;
}


a:hover {
   color:#00c3ff;
   text-decoration:underline;
}




 
 

#wrapper {
   background: transparent url( http://lh6.ggpht.com/_d6vKxl1jKWk/S4hXowX6jfI/AAAAAAAAeuQ/Kh_o0gZLwbg/page-vbg.jpg ) repeat-y scroll 50% 0px ;
   margin:0 auto ;
   width:100%;
}

 
 
body {
   background-color:#303030;
   background-image:url( http://lh4.ggpht.com/_d6vKxl1jKWk/S4hXnEVLGWI/AAAAAAAAeuI/ukNkpEHkdCw/body-bg.jpg ) ;
   background-position:center top ;
   background-repeat:repeat-x;
}


#navbar {display:none}
 




#bg {
   margin:0 auto;
   padding:0;
   background:transparent ;
   background-image: url( http://lh3.ggpht.com/_d6vKxl1jKWk/S4hXoeH5mWI/AAAAAAAAeuM/ec74D448ZVU/hat.jpg ) ;
    background-repeat:no-repeat;   
   background-position: center top ;
}



 
 
#header {
   margin: 0 auto;
   min-height:0px;
   height: 0px;
   width: 880px;
}


#page {
   background: transparent url( http://lh5.ggpht.com/_d6vKxl1jKWk/S4hXp6nFWuI/AAAAAAAAeuU/jO8MSYBEf1I/page-bg.jpg ) no-repeat center top;
}



 
 

#container {
   margin:0 auto;
   width:880px;
}


#banner {
   margin: 0 auto;
   height:230px;
   width:100%;
}


 
 





#nav1 {
   height:30px;
   margin:0 auto ;
   width:860px;   
   text-align:center;
}


#nav1 ul {
   display:table;
   margin:0 auto;
   padding:0;
   list-style-type:none;
   position:relative;
   height:30px;
   text-transform:uppercase;
   font-size:11px;
   font-family:Arial,sans-serif;
}


#nav1 ul li {
   display:block;
   float:left;
   margin:0;
   padding:0;
   background:transparent url("http://lh5.ggpht.com/_d6vKxl1jKWk/S4hXrjuK9vI/AAAAAAAAeuc/XK8plj7OVaU/hmenu.jpg") repeat-x top left;

}


#nav1 ul li a {
   display:block;
   float:left;
   color:#eeeeee;
   text-decoration:none;
   padding:0px 50px ;
   line-height:30px;
   font-weight:bold;
}


#nav1 ul li a:hover, #nav1 li#current a {
   color:#ffffff;
   background:transparent url("http://lh3.ggpht.com/_d6vKxl1jKWk/S4hXsf0pqgI/AAAAAAAAeug/QU0myZhtB7E/hmenu-sel.jpg") repeat-x top left;
}




#content {
   width:860px;
   margin:0 auto ;
   text-align:left;
   min-height:800px;
}


#content p {
   text-align:justify;
}






#footerWrapper {
   margin:0 auto;
   height:170px;
   padding:0;
   background:transparent url( http://lh3.ggpht.com/_d6vKxl1jKWk/S4hXqhnQHvI/AAAAAAAAeuY/JtC1phRl3B0/footerWrapper-bg.jpg ) no-repeat scroll center top ;
}


#footer {
   margin:0 auto;
   padding:0;
   width:880px;
   height:90px;
}


 
 
#footer {
   color:#FFFFFF;
   text-align:center;
}

#footer a:link, #footer a:visited {
   color:#0b00ed;
}


#footer a:hover{
   color:#00d6fc;
   text-decoration:none;
}


 
 








#right {
   width:200px;
   padding:10px 20px 20px 20px;
   float:left;
}


#center {
   width:580px;   
   padding:10px 20px 20px 20px ;
   float:left;
}

 
#content p {
   margin-top:10px;
   text-align:justify;
}


 
 
 
 
#sidebar .widget {
   margin-top:20px;
    padding: 0 10px 10px 10px;
    border:1px solid #d8d8f0;
}





.clear {
   clear: both;
   display: block;
   overflow: hidden;
   visibility: hidden;
   width: 0;
   height: 0;
}



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


<body>

   
          
      <div id="wrapper">

   <div id="bg">
   
      <div id="header">
                   
               </div>

      
      <div id="page">
                   
      


<div id="container">

   <!-- banner -->

   <div id="banner">
   </div>

   <!-- end banner -->



   <!-- horizontal navigation -->
   
   <div id="nav1">
                
      


<ul>
<li id="current" style="border:none"><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Posts RSS'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;' title='Comments RSS'>Comments RSS</a></li>
</ul>
      </div>
   
   <!-- end horizontal navigation -->
   
   
   
   <!--  content -->
   
   <div id="content">
                
      

<div id="center">

   <b:section class='main' id='main' showaddelement='no'>
      <b:widget id='Blog1' locked='true' title='Messages du blog' type='Blog' />
   </b:section>

</div>


<div id="right">

<b:section class='sidebar' id='sidebar' preferred='yes'>
   <b:widget id='BlogArchive1' locked='false' title='Blog archives' type='BlogArchive' />
   <b:widget id='Profile1' locked='false' title='About me' type='Profile'/>
</b:section>

</div>


<div class="clear" style="height:40px"></div>

      </div>


   <!-- end content -->


</div>

<!-- end container -->


         </div>
      
      <div id="footerWrapper">
                   
      
<div id="footer">
   <p style="padding-top:10px">
      Copyright 2010 <strong>Your company</strong> |
      
      <!-- If you did not purchase this template please, keep this link or make a $10 donation at www.doTemplate.com  -->
      
      Web template created with <a href="http://www.dotemplate.com" >doTemplate</a>
      
   </p>
   
</div>
         </div>
      
      
   </div>
   
   
</div>

   
   

</body>

</html>

Dividir el codigo en dos partes. Desde <div id="footerWrapper"> Para Abajo En Texo Por Debajo De La Página. El resto en Texto Por Arriba, Ejemplo:

Texo Por Arriba De La Página:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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[
   

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

Copyright 2010 - Thierry Ruiz - www.dotemplate.com - All rights reserved.

THIS TEMPLATE IS FREE AS LONG AS YOU KEEP THE LINK TO WWW.DOTEMPLATE.COM IN THE FOOTER
TO REMOVE THE LINK, PLEASE MAKE A 10 DOLLARS DONATION at www.dotemplate.com/#donate

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




html {
   background: #303030;
   margin:0 0 0 -1px;
   padding:0;   
   overflow-Y: scroll;
}


body {
   padding:0;
   margin :0;
   display:table;
   width:100%;   
}


 
 
body {
   color:#404040;
   font-family: 'Trebuchet MS', sans-serif ;
   font-size: 13px;
   font-style: normal ;
   font-weight: normal ;
   text-transform: normal;
}


p {
   letter-spacing: normal ;
   line-height: 1.7em ;
}

h1 {
   color:#000000;
   font-size:22px ;
   margin:25px 0 10px 0;
   clear:both;
}


h2 {
   color:#000000;
   font-size:20px ;
   margin:20px 0 10px 0;
   clear:both;
}


h3 {
   color:#000000;
   font-size:18px;
   margin:20px 0 5px 0;
   clear:both;
}



a:link, a:visited {
   color:#1860a8 ;
   text-decoration:none;
}


a:hover {
   color:#00c3ff;
   text-decoration:underline;
}




 
 

#wrapper {
   background: transparent url( http://lh6.ggpht.com/_d6vKxl1jKWk/S4hXowX6jfI/AAAAAAAAeuQ/Kh_o0gZLwbg/page-vbg.jpg ) repeat-y scroll 50% 0px ;
   margin:0 auto ;
   width:100%;
}

 
 
body {
   background-color:#303030;
   background-image:url( http://lh4.ggpht.com/_d6vKxl1jKWk/S4hXnEVLGWI/AAAAAAAAeuI/ukNkpEHkdCw/body-bg.jpg ) ;
   background-position:center top ;
   background-repeat:repeat-x;
}


#navbar {display:none}
 




#bg {
   margin:0 auto;
   padding:0;
   background:transparent ;
   background-image: url( http://lh3.ggpht.com/_d6vKxl1jKWk/S4hXoeH5mWI/AAAAAAAAeuM/ec74D448ZVU/hat.jpg ) ;
    background-repeat:no-repeat;   
   background-position: center top ;
}



 
 
#header {
   margin: 0 auto;
   min-height:0px;
   height: 0px;
   width: 880px;
}


#page {
   background: transparent url( http://lh5.ggpht.com/_d6vKxl1jKWk/S4hXp6nFWuI/AAAAAAAAeuU/jO8MSYBEf1I/page-bg.jpg ) no-repeat center top;
}



 
 

#container {
   margin:0 auto;
   width:880px;
}


#banner {
   margin: 0 auto;
   height:230px;
   width:100%;
}


 
 





#nav1 {
   height:30px;
   margin:0 auto ;
   width:860px;   
   text-align:center;
}


#nav1 ul {
   display:table;
   margin:0 auto;
   padding:0;
   list-style-type:none;
   position:relative;
   height:30px;
   text-transform:uppercase;
   font-size:11px;
   font-family:Arial,sans-serif;
}


#nav1 ul li {
   display:block;
   float:left;
   margin:0;
   padding:0;
   background:transparent url("http://lh5.ggpht.com/_d6vKxl1jKWk/S4hXrjuK9vI/AAAAAAAAeuc/XK8plj7OVaU/hmenu.jpg") repeat-x top left;

}


#nav1 ul li a {
   display:block;
   float:left;
   color:#eeeeee;
   text-decoration:none;
   padding:0px 50px ;
   line-height:30px;
   font-weight:bold;
}


#nav1 ul li a:hover, #nav1 li#current a {
   color:#ffffff;
   background:transparent url("http://lh3.ggpht.com/_d6vKxl1jKWk/S4hXsf0pqgI/AAAAAAAAeug/QU0myZhtB7E/hmenu-sel.jpg") repeat-x top left;
}




#content {
   width:860px;
   margin:0 auto ;
   text-align:left;
   min-height:800px;
}


#content p {
   text-align:justify;
}






#footerWrapper {
   margin:0 auto;
   height:170px;
   padding:0;
   background:transparent url( http://lh3.ggpht.com/_d6vKxl1jKWk/S4hXqhnQHvI/AAAAAAAAeuY/JtC1phRl3B0/footerWrapper-bg.jpg ) no-repeat scroll center top ;
}


#footer {
   margin:0 auto;
   padding:0;
   width:880px;
   height:90px;
}


 
 
#footer {
   color:#FFFFFF;
   text-align:center;
}

#footer a:link, #footer a:visited {
   color:#0b00ed;
}


#footer a:hover{
   color:#00d6fc;
   text-decoration:none;
}


 
 








#right {
   width:200px;
   padding:10px 20px 20px 20px;
   float:left;
}


#center {
   width:580px;   
   padding:10px 20px 20px 20px ;
   float:left;
}

 
#content p {
   margin-top:10px;
   text-align:justify;
}


 
 
 
 
#sidebar .widget {
   margin-top:20px;
    padding: 0 10px 10px 10px;
    border:1px solid #d8d8f0;
}





.clear {
   clear: both;
   display: block;
   overflow: hidden;
   visibility: hidden;
   width: 0;
   height: 0;
}



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


<body>

   
          
      <div id="wrapper">

   <div id="bg">
   
      <div id="header">
                   
               </div>

      
      <div id="page">
                   
      


<div id="container">

   <!-- banner -->

   <div id="banner">
   </div>

   <!-- end banner -->



   <!-- horizontal navigation -->
   
   <div id="nav1">
                
      


<ul>
<li id="current" style="border:none"><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Posts RSS'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;' title='Comments RSS'>Comments RSS</a></li>
</ul>
      </div>
   
   <!-- end horizontal navigation -->
   
   
   
   <!--  content -->
   
   <div id="content">
                
      

<div id="center">

   <b:section class='main' id='main' showaddelement='no'>
      <b:widget id='Blog1' locked='true' title='Messages du blog' type='Blog' />
   </b:section>

</div>


<div id="right">

<b:section class='sidebar' id='sidebar' preferred='yes'>
   <b:widget id='BlogArchive1' locked='false' title='Blog archives' type='BlogArchive' />
   <b:widget id='Profile1' locked='false' title='About me' type='Profile'/>
</b:section>

</div>


<div class="clear" style="height:40px"></div>

      </div>


   <!-- end content -->


</div>

<!-- end container -->


         </div>


Texo Por Debajo De La Página:
Código:
<div id="footerWrapper">
                   
      
<div id="footer">
   <p style="padding-top:10px">
      Copyright 2010 <strong>Your company</strong> |
      
      <!-- If you did not purchase this template please, keep this link or make a $10 donation at www.doTemplate.com  -->
      
      Web template created with <a href="http://www.dotemplate.com" >doTemplate</a>
      
   </p>
   
</div>
         </div>
      
      
   </div>
   
   
</div>

   
   

</body>


7.) Va a quedar un espacio en blanco, pero tambien hay que borrar el menu horizontal, si no lo quieren borrar no lo hagan pero modifiquenlo como yo y si lo borran hay que crear otro y ponerlo al ultimo de Texto Por Arriba De La Página.

Borrar Lo Siguiente:
Código:
   <!--  content -->
   
   <div id="content">
                
      

<div id="center">

   <b:section class='main' id='main' showaddelement='no'>
      <b:widget id='Blog1' locked='true' title='Messages du blog' type='Blog' />
   </b:section>

</div>


<div id="right">

<b:section class='sidebar' id='sidebar' preferred='yes'>
   <b:widget id='BlogArchive1' locked='false' title='Blog archives' type='BlogArchive' />
   <b:widget id='Profile1' locked='false' title='About me' type='Profile'/>
</b:section>

</div>


<div class="clear" style="height:40px"></div>

      </div>


   <!-- end content -->


Resultado Texto Por Encima de La Página:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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[
   

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

Copyright 2010 - Thierry Ruiz - www.dotemplate.com - All rights reserved.

THIS TEMPLATE IS FREE AS LONG AS YOU KEEP THE LINK TO WWW.DOTEMPLATE.COM IN THE FOOTER
TO REMOVE THE LINK, PLEASE MAKE A 10 DOLLARS DONATION at www.dotemplate.com/#donate

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




html {
   background: #303030;
   margin:0 0 0 -1px;
   padding:0;   
   overflow-Y: scroll;
}


body {
   padding:0;
   margin :0;
   display:table;
   width:100%;   
}


 
 
body {
   color:#404040;
   font-family: 'Trebuchet MS', sans-serif ;
   font-size: 13px;
   font-style: normal ;
   font-weight: normal ;
   text-transform: normal;
}


p {
   letter-spacing: normal ;
   line-height: 1.7em ;
}

h1 {
   color:#000000;
   font-size:22px ;
   margin:25px 0 10px 0;
   clear:both;
}


h2 {
   color:#000000;
   font-size:20px ;
   margin:20px 0 10px 0;
   clear:both;
}


h3 {
   color:#000000;
   font-size:18px;
   margin:20px 0 5px 0;
   clear:both;
}



a:link, a:visited {
   color:#1860a8 ;
   text-decoration:none;
}


a:hover {
   color:#00c3ff;
   text-decoration:underline;
}




 
 

#wrapper {
   background: transparent url( http://lh6.ggpht.com/_d6vKxl1jKWk/S4hXowX6jfI/AAAAAAAAeuQ/Kh_o0gZLwbg/page-vbg.jpg ) repeat-y scroll 50% 0px ;
   margin:0 auto ;
   width:100%;
}

 
 
body {
   background-color:#303030;
   background-image:url( http://lh4.ggpht.com/_d6vKxl1jKWk/S4hXnEVLGWI/AAAAAAAAeuI/ukNkpEHkdCw/body-bg.jpg ) ;
   background-position:center top ;
   background-repeat:repeat-x;
}


#navbar {display:none}
 




#bg {
   margin:0 auto;
   padding:0;
   background:transparent ;
   background-image: url( http://lh3.ggpht.com/_d6vKxl1jKWk/S4hXoeH5mWI/AAAAAAAAeuM/ec74D448ZVU/hat.jpg ) ;
    background-repeat:no-repeat;   
   background-position: center top ;
}



 
 
#header {
   margin: 0 auto;
   min-height:0px;
   height: 0px;
   width: 880px;
}


#page {
   background: transparent url( http://lh5.ggpht.com/_d6vKxl1jKWk/S4hXp6nFWuI/AAAAAAAAeuU/jO8MSYBEf1I/page-bg.jpg ) no-repeat center top;
}



 
 

#container {
   margin:0 auto;
   width:880px;
}


#banner {
   margin: 0 auto;
   height:230px;
   width:100%;
}


 
 





#nav1 {
   height:30px;
   margin:0 auto ;
   width:860px;   
   text-align:center;
}


#nav1 ul {
   display:table;
   margin:0 auto;
   padding:0;
   list-style-type:none;
   position:relative;
   height:30px;
   text-transform:uppercase;
   font-size:11px;
   font-family:Arial,sans-serif;
}


#nav1 ul li {
   display:block;
   float:left;
   margin:0;
   padding:0;
   background:transparent url("http://lh5.ggpht.com/_d6vKxl1jKWk/S4hXrjuK9vI/AAAAAAAAeuc/XK8plj7OVaU/hmenu.jpg") repeat-x top left;

}


#nav1 ul li a {
   display:block;
   float:left;
   color:#eeeeee;
   text-decoration:none;
   padding:0px 50px ;
   line-height:30px;
   font-weight:bold;
}


#nav1 ul li a:hover, #nav1 li#current a {
   color:#ffffff;
   background:transparent url("http://lh3.ggpht.com/_d6vKxl1jKWk/S4hXsf0pqgI/AAAAAAAAeug/QU0myZhtB7E/hmenu-sel.jpg") repeat-x top left;
}




#content {
   width:860px;
   margin:0 auto ;
   text-align:left;
   min-height:800px;
}


#content p {
   text-align:justify;
}






#footerWrapper {
   margin:0 auto;
   height:170px;
   padding:0;
   background:transparent url( http://lh3.ggpht.com/_d6vKxl1jKWk/S4hXqhnQHvI/AAAAAAAAeuY/JtC1phRl3B0/footerWrapper-bg.jpg ) no-repeat scroll center top ;
}


#footer {
   margin:0 auto;
   padding:0;
   width:880px;
   height:90px;
}


 
 
#footer {
   color:#FFFFFF;
   text-align:center;
}

#footer a:link, #footer a:visited {
   color:#0b00ed;
}


#footer a:hover{
   color:#00d6fc;
   text-decoration:none;
}


 
 








#right {
   width:200px;
   padding:10px 20px 20px 20px;
   float:left;
}


#center {
   width:580px;   
   padding:10px 20px 20px 20px ;
   float:left;
}

 
#content p {
   margin-top:10px;
   text-align:justify;
}


 
 
 
 
#sidebar .widget {
   margin-top:20px;
    padding: 0 10px 10px 10px;
    border:1px solid #d8d8f0;
}





.clear {
   clear: both;
   display: block;
   overflow: hidden;
   visibility: hidden;
   width: 0;
   height: 0;
}



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


<body>

   
          
      <div id="wrapper">

   <div id="bg">
   
      <div id="header">
                   
               </div>

      
      <div id="page">
                   
      


<div id="container">

   <!-- banner -->

   <div id="banner">
   </div>

   <!-- end banner -->



   <!-- horizontal navigation -->
   
   <div id="nav1">
                
      


<ul>
<li id="current" style="border:none"><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Posts RSS'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;' title='Comments RSS'>Comments RSS</a></li>
</ul>
      </div>
   
   <!-- end horizontal navigation -->

         </div>


Para Crear Páginas Ocultas Para Que No Aparesca nada en el menu es este tutorial:

1.) Ir a : Controlar Extras => Agregar Extra => Páginas Ocultas
Y De Ahí Activar el extra

2.) Ir a: Controlar Páginas => Agregar Página => Y Poner Como Página oculta (Solo La Pueden Ver Los Usuarios Registrados O Algo Asi Dice)

3.) Ir a: Controlar Páginas => Agregar Página => Y Poner Como Subpagina De La Pagina Oculta

4.) Y para ponerlo en el menu solo sigan el siguinter tutorial y listo


Para Crear Menús En El Menú Horizontal:

1.) Cambiar de:

Código:
<ul>
<li id="current" style="border:none"><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Posts RSS'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;' title='Comments RSS'>Comments RSS</a></li>
</ul>


A:
Código:

<ul>
<li id="current" style="border:none"><a href="URL_PAGEWEB">NOMBRE_BOTON</a></li>
<li id="current" style="border:none"><a href="URL_PAGEWEB">NOMBRE_BOTON</a></li>
<li id="current" style="border:none"><a href="URL_PAGEWEB">NOMBRE_BOTON</a></li>
</ul>

O:
Código:

<ul>
<li><a href="URL_PAGEWEB">NOMBRE_BOTON</a></li>
<li><a href="URL_PAGEWEB">NOMBRE_BOTON</a></li>
<li><a href="URL_PAGEWEB">NOMBRE_BOTON</a></li>
</ul>


2.) Para Agregar mas botones agregar:
Para El Primero:
Código:

<li id="current" style="border:none"><a href="URL_PAGEWEB">NOMBRE_BOTON</a></li>

Antes De Que Termine En La Etiqueta </ul>

Para El Segundo:
Código:

<li><a href="URL_PAGEWEB">NOMBRE_BOTON</a></li>

Antes De Que Termine En La Etiqueta </ul>


Bueno Gracias Y Por Lo Primetido Esto Es Porque Le Dije Al Usuario De BebeAbordo que le daria un tutorial como este.

POR CIERTO LA PAGINA DEL EXTRA "PAGINAS OCULTAS" (O COMO LA NOMBRARON) TAMBIEN PONERLA COMO SUBPAGINA DE LA PAGINA OCULTA (PREFERIBLE LLAMARLE CON UN NOMBRE QUE NADIE AVERIGUARIA) GRACIAS!!!
↑
Mensaje28-02-2010, 03:10 (UTC)    
Título del mensaje:
Responder citando
Hola,

Esto ya lo habia aportado el usuario kilometro6 si no me equivoco, pero este esta muy bien explicado. Saludos!
______________
Depuis 2008.
↑
Mensaje28-02-2010, 03:41 (UTC)    
Título del mensaje:
Responder citando
team-drakox escribió:
Hola,

Esto ya lo habia aportado el usuario kilometro6 si no me equivoco, pero este esta muy bien explicado. Saludos!


No sé, no lo había visto, esto me costo 3 días terminarlo de ponerlo bien entendido... Pero igual gracias por el comentario!
↑
Mensaje28-02-2010, 19:59 (UTC)    
Título del mensaje:
Responder citando
wow porque ningun tuto aparece

Cita:

Se tiene primero que tener una idea de lo que queremos, yo por ejemplo quiero mi web a la derecha y así empezaremos

abrimos etiqueta en css body (que ya esta nombrada)

body{etcetc}

etcetc


osea casó todos los tutos son con codigos hechos y lo unico que cambian son imagenes!!! eso no es programar solo es poner imagenes
______________
PWG me vio nacer en desarrollo web, ahora estoy estudiando programacion en la universidad gracias a ti, GRACIAS PWG!
↑
Mostrar mensajes anteriores:   
  • Página 1 de 1

  •  
    • Saltar a:  


Powered by phpBB © 2001, 2005 phpBB Group

© 2024 webme GmbH, Alemania. Todos los derechos reservados.