Objetos que se deslizan a lo largo del Blog

Alguna ves viste un objeto en una web que se va deslizando hacia bajo mientras bajas la pagina, para que me entiendas, desliza la pagina hacia bajo y veras de lo que estoy hablando, en nuestro Blog podemos tener objetos que se deslizan mientras bajamos nuestra pagina, por ejemplo pueden ser anuncios que deseemos que los lectores lean, publicidades o cualquier otro uso que le podamos dar.

En esta entrada aprenderemos como poner estos objetos que se deslizan a lo largo del Blog.

Poner los objetos deslizantes diferentes  en cada entrada:

Podemos poner estos objetos en cada entrada, pueden ser distintos objetos que se deslizan a lo largo del blog, eso depende de lo que se codifique individualmente en cada entrada. En este caso como ejemplo puse un anuncio Adsense que solo funciona en esta entrada, si ustedes vuelven a la pagina principal de este Blog, no notaran dicho anuncio, ya que solo se codifico para que aparezca en esta entrada.

Para colocar cualquier código HTML o objeto en una entrada individual solo tenemos que añadirlo en el editor de HTML de cada entrada que vamos a crear o donde queremos que aparezca nuestro Objeto.

Código:


<div style="position:fixed; left:0; top:0"> <!-- Dentro de los DIVS colocamos cualquier código HTML que quereros que se nos muestre, pueden ser imágenes enlaces,etc --> </div>

El truco para que funcione y tengamos Objetos deslizantes, es en el código CSS position:fixed, la cual indica que la posición que tendrá nuestro <div> y todo su contenido se comportara como un objeto que se moverá en base a la web.

las propiedades left:0 y top:0, son para indicar en que parte de la pagina se ubique el objeto. en este caso al especificar esos valores el objeto se ubicara en la parte superior izquierda. también podemos añadir right:0 y bottom:0, los cuales tambien sirven para ubicar la posición, right al lado derecho y bottom en la parte inferior.

¿Donde poner este código ?

Bueno coma ya dije basta con solo entrar al editor de HTML de cada entrada: y pegarlo en cualquier lugar.

es recomendable pegarlo al ultimo, ya que así podrás tener una mejor manipulación del código  en mi caso yo puse el código de un anuncio Adsense y el resultado es el que pueden ver en la pagina.

¿Que códigos Poner?

Podemos poner cualquier código que deseemos, ya sean enlaces, imágenes hasta vídeos, mientras estén dentro de las etiquetas <div> y </div>, aplicando el respectivo estilo CSS, siempre tendrán el mismo efecto. claro debemos codificar con HTML o algún otro lenguaje que sea interpretado en la web.

Ejemplos:

<div style="position:fixed; left:0;bottom:0"class="fb-like-box" data-href="http://www.facebook.com/pages/NeytorTec/330481940383465?ref=hl" data-width="369" data-show-faces="true" data-stream="false" data-header="true"> </div>    ----> Código Like Box de Facebook que se desliza junto con la Pagina

<div style="position:fixed; left:0; top:0"> <a class="twitter-timeline" href="https://twitter.com/NeytorTec" data-widget-id="315327047134216192">Tweets por @NeytorTec</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div>  ----> Código Caja de Tweets  que se desliza junto con la Pagina

<div style="position:fixed; top:0;left:0"> <iframe width="640" height="360" src="http://www.youtube.com/embed/qwjfkM6tbE4?feature=player_detailpage" frameborder="0" allowfullscreen></iframe> </div>  ----> Código Video que se desliza junto con la Pagina

Poner los objetos deslizantes en todo el Blog:

Ahora para poner un objeto que se desliza, en todo el Blog  y que sea notado en cada pagina del mismo,  Aplicamos el mismo procedimiento solo que en este caso, no pondremos el código en cada entrada, sino que añadiremos un gadget de HTML/JavaScript y ahí pegaremos el código que queremos que se nos muestre.

Al poner el gadget de HTML/JavaScript el efecto deslizante del objeto se vera en todas la paginas ya que este gadget afecta a todo el Blog.

Ejemplo:

<div style="position:fixed;bottom:0;right:0"> <img width="200"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0JYoHe0KeBorODVrfVH6pXKxudS7tcCX3dpx_DiTEqlWSnxhXyF-JgrPn6sAPSggkperoolUodHmVa6opJcT8d7mHbG3UlZHD0SGWW0YSjgWJ6caWvBql0WMs0fJykzytgTnxCYj2Idg/s281/homero+deja+un+comentario.jpg" /> </div>  ---> Código de Imagen que sera visible en todas las paginas del Blog.


Es importante recalcar que este tipo de objetos que bajan a lo largo de la pagina, pueden ser molestos y a los lectores no les puede gustar, así que si vas a aplicarlo tienes que ver la mejor forma de hacer que estos sea óptimos y no afectan la actividad de tu Blog. De antemano pido disculpas si el anuncio es una molestia, solo lo puse como ejemplo, espero comprendan!

Cualquier duda o aporte hacerlo por Comentarios!. Gracias por su Tiempo!.