Adiccion Blogger

Botón Subir y Bajar en Blogger con Efecto jQuery

2010-03-07T22:46:00.001-08:00

Ya antes había publicado una entrada para agregar un botón que permitía subir dentro del blog, ahora, y por curiosidad de "ÐŖǻĜǾŊ ÃζЏĿ", les muestro otra forma que además de darnos el botón de subir, se adiciona el botón para bajar, todo esto con un efecto deslizante en jQuery.

Los pasos a seguir son muy sencillos, básicamente se trata de lo siguiente:

Libreria jQuery (para hace el efecto).
Elemeto en el Blog (Donde lo vamos a poner dentro del blog).
Css. (para que se vea chulo de bonito!).

Si quieres ver el demo, da clic aquí.

Habiendo dicho esto, comencemos con la implementación.

Paso 1. Elemento jQuery.

¡Importante! Si ya tienes la librería, omite este paso.

En nuestra plantilla (Diseño>>Edición HTML) buscamos </head> y pegamos el siguiente código:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>

Paso. 2 Pegamos el elemento en el blog

En la plantilla buscamos </body> y justo antes pegamos lo siguiente:


<div class='nav_up' id='nav_up' style='display:none;'/>
<div class='nav_down' id='nav_down' style='display:none;'/>    


<script src='http://isaiasgah.web.officelive.com/Documents/scroll-startstop.events.jquery.js' type='text/javascript'/>

<script type='text/javascript'>

 $(function() {
  var $elem = $(&#39;#content&#39;);

  $(&#39;#nav_up&#39;).fadeIn(&#39;slow&#39;);
  $(&#39;#nav_down&#39;).fadeIn(&#39;slow&#39;);

  $(window).bind(&#39;scrollstart&#39;, function(){
   $(&#39;#nav_up,#nav_down&#39;).stop().animate({&#39;opacity&#39;:&#39;0.2&#39;});
  });
  $(window).bind(&#39;scrollstop&#39;, function(){
   $(&#39;#nav_up,#nav_down&#39;).stop().animate({&#39;opacity&#39;:&#39;1&#39;});
  });

  $(&#39;#nav_down&#39;).click(
   function (e) {
    $(&#39;html, body&#39;).animate({scrollTop: $elem.height()}, 800);
   }
  );
  $(&#39;#nav_up&#39;).click(
   function (e) {
    $(&#39;html, body&#39;).animate({scrollTop: &#39;0px&#39;}, 800);
   }
  );
        });

    </script>

Ahora buscamos en la plantilla <body> y justo después pegamos lo siguiente:


<div class="content" id="content">

Ahora volvemos a </body> y justo antes pegamos:


</div>

Paso 3. Propiedades Css.

En la plantilla buscamos ]]></b:skin> y justo antes pegamos lo siguiente:


.nav_up{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background:transparent url(http://i49.tinypic.com/ivwpit.jpg) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:7px;
opacity:0.7;
left:30px;
white-space:nowrap;
cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.nav_down{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background:transparent url(http://i47.tinypic.com/vwpe88.jpg) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:7px;
opacity:0.7;
left:70px;
white-space:nowrap;
cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

En esta parte es donde puedes cambiar colores, formas y sabores de los botones ;)

Y con esto hemos concluido el truco de hoy, para ver el demo, haz clic aquí.

Si tienes alguna duda puedes dejar un comentario o mandarme un correo, tratare de responder en breve :)

Fuente: Scrolling to the Top and Bottom with jQuery by Codrops

Agregar Entradas Recomendadas En Blogger Con Efecto jQuery

2010-02-12T21:27:00.000-08:00

Parte importante de un blog desde mi perspectiva, son las sugerencias del cheff, es decir, aquellas entradas que consideramos destacadas y que podrían interesar a gran parte del público que nos visita, estas recomendaciones deben ser visibles y atractivas para motivar a que nuestros lectores den el ansioso "clic".

Hoy presentare una manera muy sencilla de agregar a nuestro blog las entradas recomendadas con un bonito efecto de jQuery, que consiste en que cuando se pasa el mouse sobre la imagen, esta se desliza y muestra una descripción breve de la entrada.

Habiendo dicho todo este choro, procedamos a cocinar nuestro platillo de hoy :) y lo realizaremos en 4 sencillos pasos:

Intalación del script jQuery (no te espantes, solo es copiar y pegar un código que sirve para dar el efecto deslizante).
Agregar maquillaje CSS... de pond's (para que se vea chulo!).
Agregar las entradas en donde queremos.
Configuramos los enlaces y las imágenes de las entradas.

Manos a la obra...

Mandamiento Blogger: Antes de iniciar guardaré una copia de mi plantilla, Todos: Amén.

Paso 1. Instalación del script jQuery.

Decíamos que para dar el efecto que queremos, es necesario instalar el script, que en pocas palabras, es el que hace la magia.

Para instalarlo sólo tienes que copiar y pegar el siguiente código justo antes de < /head > :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>

Si ya lo tienes instalado no es necesario que hagas este paso.

Paso 2. Efecto y Maquillje CSS

En este parte vamos a agregar los colores, formas y sabores de nuestros platillos recomendados y para ello, vamos a copiar y pegar el siguiente códido inmediatamente después del script que acabamos de instalar, es decir, el de jQuery.



<script type='text/javascript'>
 $(function() {
  $(&#39;ul.hover_block li&#39;).hover(function(){
   $(this).find(&#39;img&#39;).animate({top:&#39;182px&#39;},{queue:false,duration:500});
  }, function(){
   $(this).find(&#39;img&#39;).animate({top:&#39;0px&#39;},{queue:false,duration:500});
  });
  $(&#39;ul.hover_block2 li&#39;).hover(function(){
   $(this).find(&#39;img&#39;).animate({left:&#39;300px&#39;},{queue:false,duration:500});
  }, function(){
   $(this).find(&#39;img&#39;).animate({left:&#39;0px&#39;},{queue:false,duration:500});
  });
 });
 </script>

<style media='screen'>
body { background: #fff; }

ul.hover_block { display: block; overflow: hidden; height: 1%; padding-bottom: 15px; }
ul.hover_block li, ul.hover_block2 li {
list-style:none;
float:left;
background: #dedfde;
padding: 10px;
width:190px; position: relative;
margin-left: 30px; }

ul.hover_block li a, ul.hover_block2 li a {
display: block;
position: relative;
overflow: hidden;
height: 100px;
width: 158px;
padding: 16px;
color: #346c8c;
font: 1.6em/1.3 Helvetica, Arial, sans-serif;
font-size:16px;
font-style:normal;
font-weight:bold;
text-align:center;
}

ul.hover_block li a, ul.hover_block2 li a { text-decoration: none; }

ul.hover_block li img, ul.hover_block2 li img {
position: absolute;
top: 0;
left: 0;
border: 0;
}
</style>

Y luego buscamos ]]></b:skin> y justo antes pegamos lo siguiente:


#recom {
background-image:url(http://sites.google.com/site/bloggertemplateplace/delight/featured_bg.gif);
border:1px solid #dedede;
margin-top:15px;
margin-bottom:15px;
position:relative;
padding-top:10px;
padding-bottom:0px;
overflow:hidden;
background-color:#fcfcfc
}

.featuredbg {
background-image:url(http://i45.tinypic.com/2iuewjr.jpg);
background-repeat:no-repeat;
background-position:top left;
width:21px;
height:83px;
position:absolute;top:0px;left:0px
}

Paso 3. Agregar las entradas en la plantilla.

Ahora vamos a colocar las entradas en algún lugar de nuestra plantilla, mi sugerencia es usar el espacio que hay entre las entradas del blog y la barra de menú o cabecera. en esta parte no puedo ser muy especifico en decir que código de la plantilla buscar puesto que cada una es distinta, sin embargo, no creo que les resulte complicado encontrar el espacio si usamos la técnica del ensayo-error ;)

el código que debemos pegar en donde queremos las entradas es:


<!--featured-->
<b:if cond='data:blog.pageType != "item"'>
<div id='recom'>
<div class='featuredbg'/>
<ul class='hover_block'>
<li><a href='http://adiccionblogger.blogspot.com/2009/09/plantillas-o-templates-para-blogger-5.html' ><img alt='Plantillas Blogger' src='http://aviary.com/viewfull?fguid=d11f258e-6875-102d-92fe-0030488e168c'/> Los mejores lugares para descargar plantillas para Blogger</a></li>
<li><a href='http://adiccionblogger.blogspot.com/2009/12/cosas-que-hacer-despues-de-instalar.html'><img alt='Instala Debian' src='http://i49.tinypic.com/2elvxhg.jpg'/> Cosas que hacer despues de Instalar Debian Lenny 5.0</a></li>
<li><a href='http://adiccionblogger.blogspot.com/2009/06/descarga-series-peliculas-y-anime-con.html'><img alt='Series y Películas en HD' src='http://i46.tinypic.com/n5rec0.jpg'/> Descarga series y películas con calidad en HD completamente ¡¡Gratis!!</a></li>
<li><a href='http://adiccionblogger.blogspot.com/2010/01/para-recibir-una-invitacion-googlewave.html'><img alt='Invitaciones Google wave' src='http://aviary.com/viewfull?fguid=fe545fc6-6959-102d-92fe-0030488e168c'/> ¿Quieres probar esta nueva herramienta de google? Solícita aquí tu invitación.</a></li>
</ul>
</div>
</b:if>
<!--/featured-->

Ahora aplicamos vista previa (oramos para que no salga error ¬¬) y ya deben aparecer las entradas igual que en la imagen (al menos cerquita, si esto no ocurre, regresamos y pegamos en otro lado hasta ubicarlo en donde queremos):

Paso 4. Configurar los enlaces y las imágenes a mostrar.

Cuando agregues esté código, notaras que las imágenes y enlaces son entradas de tu servidor, si quieres puedes dejarlas, así me promocionas :P pero si quieres poner tus enlaces entonces deberás cambiar el código en función de lo siguiente:

Lo que esta en rojo es la URL del enlace, aquí debes poner el tuyo.
Lo que esta en verde es un comentarios que saldrá cuando pongan el cursor sobre la imagen.
Lo que esta en azul es la URL de la imagen, la cambias por la tuya.
Y lo que esta en negrita es la descripción, es decir, lo que leerán cuando se deslice la imagen al pasar el mouse, trata de que sea muy breve, directa y atractiva.

¡Listo! Ya tienes las sugerencias del cheff en tu blog, espero que te sirva, si necesitas ayuda adicional, contáctame a través de este enlace o deja un comentario y en breve me pondré en contacto contigo.

Por último, este truco esta configurado de tal manera que sólo aparece en la pagina principal y desaparece al entrar a leer un post, de esta forma se aprovecha mejor el espacio del blog.

Entrada basada en la idea de este blog que presenta el efecto hover con jQuery: INCG

Plantillas o templates para blogger, 5 sitios muy recomendables.

2009-09-04T21:39:00.000-07:00

Una de las cosas elementales que como bloguero debemos tener, es la plantilla, tema o template de nuestro blog, poéticamente hablado, es algo así como la piel de nuestra esencia. Hoy día hay infinidad de sabores, formas y colores y de verdad que en ocasiones es difícil decidirse por alguna, en mi caso he pasado por varias pieles jejeje quizás 4 o 5 y es que cuando ya tengo una adaptada y modificada pues.... "alguien" hace una mas atractiva y digo.... ¿la cambio? lo primero que me hace dudar es la cantidad de adecuaciones que ya tiene la actual, pienso el el widget de "los últimos comentarios", el truco de "leer mas", el siempre fiel "botón para subir" en fin, ya después de los momentos melancólicos finalmente me decido a hacerlo :) además, me sirve para ejercitar la aplicación de los truquillos jeje y siento que con cada cambio me vuelvo un poco más hábil en el lenguaje de las plantillas, aún me falta, si me comparo con los masters de la bloggerlaxia pero se que vamos por buen camino, en fin, retomando la idea fundamental de esta entrada, quiero hacer unas cuantas recomendaciones para aquellos que buscan una nueva piel, los sitios que voy a recomendar, son los que a mi parecer presentan propuestas muy buenas y muchas de ellas muy poco vistas en el resto de los blogs (considerando que no queremos que sea igualito al del vecino) así que... sin mas preámbulo, estas son las recomendaciones del cheff:

Nota: el orden en que presento esta exquisita selección, no refiere a importancia, para mi todos son muy buenos.

Cómo 1ra opción tenemos a btemplates. quizás el sitio mas completo en cuanto a templates se refiere, de aquí obtuve mis primeras pieles.

Como 2da alternativa, está deluxetempletes, que como su nombre anticipa, son plantillas de lujo :)

En 3ra opción tenemos el sitio de dantearaujo, otro grande los templateros.

Cómo 4ta recomendación esta wpbloggerthemes, uno de los que más me ha sorprendido y cuyo fin principal, es basarse en platillas de Wordpress.

Y como 5ta sugerencia les presento Bloggerstyles un sitio con lo mejor de lo mejor.

Espero que esta selección no les cause complicaciones por la gran variedad de plantillas que van a tener, les aseguro que no podrán escoger una de tantas templates geniales. Cómo última recomendación, quiero pasarles el tip que me llevo a descubrir estos sitios maravillosos, se trata de ir simplmente a los creditos del blog que nos gustó, generalmente ahi viene la firma del autor y si exploramos, seguramente encontraremos más templates de ese mismo estilo y calidad.

Espero que les sirva esta información

5 Cosas que debes saber para crear un Blog

2009-09-03T22:06:00.000-07:00

Si estas pensando en la posibilidad de crear un Blog o simplemente quieres saber un poco mas sobre el tema, esto te interesa.

1. ¿Qué es un Blog?

Un Blog no es mas que una herramienta, mediante la cual podemos expresarnos en Internet de la manera que mejor nos parezca. en Wikipedia lo definen como una bitácora (traducción al español) donde se recopila información de manera cronológica de uno o varios autores.

En mi experiencia les puedo comentar que a unos cuantos meses de haber creado el mio, se ha convertido en una deliciosa adicción , al grado de ver el amanecer al final de la noche, claro que el ritmo de vida que llevo actualmente entre trabajo y escuela me permite el adaptarme perfectamente a estos horarios.

2. ¿Para que sirve un Blog?

Básicamente se crea con la finalidad de compartir cosas, ¿cuales? Las que TU quieras!!! puedes subir fotos, vídeo, poemas, criticas, opiniones, pensamientos, todo lo que te puedas imaginar!! incluso se puede hacer hasta negocio con el, que te parece? y puedes decidir si lo compartes con el mundo, amigos o simplemente para ti, tu determinas la privacidad.

3. ¿Cómo crearlo?

Si ya estas convencido de crear tu espacio en la Blgosfera, debes saber que tienes muchas opciones para crearlo, yo mencionare 4 que he visto operar:

HazBlog.com es un sitio en el que puedes crear tu sitio muy fácilmente, sólo necesitas tener una cuenta de correo y solo te lleva unos minutos.

Pros.

El registro es muy rápido.
La pagina es muy intuitiva, lo cual es fantástico para principiantes, pues te lleva paso a paso.
Puedes definir colores y formas de tu pagina a nivel básico.

Contras.

Mucha propaganda en tu pagina.
Te limita en cuanto al estílo especifico que puedes darle a tu sitio.

Calificación: 2 estrellas

Para ver pagina muestra clic aquí

Obolog.com En este sitio también puedes crear tu cuenta muy rápido, es muy intuitivo, lo que facilita la integración con el mundo de los Blogs.

Pros.

El registro es muy rápido.
Cuenta con una página de inicio donde automáticamente se publica lo que escribes.
Su estilo esta orientado hacía una red social como : Facebook, Hi5, Netlog, etc.
Recibí un comentario apenas publiqué mi primera entrada.
Este Blog lo puedes vincular a tu cuenta de Facebook y te sirve para que en el muro se publique lo que escribes.
Puedes definir colores y formas de tu pagina a nivel básico.

Contras.

Te limita en cuanto al estilo especifico que puedes darle a tu sitio.

Calificación: 3 estrellas

Para ver pagina muestra clic aquí

Wordpress Uno de los sitios mas consentidos por los usuarios, es una herramienta poderosa para quienes se quieren adentrar en este fabuloso mundo del Blog.

Pros.

El registro es muy rápido.
Cuenta con una pagina de inicio donde puedes ver los Blog mas recientes, mas comentados, así como recomendaciones.
Tiene muchas aplicaciones para integrar a tu Blog y es muy sencillo.
Los temas que maneja Wordpress para darle color a tu pagina son variados y de muy buen gusto, seguro encontraras alguno para ti.
Estadísticas de tu Blog.
Configuración muy fácil.

Contras.

Necesitas pagar para editar mas detalles de tu pagina, aun así, lo que te ofrece es mas que excelente.

Actualización (11/01/10): Por sugerencia de EsWoOd hago mención de otra característica de wordpress, que refiere a la opción de instalarlo en un servidor, con esta modalidad se obtienen ventajas como el descargar archivos en cualquier servidor y lo más interesante es que ya se abre una gran posibilidad para editar las plantillas que dicho sea de paso, en la red hay muchas muy atractivas y gratis. Esta alternativa la sugiero después de haber probado la versión gratuita.

Calificación: 4 estrellas

Para ver pagina muestra clic aquí

Blogger o Blogspot Otro de los consentidos, de hecho es el que estoy usando actualmente.

Pros.

Tiene infinidad de aplicaciones para integrar a tu Blog .
Puedes configurar tu Blog específicamente de la manera que quieres.
Blogger te da "temas"(estilos) básicos por defecto, pero también puedes conseguir muchos más, en varios sitios de internet y sin pagar nada adicional.

Contras.

Necesitas tener una cuenta con Google (es inconveniente en caso de que no tengas, puesto que habría que crearla.)
Si deseas darle un estilo muy especifico requieres conocimiento en programación nivel basico a intermedio.

Calificación: 4 estrellas

4. ¿Que hacer después de crearlo?

Una vez que ya tienes tu Blog, es momento de comenzar a alimentarlo, una de las sugerencias que he visto en muchos sitios, es que uno debe escribir para si mismo, sobre cosas que a uno le gustan, otro punto importante es cuidar la ortografía, actualmente hay muchas herramientas que nos pueden ayudar con dicha tarea por último, dale varias leidas a tu articulo antes de publicarlo, a fin de ir corrigendo detalles.

cuando creas el Blog, su conflagración es muy básica, cada uno tiene que ir agregando lo que considere adecuado, por ejemplo: podemos agregar un calendario, una opción para buscar artículos dentro de nuestro Blog, sección de etiquetas, lista de comentarios recientes, lista de entradas recientes y mas visitadas, el numero de personas que visitan tu pagina, enlaces a otros sitios, uff!! creo que no acabaría de mencionar todo lo que se puede agregar, basta con echar una ojo a San Google para ver la cantidad de recursos que podemos agregar.

5. Recomendaciones generales.

Como recomendación particular, puedo mencionar que si lo que quieres es probar algo muy sencillo, la opción 1 y 2 son ideales, como mencione, es rápido el ingreso y te lleva de la mano y si tienes cuenta en Facebook, definitivamente te conviene la opción 2.

Ahora bien, si lo que quieres es adentrarte de manera mas especializada, tienes la opción 3 y 4, cualquiera que elijas sera buena, yo me decidí por Blogger porque me permite editar la plantilla a placer, claro que necesito saber de programación html, pero bueno, con un poco de tiempo y San google, he podido aprenderlo, si crees que esto se te pudiera complicar, entonces Wordpress es tu mejor opción.

Espero te sirva esta información, en próximas entradas mencionare las cosas que fui agregando a mi pagina, si alguna les interesa en particular, no dudes en preguntar.

Truco Leer más o readmore en blogger

2009-09-03T10:50:00.000-07:00

Una de las aplicaciones que considero mas importantes en Blogger, sin duda alguna es la de "Leer más" o "Readmore" ya que nos da muchas ventajas como son:

Mostrar las primeras lineas de cada uno de nuestros post a manera de resumen
Ayuda a tener un Blog bastante ordenado y presentable
Nuestros lectores (¬¬) pueden ver más de un post en la pantalla sin tener que bajar con la barra de desplazamiento.

Este truco lo vi en ChicaBlogger, sólo que ahora lo presento con algunas modificaciones, ya que le inclui un marco a las imágenes y justificación al texto resumido, para que nos quede todavía más estético.

Instrucciones.

(recuerda que uno de los mandamientos de todo buen blogger es que guardaras una copia de seguridad de tu plantilla, antes de cualquier experimento).

1.- Nos vamos a Diseño >> Edicion de HTML y en nuestra plantilla buscamos:
(Copia y pega)

</head>

y antes de esta etiqueta pegamos el siguiente código:
(Copia y pega)


<script type='text/javascript'>
summary_noimg = 430;
summary_img = 360;
img_thumb_height = 125;
img_thumb_width = 125;
</script>
<script src='http://sites.google.com/site/isaiasgah/script/summary-post-v20-test.txt?attredirects=0' type='text/javascript'/>

2.- Expandimos Plantilla de artilugios, esto lo conseguimos seleccionando la casilla que se encuentra en la parte superior de la plantilla:

Ahora buscamos:
(Copia y pega)

<data:post.body/>

Lo borramos y reemplazaremos por el siguiente código:
(Copia y pega)


<p><b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>--&gt; Leer más...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></p>

Damos clic en vista previa y verificamos que funcione perfectamente.

Con estos sencillos pasos ya tenemos configurada esta aplicación en automático en todos nuestros post, ahora pasemos a la configuración del texto y las imágenes mostradas, esto desde luego es de manera opcional.

summary_noimg = determina el número de caracteres a mostrar en caso de que el post no tenga imágenes .
summary_img = determina el número de caracteres a mostrar en caso de que el post tenga imágenes.
img_thumb_height = alto de la imagen.
img_thumb_width = ancho de la imagen.

Ahora, si queremos que las imágenes tengan un marco, buscamos en nuestra plantilla .post img { (en caso de que no exista hay que agregarlo) y le agregamos los siguientes valores:

.post img {
padding:4px;
background-color: #f5f5f5;
border-bottom: 1px solid #999999;
border-right: 1px solid #999999;
}

Y para que el texto esté justificado, vamos a .post-body { (mismo caso que el anterior, si no existe, lo agregamos) y ponemos los siguientes valores:

.post-body {
margin:0 0 .75em;
text-align: justify;
line-height:1.6em;
}

Y listo, hemos terminado, puedes dar vista previa para ver los cambios y si es de tu agrado entonces guardamos la plantilla, la siguiente imagen es una muestra de como debe quedar nuestra nueva aplicación:

Espero les sea muy util.