Blogger

Añadir enlaces externos al menú de páginas de Blogger

Publicado por Claudia en Agosto 16, 2011

Muchas personas que usan Blogger me han preguntado cómo hago para poner enlaces a mis cuentas de Twitter y Facebook en el menú. Solía responder que uso WordPress, o que pueden reemplazar un widget de tipo “PageList” (páginas) por un “LinkList” (lista de enlaces). Ello aún suena un poco complicado si se trata de retocar el código, especialmente para quienes comienzan con un blog.

La creación de páginas estáticas de Blogger siempre fue una de las funciones más esperadas. Sin embargo, el widget típico de Páginas sólo permitía mostrar las páginas del blog. Ello, por un lado, facilitaba enormemente el trabajo de los usuarios, al no tener que hacer nada para mostrar enlaces a sus páginas automáticamente, pero hacía extrañar las listas típicas de menú en HTML, que permiten enlazar lo que queramos.

Para quienes quieren tener un solo menú principal en su blog de Blogger que muestre páginas y enlaces externos, les tengo una buena noticia: Luis Gray anuncia que ya es posible añadir enlaces externos en un widget de páginas de Blogger.

Cómo hacerlo, paso por paso:

1. En Diseño/Elementos de la página, añadir un widget de Páginas en tu plantilla Blogger. Si ya lo tienes añadido, sáltate este paso.

2. Ve a Blogger in Draft, que te permite probar las nuevas funciones de Blogger antes de ser lanzadas públicamente. Una vez allí, accede al blog donde quieras añadir algún enlace externo, y ve a Páginas /Página nueva / Dirección Web.

Ahora, sólo agrega tu enlace, como se muestra a continuación:

Después de ello, el enlace será añadido automáticamente a tu menú de Páginas, y podrás moverlo a la ubicación que desees.

Tags: , , ,
Free Blogger Templates

Blogger Template: Game Strike

Publicado por Claudia en Julio 29, 2011

Game Strike es una plantilla para blogs de juegos, inspirada en Counter Strike.


DEMO | DESCARGA Game Strike (3181)


Características:

  • 2 columnas de ancho fijo
  • Coin slider incorporado
  • Columnas inferiores
  • Buscador interno
  • Iconos social media
  • Incluye las últimas funciones de Blogger
  • Comentarios de autor destacados
  • PDS logo (font: Android Nation)

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 -->
 
 
<div id='slide'>
<div id='gallerycover'>
<ul>
 
<!-- Featured Slide 1 Code Start -->
<li>
<a href='SLIDER-1-LINK-HERE'>
<img class='slidim' src='http://3.bp.blogspot.com/-eV92P4chlBc/ThGAKOx0ArI/AAAAAAAACXI/QQBZuo5ayFg/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://2.bp.blogspot.com/-CrZBtCL5jnY/ThGAL4F5YWI/AAAAAAAACXM/8uGvL05bfW0/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://3.bp.blogspot.com/-5wxUIkAuWPk/ThGANXcIGLI/AAAAAAAACXQ/7jh2kB6umqo/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/-vtNpmGJLSlQ/ThGARlhHYDI/AAAAAAAACXU/73dGGJ6Wr7g/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>

You may replace all image links by yours.
Puedes reemplazar los enlaces por tus propias imágenes.

Tags: , , ,
Free Blogger Templates

Blogger Template: Travel Theme

Publicado por Claudia en Julio 21, 2011

DEMO | DESCARGA Travel Theme (2800)


Características:

  • 3 columnas de ancho fijo
  • jQuery roundabout slider
  • Columnas inferiores
  • Buscador Interno
  • Comentarios de autor destacado
  • Soporta las últimas funciones de Blogger
  • Crossbrowser Compatible
  • Twitter ready
  • Inlcuye 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:

<li class='back'><img src='http://3.bp.blogspot.com/-LFF6_irphVk/Th_JxJDq_QI/AAAAAAAACag/XDKFezr_VlA/s1600/2.jpg'/></li> 
<li class='back'><img src='http://2.bp.blogspot.com/-B0MoswLLvDg/Th_JzXwWKbI/AAAAAAAACao/mC2BoLVcfEI/s1600/4.jpg'/></li> 
<li class='back'><img src='http://3.bp.blogspot.com/-NdjYKHNpBss/Th_JyHH68UI/AAAAAAAACak/_glVnwFw2Jw/s1600/3.jpg'/></li> 
<li class='back'><img src='http://2.bp.blogspot.com/--Qung72aeIc/Th_JwW3S_xI/AAAAAAAACac/TD9l6sLoCpo/s1600/1.jpg'/></li> 
<li><img src='http://4.bp.blogspot.com/-qTG6XtKXmYI/Th_J0NCCUPI/AAAAAAAACas/IrtikKSolBM/s1600/5.jpg'/></li>

You may replace all image links by yours.
Puedes reemplazar los enlaces por tus propias imágenes.

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:

<span class='facebooklink'><a href='#' title='Facebook'> Facebook</a></span>
<span class='rsslink'><a href='#' title='Feed RSS'> RSS Feed</a></span>
<span class='twitterlink'><a href='#' title='Twitter'> Twitter</a></span>

3. To set up the Twitter widget, go to Design/Edit HTML and find the following code. You must replace the username “claudia” buy yours (it appears twice):
Para configurar el widget de Twitter, ve a Diseño/Edición de HTML y encuentra el siguiente código. Debes reemplazar el nick “claudia” por el tuyo (aparece dos veces):

<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'/>
Tags: , ,
Free Blogger Templates

Blogger Template: Cherry Mag

Publicado por Claudia en Julio 9, 2011

DEMO | DESCARGA Cherry Mag (2948)

Características:

  • 2 columnas de ancho fijo
  • Coin slider incorporado
  • jQuery tiptip
  • Columnas inferiores
  • Buscador Interno
  • Comentarios de autor destacado
  • Ads ready
  • Soporta las últimas funciones de Blogger
  • 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:

<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://1.bp.blogspot.com/-oaTUXPjWL-I/Tgarg4uW-vI/AAAAAAAACT4/njnxqKmqP7g/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/-hP7gT8UkZcw/TgarprMBV5I/AAAAAAAACT8/GIS-cUKNKL4/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://3.bp.blogspot.com/-rQc2QD3uvso/TgaruZwR5BI/AAAAAAAACUA/cyXXngCA-Lg/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://4.bp.blogspot.com/-43BKkZx1i1U/Tgar0bET-vI/AAAAAAAACUE/9I0NVdtFFAM/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>

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:

<a class='tooltip' href='#' title='facebook'><img src='http://3.bp.blogspot.com/-Ot0Xv26N4mU/Tgz3FHKd-wI/AAAAAAAACVc/qbgsS-OBzsE/s1600/facebook.png'/></a>
<a class='tooltip' href='#' title='RSS Feed'><img src='http://4.bp.blogspot.com/-0TakbFyNEuU/Tgz3Dev4jTI/AAAAAAAACVY/CqoWK6An90E/s1600/rss.png'/></a>
<a class='tooltip' href='#' title='Twitter'><img src='http://3.bp.blogspot.com/-GQmr4RfIdnQ/Tgz3BoL_21I/AAAAAAAACVU/e_FgjnIapQs/s1600/twitter.png'/></a>

3. To set up the date, go to Settings/Formatting/Timestamp format -> “Sunday, July 10, 2011”.
Para configurar la fecha, ve a Configuración/Formato/Formato de la hora -> “Domingo, julio 10, 2011”.

Tags: , ,
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 (2854)

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