AjMrDeSiGn

Templates Blogger, exquisitez para usuarios curiosos.

Crear template blogger (Parte 4)

5 oct. 2012

Solo queda el footer, para terminar de crear el template blogger parte 4, añadimos otro bloque div, la navbar la hemos ocultado dándole un display:none;, solo quedaría crear la demo para ver el diseño realizado desde cero, hay que guardarlo en xml, para instalarlo, entramos en plantilla › crear copia de seguridad/Restablecer › sube una plantilla desde un archivo de tu equipo y subir.


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:

Normas comentarios › Leer antes de comentar...

« »

Suscríbete a nuestro feed...