Free Blogger Templates

Blogger Template: NewsSite

Publicado por Claudia en julio 1, 2011

News Site es un diseño limpio, para blogs de noticias u otros, basado en CNN y LaTercera.com.


DEMO | DESCARGA NewsSite (2666)

Características:

  • 3 columnas ancho fijo
  • s3 slider incorporado
  • Columnas inferiores
  • Soporta las últimas funciones de Blogger
  • Comentarios de autor destacados
  • jQuery tiptip incorporado
  • Buscador interno
  • Excerpts automáticos con thumbnail
  • Compatible con las últimas versiones de Firefox, IE y Chrome

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;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<h2 id='featured'>Featured Posts</h2>
   <div class='crosscol'>
<div id='s3slider'>
 
<ul id='s3sliderContent'>
 
<li class='s3sliderImage'>
<img src='https://lh3.googleusercontent.com/-7MJJy6yLor4/TY7TPy_hYPI/AAAAAAAACSo/GVn5p5yA8Wo/s1600/1.jpg'/>
<span><strong><a href='#'>Blockquote</a></strong>
<p>Mauris eu wisi. Ut ante ui, aliquet neccon non, accumsan sit amet, lectus. Mauris et mauris duis sed assa id mauris.</p>
</span>
</li>
 
<li class='s3sliderImage'>
<img src='https://lh6.googleusercontent.com/-RncqsMiL_kY/TY7TRb5iy2I/AAAAAAAACSs/f8S-8BPfsHw/s1600/2.jpg'/>
<span><strong><a href='#'>Duis non justo nec auge</a></strong>
<p>Mauris eu wisi. Ut ante ui, aliquet neccon non, accumsan sit amet, lectus. Mauris et mauris duis sed assa id mauris.</p>
</span>
</li>
 
<li class='s3sliderImage'>
<img src='https://lh4.googleusercontent.com/-jW35-fP4Abw/TY7TS-Fe2tI/AAAAAAAACSw/VZpCxcgwFbU/s1600/3.jpg'/>
<span><strong><a href='#'>Vicaris Vacanti Vestibulum</a></strong>
<p>Mauris eu wisi. Ut ante ui, aliquet neccon non, accumsan sit amet, lectus. Mauris et mauris duis sed assa id mauris.</p>
</span>
</li>
 
<li class='s3sliderImage'>
<img src='https://lh6.googleusercontent.com/-OhqhfiteUmA/TY7TT8S07lI/AAAAAAAACS0/1Uv3aKNq5mI/s1600/4.jpg'/>
<span><strong><a href='#'>Vicaris Vacanti Vestibulum</a></strong>
<p>Mauris eu wisi. Ut ante ui, aliquet neccon non, accumsan sit amet, lectus. Mauris et mauris duis sed assa id mauris.</p>
</span>
</li>
 
 
<li class='s3sliderImage'>
<img src='http://1.bp.blogspot.com/-P4Z9STzFr7k/TfwV39oksSI/AAAAAAAACTo/y_QpXSruq_s/s1600/5.jpg'/>
<span><strong><a href='#'>Vicaris Vacanti Vestibulum</a></strong>
<p>Mauris eu wisi. Ut ante ui, aliquet neccon non, accumsan sit amet, lectus. Mauris et mauris duis sed assa id mauris.</p>
</span>
</li>
 
<div class='clear s3sliderImage'/>
</ul>
</div>
      </div>
</b:if>
</b:if>

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:

<span class='facebooklink'><a class='tooltip' href='#' title='Facebook'> Facebook</a></span>
<span class='rsslink'><a class='tooltip' href='#' title='Feed RSS'> RSS Feed</a></span>
<span class='twitterlink'><a class='tooltip' href='#' title='Twitter'> Twitter</a></span>
Tags: , , ,
Free Blogger Templates

Blogger Template: Gadget Fan

Publicado por Claudia en febrero 23, 2011

DEMO | DESCARGA Gadget Fan (2396)

Características:

  • Ideal para blogs de iphone/gadgets
  • 2 columnas ancho fijo
  • Columnas inferiores
  • Soporta las últimas funciones de Blogger
  • Comentarios de autor destacados
  • jQuery tiptip incorporado
  • Twitter ready
  • Dos versiones: con y sin excerps automáticos
  • Incluye logo PSD
  • Crossbrowser compatible

Instructions – Instrucciones

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&amp;count=1' type='text/javascript'/>
 
</li>
Tags: , ,
Free Blogger Templates

Blogger Template: Game Madness

Publicado por Claudia en febrero 15, 2011

Plantilla Blogger gratuita basada en Assassins Creed, ideal para blogs de juegos.


DEMO | DESCARGA Game Madness (6371)

Características:

  • 2 columnas ancho fijo
  • columnas inferiores
  • Coin slider incorporado
  • Soporta las últimas funciones de Blogger
  • Comentarios de autor destacados
  • jQuery tiptip incorporado
  • Dos versiones: con y sin excerps automáticos
  • Incluye logo PSD
  • 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:

<!-- Featured Content Slider Started -->
 
<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='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>
Tags: , ,
Free Blogger Templates

Blogger Template: Pistacho

Publicado por Claudia en febrero 4, 2011


DEMO | DESCARGA Pistacho (2438)

Características:

  • 2 columnas ancho fijo
  • Columnas inferiores
  • slideshow instalado
  • Crossbrowser compatible
  • Incluye 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:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <div id='crosscol-wrapper'>
<div id='s3slider'>
<ul id='s3sliderContent'>
 
 
<li class='s3sliderImage'>
<img src='http://4.bp.blogspot.com/_V-IXTBBt1Bg/TUiMsIIyddI/AAAAAAAACME/gaAEPRHLvs0/s1600/1.jpg'/>
<span><strong><a href='#'>Blockquote</a></strong>
<p>Mauris eu wisi. Ut ante ui, aliquet neccon non, accumsan sit amet, lectus. Mauris et mauris duis sed assa id mauris.</p>
</span>
</li>
 
<li class='s3sliderImage'>
<img src='http://2.bp.blogspot.com/_V-IXTBBt1Bg/TUiMyRdHLYI/AAAAAAAACMI/QFoDI4mVuzY/s1600/2.jpg'/>
<span><strong><a href='#'>Duis non justo nec auge</a></strong>
<p>Mauris eu wisi. Ut ante ui, aliquet neccon non, accumsan sit amet, lectus. Mauris et mauris duis sed assa id mauris.</p>
</span>
</li>
 
<li class='s3sliderImage'>
<img src='http://1.bp.blogspot.com/_V-IXTBBt1Bg/TUiM3N2uEwI/AAAAAAAACMM/iwTdzKGCpJY/s1600/3.jpg'/>
<span><strong><a href='#'>Vicaris Vacanti Vestibulum</a></strong>
<p>Mauris eu wisi. Ut ante ui, aliquet neccon non, accumsan sit amet, lectus. Mauris et mauris duis sed assa id mauris.</p>
</span>
</li>
 
<li class='s3sliderImage'>
<img src='http://2.bp.blogspot.com/_V-IXTBBt1Bg/TUiM48hky4I/AAAAAAAACMQ/QKUCq9l-TOo/s1600/4.jpg'/>
<span><strong><a href='#'>Vicaris Vacanti Vestibulum</a></strong>
<p>Mauris eu wisi. Ut ante ui, aliquet neccon non, accumsan sit amet, lectus. Mauris et mauris duis sed assa id mauris.</p>
</span>
</li>
 
 
<li class='s3sliderImage'>
<img src='http://1.bp.blogspot.com/_V-IXTBBt1Bg/TUiM6aVtxbI/AAAAAAAACMU/AiiieBkeAfE/s1600/5.jpg'/>
<span><strong><a href='#'>Vicaris Vacanti Vestibulum</a></strong>
<p>Mauris eu wisi. Ut ante ui, aliquet neccon non, accumsan sit amet, lectus. Mauris et mauris duis sed assa id mauris.</p>
</span>
</li>
 
<div class='clear s3sliderImage'/>
</ul>
</div>
      </div>
</b:if>
</b:if>

In that code, you must replace every image by your new image link. Every image must be 570px × 280px. 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 570px × 280px. 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:

<ul id='subscription'>
 
      <li>
 
        <a href='YOUR-TWITTER-LINK'><img src='http://4.bp.blogspot.com/_V-IXTBBt1Bg/TUTbkURDU0I/AAAAAAAACLk/Y549ZuOMXlM/s1600/twitter.png'/></a>
        <h4><a href='YOUR-TWITTER-LINK'>Follow me</a></h4>
        <p>You can follow my updates on Twitter</p>
 
      </li>
 
      <li>
 
        <a href='YOUR-RSS-LINK'><img src='http://4.bp.blogspot.com/_V-IXTBBt1Bg/TUTboOorMUI/AAAAAAAACLo/yP5eSScF33Y/s1600/feed.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 href='YOUR-FACEBOOK-LINK'><img src='http://3.bp.blogspot.com/_V-IXTBBt1Bg/TUTbh_ja8uI/AAAAAAAACLg/lSSKJOKVJ0o/s1600/facebook.png'/></a>
        <h4><a href='YOUR-FACEBOOK-LINK'>Facebook</a></h4>
        <p>Become a <data:blog.title/> fan on Facebook</p>
      </li>
 
<li>
 
        <a href='YOUR-EMAIL-SUBSCRIPTION-LINK'><img src='http://2.bp.blogspot.com/_V-IXTBBt1Bg/TUTbsYyNnvI/AAAAAAAACLw/SJL31K0R8EY/s1600/email.png'/></a>
        <h4><a href='YOUR-FACEBOOK-LINK'>Subscribe via e-mail</a></h4>
        <p>Read my latest articles in your e-mail box</p>
      </li>
 
    </ul>
Tags: ,
Free Blogger Templates

Blogger Template: Retro Chic

Publicado por Claudia en febrero 2, 2011

Si para algunos Retro Chic es familiar, es porque era el theme que usaba antes en mi blog personal. Ahora es una plantilla pública para Blogger, ideal para blogs de féminas.


DEMO | DESCARGA Retro Chic (4902)

Características:

  • Plantilla de ancho fijo de dos columnas
  • S3 slider incorporado, fácil de configurar
  • Caja para banners de 468×60 (o para poner otras cosas)
  • Soporta las últimas funciones de Blogger
  • Incluye logo PSD

Instructions – Instrucciones

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;item&quot;">
<b:if cond="data:blog.pageType != &quot;static_page&quot;">
   <div class="crosscol">
<div id="s3slider">
 
<ul id="s3sliderContent">
 
<li class="s3sliderImage">
<img src="http://1.bp.blogspot.com/_V-IXTBBt1Bg/TT3BKAQf4VI/AAAAAAAACIc/yc2Fci7MsAU/s1600/1.jpg">
<span><strong><a href="#">Blockquote</a></strong>
<p>Mauris eu wisi. Ut ante ui, aliquet neccon non, accumsan sit amet, lectus. Mauris et mauris duis sed assa id mauris.</p>
</span>
</li>
 
<li class="s3sliderImage">
<img src="http://4.bp.blogspot.com/_V-IXTBBt1Bg/TT3BPex5oeI/AAAAAAAACIg/wxDjMpijWPI/s1600/2.jpg">
<span><strong><a href="#">Duis non justo nec auge</a></strong>
<p>Mauris eu wisi. Ut ante ui, aliquet neccon non, accumsan sit amet, lectus. Mauris et mauris duis sed assa id mauris.</p>
</span>
</li>
 
<li class="s3sliderImage">
<img src="http://3.bp.blogspot.com/_V-IXTBBt1Bg/TT3BS0tEAUI/AAAAAAAACIk/_U81_k2gPR8/s1600/3.jpg">
<span><strong><a href="#">Vicaris Vacanti Vestibulum</a></strong>
<p>Mauris eu wisi. Ut ante ui, aliquet neccon non, accumsan sit amet, lectus. Mauris et mauris duis sed assa id mauris.</p>
</span>
</li>
 
<li class="s3sliderImage">
<img src="http://4.bp.blogspot.com/_V-IXTBBt1Bg/TT3BXOu7e4I/AAAAAAAACIo/HLoC6McB_pc/s1600/4.jpg">
<span><strong><a href="#">Vicaris Vacanti Vestibulum</a></strong>
<p>Mauris eu wisi. Ut ante ui, aliquet neccon non, accumsan sit amet, lectus. Mauris et mauris duis sed assa id mauris.</p>
</span>
</li>
 
 
<li class="s3sliderImage">
<img src="http://1.bp.blogspot.com/_V-IXTBBt1Bg/TT3BZ8VavzI/AAAAAAAACIs/-mC1ubAPs20/s1600/5.jpg">
<span><strong><a href="#">Vicaris Vacanti Vestibulum</a></strong>
<p>Mauris eu wisi. Ut ante ui, aliquet neccon non, accumsan sit amet, lectus. Mauris et mauris duis sed assa id mauris.</p>
</span>
</li>
 
<div class="clear s3sliderImage">
</div></ul>
</div>
      </div>
</b:if>
</b:if>

In that code, you must replace every image by your new image link. Every image must be 570px × 280px. 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 570px × 280px. 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.

Tags: , ,