AjMrDeSiGn

Templates Blogger, exquisitez para usuarios curiosos.

Crear template blogger (Parte 3)

4 oct. 2012

Empezamos con los contenedores de post y sidebar, crear template blogger parte 3, todo se basa en ejemplos para tener una idea de como realizar el diseño desde cero.


Creamos 2 bloques div, una para los post y el otro para la sidebar. No se me ocurre otra forma mejor de explicarlo, puedo ser un libro cerrado, solo se diseñar, redactar lo intento.

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

/* Contenedor post y sidebar
---------------------------------
*/

#contenedor-post {
width: 630px;
margin:0 30px 0 0;
padding:0;
float:left;
word-wrap: break-word;
overflow: hidden;
}

#contenedor-sidebar {
width: 320px;
margin:0;
padding:0;
float:left;
word-wrap: break-word;
overflow: hidden;
}

]]></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>

<div id='contenedor-post'>

<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='contenedor-sidebar'>

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

</div>

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

</div>

<b:include data='blog' name='google-analytics'/>
</body>
</html>

Queda muy poco para terminar la estructura solo falta el footer, añadir css para que quede todo bien organizado y podremos finalizar este mini tutoría de crear template para blogger.

No hay comentarios:

Normas comentarios › Leer antes de comentar...

« »

Suscríbete a nuestro feed...