En esta segunda parte, mostraré algún ejemplo de lo que se podía lograr con la anterior plantilla "Minimizada". Si bien en el anterior tutorial, mostré como montar una web en HTML normal como cualquier otra en Blogger. Sólo es cosa de tener el estilo de la página y la estructura. Así que ya no más servidores, sólo algo donde montar imágenes y listo!
En el anterior mostré la plantilla "Minimizada" para montar cualquier cosa en Blogger. Luego de hartos días -les pido disculpas- volví para mostrar el ejemplo. Ahora tomé una página normal en HTML con CSS y la modifiqué sólo un poco para lanzarla en Blogger.
Haciendo clic en la captura se van al diseño original, y ahora, si bien el diseño está muy bien formado y tiene sprites, algo de CSS y efectos con jQuery (todavía no logro acomodarlos) pero logré transformarla -o al menos que se viera con los hover del sprite).
Para ver el demo clic aquí.
El código de la página quedó algo así:
<?xml version="1.0" encoding="UTF-8" ?>Saludos.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 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>
<title>Creative Zodiac</title>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'/>
<b:skin><![CDATA[
body {font-family: PT Sans Narrow, Geneva, sans-serif; font-size:15px; line-height:15px; color:#333;}
/* Elementos básicos */
body { background: #222222 url(http://demo.freshface.cz/file/cz/wp/wp-content/themes/creativezodiac_v1.2.5/gfx/bg_lights.jpg); background-position:top center; background-repeat: no-repeat; height:100%;}
#bgimg {width:100%; height:100%; background-image: url(http://demo.freshface.cz/file/cz/wp/wp-content/themes/creativezodiac_v1.2.5/gfx/bg_stripes.png);text-align:center; background-repeat:repeat-x;}
#wrapper { width:615px; margin:0 auto; padding:90px 0 40px 0; text-align:left;}
/* Logo */
#header { width:615px; height:42px; position:relative;}
#header .logo {float:left;}
#header .vcard_header {float:right; margin: 11px 29px 0 0; position:relative; }
/* Contenido */
#content {width:614px; height:375px; overflow:hidden; position:relative; }
#content_bg {width:614px; height:375px; margin:24px 0 26px 0; background:url(gfx/content_bg.png); position:relative; background-repeat:no-repeat; }
.main_content_area {width:600px; height:310px; position:absolute; top:55px; overflow:hidden; -moz-border-radius:30px; }
.blur_left {width:17px; height:300px; background:url(http://demo.freshface.cz/file/cz/wp/wp-content/themes/creativezodiac_v1.2.5/gfx/blur_left.png); background-position:left; z-index:99; position:absolute; top:55px;}
.blur_right {width:17px; height:310px; background:url(http://demo.freshface.cz/file/cz/wp/wp-content/themes/creativezodiac_v1.2.5/gfx/blur_right.png); background-position:right; z-index:99; position:absolute; top:55px; right:14px;}
/* Botones */
#content .introbox_holder {height:375px; width: 615px; position:relative;}
#content .introbox_about_shadow {width:205px; height:324px; position:absolute; top:25px; left:0px; z-index:1;}
#content .introbox_about {width:205px; height:324px; position:absolute; top:25px; left:0px; z-index:2; background-image: url(http://demo.freshface.cz/file/cz/wp/wp-content/themes/creativezodiac_v1.2.5/gfx/introboxes.png); cursor:pointer;}
#content .introbox_about:hover {width:205px; height:324px; background-image: url(http://demo.freshface.cz/file/cz/wp/wp-content/themes/creativezodiac_v1.2.5/gfx/introboxes.png); background-position: 0px 324px; cursor:pointer;}
#content .introbox_works_shadow {width:205px; height:324px; position:absolute; top:25px; left:205px; z-index:1;}
#content .introbox_works {width:205px; height:324px; position:absolute; top:25px; left:205px; z-index:2; background-image: url(http://demo.freshface.cz/file/cz/wp/wp-content/themes/creativezodiac_v1.2.5/gfx/introboxes.png); background-position: -205px 0px; cursor:pointer;}
#content .introbox_works:hover {width:205px; height:324px; background-image: url(http://demo.freshface.cz/file/cz/wp/wp-content/themes/creativezodiac_v1.2.5/gfx/introboxes.png); background-position: -205px 324px; cursor:pointer;}
#content .introbox_contact_shadow {width:205px; height:324px; position:absolute; top:25px; left:410px; z-index:1;}
#content .introbox_contact {width:205px; height:324px; position:absolute; top:25px; left:410px; z-index:2; background-image: url(http://demo.freshface.cz/file/cz/wp/wp-content/themes/creativezodiac_v1.2.5/gfx/introboxes.png); background-position: 205px 0px; cursor:pointer; }
#content .introbox_contact:hover {width:205px; height:324px; background-image: url(http://demo.freshface.cz/file/cz/wp/wp-content/themes/creativezodiac_v1.2.5/gfx/introboxes.png); background-position: 205px 324px; cursor:pointer;}
/* Footer */
#footer {background-image: url(); width:600px; height:51px; background-repeat: no-repeat; color:#6a6a6a; font-size:15px; position:relative;}
#footer a {text-decoration:none; color:#737373; padding:0 5px 0 3px; display:inline; }
#footer a:hover { color: #EEE;}
#footer .left { position:absolute; left:20px; top:14px; }
#footer .right { position:absolute; right:15px; top:14px;}
]]></b:skin>
</head>
<body>
<div id='bgimg'>
<div id='wrapper'>
<div id='header'>
<div class='logo'>
<a href='#'><img alt='Creative Zodiac' src='http://demo.freshface.cz/file/cz/wp/wp-content/themes/creativezodiac_v1.2.5/gfx/logo.png'/></a>
</div><!-- END "logo" -->
<a class='vcard_header' href='http://www.yourwebsite.com/vcard.vcf'>
<img alt='Download My VCard' id='download_vcard' src='http://demo.freshface.cz/file/cz/wp/wp-content/themes/creativezodiac_v1.2.5/gfx/vcard.png'/>
</a><!-- END "vcard_header" -->
<div class='tooltip'>
<div class='tooltip_right'/>
</div><!-- END "tooltip" -->
</div>
<div id='content'>
<div class='introbox_holder'>
<img alt='About' class='introbox_about_shadow' src='http://demo.freshface.cz/file/cz/wp/wp-content/themes/creativezodiac_v1.2.5/gfx/introbox_shadow.png'/>
<div class='introbox_about'>
</div><!-- END "introbox_about" -->
<img alt='Works' class='introbox_works_shadow' src='http://demo.freshface.cz/file/cz/wp/wp-content/themes/creativezodiac_v1.2.5/gfx/introbox_shadow.png'/>
<div class='introbox_works'>
<div class='introbox_works_active'/>
</div><!-- END "introbox_works" -->
<img alt='Contact' class='introbox_contact_shadow' src='http://demo.freshface.cz/file/cz/wp/wp-content/themes/creativezodiac_v1.2.5/gfx/introbox_shadow.png'/>
<div class='introbox_contact'>
<div class='introbox_contact_active'/>
</div><!-- END "introbox_contact" -->
</div><!-- END "introbox_holder" -->
</div><div id='footer'>
<p class='left'>
Copirait - 2011 | Potenciado con Blogger. </p>
<p class='right'>
<a href='#'>Inicio</a>|
<a href='#'>Sobre</a>|
<a href='http://demo.freshface.cz/file/cz/wp/#/41-portfolio/'>Portafolio</a>|
<a href='http://demo.freshface.cz/file/cz/wp/#/46-contact/'>Contacto</a> </p>
</div></div>
</div></body>
</html>
PD: Luego les traigo la última parte!
