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 (854)
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>
Posts relacionados
Compártelo!
Como su nombre lo indica, Football Fan es una plantilla gratuita para Blogger, ideal para blogs de football con CSS3.
DEMO | DESCARGA Football Fan (854)
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> |
Posts relacionados
Compártelo!
14 Comentarios
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……
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
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
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!
Juanjo: No, no hay manera de que los posts se actualicen automáticamente como en WordPress.
[...] Template Settings [...]
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!