Archivado en: ‘Blogger’ .

Entradas recientes »

BTemplates plantillas para Blogger

25 abril, 2009

En esta página podemos encontrar una gran cantidad de plantillas con diseños muy bonitos y elegantes.

Además, no solo nos ofrece la opción de descargarlas Gratuitamente sino también que podemos ver un blog de ejemplo con la plantilla aplicada con solo dar clic sobre la imagen en miniatura de muestra.

BTemplates

Sin comentarios »

Publicado enBlogger

Tags:

Añadir buscador de Google en Blogger

25 abril, 2009

Añadir un buscador interno es fácil solo sigan los siguientes pasos:

  1. Añadimos un gadget Html/Javascript con el siguiente código: 
    <form action="http://www.google.com/search" method="get">
	<a href="http://www.google.com/">
	<img src="http://www.google.co.cr/intl/es/logos/Logo_25wht.gif" border="0" alt="Google" align="absmiddle" /></a>
	<input maxlength="50" name="q" size="30" type="text" />
	<input name="hl" type="hidden" value="es" />
	<input name="btnG" type="submit" value="Buscar" />
</form>
  2. La siguiente opción permite no solo buscar en Google, sino también buscar contenido de nuestro blog en Google 
    <form action="http://www.google.com/search" method="get">
	<input name="ie" type="hidden" value="UTF-8" />
	<input name="oe" type="hidden" value="UTF-8" />
	<a href="http://www.google.com/">
	<img src="http://www.google.co.cr/intl/es/logos/Logo_25wht.gif" border="0" alt="Google" /></a>
	<input maxlength="255" name="q" size="15" type="text" />
	<input name="btnG" type="submit" value="Buscar" />
<span>
	<input name="domains" type="hidden" value="URL" />

	<input name="sitesearch" type="radio" />La WEB
	<input name="sitesearch" type="radio" value="URL" />NOMBRE

</span>
</form>

    Debes remplazar donde dice URL pones la dirección de tú página web (http://nombredelblog.blogspot.com/), y en NOMBRE el nombre de tú página

  3. Si deseas crear un motor de búsqueda personalizado puedes hacerlo en el siguiente link:

Sin comentarios »

Publicado enBlogger

Tags:

Ocultar/Mostrar la Navbar de Blogger

24 abril, 2009

Ocultar/Mostrar la Navbar es fácil, Tiene que ir a Diseño -> Edición de HTML y colocar entre las etiqueta <head> y </head> el siguiente código:

  1. Si desear quitarla permanentemente, añade el siguiente código: 
    #navbar-iframe {
	height:0px;
	visibility:hidden;
	display:none;
}
  2. Para ocultar y mostrar la Navbar automáticamente según la posición del mouse; o mejor dicho, mantener oculta la Navbar y mostrarla cuando se coloca el mouse en parte superior de la página, añade el siguiente código: 
    <style type="text/css">
#navbar-iframe {
	opacity: 0.0;
	filter: alpha(Opacity=0)
}

#navbar-iframe:hover {
	opacity: 1.0;
	filter: alpha(Opacity=100,FinishedOpacity=100)
}
</style>
  3. Para ocultar y mostrar la Navbar automáticamente según la posición del mouse, pero haciendo un efecto de degrade, añade el siguiente código: 
    <style type="text/css">
.navbar-show {
	filter:alpha(opacity=50);
	opacity:.5;
	-moz-opacity:0.5;
}

.navbar-hide {
	filter:alpha(opacity=0);
	opacity:0;
	-moz-opacity:0.0;
}
</style>

    y esto también

    <script type='text/javascript'>
function show_navbar() {
	var nbar=document.getElementById ("navbar");
	nbar.className="navbar-show";
}

function hide_navbar() {
	var nbar=document.getElementById("navbar");
	nbar.className="navbar-hide";
}

function navbar_hack() {
	var nbar=document.getElementById ("navbar");
	nbar.className="navbar-hide";
	if (nbar.addEventListener) {
		nbar.addEventListener ("mouseover",show_navbar,false);
		nbar.addEventListener ("mouseout",hide_navbar,false);
	} else if (nbar.attachEvent) {
		nbar.attachEvent ("onmouseover",show_navbar);
		nbar.attachEvent ("onmouseout",hide_navbar);
	} else {
		nbar.onmouseover = show_navbar;
		nbar.onmouseout = hide_navbar;
	}
}

function addLoadEvent(func) {
	var old = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
		old();
		func();
		}
	}
}

addLoadEvent(navbar_hack);
</script>
  4. Otra forma de hacer el efecto de degrade es la siguiente: 
    <script src='http://wiki.script.aculo.us/javascripts/prototype.js' type='text/javascript'/>
<script src='http://wiki.script.aculo.us/javascripts/scriptaculous.js?load=effects' type='text/javascript'/>

<script type='text/javascript'>
function navbarShow() {
	new Effect.Opacity('navbar-iframe', {duration:0.5, from:0.0, to:1.0});
}

function navbarHide() {
	new Effect.Opacity('navbar-iframe', {duration:0.5, from:1.0, to:0.0});
}

function navbarHack() {
	Event.observe('navbar-iframe', 'mouseover', navbarShow, false);
	Event.observe('navbar-iframe', 'mouseout', navbarHide, false);
	navbarHide();
}

Event.observe(window, 'load', navbarHack, false);
</script>

Puedes hacer tus propias modificaciones a los Scripts
Por ejemplo puedes cambiar los valores de Opacity donde 1.0 es 100% visible, 0.0 es invisible ó puedes usar 0.5 para un efecto translucido, entre otros cambios.

Sin comentarios »

Publicado enBlogger

Tags:

Añadir buscador interno en blogger

24 abril, 2009

Añadir un buscador interno es fácil solo sigan los siguientes pasos:

  1. Añadimos un gadget Html/Javascript con el siguiente código: 
    <form id="searchthis" action="/search" style="display:inline;" method="get">
	<input id="b-query" maxlength="255" name="q" size="31" type="text"/>
	<input id="b-searchbtn" value="Buscar" class="blue" type="submit"/>
</form>
  2. Buscador que remplaza el botón Buscar por una imagen: 
    <form id="searchthis" action="/search" style="display:inline;" method="get">
	<input id="b-query" maxlength="255" name="q" size="31" type="text"/>
	<input alt='Buscar' border='0' src='http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Crystal_Clear_app_xmag.png/32px-Crystal_Clear_app_xmag.png' type='image'/>
</form>
  3. Buscador con texto en cuadro de texto; Incluye texto dentro del cuadro donde se coloca la palabra a buscar y el botón buscar: 
    <form action='/search' id='searchthis' method='get' style='display:inline;'>
	<input id='search-box' name='q' size='31' onblur='if (this.value == "") this.value = "Buscar en el Blog";' onfocus='if (this.value == "Buscar en el Blog") this.value = "";' type='text' value='Buscar en el Blog'/>
	<input class="submit" type="submit" value="Buscar" />
</form>
  4. Buscador que remplaza el botón Buscar por una imagen y con texto en cuadro de texto: 
    <form action='/search' id='searchthis' method='get' style='display:inline;'>
	<input id='search-box' name='q' size='31' onblur='if (this.value == "") this.value = "Buscar en el Blog";' onfocus='if (this.value == "Buscar en el Blog") this.value = "";' type='text' value='Buscar en el Blog'/>
	<input alt='Buscar' border='0' src='http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Crystal_Clear_app_xmag.png/32px-Crystal_Clear_app_xmag.png' type='image'/>
</form>

Y listo … :D

2 comentarios »

Publicado enBlogger

Tags: