sábado, 17 de noviembre de 2007

Mas elementos widgets en tus Blogs


Hace días que la pestaña para añadir widgets en la sidebar ha desaparecido, esperaba aque "apareciera" por si sola pero al parecer ser que se ha tomado unas vacaciones, y he decidido investigar la forma de añadir un nuevo widget
Ya puesta y metida en el tema decidí añadir más widgets por si en un futuro decido añadir algo nuevo a la plantilla, así que los añadí en los lugares que por defecto deberían venir en la plantilla, es decir en
header, sidebar, main, footer.
Para hacerlo hay que situarse en Panel/Diseño/Edicción HTML y "Expandir plantillas de artilugios"

Para añadir un nuevo "widget en la sidebar" buscaremos lo siguiente:
<b:section class='sidebar' id='sidebar' preferred='yes'>
Y lo sustituimos por:
<b:section class='sidebar' id='sidebar' maxwidgets='10' showaddelement='yes'>

*maxwidgets indica el número máximo de artilugios que se pueden permitir en esta sección. Si no se especifica límite, significa que no existe y podremos añadir todos los widgets que deseemos, por el contrario si tenemos en nuestra sidebar 3 o 4 widgets y queremos aumentar el número deberemos poner un número mayor al que ya tenemos.

*showaddelement puede ser "yes" o "no", donde "yes" es la opción predeterminada pero si encontramos "no" es obvio que por eso no aparece en nuestra sidebar la opción de añadir elementos de página.

Ahora vamos a añadir un nuevo "widget en el header" buscaremos:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Y lo sustituimos por:
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

Le toca el turno a "main" buscaremos:
<b:section class='main' id='main' showaddelement='no'>
Lo sustituimos por:
<b:section class='main' id='main' maxwidgets='5' showaddelement='yes'>

Y por último vamos a añadir la opción de nuevos "widgets en footer" para ello buscaremos:
<b:section class='footer' id='footer'/>
En su lugar añadiremos:
<b:section class='footer' id='footer' maxwidgets='2' showaddelement='yes'>

Recordad que la cantidad de maxwidgets es la que yo he añadido como referencia, pero en realidad cada uno debe añadir la que vea oportuna de acuerdo con los widgets que tenga o piensa añadir en su blog.

DE GEMA BLOG
Publicado por en 1 comentario:
Etiquetas:

viernes, 16 de noviembre de 2007

Menú despegable personalizado gracias a gema blog

gema blog

Este menú despegable que traigo es muy vistoso para el blog, tiene una particularidad y es que podemos añadir nosotros mismos los botones de acuerdo a nuestros gustos o el color acorde con nuestro blog.
En El blog de Cesar he encontrado uno igual que a su vez lo hizo con Aire como referencia.
La imagen que ilustra esta entrada es solo para que veáis el diseño. En la sidebar encontraréis el menú, os invito a probar para que veáis el efecto al clicar en él.
Podemos aplicarlo en unos sencillos pasos:


Lo primero que haremos será situarnos en Plantilla/Edición HTML y justo después de <head> añadiremos lo siguiente:

<style type="text/css">.texthidden {display:inline}.shown {display:block}</style><script type="text/javascript">document.write('<style>.texthidden {display:none} </style>');</script><script type="text/Javascript">function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</script>

Después nos situamos en Plantilla/Añadir un elemento de página/HTML/Javascript y añadimos el código.
Os lo dejo tal y como lo tengo en mi sidebar omitiendo algunos enlaces para ahorraros el trabajo de eliminarlos.

<a href="javascript:void(0);" onclick="expandcollapse('Actualidad')">
<img border="0" src=" http://img183.imageshack.us/img183/6739/actualidadan5.gif"/>
</a><br/>

<ul id="Actualidad" class="texthidden">
<li><a href="http://www.20minutos.es/ " target="_blank"> 20 Minutos
</a></li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('Traductor')">
<img border="0"src="http://img186.imageshack.us/img186/4555/traductorhp5.gif"/>
</a><br/>

<ul id="Traductor" class="texthidden">
<li><a href="http://www.elmundo.es/traductor/" target="_blank"> El Mundo </a></li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('Enciclopedia')">
<img border="0" src="http://img186.imageshack.us/img186/9757/encicoplediabq3.gif"/>
</a><br/>

<ul id="Enciclopedia" class="texthidden">
<li><a href="http://es.wikipedia.org/wiki/Portada" target="_blank"> Wikipedia </a></li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('Alojamiento')">
<img border="0" src="http://img216.imageshack.us/img216/2209/imgenesalojamientojt7.gif"/>
</a><br/>

<ul id="Alojamiento" class="texthidden">
<li><a href="http://www.imageshack.us/" target="_blank"> Imageshack </a></li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('Plantillas')">
<img border="0" src="http://img263.imageshack.us/img263/820/plantillasqz7.gif "/>
</a><br/>

<ul id="Plantillas" class="texthidden">
<li><a href="http://plantillas-narko.blogspot.com/" target="_blank"> Narko-Team </a>
</li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('Conversor')">
<img border="0" src="http://img340.imageshack.us/img340/3786/conversorzi5.gif"/>
</a><br/>

<ul id="Conversor" class="texthidden">
<li><a href="http://chuano.net/chuano/util/convsimbolos.php" target="_blank"> Conversor HTML </a></li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('Ayuda blog')">
<img border="0" src="http://img208.imageshack.us/img208/940/buttonoq4.gif"/>
</a><br/>

<ul id="Gem@BLOG" class="texthidden">
<li><a = _blank href="http://www.gemablog-.blogspot.com/">Gem@ BLOG </a></li></ul>

Vamos a conocer un poco el código.

Color rojo: El texto que habremos añadido al botón.
Color verde: Dirección Url de la imagen del botón.
Color naranja: Texto que aparece al desplegarse el botón.
Color azul: Dirección Url del enlace de la página enlazada.
(Lo que aparece en negro no lo modificaremos)

Es fácil crear unos botones, una página muy sencilla es http://www.buttonator.com/

Al igual que Cesar yo lo personalicé con una imagen chiquita que aparece en forma de flecha si os gusta podéis añadir una imagen añadiendo el código de imagen
<img src="aquí-la-url-de-tu-imagen"> justo antes del texto que aparece al desplegarse el botón (color naranja)
Y eso es todo, si tienes dudas házmelo saber

Publicado por en 1 comentario:
Etiquetas:
Suscribirse a: Entradas (Atom)