SINO ENCUENTRA ALGO, USANDO ESTÉ BUSCADOR LO HARÁS

Mostrando las entradas con la etiqueta Todo Blogger. Mostrar todas las entradas
Mostrando las entradas con la etiqueta Todo Blogger. Mostrar todas las entradas

29 de octubre de 2009

Actualizaciones en La NavBar de Blogger

Siguiendo con as NavBar de Blogger, me acabo de enteras por Rosa, de dos actualizaciones con respecto a la dichosa barra.

1ero. Ahora desde la NavBar de Blogger, aparecen desde hace unos días dos opciones que no aparecian anteriormente, Seguir (hacien alución a seguir el blog desde el widget de Google Connect.)y Compartir (estó con referencia a las redes sociales.)

Esto lo puedes apreciar en los nuevos blog, o si la tienes estó es lo que veráz nuevo. .

2do. Ahora hay más NavBar Blogger para escoger colocaron unas nuevas que según lo que leí se muentran semi-tranparentes.



Vía: El espacaparate de Rosa.

24 de octubre de 2009

Trucos para la NavBar de Blogger

Muchas veces nos resulta algo molesto la barra que se encuentran en los blog de blogger, pero para esto hay soluciones simples estos trucos sirven para ocultar o hacer trasnparente la Navbar de Blogger.


1. Truco NarBar hacer que la está aparezca y desparezca:

Estó pasá cuando posamos el cusor sobre ellá. Para implementarlo sólo basta con que sigas los siguientes pasó, como lo describe, JMiur en su blog Vagabundia donde él realiza una cita a Gem@.

Paso 1: Luego de ingresar a el escritorio de tu blog, en Blogger, navega por la pestañas Diseño>DISEÑO / EDICION HTML, y antes de </HEAD>.

agregar el siguiente script.
<script src='http://www.google.com/jsapi'/><script>
google.load("prototype", "1.6.0.2");
google.load("scriptaculous", "1.8.1");
</script>
<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>



Nota importante: como los prototype y scriptaculous son scripts muy utilizados por muchos efectos, es conveniente revisar si ya no las tenemos incluidas; de ser así, no debemos volver a hacerlo y sólo es necesario agregar la última parte. Los que esta en negritas..

Paso 2: seguimos en Diseño>DISEÑO / EDICION HTML, y agregamos ahora esté código si queremos que la barra se muestre opaca:

<style type="text/css">
#navbar {
filter: alpha(opacity=50);
opacity: .5;
-moz-opacity: 0.5;
}<style>


Pero si lo que quieres es que la barra se oculte automaticamente, y que solo cuando se pase el cursor por la zona donde se encuentra la barra agrega esto.

<style type="text/css">
#navbar {
filter: alpha(opacity=50);
opacity: .5;
-moz-opacity: 0.5;
}<style>


Via: Vagabundia.

Iconos de Halloween.

Halloween Icons, para los que deseen crear un poco de esté ambiente en el diseño o iconos de sus blog o web


Descargar.zip con 18 iconos


Descargar.zip con más de 150 iconos.

23 de septiembre de 2009

Crear Menú Online con Purecssmenu.com

Con Purecssmenu.com, haz menú online a base de estilos .css, es muy sencillo crearlos, puedes adaptarlos al estilo de tu sitio web o blog, con una una interface sencilla y dinamica podrás crear los menú con diferentes nivel, para ir seleccionando el tipo de letra, colores, anchos, entre otros.

(Clic para ampliar)


Tambien puedes seleccionar diferentes item, los parametros de menú o si lo que quieres es un menú simple puedes escoger alguno de los diseños que te ofrece el sitio.


(Clic para ampliar)
.

18 de julio de 2009

Bloquear botón derecho de ratón y no permitir seleccionar el texto

Como bloquear el botón derecho del ratón y no permitir que selecionen el texto para copiar el contenido de tu blog o sitio web, solo tienes que agregar estos código Javascript.


Para Bloquear el Botón Derecho del Mouse.


<script language="JavaScript" type="text/JavaScript">
function click(){
if(event.button==2){
alert('AQUI COLOCAS EL MENSAJE DE LA ALERTA');
}
}
document.onmousedown=click
//->
</script>


Y para evitar que seleccionen el texto:


<script>
function event_false() {
window.event.returnValue = false
}
document.onselectstart = event_false
</script>


Esto "protegerá" tu contenido de los que solo pasán a copiar.

17 de julio de 2009

Aumentar o Disminuir el texto de tu blog o web A+ | a-


En algunos caso a nuestros lectores se les hace dificil el poder leer el contenido de nuestro blog o sitio web, debido al tamaño de fuente que hemos elegido para el mismo, para ello podríamos ofrecerle a ellos la posibilidad de escoger que tipo de fuente, les facilitaria la lectura, como implimentando un simple script con el que podrán aumentar o disminuir el texto.

Que debemos pegar antes de el <Head> del blog o sitio web.





<script language="javascript1.2">
var fuente=15
function original(){
var tamano_original=15 //aqui tienes q definir el tamaño original.
document.getElementById("Tu_id").style.fontSize = tamano_original
}
function aumentar(){
fuente = fuente + 1
if (fuente > 20)
{
fuente=20 // numero de fuente grande
}
aumento_fuente = fuente+"px"
document.getElementById("Tu_id").style.fontSize=aumento_fuente;
}
function disminuir(){
fuente = fuente - 1
if (fuente < 10)
{
fuente=10 // numero de fuente pequeña.
}
disminuir_fuente = fuente+"px"
document.getElementById("Tu_id").style.fontSize=disminuir_fuente;
}
</script>


Una vez pegado el script, debemos pegar esté otro código dentro de nuestro <Body> en el propio HTML, o en algún elemento HTML/JAVASCRIPT, esté se mostrára al visitante para que pueda modificar el texto para aumentarlo será Original A+ y para disminuirlo a-. Puedes modificar estó y colocarles alguna imagen.



Solo Texto:

<a href="#" onclick="original();">Original</a> | <a href="#" onclick="aumentar();">A+</a> | <a href="#" onclick="disminuir();">a-</a>

Con Imagenes:
<a href="#" onclick="original();"><img src="http://www.tudominio.xxx/imagen texto original.jpg" border='0'/></a> | <a href="#" onclick="aumentar();"><img src="http://www.tudominio.xxx/imagen texto aumentado.jpg" border='0'/></a> | <a href="#" onclick="disminuir();"><img src="http://www.tudominio.xxx/imagen texto disminuido.jpg" border='0'/></a>


Otra herramienta para el visitante.

13 de julio de 2009

Insertar formulario de comentarios


Aún cuando ya es posible hacerlo de forma automatica en las planillas que nos ofrece Blogger, cuando colocamos una nueva en muchos caso es necesario agregar el código necesario para el Formulario de Comentarios pueda se visto.

Para hacerlo voy a explicar paso a paso lo que se debe hacer, sin antes recomendarte que guardes una copia de seguridad de la planilla actual, por sí algo sale mal, ¿como?, solo tienes que hacer clic en Diseño > Edición de HTML > y dar clic a enlace Descarga planilla completa y la guardas en tu pc.

Si tienes una planilla normal de las que te ofrece Blogger algunos pasos no serán necesarios, al menos que no ocurran los resultados esperados.

Paso uno: Ingresas a tu blog, desde Blogger, una vez dentro haces clic en Configuración > Comentarios.

Paso dos: Una vez allí te aparecerán una serie de opciones. Posicionate en donde dice Ubicación del formulario de comentarios y seleccionas Entrada incrustada a continuación como muestra la imagen



Ya con esto el formulario debería mostrarse debajo de los comentarios que están o no en tu blog así que para ello has una prueba.



Pero si por el contrario no aparece no te jales los cabellos hay una solución, insertando el código que falta de forma manual.

Paso tres: Para comenzar es necesario que hallas realizado el Paso uno y Paso dos.

Paso cuatro: una vez hecho todo lo anterior y comprobado ya que no aparece el formulario, nos vamos a Diseño > Edición de HTML y hacemos clic en Expandir planilla de artilugios.

Luego buscas esté código:


<p class='comment-footer'> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a></p> </b:if>


Paso quinto: una vez encontrado los borramos y pegamos esté otro.


<p class='comment-footer'> <b:if cond='data:post.embedCommentForm'> <b:include data='post' name='comment-form'/> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if> </p></b:if>


Y esto es todo.

Ahora verifica si aparece y si es así disfrútalo, en otra entrada te mostrare como agregarle un poco de estilo con css para adaptarlo mejor a tu diseño.

Agregando un Buscador al Blog


Los buscadores son una herramienta muy útil para hacerle mejor la experiencia de navegación por el blog a tus visitantes, ya que les facilita el encontrar la información que no ven o que ya no esta en la página principal.

Bueno estas son 3 formas de agregar un buscador en tu blog o sitio web.












  1. Buscador interno del blog:

    Se trata de colocar un simple caja de texto con un botón buscar, que al colocar los terminos a buscar esté ofrecera como resultado todos las entradas que tengan esas palabras.Esté es el código de buscador lo puedes colocar donde quieras, en el sidebar o en alguna entrada, presionado antes Edición de HTML, lo pegas y publicas.


    <form action="/search" method="get">
    <input id="search-box" name="q" type="text"/>
    <input id="search-btn" value="Buscar" type="submit"/>
    </form>


    Puedes mejorarlos agregándole algún estilo css. En esté código podrás notar que ya existen dos id's, search-box y search-btn, cada uno representa una condición css que puedes crearle los atributos que desees.

    Ejemplo de css:


    #search-box {width: 250px; border: 2px solid #ff5800;padding: 1px;}
    #search-btn {background: #fffff;color: #020202;padding: 1px;margin: 0px 0px 0px 3px;
    border: 2px solid #ff5800;}


    Resultado:





  2. Buscador de Blogs de Google:

    Se trata de colocar el buscador de blog de google en nuestro blog, pero que esté solo muestre los resultado de busqueda de él mismo. Para ello tienes que sustituir donde aparece ceamtm.blogspot.com, por la dirección de tu blog.

    Esté es del código del Buscador de Blog de Google:


    <form name="b-search" action="http://search.blogger.com/">
    <input id="search-box" type="text" id="b-query" name="as_q" /> <input id="search-btn" type="submit" value="Buscar" alt="Search This Blog" id="b-searchbtn" title="Search this blog with Google Blog Search" onclick="document.forms['b-search'].bl_url.value='ceamtm.blogspot.com'" />
    <input type="hidden" name="ie" value="UTF-8" /><input type="hidden" name="ui" value="blg" />
    <input type="hidden" name="bl_url" value="ceamtm.blogspot.com" /></form>


    Resultado: Aplicandole el mismo estilo css.




  3. Buscador de Google:

    La tecera opción es agregar el Buscador de Google pero que arroje los resultado solo de nuestro blog principalmente y de la web de forma secundaria, como al igual que los otros debes de pegar esté código donde quieras en tu sidebar, una entrada o en propio HTML.

    Código de Buscador de Google:

    <FORM method=GET action="http://www.google.com/search">
    <input type=hidden name=ie value=UTF-8><input type=hidden name=oe value=UTF-8>
    <input type=radio name=sitesearch value="http://ceamtm.blogspot.com" checked> El Blog <input type=hidden name=domains value="http://ceamtm.blogspot.com"> <input type=radio name=sitesearch value=""> La Web <INPUT id="search-box" TYPE=text name=q size=15 maxlength=255 value=""> <INPUT id="search-btn" type=submit name=btnG VALUE="Buscar"></FORM>


    Resultado: Aplicando el estilo css.

    El Blog La Web


Ocultando la Barra de Blogger

Muchas veces nos hemos preguntado si es posible ocultar la barra de búsqueda que aparece por encima de nuestros blog en blogger, pues si hay una forma y aquí te les dejo esté pequeño código en css.

Pero creo importante mencionar que aún cuando blogger nos ofrece de forma gratuita sus servicio, para algunos la barra de Blogger les parece un obtaculo para sus diseños o por alguna otra razón quieren prescindir de ella.



Yo en particular decidí ocultarla pero esto no se debe a que no reconozca que Blogger me da la oportunidad de tener un blog gratis, solo que no la queria tener en cambio he puesto un enlace al final de esté reconociendo de donde proviene y quien gestiona es Blogger, y pienso es que los que la mayoría debería hacer.

Ahora para ocultarla tienes que hacer lo siguiente:

Con dije antes, se trata de una simple condición CSS, que debe se colocada entre la etiqueta <head> y </head> de la hoja de estilo de tu blog.

Es recomendable colocar justo antes de ]]></b:skin>: esto por si se te ocurre borrar el css los puedas encontrar más rápido.


#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}


Saludos.

9 de julio de 2009

Embeidt.in, mostrar documentos desde tu blog

Desde el Blog de Gem@ BLOG, he leido de esté sencillo sitio se trata de Embedit.in, aquí podemos guardar nuestros documentos o archivos (hasta 20mb) en diferentes formatos como:

Documentos: Word (DOC/DOCX), Excel (XLS/XLSX), PowerPoint (PPT/PPTX), WPD, ODT, ODP, ODS, PDF.
Imágenes: GIF, JPEG, PNG, TIFF, BMP, PSD.
Vector Graphics: API, EPS, PS.
Texto: TXT, RTF, CSV.
Código: HTML, SQL, JS,
Web: Añadir URL.

Usarlo es muy sencillo y no requiere registro, soló al ingresar por primera vez nos pide que iniciemos sesión en algunos de los proveedores como Google, Yahoo!, Twitter, AOL, Wordpress y Open ID. nos ofrece la posibilidad de mostrar nuestro archivos una vez de dos formar, en una pantalla modal y con un reproductor flash. Podemos cambiar el color de fondo y el ancho y alto, para adaptarlos a nuestro gusto.

Ventana Modal


Estos es el Embed:


El Código Embed que te proporcionan esta incompleto, completalos agregandole lo que esta en color naranja que es la tag de cierre que le falta.

<embed src="http://embedit.in/KnqlGYxicv.swf" height="240" width="466" type="application/x-shockwave-flash" allowFullScreen="true"></embed>


Si quieres saber más entra en esta entrada en Gem@ BLOG

2 de julio de 2009

Como instalar una planilla nueva en Blogger

Hoy les haré un pequeño tutorial a los nuevos Blogger, sobre como instalar una planilla, en su blog de forma sencilla.

Primer paso: Entras en tu blog desde www.blogger.com, luego haces clic en Diseño > Editor de HTML


Segundo paso: vas a encontrarte con algo como esto, es el sitio desde donde podrás cargar la planilla nueva, recuerda siempre guardar una copia de seguridad, esto lo puedes hacer haciendo clic en el enlace Descargar planilla completa. y guardala en el Disco duro de tu pc.


Tercer paso:
Busca la planilla descargada, en tu pc haciendo clic en el botón Examinar.


Cuarto paso: una vez encontrada presiona el botón Subir, espera a que cargue, y listo puedes empezar a disfrutar de tu nueva planilla.

1 de julio de 2009

Planilla para blogger: Greenary.

Greenary: Está template fue diseñada por Subhadeep, es una adaptación a template de Wordpress, que puedes ser utilizada en Blogger, tiene un ancho fijo, una sidebar derecho, con puntas curvas, un estilo fresco blanco con tendencia a web 2.0. Espero les agrade.

Vista Previa: Click Aquí
Descargarla: Descargar.