Friki Bloggeo

Google font API es un nuevo servicio de Google que te permite colocar fuentes interactivas en tu blog que podra ver cada usuario que lo visite, sin necesidad alguna de que este usuario deba tener la fuente utilizada almacenada en el disco duro de su computador. Ya hace muchisimo tiempo, publique una entrada a la que llame Nuevas fuentes para los post de tu blog, pero ocurre que, si el usuario no tenia esta fuente guardada en su computador, no podria vizualizar bien la fuente, o el sistema la sutituiria por otra, por eso se seleccionaron mas las fuentes que se estimaba que toda computadora con el Sistema Operativo Microsoft Windows traeria por defecto. Esta es la gran ventaja de usar Google font API para una fuente distinta. Por los momentos, el servicio se encuentra en su fase BETA. Esperemos que pronto comience su fase permanente, para asi tener mas fuentes de la cuales elejir.

Como los blogs de Wordpress y la mayoria de blogs impotantes junto con paginas web que admiten el uso de comentarios, siempre hubo la duda de por que blogger no tenia habilitado en su formulario de comentarios la opcion para responder a un comentario que quizas nos haya llamado la atencion, y es que poco a poco, con los dintintos trucos y codigos HTML que van llegando cada vez, blogger se ha convertido en los ultimos tiempo en un servidor de bloggeros que no tiene nada que envidiarle a sistemas como el de Wordpress, que a pesar de ser pago, es un servidor elegante y muy vistoso.

En este tutorial explicare, cual es la manera o como se hace para incrustar campos de textos debajo de cada entrada con diferentes enlaces, para ser insertados como enlace directos a la URL, enlaces de textos a la entrada actual y el código para insertar en foros de discusión. La verdad, es que este truco ya lo había visto en varias paginas web, pero nunca en un blog que no haya sido de Wordpress, asi, que si te ha gustado también, el tutorial de instalación ya esta disponible. Para que te des un poco mas de cuenta de lo que te hablo, observa la siguiente imagen.

Tal vez esto a simple viste no te parecerá útil, pero mira dos veces! puedes ver que esta entrada es mas útil de lo que pudieras creer, o tal vez, así lo considero yo. Muchas veces me ha pasado que escribiendo una entrada, cometo algún error grande, y trato de remediarlo con la función Deshacer, pero si nos fijamos, el editor de blogger no cuenta con este botón entre su panel de funciones.

<a href="http://feeds.feedburner.com/FrikiBloggeo" rel="alternate" title="Subscribe now to avail the unthinkable" type="application/rss+xml"><img border="0" alt="" style=" padding-bottom:20px; margin: 0pt 10px 10px 0pt; float: left; width:100px; height:100px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_A35GcIRKNBzhhqD_fDzYIhe9RCtQrD77ZFNyVWU9PknbYnofnppe4MYhSZjC9YuoFM7fC5wsWjvw-tORCSEgFn3JUImms_wGxKM3mlR8cMKzFviDzeNYkxPgeM4KRvKOnb1aIxMydegY/s400/MBT-RSS-FEED.gif"/></a><p><a href="http://feeds.feedburner.com/FrikiBloggeo" rel="alternate" title="Suscribete a mi feed" type="application/rss+xml">Recibe nuevas noticias! </a><span style="color: 5C6AA4 #; font-weight: bold;">Introduce tu correo electronico para recibir nuevas entradas cada dia a tu e-mail:</span></p>
<style>
input.mbt1 {
color:#fff;
font: bold 10px Arial, sans-serif;
background:#F39100;
border:0;
padding:3px;
}
input.mbt1hov {
color:#fff;
font: bold 10px Arial, sans-serif;
border:2px solid #F39100;
padding:3px;
}
</style>
<form action="http://feedburner.google.com/fb/a/mailverify" style="padding: 5px; " target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FrikiBloggeo', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input style=" color:5C6AA4 #; background: #fff; border:1px solid 5C6AA4 #; width: 90px;" name="email" type="text"/><input value="Frikibloggeo" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/> <input onmouseover="this.className='mbt1 mbt1hov'" onmouseout="this.className='mbt1'" value="Suscribeme" class="mbt1" type="submit"/></form><br/>

El efecto opacidad es uno de los efectos mas importante y populares que se pueden usar en los blog, por que es mucho mejor usar una imagen con link que al pasar el puntero sobre ella de un poco de luz que tener una simple imagen que no atrae a nada con ningun efecto en tu blog. Aqui te dejo estas muestras para que sepas de que te hablo.



Lo mejor de todo, es que no utilizaras ningún Script para realizar este efecto, solo basta con agregar algún estilo CSS en tu blog, y un pequeño fragmento de código que deberás colocar al empezar a realizar los enlaces con las imágenes. Te muestro que hacer.

Hoy visitando la pagina de Bloggerstop.net (En ingles) me encontre una maravillosa herramienta en la que puedes evitar que un visitante de tu blog copie una imagen tu creas que es muy importante, para hacer esto lo unico que debes hacer es, cuando nosotros queremos mostrar una imagen en el blog, acudimos a realizar el siguiente código.

<img src='URL de la imagen'/>

<img src="URL de la imagen" oncontextmenu="alert('texto de aviso');return false" oncopy="alert('Texto de aviso');return false"/>

La verdad, es que no suelo tachar imágenes en este blog, pero visitando blogs, vi que algunos si tachaban palabras y hasta grandes oraciones con las etiquetas <strike></strike>, logre notar algo que en verdad me parece muy aburrido, y es la forma en la que Blogger tiene predefinida para tachar las imágenes, algo muy común y poco atractivo. Esta es la forma predefinida, aburrida, ¿Cierto?, pero esto puede cambiar.

strike {text-decoration:none;
background:transparent url(strike.png) repeat-x
left 55%}

[2] Implementacion del truco en los post.

#Outer-wrapper: Encierra todo el contenido del blog

#header-wrapper: Es la cabecera del blog

h1.title: Es el titulo de nuestro blog

p.description: es la descripcion del blog

#main wrapper: Encierra todo el contenido principal del blog, ejemplo; las entradas, links de feeds, etc.

.post: Encierra todo el contenido de las entradas

.post-title: Es el titulo de nuestras entradas

.post-body: Es el contenido de nuestras entradas.

.feed-links: Son los enlaces hacia el feed en nuestros blog (Suscribirse a: Entradas atom, etc)

#blog-pager: Es todo lo que se muestra al entrar a la pagina individual de las entradas (Comentarios)

#sidebar-wrapper: Encierra todo el contenido del sidebar o barra lateral.

#widget: Encierra el contenido de cada widget en nuestro blog.

.widget h2: Es el titulo del widget

.widget-content: Es el contenido del widget

#footer-wrapper: Encierra todo lo colocado en el pie de pagina.

.footer: Es todo lo que aparece en el pie de pagina

(imagenes, creditos, links hacia los feed, etc)

Ahora, prosegimos, si ves muy bien la imagen, todos las palabras escritas con color naranja tienen un borde que las encierra, tambien hay algunos que escritos con color negros, igualmente las encierra, y a esas son a las que se les puede añadir el borde, ya yo antes probe con el titulo del widget y el contenido y si me sirvio pero la que me hizo crear este post fue Paulette, ella me comento lo siguiente:

Hola.quetal encantanda soy paulette , Excelente este post, sos mas que claro, didàctico y saliò de primera intenciòn Gracias

Me pregunto si tendràs algo emitido que explique como crear los bordes que deseamos en las sidebars o en el #main-wrapper {

Por Ejemplo no he encontrado la forma de crear los bordes en EL TITULO ESPECIFICO DEL POST..sì en la fecha.Como asì tampoco crear dobles bordes si es posible si?

Pero por lo que veo se maneja en POST y post h3 { para darte un ejemplo de uno solo de los bordes deseados)

Sè que es cuestiòn de probar pero no doy en el punto vale?porque no se que parte de todos los sub rubros de Post maneja que?

Espero haber sido clara!!!

Gracias..me voy ahora a crear post en dos partes!!..encantada nuevamente ya me suscribo

Adeu!!!!:)

Vamos a ver, primero fue Facebook, luego le siguio Twitter, y ahora, llego algo llamado Google Buzz que de seguro, si posees una cuenta Gmail ya te habrás dado cuenta de este nuevo servicio de Google... Es algo parecido al boton de Retweet de Twitter, pero lo haremos hoy con Buzz it de Google...

<div class='post-header-line-1'/>

<!--BUZZ-STARTS-->
<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + "&amp;srcTitle=" + data:blog.title' target='_blank'><div style='text-align:right;margin-top:-42px;'><img alt='Buzz It' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH0rFIWqYX6CjXeqDolKkLZnwMQCwWnRb6q3FLgGDOG7aq-tk5RsBRhimQXV3zYWo98ykTuxRdVdxLwmVQadIJc87R-W9-53X7fRYQoOpqXp5rfj9-9MajPlaCYmXWyFdo6PBrqYEqfN8/s320/buzzit.png'/></div></a>
<!--BUZZ-STOPS-http://frikibloggeo.com.ar-->

Eso es todo... disfruta el Buzzeo

Tu puedes utilizar cualquier fuente en tu blog pero ninguna seria de utlidad si el lector no tiene la fuente que utlizas instalada en el disco duro de su equipo, si decides utilizar una fuente cualquiera que tengas instalada en tu equipo, y vas a la pagina principal de tu blog, podras ver que te funciona a la perfeccion, pero si entras desde otro ordenador a tu pagina, veras que esa fuente se mostrara las que trae por defecto blogger, las cuales son Time New Roman o Arial

<span style="color: Nombre_de_la_fuente; font-size: 12pt; line-height: 115%;">El rápido tocaba el saxofón detrás del palenque de paja </ span>