25 junio 2009

Widget con Opciones de Navegación


Hace tiempo tenia la necesidad de poner opciones de navegación al blog, como por ejemplo, el de aumentar y disminuir el tamaño del texto y otros que son de mucha utilidad en el blog. Paseandome por La Blogueria me encontré una entrada donde nos daba un idea de como hacer un widget con lo dicho anteriormente, a mi parecer es muy sencillo.

Los primero es ver que le puedes colocar al widget. Aquí le dejo una serie de enlaces o pasos que servirán para hacer el widget.

1. Un buscador interno.
2. Abriendo los enlaces en otra ventana.
3. Un Traductor multilingüe.
4. Aumentar y disminuir el tamaño del texto.
5. Las entradas al azar.

Puedes obviar pasos (si tu quieres), recuerda que es tu decisión y también le puedes agregar los que a ti te parezca importante.



Si has cumplido con todos los pasos el widget quedara más o menos así:




<div style="border: 6px outset #778899; padding: 6px; background: #FFFFFF; none repeat scroll 0% 50%; width: 200px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left; color: black;">
<center>
<style type="text/css">
#buscador {
background: url();
padding: 5px;
float: center;
overflow:hidden;
margin: 0 auto; }

</style>
<form id="buscador" action="/search" method="get">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyjH10CKvOk66nHzOu4fL5BGsH_Rf81DdPfVUvF35YPOffAd2gIHnrZ_onDVmpGsj9UtEyU4svPEGNY4A8LmXAZbBPEn_t5D9vCDLzzQ8f3ARGhZdphtuDmXHVO7LjAQOUZUGv2b3hM0w7/s320/searchiconry7.png"/><input this.value="onblur=" )="buscador..." onfocus="if (this.value == " ; q value="Buscador..." if type="text" (this.value="name"/>
</form>
<br/>

<div class="linkprefs">

<p style="display: block;">

<input id="linkprefs" value="linkprefs" name="linkprefs" onclick="setCheckbox(document.getElementById('linkprefs').checked);" type="checkbox"/>

<label for="linkprefs" title="Opciones de navegacion">Abrir enlaces externos en nueva ventana</label></p>

<span></span>

<script type="text/javascript">addEvent(window, 'load',loadLinkPrefs);</script>

</div>
<br/>
<h4>Traductor</h4>
<img src="http://img176.imageshack.us/img176/6091/84056383at1.png"/>
<form id="translateForm" action="http://www.worldlingo.com/S1790.5/translation" target="_blank">
<input value="ES" name="wl_srclang" type="hidden"/>
<select style="font-size: 90%; width: 140px;" name="wl_trglang">
<option value="EN"/>Español - Inglés
<option value="FR"/>Español - Francés
<option value="DE"/>Español - Alemán
<option value="IT"/>Español - Italiano
<option value="PT"/>Español - Portugués
<option value="RU"/>Español - Ruso
</select>
<input value="http://NOMBRE_DEL_BLOG.blogspot.com/" name="wl_url" type="hidden"/>
<input style="font-size: 90%; width: 70px;" value="Traduce" type="submit"/>
</form>
<br/>
<h4>Entradas al azar</h4>
<div id="myLuckyPost"></div>
<script type="text/javascript">
function showLucky(root){
var feed = root.feed;
var entries = feed.entry || [];
var entry = feed.entry[0];
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == "alternate") {
window.location = entry.link[j].href;
}
}
}
function fetchLuck(luck){
script = document.createElement('script');
script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
}
function readLucky(root){
var feed = root.feed;
var total = parseInt(feed.openSearch$totalResults.$t,10);
var luckyNumber = Math.floor(Math.random()*total);
luckyNumber++;
fetchLuck(luckyNumber);
}
function feelingLucky(){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky';
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyjH10CKvOk66nHzOu4fL5BGsH_Rf81DdPfVUvF35YPOffAd2gIHnrZ_onDVmpGsj9UtEyU4svPEGNY4A8LmXAZbBPEn_t5D9vCDLzzQ8f3ARGhZdphtuDmXHVO7LjAQOUZUGv2b3hM0w7/s320/searchiconry7.png"/><a href="#random" onclick="feelingLucky()" title="Entrada al azar">Entradas al azar</a>

<br/><br/>
<h4>Tamaño del texto</h4>
<p><img src="http://vbmusica.googlepages.com/fontMas.gif"/><a href="javascript:ts('body',1)"> AUMENTAR </a></p>

<p><img src="http://vbmusica.googlepages.com/fontMenos.gif"/><a href="javascript:ts('body',-1)"> DISMINUIR </a></p></center></div>


Puedes modificar el tamaño del cuadro al comienzo del código width: 200px;, también hay cosas que puedes modificar a tu gusto. Puedes copiar y pegar el código en Real-time HTML y vas viendo como va quedando las modificaciones que hagas. En el código hay link de imágenes que están temporalmente alojadas en mi alojadores.


Fuente La Blogueria

12 comentarios:

  1. Hola Antony.
    Excelente. Antes lo había visto donde Vanessa, pero nunca logré organizarlo como lo has hecho. Lo he puesto ahora y le he hecho algunos cambios.
    ¡Saludos!.

    ResponderEliminar
  2. ¡Hola Deybi! Te ha quedado bien... Me gusto mucho el retoque que les has dado... ¡Saludos!

    ResponderEliminar
  3. ese real time html es lo que siempre habia buscado, muchas gracias

    ResponderEliminar
  4. Antony...te he dejado un regalo en mi blog, no para hacer numero sino porque te preocupas por mi en Twitter y es una forma de agradecertelo ^^

    =)

    LIZ

    ResponderEliminar
  5. Antony tanto tiempo!. Buen aporte el tuyo, intentaré aplicarlo a mi sitio, pues quedaría mejor.
    Espero estés bien, pasaré nuevamente.
    Abrazos

    ResponderEliminar
  6. hola ¡
    soy el dueño de unioversaltime.
    keria decirte que cambie la pagina es www.iml09.blogspot.com
    gracias ¡

    ResponderEliminar
  7. Hola, me gusta la idea, la pondré en mi blog.
    Ya me he suscrito para poder comerme todas las que tengas, jaja, son muy buenas.
    Un beso

    ResponderEliminar
  8. Antony
    Que tenga una Feliz Navidad y un Año Nuevo maravilloso con mucha alegría, la salud y la paz.
    Besosss

    ResponderEliminar
  9. saludos, bueno yo te digo que los modero para poder respondreles. mi duda es esta, ando buscando como anadir emoticos a mi blog pero nada, me pudieras ayudar? gracias

    ResponderEliminar
  10. Pues parece bastante sencillo, voy a intentar llevar a cabo unos cuantos que han puesto en la blogueria, pero creo que no los conseguire hacer funcionar, soy bastante torpe con la informatica!

    ResponderEliminar
  11. The information you provided is quite simple and clear for knowledge seeker..thanks!!!

    ResponderEliminar
  12. I am always searching for such a great and informative post.Keep it up!

    ResponderEliminar

¡Gracias por comentarme! No modero los comentarios porque me parece tentar contra la libertad de expresión de cada individuo, por eso le pido que no hacer comentarios con palabras obscenas, si vas a comentar como Anónimo por favor coloca tu nombre o cualquier apodo. ¡Gracias!