Movie Show es una adaptación para Blogger de un diseño que hice para WordPress. Es ideal para blogs de películas.
“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.
Características de la plantilla:
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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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.
Como su nombre lo indica, Football Fan es una plantilla gratuita para Blogger, ideal para blogs de football con CSS3.
Características:
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> |
Características:
1. Setting up the social media icons.
Configurando los botones social media.
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>
<a class='tooltip' href='YOUR-TWITTER-LINK' title='Twitter'><img src='http://1.bp.blogspot.com/-zumXL_3ADh0/TWGwvl8tRqI/AAAAAAAACPk/KgUthR7Gedw/s1600/twitter.png'/></a>
<h4><a href='YOUR-TWITTER-LINK'>Follow me</a></h4>
<p>You can follow my latest updates on Twitter</p>
</li>
<li>
<a class='tooltip' href='YOUR-RSS-LINK' title='Blog Subscription'><img src='http://2.bp.blogspot.com/-a-F0bRHSuFE/TWGwxE-NN2I/AAAAAAAACPo/sTBapSnGmPI/s1600/rss.png'/></a>
<h4><a href='YOUR-RSS-LINK'>Posts RSS</a></h4>
<p>Read my full posts on your favorite feed reader</p>
</li>
<li>
<a class='tooltip' href='YOUR-FACEBOOK-LINK' title='Facebook'><img src='http://3.bp.blogspot.com/-II1pMTB_p-k/TWGwtmKY-bI/AAAAAAAACPg/1OqOLsVU_2Q/s1600/facebook.png'/></a>
<h4><a href='YOUR-FACEBOOK-LINK'>Facebook</a></h4>
<p>Become a <data:blog.title/> fan on Facebook</p>
</li>You must put your own links there.
Debes poner tus propios links ahí.
2. Setting up the Twitter widget
Configurando el widget de Twitter
You must find the following code and replace the username “claudiacs” by yours (it appears twice):
Debes encontrar el siguiente código y remplazar el nombre de usuario “claudiacs” por el tuyo (aparece dos veces):
<li class='twitter-updates'> <ul id='twitter_update_list'/> <a href='http://twitter.com/claudiacs' id='twitter-link'/> <script src='http://twitter.com/javascripts/blogger.js' type='text/javascript'/> <script src='http://twitter.com/statuses/user_timeline/claudiacs.json?callback=twitterCallback2&count=1' type='text/javascript'/> </li>
Plantilla Blogger gratuita basada en Assassins Creed, ideal para blogs de juegos.
Características:
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 --> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <div id='slide'> <div id='gallerycover'> <ul> <!-- Featured Slide 1 Code Start --> <li> <a href='SLIDER-1-LINK-HERE'> <img class='slidim' src='http://4.bp.blogspot.com/-erRWWS5YHhk/TVQrdjWzghI/AAAAAAAACNs/vPhTrziwmTo/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='http://4.bp.blogspot.com/-0xAuygueLw0/TVQrlVd9k-I/AAAAAAAACNw/6DG4Az_v5y8/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='http://2.bp.blogspot.com/--5BhUOaEZsc/TVQrnwI6k9I/AAAAAAAACN0/UHEf2qx41V0/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='http://2.bp.blogspot.com/-VIey6IJDg1M/TVQrp-nyVsI/AAAAAAAACN4/gH0lQWVbv5M/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> <!-- Featured Content Slider End -->
In that code, you must replace every image by your new image link. Every image must be 840px × 270px. You can also link your featured post and replace every description by yours. You can also remove the whole code if you want.
En ese código, debes reemplazar cada enlace por el enlace directo a tu nueva imagen. Cada imagen debe ser 840px × 270px. También puedes poner los enlaces a tus posts destacados y reemplazar las descripciones. También puedes remover todo el código si no quieres que se muestre el slider.
2. Setting up the social media icons.
Configurando los botones social media.
Go to Design/Edit HTML and find the following code:
Ve a Diseño/Edición de HTML y encuentra el siguiente código:
<div id='social'> <ul> <li><a class='tooltip' href='#' title='Facebook'><img src='http://1.bp.blogspot.com/_V-IXTBBt1Bg/TVLsRSFQiCI/AAAAAAAACMs/JH_Ao3FA-Mo/s1600/facebook.png'/></a></li> <li><a class='tooltip' href='#' title='Subscribe'><img src='http://3.bp.blogspot.com/_V-IXTBBt1Bg/TVLsUJY36yI/AAAAAAAACM0/K32l_i0Cg8M/s1600/rss.png'/></a></li> <li><a class='tooltip' href='#' title='Twitter'><img src='http://2.bp.blogspot.com/_V-IXTBBt1Bg/TVLsXPki2UI/AAAAAAAACM8/So-P-S67Wgc/s1600/twitter.png'/></a></li> <li><a class='tooltip' href='#' title='Technorati'><img src='http://4.bp.blogspot.com/_V-IXTBBt1Bg/TVLsVyin7EI/AAAAAAAACM4/qXTK-eDGnDc/s1600/tecnorati.png'/></a></li> <li><a class='tooltip' href='#' title='Delicious'><img src='http://3.bp.blogspot.com/_V-IXTBBt1Bg/TVLsQC88LcI/AAAAAAAACMo/6X2TtHPQzR8/s1600/delicious.png'/></a></li> <li><a class='tooltip' href='#' title='Flickr'><img src='http://3.bp.blogspot.com/_V-IXTBBt1Bg/TVLsSi-GFNI/AAAAAAAACMw/qpxqxs0LxTc/s1600/flickr.png'/></a></li> </ul> </div>
Léeme en Google Reader o tu lector de feeds favorito.
Recibe los artículos en tu casilla de correo electrónico.