CSS, Herramientas

CSS Templates Free: Plantillas CSS gratis

Publicado por Claudia en Julio 13, 2012

CSS Templates Free

Hay algo que siempre agradezco: las plantillas CSS. Son muy útiles a la hora de empezar un nuevo proyecto (sitio web o blog), porque las puedes adaptar a tus necesidades sin importar el gestor de contenidos que uses. Además, son una excelente fuente de inspiración si quieres empezar a diseñar y maquetar desde cero.

En CSS Templates Free encuentras más de 200 plantillas CSS gratuitas CSS3 y HTML5, bien categorizadas y para todos los gustos. Lo que destaco del sitio, es que se ve actualizado, y hay una buena selección de templates modernos y que siguen las últimas tendencias en cuanto a diseño:  tipografías llamativas, slideshows como Nivo Slider y atractivos efectos jQuery. Merece un vistazo.

Enlace: CSSTemplatesFree.org | Vía: Soft and apps

Tags:
Herramientas

Blogger Template: Faustina

Publicado por Claudia en Junio 10, 2012

Faustina es una plantilla Blogger para blogs de mujeres u otras temáticas. Incluye Nivo slider, buscador interno, espacio para publicidad en la cabecera y logo PSD. Incluye una versión simple sin slider.

Faustina Blogger Template

DEMO | DESCARGA Faustina Blogger (2105)

Sigue leyendo

Tags: , ,
Free Blogger Templates

Movie Show Blogger Template

Publicado por Claudia en Enero 28, 2012

Movie Show es una adaptación para Blogger de un diseño que hice para WordPress. Es ideal para blogs de películas.

Movie Show Blogger Template

DEMO | DESCARGA Movie Show (1534)

Características de la plantilla:

  • Tres columnas
  • Nivo slider incorporado
  • Script para resúmenes automáticos con miniatura de imagen
  • Comentarios de autor destacados
  • Compatible con las últimas versiones de IE, Chrome y Firefox
  • Incluye logo PSD y favicon

Sigue leyendo

Tags:
Free Blogger Templates

Angry Birds Blogger Template

Publicado por Claudia en Enero 27, 2012

Angry Birds” es una plantilla basada en el popular juego de Rovio del mismo nombre; diseñada originalmente para WordPress y ahora disponible para Blogger. La plantilla es gratuita para uso personal, siempre y cuando se respeten los créditos.

Angry Birds Blogger Template

DEMO | DESCARGA Angry Birds Blogger (1700)

Características de la plantilla:

  • Dos columnas
  • Nivo slider incorporado
  • Columnas inferiores (bottombar)
  • Script para resúmenes automáticos con miniatura de imagen
  • Comentarios de autor destacados
  • Compatible con las últimas versiones de IE, Chrome y Firefox
  • Incluye logo PSD y favicon

Instructions – Instrucciones

1. Setting up the slideshow
Configurando el slider

Go to Design/Edit HTML and find the following code:
Ve a Diseño/Edición de HTML y encuentra el siguiente código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <div class='crosscol'>
<div id='slider-container'>
 
<div id='slider'>
 
  <a href='http://angrybirds.themesnack.net/?p=24' title='Introducing WP Theme'>
 
 <img alt='' src='http://4.bp.blogspot.com/-dPjpuC2oyXM/Ts2hwaYzI_I/AAAAAAAACq8/PRrUt7GLXV8/s1600/5.jpg' title='Introducing WP Theme'/>
 
 </a>
 
  <a href='http://angrybirds.themesnack.net/?p=21' title='Another image in a post'>
 
 <img alt='' src='http://1.bp.blogspot.com/-ENdSWyspy08/Ts2iKJP5szI/AAAAAAAACrI/QAvlVIReZQA/s1600/4.jpg' title='Another image in a post'/>
 
 </a>
 
  <a href='http://angrybirds.themesnack.net/?p=17' title='An image in a post'>
 
 <img alt='' src='http://4.bp.blogspot.com/-bUQ83dpjBt8/Ts2ij6O9sFI/AAAAAAAACrU/4PSoxsafNug/s1600/31.jpg' title='An image in a post'/>
 
 </a>
 
  <a href='http://angrybirds.themesnack.net/?p=6' title='Testing HTML elements'>
 
 <img alt='' src='http://1.bp.blogspot.com/-mUFbtJqKGsE/Ts2i2Ty0AAI/AAAAAAAACrg/WwLy-uer-5w/s1600/2.jpg' title='Testing HTML elements'/>
 
 </a>
 
  <a href='http://angrybirds.themesnack.net/?p=1' title='Category Hierarchy'>
 
 <img alt='' src='http://3.bp.blogspot.com/-uZG3YUPpUwg/Ts2jH1REctI/AAAAAAAACrs/qgyW1JddFRQ/s1600/1.jpg' title='Category Hierarchy'/>
 
 </a>
 
 </div>
 
<br clear='all'/>
 
</div>
 
      </div>
</b:if>
</b:if>

You may replace all image links by yours and set up your post descriptions and links.
Puedes reemplazar los enlaces por tus propias imágenes y configurar las descripciones de tus posts y links.

2. Setting up the social media icons.
Configurando los botones social media.

Go to Design/Edit HTML, click on “Expand widget templates” and find the following code:
Ve a Diseño/Edición de HTML, click en “expandir plantillas de artilugios y encuentra el siguiente código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<h2>Blog Subscription</h2>
<ul id='subscription'>
 
      <li>
 
        <a href='YOUR-LINK-HERE'>
<img alt='Twitter' src='http://1.bp.blogspot.com/-iekDCUVs3Dg/Ts2ZqqRjv0I/AAAAAAAACqc/PbEaxTHQ8Ug/s1600/twitter.png'/></a>
        <h4><a href='YOUR-LINK-HERE'>Follow me</a></h4>
        <p>You can follow my updates on Twitter</p>
 
      </li>
 
      <li>
 
        <a href='YOUR-LINK-HERE'>
<img alt='Feed' src='http://3.bp.blogspot.com/-I3VbqY1KmLo/Ts2ZrHYLYNI/AAAAAAAACqk/OE57s_gmAw4/s1600/rss.png'/></a>
        <h4><a href='YOUR-LINK-HERE'>Posts RSS</a></h4>
        <p>Read my full posts on your favorite feed reader</p>
      </li>
<li>
 
        <a href='YOUR-LINK-HERE'>
<img alt='Facebook' src='http://4.bp.blogspot.com/-PcYUh1JnNb4/Ts2ZqnSa59I/AAAAAAAACqM/-r4kvPm3V7k/s1600/facebook.png'/></a>
        <h4><a href='YOUR-LINK-HERE'>Facebook</a></h4>
        <p>Become a fan of our blog on Facebook</p>
      </li>
    </ul>

Puedes modificar los textos a tu antojo. Para cambiar los textos del buscador, utiliza CTRL+F para encontrar en tu plantilla las palabras que desees modificar.

Tags: , ,
Free Blogger Templates

Blogger Template: Football Fan

Publicado por Claudia en Agosto 21, 2011

Como su nombre lo indica, Football Fan es una plantilla gratuita para Blogger, ideal para blogs de football con CSS3.

DEMO | DESCARGA Football Fan (1190)

Características:

  • 2 columnas ancho fijo
  • Bordes redondeados con CSS3
  • Slideshow con jQuery
  • Buscador interno incorporado
  • Exceperts con thumbnails automáticos
  • Lista para banners de 468×60 píxeles en la cabecera
  • Columnas inferiores (bottombar)
  • Comentarios de autor destacados
  • Google font: Yanone Kaffeesatz
  • Logo PSD incluido


Instructions – Instrucciones

1. Setting up the slideshow
Configurando el slider

Go to Design/Edit HTML and find the following code:
Ve a Diseño/Edición de HTML y encuentra el siguiente código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!-- Slide 1 Code Start -->		
<div class='featured-post clearfix'>
<div class='slider-image'>
<a href='FEATURED-POST-LINK-1-HERE'><img height='210' src='http://3.bp.blogspot.com/-4pbL6uZdqh8/TiTXdIVUJHI/AAAAAAAACdQ/_k5BzD4qRTM/s1600/1.jpg' width='300'/></a>
</div>
<div class='slider-post'>
<h2>Featured Post 1 Title</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<div class='readmorecontent'><a href='#'>Read More</a></div>
</div> 
</div>
<!-- Slide 1 Code End -->
 
 
<!-- Slide 2 Code Start -->		
<div class='featured-post clearfix'>
<div class='slider-image'>
<a href='FEATURED-POST-LINK-2-HERE'><img height='210' src='http://2.bp.blogspot.com/-qQ7iHRGlQ4U/TiTXevUREzI/AAAAAAAACdY/JdHCH5trw5c/s1600/2.jpg' width='300'/></a>
</div>
<div class='slider-post'>
<h2>Featured Post 2 Title</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<div class='readmorecontent'><a href='#'>Read More</a></div>
</div> 
</div>
<!-- Slide 2 Code End -->
 
 
<!-- Slide 3 Code Start -->		
<div class='featured-post clearfix'>
<div class='slider-image'>
<a href='FEATURED-POST-LINK-3-HERE'><img height='210' src='http://2.bp.blogspot.com/-kqF4BI7Yb94/TiTXe_UcWxI/AAAAAAAACdg/KBZ788kZJ1g/s1600/3.jpg' width='300'/></a>
</div>
<div class='slider-post'>
<h2>Featured Post 3 Title</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<div class='readmorecontent'><a href='#'>Read More</a></div>
</div> 
</div>
<!-- Slide 3 Code End -->
 
 
<!-- Slide 4 Code Start -->		
<div class='featured-post clearfix'>
<div class='slider-image'>
<a href='FEATURED-POST-LINK-4-HERE'><img height='210' src='http://3.bp.blogspot.com/-ePVXXsQGv0g/TiTXfKBoOFI/AAAAAAAACdo/-lE6q3BXdE0/s1600/4.jpg' width='300'/></a>
</div>
<div class='slider-post'>
<h2>Featured Post 4 Title</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
<div class='readmorecontent'><a href='#'>Read More</a></div>
</div> 
</div>
<!-- Slide 4 Code End -->
 
 
<!-- Slide 5 Code Start -->		
<div class='featured-post clearfix'>
<div class='slider-image'>
<a href='FEATURED-POST-LINK-5-HERE'><img height='210' src='http://4.bp.blogspot.com/-91bq04K4wQQ/TiTXfNK9HdI/AAAAAAAACdw/W_8cSC5y2Uc/s1600/5.jpg' width='300'/></a>
</div>
<div class='slider-post'>
<h2>Featured Post 5 Title</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<div class='readmorecontent'><a href='#'>Read More</a></div>
</div> 
</div>
<!-- Slide 5 Code End -->

You may replace all image links by yours and set up your post descriptions and links.
Puedes reemplazar los enlaces por tus propias imágenes y configurar las descripciones de tus posts y links.

2. Setting up the social media icons.
Configurando los botones social media.

Go to Design/Edit HTML, click on “Expand widget templates” and find the following code:
Ve a Diseño/Edición de HTML, click en “expandir plantillas de artilugios y encuentra el siguiente código:

1
2
3
4
5
<div id='social'>
<span><a href='#'><img src='http://2.bp.blogspot.com/-_05o3_BCgO0/TiojpH75tXI/AAAAAAAAChA/tR1NNqAhGng/s1600/facebook.png'/></a></span>
<span><a href='#'><img src='http://4.bp.blogspot.com/-Fh2tPUW7yPk/Tiojo2aQZ-I/AAAAAAAACg4/nmQyPEhdmsQ/s1600/rss.png'/></a></span>
<span><a href='#'><img src='http://3.bp.blogspot.com/-yFWkLwwzBU0/TiojodaxW_I/AAAAAAAACgw/5-lPotMIpL4/s1600/twitter.png'/></a></span>
</div>
Tags: , ,