Free Blogger Templates

Monta tu propia tienda virtual usando Blogger

Publicado por Claudia en octubre 3, 2011

BloggerStore

Me sorprendió mucho esta plantilla creada por Klodian de Deluxe Templates, diseñador minimalista de temas para Blogger y WordPress. Se llama BloggerStore, y es una plantilla premium tipo galería de cinco columnas que te permite vender productos en tu blog de Blogger.

Es una plantilla de diseño atractivo que incluye un carrusel de imágenes y menús deplegables con jQuery; pero lo que tiene de especial es la integración de SimpleCart, un liviano plugin javascript para E-Commerce que te permite añadir ítems a tu carrito de compras, y que opera con Paypal para que puedas realizar tus pagos.

La plantilla no es muy difícil de instalar y customizar, y puedes descargarla en forma gratuita.

Demo y Descarga | Instrucciones

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 (1245)

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='https://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='https://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='https://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='https://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='https://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='https://2.bp.blogspot.com/-_05o3_BCgO0/TiojpH75tXI/AAAAAAAAChA/tR1NNqAhGng/s1600/facebook.png'/></a></span>
<span><a href='#'><img src='https://4.bp.blogspot.com/-Fh2tPUW7yPk/Tiojo2aQZ-I/AAAAAAAACg4/nmQyPEhdmsQ/s1600/rss.png'/></a></span>
<span><a href='#'><img src='https://3.bp.blogspot.com/-yFWkLwwzBU0/TiojodaxW_I/AAAAAAAACgw/5-lPotMIpL4/s1600/twitter.png'/></a></span>
</div>
Tags: , ,
Free Blogger Templates

Blogger Template: Game Strike

Publicado por Claudia en julio 29, 2011

Game Strike es una plantilla para blogs de juegos, inspirada en Counter Strike.


DEMO | DESCARGA Game Strike (3338)


Características:

  • 2 columnas de ancho fijo
  • Coin slider incorporado
  • Columnas inferiores
  • Buscador interno
  • Iconos social media
  • Incluye las últimas funciones de Blogger
  • Comentarios de autor destacados
  • PDS logo (font: Android Nation)

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:

<!-- Featured Content Slider Started -->
 
 
<div id='slide'>
<div id='gallerycover'>
<ul>
 
<!-- Featured Slide 1 Code Start -->
<li>
<a href='SLIDER-1-LINK-HERE'>
<img class='slidim' src='https://3.bp.blogspot.com/-eV92P4chlBc/ThGAKOx0ArI/AAAAAAAACXI/QQBZuo5ayFg/s1600/1.jpg'/>
<span>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger Edit HTML and find these sentences. Now replace these with your own descriptions[...] </p>
</span>
</a>
</li>
<!-- Featured Slide 1 Code End -->
 
 
<!-- Featured Slide 2 Code Start -->
<li>
<a href='SLIDER-2-LINK-HERE'>
<img class='slidim' src='https://2.bp.blogspot.com/-CrZBtCL5jnY/ThGAL4F5YWI/AAAAAAAACXM/8uGvL05bfW0/s1600/2.jpg'/>
<span>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger Edit HTML and find these sentences. Now replace these with your own descriptions[...] </p>
</span>
</a>
</li>
<!-- Featured Slide 2 Code End -->
 
 
<!-- Featured Slide 3 Code Start -->
<li>
<a href='SLIDER-3-LINK-HERE'>
<img class='slidim' src='https://3.bp.blogspot.com/-5wxUIkAuWPk/ThGANXcIGLI/AAAAAAAACXQ/7jh2kB6umqo/s1600/3.jpg'/>
<span>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger Edit HTML and find these sentences. Now replace these with your own descriptions[...] </p>
</span>
</a>
</li>
<!-- Featured Slide 3 Code End -->
 
 
<!-- Featured Slide 4 Code Start -->
<li>
<a href='SLIDER-4-LINK-HERE'>
<img class='slidim' src='https://2.bp.blogspot.com/-vtNpmGJLSlQ/ThGARlhHYDI/AAAAAAAACXU/73dGGJ6Wr7g/s1600/4.jpg'/>
<span>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger Edit HTML and find these sentences. Now replace these with your own descriptions[...] </p>
</span>
</a>
</li>
<!-- Featured Slide 4 Code End -->
 
</ul>
</div>
</div>

You may replace all image links by yours.
Puedes reemplazar los enlaces por tus propias imágenes.

Tags: , , ,
Free Blogger Templates

Blogger Template: Travel Theme

Publicado por Claudia en julio 21, 2011

DEMO | DESCARGA Travel Theme (2971)


Características:

  • 3 columnas de ancho fijo
  • jQuery roundabout slider
  • Columnas inferiores
  • Buscador Interno
  • Comentarios de autor destacado
  • Soporta las últimas funciones de Blogger
  • Crossbrowser Compatible
  • Twitter ready
  • Inlcuye logo PSD

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:

<li class='back'><img src='https://3.bp.blogspot.com/-LFF6_irphVk/Th_JxJDq_QI/AAAAAAAACag/XDKFezr_VlA/s1600/2.jpg'/></li> 
<li class='back'><img src='https://2.bp.blogspot.com/-B0MoswLLvDg/Th_JzXwWKbI/AAAAAAAACao/mC2BoLVcfEI/s1600/4.jpg'/></li> 
<li class='back'><img src='https://3.bp.blogspot.com/-NdjYKHNpBss/Th_JyHH68UI/AAAAAAAACak/_glVnwFw2Jw/s1600/3.jpg'/></li> 
<li class='back'><img src='https://2.bp.blogspot.com/--Qung72aeIc/Th_JwW3S_xI/AAAAAAAACac/TD9l6sLoCpo/s1600/1.jpg'/></li> 
<li><img src='https://4.bp.blogspot.com/-qTG6XtKXmYI/Th_J0NCCUPI/AAAAAAAACas/IrtikKSolBM/s1600/5.jpg'/></li>

You may replace all image links by yours.
Puedes reemplazar los enlaces por tus propias imágenes.

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:

<span class='facebooklink'><a href='#' title='Facebook'> Facebook</a></span>
<span class='rsslink'><a href='#' title='Feed RSS'> RSS Feed</a></span>
<span class='twitterlink'><a href='#' title='Twitter'> Twitter</a></span>

3. To set up the Twitter widget, go to Design/Edit HTML and find the following code. You must replace the username “claudia” buy yours (it appears twice):
Para configurar el widget de Twitter, ve a Diseño/Edición de HTML y encuentra el siguiente código. Debes reemplazar el nick “claudia” por el tuyo (aparece dos veces):

<a href='http://twitter.com/claudiacs' id='twitter-link'/>
<script src='https://twitter.com/javascripts/blogger.js' type='text/javascript'/>
<script src='https://twitter.com/statuses/user_timeline/claudiacs.json?callback=twitterCallback2&amp;count=1' type='text/javascript'/>
Tags: , ,
Free Blogger Templates

Blogger Template: Cherry Mag

Publicado por Claudia en julio 9, 2011

DEMO | DESCARGA Cherry Mag (3099)

Características:

  • 2 columnas de ancho fijo
  • Coin slider incorporado
  • jQuery tiptip
  • Columnas inferiores
  • Buscador Interno
  • Comentarios de autor destacado
  • Ads ready
  • Soporta las últimas funciones de Blogger
  • Crossbrowser Compatible

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:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
 
<div id='slide'>
<div id='gallerycover'>
<ul>
 
<!-- Featured Slide 1 Code Start -->
<li>
<a href='SLIDER-1-LINK-HERE'>
<img class='slidim' src='https://1.bp.blogspot.com/-oaTUXPjWL-I/Tgarg4uW-vI/AAAAAAAACT4/njnxqKmqP7g/s1600/1.jpg'/>
<span>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger Edit HTML and find these sentences. Now replace these with your own descriptions[...] </p>
</span>
</a>
</li>
<!-- Featured Slide 1 Code End -->
 
 
<!-- Featured Slide 2 Code Start -->
<li>
<a href='SLIDER-2-LINK-HERE'>
<img class='slidim' src='https://4.bp.blogspot.com/-hP7gT8UkZcw/TgarprMBV5I/AAAAAAAACT8/GIS-cUKNKL4/s1600/2.jpg'/>
<span>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger Edit HTML and find these sentences. Now replace these with your own descriptions[...] </p>
</span>
</a>
</li>
<!-- Featured Slide 2 Code End -->
 
 
<!-- Featured Slide 3 Code Start -->
<li>
<a href='SLIDER-3-LINK-HERE'>
<img class='slidim' src='https://3.bp.blogspot.com/-rQc2QD3uvso/TgaruZwR5BI/AAAAAAAACUA/cyXXngCA-Lg/s1600/3.jpg'/>
<span>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger Edit HTML and find these sentences. Now replace these with your own descriptions[...] </p>
</span>
</a>
</li>
<!-- Featured Slide 3 Code End -->
 
 
<!-- Featured Slide 4 Code Start -->
<li>
<a href='SLIDER-4-LINK-HERE'>
<img class='slidim' src='https://4.bp.blogspot.com/-43BKkZx1i1U/Tgar0bET-vI/AAAAAAAACUE/9I0NVdtFFAM/s1600/4.jpg'/>
<span>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger Edit HTML and find these sentences. Now replace these with your own descriptions[...] </p>
</span>
</a>
</li>
<!-- Featured Slide 4 Code End -->
 
</ul>
</div>
</div>
 
</b:if></b:if>

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:

<a class='tooltip' href='#' title='facebook'><img src='https://3.bp.blogspot.com/-Ot0Xv26N4mU/Tgz3FHKd-wI/AAAAAAAACVc/qbgsS-OBzsE/s1600/facebook.png'/></a>
<a class='tooltip' href='#' title='RSS Feed'><img src='https://4.bp.blogspot.com/-0TakbFyNEuU/Tgz3Dev4jTI/AAAAAAAACVY/CqoWK6An90E/s1600/rss.png'/></a>
<a class='tooltip' href='#' title='Twitter'><img src='https://3.bp.blogspot.com/-GQmr4RfIdnQ/Tgz3BoL_21I/AAAAAAAACVU/e_FgjnIapQs/s1600/twitter.png'/></a>

3. To set up the date, go to Settings/Formatting/Timestamp format -> “Sunday, July 10, 2011”.
Para configurar la fecha, ve a Configuración/Formato/Formato de la hora -> “Domingo, julio 10, 2011”.

Tags: , ,