Rss

07 octubre 2011

Tutorial [Blogger]: Cómo configurar un menú y slide incluido en las plantillas



Este tutorial es para ayudar a todos aquellos que tienen algua plantilla como la mia, la cual trae integrado un menú (drop down menu) o un slideshow.
es muy fácil de editar:

Debes ir a Diseño >>> HTML
Ctrl +F y buscas el siguiente código para modificarlo:
<ul id='nav'>  
<li class='current-cat'><a expr:href='data:blog.homepageUrl'>Home</a></li>  
<li><a href='#'>Business</a> 
<ul class='children'> 
<li><a href='#'>Internet</a></li> 
<li><a href='#'>Market</a></li> 
<li><a href='#'>Stock</a></li> </ul> </li>  
<li><a href='#'>Downloads</a> 
<ul class='children'> 
<li><a href='#'>Dvd</a></li> 
<li><a href='#'>Games</a></li> 
<li><a href='#'>Software</a> <
ul class='children'> 
<li><a href='#'>Office</a> </li> </ul> </li> </ul> </li>  
<li><a href='#'>Parent Category</a> 
<ul class='children'> 
<li><a href='#'>Child Category 1</a> 
<ul class='children'> <li><a href='#'>Sub Child Category 1</a></li> 
<li><a href='#'>Sub Child Category 2</a></li> 
<li><a href='#'>Sub Child Category 3</a></li> </ul> </li> 
<li><a href='#'>Child Category 2</a></li> 
<li><a href='#'>Child Category 3</a></li> <li><a href='#'>Child Category 4</a></li> </ul> </li> 
<li><a href='#'>Featured</a></li>  
<li><a href='#'>Health</a> <ul class='children'> 
<li><a href='#'>Childcare</a></li> 
<li><a href='#'>Doctors</a></li> </ul> </li>  
<li><a href='#'>music</a></li> 
<li><a href='#'>politics</a></li> 
<li><a href='#'>Uncategorized</a></li> </ul>

Donde cambiarás cada # por la categor+ia o la URL de tú página y quedaría mas o menos así:


<ul id='nav'>

<li class='current-cat'><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'>Descargas</a>
<ul class='children'>
<li><a href='http://hirock-gamer2.blogspot.com/search/label/Programas'>Programas</a></li>
<li><a href='http://hirock-gamer2.blogspot.com/search/label/Juegos-PC'>Juegos</a></li>
<li><a href='http://hirock-gamer2.blogspot.com/search/label/Descargas'>Varias</a></li>
</ul>
</li>

<li><a href='#'>Tutoriales</a>
<ul class='children'>
<li><a href='http://hirock-gamer2.blogspot.com/search/label/Tutoriales%20de%20Manualidades'>Manualidades</a></li>
<li><a href='http://hirock-gamer2.blogspot.com/search/label/Tutoriales%20Blogger'>Blogger</a></li>
<li><a href='#'>Diseño</a>
<ul class='children'>
<li><a href='http://hirock-gamer2.blogspot.com/search/label/Tutoriales%20Corel'>Corel</a>
</li>
</ul>
</li>
</ul>
</li>



<li><a href='http://hirock-gamer2.blogspot.com/p/acerca-del-blog.html'>Acerca del blog</a></li>


<li><a href='http://hirock-gamer2.blogspot.com/p/about-me.html'>Acerca de mí</a></li>
<li><a href='http://hirock-gamer2.blogspot.com/p/afiliados.html'>Afiliados</a></li>
<li><a href='http://hirock-gamer2.blogspot.com/search/label/Gamer%27s%20Diary'>My Diary</a></li>

</ul>
</div>


Y listo ya tienes tu menú!

Ahora para editar el slideshow:
 Diseño>>> HTML
Ctrl+F y busca 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;'>

<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($(&#39;myGallery&#39;), {
timed: true,
delay: 6000,
slideInfoZoneOpacity: 0.8,
showCarousel: false,
slideInfoZoneSlide: false
});
}
window.addEvent(&#39;domready&#39;, startGallery);
</script>

<div class='fullbox_excerpt'>
<div class='fullbox_content'>
<div class='smooth_gallery'>
<div id='myGallery'>

<div class='imageElement'>
<h3>AQUI VA EL TITULO DEL  SLIDE 1</h3>
<p>AQUI VA LA DESCRIPCIÓN DEL SLIDE 1</p>
<a class='open' href='AQUÍ VA LA URL QUE QUIERES QUE LLEVE' title='TITULO 1'/>
<img alt='' class='full' src='DIRECCIÓN DE LA IMAGEN QUE QUIERES MOSTRAR'/>
</div>

<div class='imageElement'>
<h3>AQUI VA EL TITULO DEL  SLIDE 2</h3>
<p>AQUI VA LA DESCRIPCIÓN DEL SLIDE 2</p>
<a class='open' href='AQUÍ VA LA URL QUE QUIERES QUE LLEVE' title='TITULO 2'/>
<img alt='' class='full' src='DIRECCIÓN DE LA IMAGEN QUE QUIERES MOSTRAR'/>
</div>


<div class='imageElement'>
<h3>AQUI VA EL TITULO DEL  SLIDE 3</h3>
<p>AQUI VA LA DESCRIPCIÓN DEL SLIDE 3</p>
<a class='open' href='AQUÍ VA LA URL QUE QUIERES QUE LLEVE' title='TITULO 3'/>
<img alt='' class='full' src='DIRECCIÓN DE LA IMAGEN QUE QUIERES MOSTRAR'/>
</div>


<div class='imageElement'>
<h3>AQUI VA EL TITULO DEL  SLIDE 4</h3>
<p>AQUI VA LA DESCRIPCIÓN DEL SLIDE 4</p>
<a class='open' href='AQUÍ VA LA URL QUE QUIERES QUE LLEVE' title='TITULO 4'/>
<img alt='' class='full' src='DIRECCIÓN DE LA IMAGEN QUE QUIERES MOSTRAR'/>
</div>









</div></div></div></div></b:if></b:if>

<!-- Featured Content Slider End -->


Y simplemente sustituyes lo que esta en rojo por lo que te pide, casi siempre vienen en inglés las plantillas, pero con esto te podrás dar una idea.

Espero que les haya sido de ayuda, en especial Pashis, para que pueda configurar el menú de su plantilla.

See ya!

4 Comentarios:

Phantomhive Luzmila dijo...

heyy!! ya le agarre la onda xDDDD
ya pude configurarr
*¬* muchisimas gracias eres todo un amoorr
*OO*/

Mónica Correa dijo...

¿Cómo haces para linkear las entradas nuevas con las categorías de la barra?

Hiro Jung dijo...

@Monica: Cuando ya tienes hecho tu menú, por lo general ponemos etiquetas. Por ejemplo, en el mío hay una sección de 'descargas' y en esta están las etiquetas como: 'Juegos' o 'Música'. Estas etiquetas las colocamos cuando escribimos una entrada sobre dichos temas en el blog, así que automáticamente cuando escribas una nueva entrada sobre JUEGOS o MUSICA, aparecerá en el menú de arriba. Este es un ejemplo, en tu menu aparecera con tus rspectivas etiquetas. Espero que me hayas entendido, sino especificame bien que es lo que quieres hacer y con mucho gusto te ayudo :D

Mónica Correa dijo...

Te cuento, es un proyecto universitario: http://acentonoticias.blogspot.com/
un cibermedio, debo conectar las entradas nuevas con la barra y no sé :(

 

Este sitio se ve mejor en Google Chrome y Mozilla. Gracias por tu Visita. Si quieres ayudarme y ayudar al blog, da clic en los anuncios. No olvides Comentar y Seguirme! Gracias!!
ir arriba