Crear template blogger (Parte 2)
Empezamos añadiendo un bloque nuevo, en el cual se añadirán 2 bloques mas, uno para el titulo y el otro pare el menú.
<?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[
/*
Autor: AjMrDesiGn
url: http://ajmrdesign.com
fwcha: 02/10/2012
Template desde cero
---------------------------------
*/
/* CSS
---------------------------------
*/
body {
background: #fff;
margin: 0;
padding: 0;
color: #333;
font-family: Arial,Helvetica,sans-serif;
font-size:13px;
text-align: center;
}
a:link, a:visited {
color:#000;
}
a:hover {
color:#3a8eff;
}
/* Contenedor
---------------------------------
*/
#contenedor-ajmrdesign {
width: 980px;
margin:0 auto;
padding:0;
text-align:center;
}
/* Header
---------------------------------
*/
#contenedor-header {
background: #333;
margin:0;
padding:0;
height: 50px;
}
.titulo {
width: 300px;
margin:0;
padding:0;
float:left;
}
.titulo h1 {
margin:0;
padding:0 0 0 15px;
font-size:16px;
line-height: 50px;
text-align:left;
}
.titulo h1 a {
color:#fff;
}
.menu {
width: 680px;
margin:0;
padding:0;
float:left;
}
.menu ul {
list-style:none;
margin:0;
padding:0;
float:left;
}
.menu li {
list-style:none;
margin:0;
padding:0;
line-height: 50px;
text-indent: 10px;
float:left;
}
.menu li a {
color:#fff;
}
]]></b:skin>
</head>
<body>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Barra de navegación' type='Navbar'/>
</b:section>
<div id='contenedor-ajmrdesign'>
<div id='contenedor-header'>
<div class='titulo'>
<h1><a expr:href='data:blog.homepageUrl'><data:blog.title/></a></h1>
</div>
<div class='menu'>
<ul>
<li><a href='#'>Editar</a></li>
<li><a href='#'>Editar</a></li>
<li><a href='#'>Editar</a></li>
</ul>
</div>
</div>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<b:section class='footer' id='footer'/>
</div>
<b:include data='blog' name='google-analytics'/>
</body>
</html>
Ya tenemos finalizado y preparado nuestro header con titulo y menú, en la parte 3 se explicara los post y la sidebar.
No hay comentarios: