AjMrDeSiGn

Templates Blogger, exquisitez para usuarios curiosos.

Crear template blogger (Parte 2)

3 oct. 2012

Continuamos con el header, crear template blogger parte 2, que sera en puro html, un menú simple, fácil de entender, todo se realiza mediantes ejemplos, para aprender rapido, hay que tener un concepto de css, si quieres mejorarlo y experimentar al gusto de uno.


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:

Normas comentarios › Leer antes de comentar...

« »

Suscríbete a nuestro feed...