Blogger Template: Pistacho
Publicado por Claudia en febrero 4, 2011
DEMO | DESCARGA Pistacho (1960)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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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>
Posts relacionados
Compártelo!
DEMO | DESCARGA Pistacho (1960)
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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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>
16 Comentarios
Excelente plantilla, me encantó, muchas gracias por la info y la recomendación. Saludos.
[...] instructions page here [...]
Que tema lindo!
¿Y como se configura el tiempo de las diapositivas? no encontre como! :S
Estoy siguiendo con interés tu blog, ya que yo he empezado uno hace poco y el tuyo me parece de gran ayuda.
Saludos
¿Que tipo de buscador usa la plantilla, vi que es algo dinamico, me podrias decir como instalarlo en una plantilla aparte? Gracias.
Hi,
Can you tell me how to get the header background image from please (without the search banner image and other customizations…, I have the PSD file but don’t have photoshop).
Thank you.
Hi,
On second thoughts….. I LOVE this theme, I really do.
But could you please do some customizations such as removing the search bar and the darker upper area of the header image where the date is displayed and re-create this template.
The reason I ask this is because, I don’t know much about art nor xml editing ..
thank you.
Hola claudia , dejame decirte que es la primera vez visito tu pagina y me gusto muchisimo tu diseño , que por cierto se parece o similarmente al diseño de este post .
nose poque sera pero ami no me gusta mucho los diseños de 2 columnas y siempre he preferido la de 3 columnas .
saludos .
como Adicio mais Menu no blog.
Gostaria de saber como Adicionar mais Menur no Blog,porquê no meu só tem o “Inicio”
Muy Bueno este template.
Como consigo o fonte do header background ?
i really love the design. Simple and modern look. i will implement the design to the next blog i made. So thankful you shared this. Well done!
donde puedo conseguir este tema pero para wordpress, =??? de antemano muchas gracias …..
para una web natural… xd saludos…
Pronto voy a adaptar el tema para WordPress