Crear template blogger (Parte 4)
Abrimos un nuevo documento de texto, copiamos lo de abajo y lo guardamos en xml.
<?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
---------------------------------
*/
#Navbar1 {
display: none;
}
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;
}
/* footer
---------------------------------
*/
#contenedor-footer {
clear:both;
margin:0 ;
padding:0;
}
/* Creditos de autor
---------------------------------
*/
#contenedor-creditos {
background: #333;
margin:0 ;
padding:5px 0 5px 0;
color:#ddd;
}
#contenedor-creditos 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>
<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>
<div id='contenedor-footer'>
<b:section class='footer' id='footer'/>
</div>
<div id='contenedor-creditos'>
Diseño por <a href='http://ajmrdesign.com'>AjMrDeSiGn</a> / con la tecnologia de <a href='http://www.blogger.com/home'>Blogger</a> (c) 2012 / <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>
</div>
</div>
<b:include data='blog' name='google-analytics'/>
</body>
</html>
Todavia queda mas tutoría, tenemos que añadir mas css, para las entradas del blog, la sidebar y el footer que sera de 3 columnas. Es un ejemplo de como estructurar un diseño desde cero para blogger. Demo template blogger desde cero.
No hay comentarios: