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