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

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: , ,