Blogger Template: Football Fan

Free Blogger Templates 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>
Compártelo!
  • Hola Boy

    hola, muy bueno como pantilla.

    Aora porchè non hacer una pantilla para WebRadio o para Podcaster ?

    Gracias

    Hola Boy

  • My blog with this template: http://www.aquaa3.com, hey make a “Related Posts” with imagens
    -Autor with personal pic
    -Image Thumbnail Viewer with lightbox in post.

    Please (:

    TY

  • Muito bom este template.
    Obg….
    sucessos……

  • Bruno

    Hi! Why I have the ABOUT ME on the To of this website? euvioporto.blogspot.com
    I cant remove this… Anybody can help me???

    Thanks

  • Bruno

    On the top*

  • Muchas gracias! que buen template! lo estoy usando ahora mismo, para mi blog de información deportiva… te hago una pregunta

    en el Slider con JQuery, como se puede hacer para que cada entrada nueva se actualize automáticamente allí?

    Gracias! 😉

  • Thanks.. I used your theme for football fans site : http://www.persikabofc.com

  • juanjo

    Te hago una pregunta, los posts destacados se actualizan solos o hay que editar el codigo cada tanto con las direcciones de los posts?
    No hay manera de hacer que muestre los ultimos 5 posts y se actualize solo?

    gracias!

  • Claudia

    Juanjo: No, no hay manera de que los posts se actualicen automáticamente como en WordPress.

  • Pingback: Football Fan – Free Blogger Template()

  • como hago para poder poner acentos en la descripción que sale al lado de las fotos de arriba. en la plantilla Fan football? ¿tengo que cambiar el tipo de letra?

    • Creo que esa fuente sí admite tildes. Pero, si no, podrías cambiar la familia de la fuente (letra).

  • Muchas gracias chicablogger por la plantilla, era lo que estaba buscando para mi blog de futbol.. y no es la única utilidad que he encontrado en tu sitio.. sos lo más!!

  • Dale un vistazo a mi blog, chicablogger, y envíame algunas sugerencias por favor.. GRACIAS!

  • Wow nice template..
    i will use this theme